torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor NobilityView: Remove debug logs and improve conditional rendering for advance section. Add cooldown message styling for better user feedback when advancement is not possible.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-29 09:23:24 +01:00
parent 3bdb77888f
commit 5351e3ea57
1 changed files with 11 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/views/falukant/NobilityView.vue
View File

@@ -23,30 +23,21 @@
{{ $t('falukant.nobility.nextTitle') }}: {{ $t('falukant.nobility.nextTitle') }}:
<strong>{{ $t(`falukant.titles.${gender}.${next.labelTr}`) }}</strong> <strong>{{ $t(`falukant.titles.${gender}.${next.labelTr}`) }}</strong>
</p> </p>
<p v-if="nextAdvanceAt && !canAdvance">
{{ $t('falukant.nobility.cooldown', { date: formatDate(nextAdvanceAt) }) }}
</p>
<ul class="prerequisites" v-if="next.requirements && next.requirements.length > 0"> <ul class="prerequisites" v-if="next.requirements && next.requirements.length > 0">
<li v-for="req in next.requirements" :key="req.titleId"> <li v-for="req in next.requirements" :key="req.titleId">
{{ $t(`falukant.nobility.requirement.${req.requirementType}`, { amount: formatCost(req.requirementValue) }) }} {{ $t(`falukant.nobility.requirement.${req.requirementType}`, { amount: formatCost(req.requirementValue) }) }}
</li> </li>
</ul> </ul>
<button @click="applyAdvance" class="button" :disabled="!canAdvance || isAdvancing"> <button v-if="canAdvance" @click="applyAdvance" class="button" :disabled="isAdvancing">
<span v-if="!isAdvancing">{{ $t('falukant.nobility.advance.confirm') }}</span> <span v-if="!isAdvancing">{{ $t('falukant.nobility.advance.confirm') }}</span>
<span v-else>{{ $t('falukant.nobility.advance.processing') }}</span> <span v-else>{{ $t('falukant.nobility.advance.processing') }}</span>
</button> </button>
<div style="margin-top: 10px; font-size: 12px; color: #666;"> <p v-else-if="nextAdvanceAt" class="cooldown-message">
Debug: canAdvance={{ canAdvance }}, isAdvancing={{ isAdvancing }}, next={{ next ? 'exists' : 'null' }}, nextAdvanceAt={{ nextAdvanceAt }} {{ $t('falukant.nobility.cooldown', { date: formatDate(nextAdvanceAt) }) }}
</div> </p>
<div v-if="!canAdvance" style="color: red; margin-top: 10px;">
Debug: canAdvance = false (next: {{ next ? 'exists' : 'null' }}, nextAdvanceAt: {{ nextAdvanceAt }})
</div>
</div> </div>
<div v-else class="advance-section"> <div v-else class="advance-section">
<p style="color: red;">Fehler: Keine nächste Titel-Information verfügbar. Bitte Seite neu laden.</p> <p style="color: red;">Fehler: Keine nächste Titel-Information verfügbar. Bitte Seite neu laden.</p>
<div style="margin-top: 10px; font-size: 12px; color: #666;">
Debug: next={{ next }}, next.labelTr={{ next ? next.labelTr : 'N/A' }}
</div>
</div> </div>
</div> </div>
@@ -117,41 +108,19 @@
}, },
async loadNobility() { async loadNobility() {
try { try {
console.log('[NobilityView] Loading nobility data...');
const { data } = await apiClient.get('/api/falukant/nobility'); const { data } = await apiClient.get('/api/falukant/nobility');
console.log('[NobilityView] Received data:', data);
this.current = data.current || { labelTr: '', requirements: [], charactersWithNobleTitle: [] }; this.current = data.current || { labelTr: '', requirements: [], charactersWithNobleTitle: [] };
this.next = data.next || { labelTr: '', requirements: [] }; this.next = data.next || { labelTr: '', requirements: [] };
this.nextAdvanceAt = data.nextAdvanceAt || null; this.nextAdvanceAt = data.nextAdvanceAt || null;
console.log('[NobilityView] Updated state:', {
current: this.current,
next: this.next,
nextAdvanceAt: this.nextAdvanceAt,
canAdvance: this.canAdvance
});
} catch (err) { } catch (err) {
console.error('[NobilityView] Error loading nobility:', err); console.error('Error loading nobility:', err);
} }
}, },
async applyAdvance() { async applyAdvance() {
console.log('[NobilityView] applyAdvance called', { if (!this.canAdvance || this.isAdvancing) return;
canAdvance: this.canAdvance,
isAdvancing: this.isAdvancing,
next: this.next,
nextAdvanceAt: this.nextAdvanceAt
});
if (!this.canAdvance || this.isAdvancing) {
console.log('[NobilityView] applyAdvance blocked:', {
canAdvance: this.canAdvance,
isAdvancing: this.isAdvancing
});
return;
}
this.isAdvancing = true; this.isAdvancing = true;
try { try {
console.log('[NobilityView] Sending POST request to /api/falukant/nobility');
await apiClient.post('/api/falukant/nobility'); await apiClient.post('/api/falukant/nobility');
console.log('[NobilityView] POST request successful, reloading nobility data');
await this.loadNobility(); await this.loadNobility();
} catch (err) { } catch (err) {
console.error('Error advancing nobility:', err); console.error('Error advancing nobility:', err);
@@ -188,4 +157,9 @@
list-style: disc inside; list-style: disc inside;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.cooldown-message {
color: #666;
font-style: italic;
margin-top: 1rem;
}
</style> </style>