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

Falukant production, family and administration enhancements

Browse Source
This commit is contained in:
Torsten Schulz
2025-04-14 15:17:35 +02:00
parent 90b4f51dcb
commit b15d93a798
77 changed files with 2429 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
frontend/src/views/falukant/FamilyView.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<div class="contenthidden">
<StatusBar />
<div class="contentscroll">
<!-- Titel -->
<h2>{{ $t('falukant.family.title') }}</h2>
<!-- Ehepartner -->
<div class="spouse-section">
<h3>{{ $t('falukant.family.spouse.title') }}</h3>
<div v-if="relationships.length > 0">
<table>
<tr>
<td>{{ $t('falukant.family.relationships.name') }}</td>
<td>
{{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
relationships[0].character2.nobleTitle) }}
{{ relationships[0].character2.firstName }}
</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.age') }}</td>
<td>{{ relationships[0].character2.age }}</td>
</tr>
<tr>
<td>{{ $t('falukant.family.spouse.status') }}</td>
<td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
</tr>
</table>
<div v-if="relationships[0].relationshipType === 'wooing'">
<h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3>
<table class="spouse-table">
<thead>
<tr>
<th></th>
<th>{{ $t('falukant.family.spouse.wooing.gift') }}</th>
<th>{{ $t('falukant.family.spouse.wooing.value') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="gift in gifts" :key="gift.id">
<td><input type="radio" name="gift" :value="gift.id" v-model="selectedGiftId"></td>
<td>{{ $t(`falukant.gifts.${gift.name}`) }}</td>
<td>{{ formatCost(gift.cost) }}</td>
</tr>
</tbody>
</table>
<div>
<button @click="sendGift" class="button">{{ $t('falukant.family.spouse.wooing.sendGift') }}</button>
</div>
</div>
</div>
<div v-else-if="proposals && proposals.length > 0">
<table class="spouse-table">
<thead>
<tr>
<th>{{ $t('falukant.family.spouse.select') }}</th>
<th>{{ $t('falukant.family.spouse.name') }}</th>
<th>{{ $t('falukant.family.spouse.age') }}</th>
<th>{{ $t('falukant.family.spouse.marriagecost') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="proposal in proposals" :key="proposal.id">
<td><input type="radio" name="spouse" :value="proposal.proposedCharacterId"
v-model="selectedProposalId"></td>
<td>{{
$t(`falukant.titles.${proposal.proposedCharacterGender}.${proposal.proposedCharacterNobleTitle}`)
}} {{ proposal.proposedCharacterName }}</td>
<td>{{ proposal.proposedCharacterAge }}</td>
<td>{{ formatCost(proposal.cost) }}</td>
</tr>
</tbody>
</table>
<div>{{ $t('falukant.family.spouse.notice') }}</div>
<div v-if="selectedProposalId">
<button @click="acceptProposal">{{ $t('falukant.family.spouse.accept') }}</button>
</div>
</div>
</div>
<!-- Kinder -->
<div class="children-section">
<h3>{{ $t('falukant.family.children.title') }}</h3>
<div v-if="children && children.length > 0">
<table>
<thead>
<tr>
<th>{{ $t('falukant.family.children.name') }}</th>
<th>{{ $t('falukant.family.children.age') }}</th>
<th>{{ $t('falukant.family.children.actions') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(child, index) in children" :key="index">
<td>
{{ $t('falukant.titles.' + child.gender + '.' + child.title) }}
{{ child.name }}
</td>
<td>{{ child.age }}</td>
<td>
<button @click="showChildDetails(child)">
{{ $t('falukant.family.children.detailButton') }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else>
<p>{{ $t('falukant.family.children.none') }}</p>
</div>
</div>
<!-- Liebhaber / Geliebte -->
<div class="lovers-section">
<h3>{{ $t('falukant.family.lovers.title') }}</h3>
<div v-if="lovers && lovers.length > 0">
<ul>
<li v-for="(lover, idx) in lovers" :key="idx">
{{ $t('falukant.titles.' + lover.gender + '.' + lover.title) }} {{ lover.name }}
({{ $t('falukant.family.lovers.affection') }}: {{ lover.affection }})
</li>
</ul>
</div>
<div v-else>
<p>{{ $t('falukant.family.lovers.none') }}</p>
</div>
</div>
</div>
</div>
<!-- Dialog-Beispiele oder ähnliche Komponenten -->
<MessageDialog ref="messageDialog" />
<ErrorDialog ref="errorDialog" />
</template>
<script>
import StatusBar from '@/components/falukant/StatusBar.vue'
import MessageDialog from '@/dialogues/standard/MessageDialog.vue'
import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue'
import apiClient from '@/utils/axios.js'
import { mapState } from 'vuex'
export default {
name: 'FamilyView',
components: {
StatusBar,
MessageDialog,
ErrorDialog
},
data() {
return {
relationships: [],
children: [],
lovers: [],
deathPartners: [],
proposals: [],
selectedProposalId: null,
gifts: [],
selectedGiftId: null
}
},
computed: {
...mapState(['socket', 'daemonSocket'])
},
async mounted() {
await this.loadFamilyData();
await this.loadGifts();
},
methods: {
async loadFamilyData() {
try {
const response = await apiClient.get('/api/falukant/family');
console.log(response.data);
this.relationships = response.data.relationships;
this.children = response.data.children;
this.lovers = response.data.lovers;
this.proposals = response.data.possiblePartners;
this.deathPartners = response.data.deathPartners;
} catch (error) {
console.error('Error loading family data:', error);
}
},
showChildDetails(child) {
console.log('Show details for child:', child);
},
formatCost(value) {
return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
},
async acceptProposal() {
const response = await apiClient.post('/api/falukant/family/acceptmarriageproposal'
, { proposalId: this.selectedProposalId });
this.loadFamilyData();
},
async loadGifts() {
const response = await apiClient.get('/api/falukant/family/gifts');
this.gifts = response.data;
},
async sendGift() {
if (!this.selectedGiftId) {
alert('Please select a gift');
return;
}
const response = await apiClient.post('/api/falukant/family/gift'
, { giftId: this.selectedGiftId });
this.loadFamilyData();
}
}
}
</script>
<style scoped lang="scss">
.spouse-section,
.children-section,
.lovers-section {
border: 1px solid #ccc;
margin: 10px 0;
border-radius: 4px;
padding: 10px;
}
.spouse-section table,
.children-section table {
margin-top: 10px;
border-collapse: collapse;
}
.spouse-section th,
.spouse-section td,
.children-section th,
.children-section td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.spouse-section th {
background-color: #f2f2f2;
}
.children-section th {
background-color: #f9f9f9;
}
.lovers-section {
ul {
list-style: none;
padding-left: 0;
}
li {
padding: 4px 0;
}
}
.spouse-table th,
.spouse-table td {
white-space: nowrap;
}
.spouse-table th:first-child,
.spouse-table td:first-child {
width: 20px;
}
.spouse-table th:nth-child(3),
.spouse-table td:nth-child(3) {
width: 30px;
}
.spouse-table th:nth-child(4),
.spouse-table td:nth-child(4) {
width: 50px;
}
h2 {
padding-top: 20px;
}
</style>