Spiel erweitert

frontend/src/views/falukant/ChurchView.vue

@@ -0,0 +1,143 @@
+<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>