108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<template>
|
|
<dl v-if="falukantData" class="dashboard-widget__falukant">
|
|
<dt>{{ $t('falukant.overview.metadata.name') }}</dt>
|
|
<dd>{{ falukantDisplayName }}</dd>
|
|
<dt>{{ $t('falukant.create.gender') }}</dt>
|
|
<dd class="falukant-gender">{{ falukantGenderLabel }}</dd>
|
|
<dt>{{ $t('falukant.overview.metadata.age') }}</dt>
|
|
<dd class="falukant-age">{{ falukantAgeLabel }}</dd>
|
|
<dt>{{ $t('falukant.overview.metadata.money') }}</dt>
|
|
<dd>{{ formatMoney(falukantData.money) }}</dd>
|
|
<dt>{{ $t('falukant.messages.title') }}</dt>
|
|
<dd>{{ falukantData.unreadNotificationsCount }}</dd>
|
|
<dt>{{ $t('falukant.statusbar.children') }}</dt>
|
|
<dd>{{ falukantData.childrenCount }}</dd>
|
|
</dl>
|
|
<span v-else>—</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FalukantWidget',
|
|
props: {
|
|
data: { type: Object, default: null }
|
|
},
|
|
computed: {
|
|
falukantData() {
|
|
const d = this.data;
|
|
if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
|
|
return null;
|
|
},
|
|
falukantDisplayName() {
|
|
const d = this.falukantData;
|
|
if (!d) return '—';
|
|
const titleKey = d.titleLabelTr;
|
|
const gender = d.gender;
|
|
const nameWithoutTitle = d.nameWithoutTitle ?? d.characterName;
|
|
if (titleKey && gender) {
|
|
const key = `falukant.titles.${gender}.${titleKey}`;
|
|
const translatedTitle = this.$t(key);
|
|
if (translatedTitle !== key) return `${translatedTitle} ${nameWithoutTitle}`.trim();
|
|
}
|
|
return d.characterName || nameWithoutTitle || '—';
|
|
},
|
|
falukantGenderLabel() {
|
|
const g = this.falukantData?.gender;
|
|
if (g == null || g === '') return '—';
|
|
|
|
// Altersabhängige Bezeichnung (sprachlich natürlicher im Widget)
|
|
// Default: unter 18 = Junge/Mädchen, sonst Mann/Frau
|
|
const age = Number(this.falukantData?.age);
|
|
const isChild = !Number.isNaN(age) && age < 18;
|
|
if (g === 'female') return isChild ? 'Mädchen' : 'Frau';
|
|
if (g === 'male') return isChild ? 'Junge' : 'Mann';
|
|
|
|
// Fallback auf vorhandene Übersetzungen
|
|
const key = `falukant.create.${g}`;
|
|
const t = this.$t(key);
|
|
return t === key ? this.$t(`general.gender.${g}`) || g : t;
|
|
},
|
|
falukantAgeLabel() {
|
|
const ageValue = this.falukantData?.age;
|
|
if (ageValue == null) return '—';
|
|
const numAge = Number(ageValue);
|
|
return `${numAge} ${this.$t('falukant.overview.metadata.years')}`;
|
|
}
|
|
},
|
|
methods: {
|
|
formatMoney(value) {
|
|
const n = Number(value);
|
|
if (Number.isNaN(n)) return '—';
|
|
return n.toLocaleString('de-DE');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-widget__falukant {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 4px 16px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.dashboard-widget__falukant dt {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: #555;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.dashboard-widget__falukant dd {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dashboard-widget__falukant dd.falukant-gender {
|
|
color: var(--color-text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dashboard-widget__falukant dd.falukant-age {
|
|
color: #198754;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|