Refactor feedback handling across components: Replace alert and confirm calls with centralized feedback functions for improved user experience. Update various components to utilize showError, showSuccess, and confirmAction for consistent messaging and confirmation dialogs. Enhance UI responsiveness and maintainability by streamlining feedback logic.

This commit is contained in:
Torsten Schulz (local)
2026-03-19 16:18:51 +01:00
parent 2c58ef37c4
commit 1774d7df88
35 changed files with 1097 additions and 1017 deletions

View File

@@ -1,6 +1,5 @@
<template>
<div class="contenthidden">
<div class="contentscroll">
<div class="admin-minigames-view">
<div class="admin-header">
<h1>{{ $t('admin.match3.title') }}</h1>
<p>Verwalte Minigames, Level und Konfigurationen</p>
@@ -14,7 +13,7 @@
<div>
<span class="workflow-hero__eyebrow">Arbeitsfluss</span>
<h2>{{ $t('admin.match3.title') }}</h2>
<p>Erst Level waehlen, dann Spielfeld und Ziele anpassen und erst am Ende speichern.</p>
<p>Erst Level wählen, dann Spielfeld und Ziele anpassen und erst am Ende speichern.</p>
</div>
<div class="workflow-hero__meta">
<span class="workflow-pill">{{ currentModeLabel }}</span>
@@ -26,12 +25,12 @@
<article class="workflow-card surface-card">
<span class="workflow-card__step">1</span>
<h3>Level waehlen</h3>
<p>Bestehendes Level oeffnen oder sofort mit einer neuen Vorlage starten.</p>
<p>Bestehendes Level öffnen oder sofort mit einer neuen Vorlage starten.</p>
</article>
<article class="workflow-card surface-card">
<span class="workflow-card__step">2</span>
<h3>Spielfeld bauen</h3>
<p>Groesse, Zuege, Kacheln und Layout zuerst festziehen, bevor Ziele folgen.</p>
<p>Größe, Züge, Kacheln und Layout zuerst festziehen, bevor Ziele folgen.</p>
</article>
<article class="workflow-card surface-card">
<span class="workflow-card__step">3</span>
@@ -79,7 +78,7 @@
<article class="admin-summary-card surface-card">
<span class="admin-summary-card__label">Spielfeld</span>
<strong>{{ levelForm.boardWidth }} x {{ levelForm.boardHeight }}</strong>
<p>{{ levelForm.moveLimit }} Zuege, {{ levelForm.tileTypes.length }} aktive Tile-Typen.</p>
<p>{{ levelForm.moveLimit }} Züge, {{ levelForm.tileTypes.length }} aktive Tile-Typen.</p>
</article>
<article class="admin-summary-card surface-card">
<span class="admin-summary-card__label">Objectives</span>
@@ -601,14 +600,13 @@
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import SimpleTabs from '../../components/SimpleTabs.vue';
import apiClient from '../../utils/axios.js';
import { showError, showSuccess } from '@/utils/feedback.js';
import { confirmAction, showError, showSuccess } from '@/utils/feedback.js';
export default {
name: 'AdminMinigamesView',
@@ -1016,15 +1014,20 @@ export default {
},
async deleteLevel(levelId) {
if (confirm('Möchtest du dieses Level wirklich löschen?')) {
try {
await apiClient.delete(`/api/admin/minigames/match3/levels/${levelId}`);
this.loadLevels();
showSuccess(this, 'Level wurde geloescht.');
} catch (error) {
console.error('Fehler beim Löschen des Levels:', error);
showError(this, 'Fehler beim Loeschen des Levels');
}
const confirmed = await confirmAction(this, {
title: 'Level löschen',
message: 'Möchtest du dieses Level wirklich löschen?'
});
if (!confirmed) {
return;
}
try {
await apiClient.delete(`/api/admin/minigames/match3/levels/${levelId}`);
this.loadLevels();
showSuccess(this, 'Level wurde gelöscht.');
} catch (error) {
console.error('Fehler beim Löschen des Levels:', error);
showError(this, 'Fehler beim Löschen des Levels');
}
},
@@ -1047,14 +1050,20 @@ export default {
},
removeObjective(index) {
if (confirm('Möchtest du dieses Objective wirklich löschen?')) {
confirmAction(this, {
title: 'Ziel löschen',
message: 'Möchtest du dieses Objective wirklich löschen?'
}).then((confirmed) => {
if (!confirmed) {
return;
}
this.levelForm.objectives.splice(index, 1);
// Aktualisiere die Reihenfolge
this.levelForm.objectives.forEach((objective, idx) => {
objective.order = idx + 1;
});
}
});
},
async loadObjectivesForLevel(levelId) {

View File

@@ -1,6 +1,5 @@
<template>
<div class="contenthidden">
<div class="contentscroll">
<div class="services-status-view">
<div class="admin-header">
<h1>{{ $t('admin.servicesStatus.title') }}</h1>
<p>{{ $t('admin.servicesStatus.description') }}</p>
@@ -95,8 +94,7 @@
</div>
</div>
</div>
</div>
<!-- WebSocket Log Dialog -->
<WebSocketLogDialog ref="webSocketLogDialog" />
</div>
@@ -481,4 +479,3 @@ export default {
color: #c62828;
}
</style>

View File

@@ -1,6 +1,5 @@
<template>
<div class="contenthidden">
<div class="contentscroll">
<div class="admin-taxi-tools-view">
<div class="admin-header">
<h1>{{ $t('admin.taxiTools.title') }}</h1>
<p>{{ $t('admin.taxiTools.description') }}</p>
@@ -367,8 +366,7 @@
</form>
</div>
</div>
</div>
<!-- Message Dialog -->
<MessageDialog ref="messageDialog" />
</div>
@@ -378,6 +376,7 @@
import SimpleTabs from '../../components/SimpleTabs.vue';
import MessageDialog from '../../dialogues/standard/MessageDialog.vue';
import apiClient from '../../utils/axios.js';
import { confirmAction, showError, showSuccess } from '@/utils/feedback.js';
// Matrix: erlaubte Haus-Tür-Richtungen je Tile-Typ und Ecke
// Richtungen: bottom, right, top, left
@@ -1216,10 +1215,10 @@ export default {
// Erfolgsmeldung anzeigen
const message = isUpdate ? 'admin.taxiTools.mapEditor.updateSuccess' : 'admin.taxiTools.mapEditor.createSuccess';
this.$refs.messageDialog.open(`tr:${message}`);
showSuccess(this, `tr:${message}`);
} catch (error) {
console.error('Fehler beim Speichern der Map:', error);
alert('Fehler beim Speichern der Map');
showError(this, 'Fehler beim Speichern der Map');
}
},
@@ -1247,16 +1246,20 @@ export default {
},
async deleteMap(mapId) {
if (confirm('Möchtest du diese Map wirklich löschen?')) {
try {
await apiClient.delete(`/api/taxi-maps/maps/${mapId}`);
this.loadMaps();
// Erfolgsmeldung anzeigen
this.$refs.messageDialog.open('tr:admin.taxiTools.mapEditor.deleteSuccess');
} catch (error) {
console.error('Fehler beim Löschen der Map:', error);
}
const confirmed = await confirmAction(this, {
title: 'Map löschen',
message: 'Möchtest du diese Map wirklich löschen?'
});
if (!confirmed) {
return;
}
try {
await apiClient.delete(`/api/taxi-maps/maps/${mapId}`);
this.loadMaps();
showSuccess(this, 'tr:admin.taxiTools.mapEditor.deleteSuccess');
} catch (error) {
console.error('Fehler beim Löschen der Map:', error);
showError(this, 'Fehler beim Löschen der Map');
}
}
}
@@ -1692,4 +1695,4 @@ export default {
height: 40px;
}
}
</style>
</style>

View File

@@ -1,6 +1,5 @@
<template>
<div class="contenthidden">
<div class="contentscroll">
<div class="create-npc-page">
<div class="create-npc-view">
<h1>{{ $t('admin.falukant.createNPC.title') }}</h1>
@@ -102,7 +101,6 @@
<div v-if="error" class="error-message">
{{ error }}
</div>
</div>
</div>
</div>
</template>

View File

@@ -1,6 +1,5 @@
<template>
<div class="contenthidden">
<div class="contentscroll falukant-map-admin">
<div class="falukant-map-admin">
<div class="admin-header">
<h1>{{ $t('admin.falukant.map.title') }}</h1>
<p>{{ $t('admin.falukant.map.description') }}</p>
@@ -212,13 +211,13 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import apiClient from '@/utils/axios.js';
import SimpleTabs from '@/components/SimpleTabs.vue';
import { confirmAction, showError } from '@/utils/feedback.js';
export default {
name: 'AdminFalukantMapRegionsView',
@@ -469,17 +468,21 @@ export default {
await this.loadConnections();
} catch (error) {
console.error('Error saving region distance:', error);
alert(this.$t('admin.falukant.map.errorSaveConnection'));
showError(this, this.$t('admin.falukant.map.errorSaveConnection'));
}
},
async deleteConnection(id) {
if (!confirm(this.$t('admin.falukant.map.confirmDeleteConnection'))) return;
const confirmed = await confirmAction(this, {
title: this.$t('admin.falukant.map.connectionsTitle'),
message: this.$t('admin.falukant.map.confirmDeleteConnection')
});
if (!confirmed) return;
try {
await apiClient.delete(`/api/admin/falukant/region-distances/${id}`);
await this.loadConnections();
} catch (error) {
console.error('Error deleting region distance:', error);
alert(this.$t('admin.falukant.map.errorDeleteConnection'));
showError(this, this.$t('admin.falukant.map.errorDeleteConnection'));
}
},
regionName(id) {
@@ -635,5 +638,3 @@ export default {
.btn.mini.icon {
}
</style>