143 lines
3.5 KiB
Vue
143 lines
3.5 KiB
Vue
<template>
|
|
<div class="contenthidden">
|
|
<StatusBar />
|
|
<div class="contentscroll">
|
|
<h2>{{ $t('falukant.church.title') }}</h2>
|
|
<SimpleTabs v-model="activeTab" :tabs="tabs" />
|
|
|
|
<div class="tab-content">
|
|
<div v-if="activeTab === 'baptism'">
|
|
<h3>{{ $t('falukant.church.baptism.title') }}</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t('falukant.church.baptism.table.gender') }}</th>
|
|
<th>{{ $t('falukant.church.baptism.table.name') }}</th>
|
|
<th>{{ $t('falukant.church.baptism.table.age') }}</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="person in baptismList" :key="person.id">
|
|
<td>{{ $t(`falukant.church.baptism.gender.${person.gender}`) }}</td>
|
|
<td>
|
|
<input type="text" v-model="person.proposedFirstName" />
|
|
<button @click="newName(person)">
|
|
{{ $t('falukant.church.baptism.table.newName') }}
|
|
</button>
|
|
</td>
|
|
<td>{{ person.age }}</td>
|
|
<td>
|
|
<button @click="baptise(person)">
|
|
{{ $t('falukant.church.baptism.table.baptise') }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 SimpleTabs from '@/components/SimpleTabs.vue'
|
|
|
|
export default {
|
|
name: 'ChurchView',
|
|
components: {
|
|
StatusBar,
|
|
MessageDialog,
|
|
ErrorDialog,
|
|
SimpleTabs,
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: 'baptism',
|
|
tabs: [
|
|
{ value: 'baptism', label: 'falukant.church.baptism.title' },
|
|
],
|
|
baptismList: []
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.loadNotBaptisedChildren()
|
|
},
|
|
methods: {
|
|
async loadNotBaptisedChildren() {
|
|
try {
|
|
const { data } = await apiClient.get('/api/falukant/family/notbaptised')
|
|
this.baptismList = data
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
async newName(person) {
|
|
try {
|
|
const { data } = await apiClient.get(
|
|
`/api/falukant/name/randomfirstname/${person.gender}`
|
|
)
|
|
person.proposedFirstName = data.name ?? data
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
async baptise(person) {
|
|
try {
|
|
await apiClient.post('/api/falukant/church/baptise', {
|
|
characterId: person.id,
|
|
firstName: person.proposedFirstName
|
|
})
|
|
this.loadNotBaptisedChildren();
|
|
this.$root.$refs.messageDialog.open('tr:falukant.church.baptism.success')
|
|
} catch (err) {
|
|
console.error(err)
|
|
this.$root.$refs.errorDialog.open('tr:falukant.church.baptism.error')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
h2 {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.simple-tabs {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.simple-tab {
|
|
padding: 0.5rem 1rem;
|
|
background: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.simple-tab.active {
|
|
background: #F9A22C;
|
|
color: #000;
|
|
}
|
|
|
|
.tab-content {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 140px;
|
|
margin-right: 0.5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
}
|
|
</style> |