b26bc0eb8b
Änderungen: - Entfernen von überflüssigen Protokollausgaben in den Methoden `setupSocketEvents` und `handleEvent` in den Komponenten BankView.vue, BranchView.vue, DirectorView.vue, FamilyView.vue, HealthView.vue, HouseView.vue, NobilityView.vue und OverviewView.vue. - Diese Anpassungen verbessern die Lesbarkeit des Codes und reduzieren die Menge an Konsolenausgaben, was die Wartbarkeit der Anwendung erhöht.
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<h2>{{ $t('falukant.create.title') }}</h2>
|
|
<form @submit.prevent="createFalukant">
|
|
<label>{{ $t('falukant.create.gender') }}</label>
|
|
<select v-model="falukant.gender" required @change="randomFirstName">
|
|
<option value="male">{{ $t('falukant.create.male') }}</option>
|
|
<option value="female">{{ $t('falukant.create.female') }}</option>
|
|
</select>
|
|
<div></div>
|
|
<label>{{ $t('falukant.create.firstname') }}</label>
|
|
<input type="text" v-model="falukant.firstname" required>
|
|
<button @click="randomFirstName" type="button">{{ $t('falukant.create.random') }}</button>
|
|
<label>{{ $t('falukant.create.lastname') }}</label>
|
|
<input type="text" v-model="falukant.lastname" required>
|
|
<button @click="randomLastName" type="button">{{ $t('falukant.create.random') }}</button>
|
|
<button type="submit">{{ $t('falukant.create.submit') }}</button>
|
|
</form>
|
|
<img :src="falukant.gender == 'male' ? '/images/mascot/mascot_male.png' : '/images/mascot/mascot_female.png'"
|
|
class="mascot-image" />
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'FalukantCreateView',
|
|
data() {
|
|
return {
|
|
falukant: {
|
|
gender: 'male',
|
|
firstname: '',
|
|
lastname: '',
|
|
},
|
|
};
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const falukantUser = await apiClient.get('/api/falukant/user');
|
|
if (falukantUser.data) {
|
|
this.$router.push({ name: 'FalukantOverview' });
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
}
|
|
await this.randomFirstName();
|
|
await this.randomLastName();
|
|
},
|
|
methods: {
|
|
...mapActions(['createFalukant']),
|
|
async createFalukant() {
|
|
const newUser = await apiClient.post('/api/falukant/user', this.falukant);
|
|
this.$router.push({ name: 'FalukantOverview' });
|
|
},
|
|
async randomFirstName() {
|
|
const randomNameResult = await apiClient.get('/api/falukant/name/randomfirstname/' + this.falukant.gender);
|
|
this.falukant.firstname = randomNameResult.data.name;
|
|
},
|
|
async randomLastName() {
|
|
const randomNameResult = await apiClient.get('/api/falukant/name/randomlastname');
|
|
this.falukant.lastname = randomNameResult.data.name;
|
|
},
|
|
},
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
form {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
row-gap: 15px;
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
border: 1px solid #ccc;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
label {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
select,
|
|
input {
|
|
width: auto;
|
|
}
|
|
|
|
button {
|
|
width: auto;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
grid-column: 1 / -1;
|
|
justify-self: start;
|
|
width: auto;
|
|
}
|
|
|
|
.mascot-image {
|
|
display: block;
|
|
margin: 0 auto;
|
|
height: calc(100vh - 400px);
|
|
max-height: 100%;
|
|
min-height: 150px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|