Creation and editing of events
This commit is contained in:
258
app/Domains/Event/Views/Partials/CommonSettings.vue
Normal file
258
app/Domains/Event/Views/Partials/CommonSettings.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import ErrorText from "../../../../Views/Components/ErrorText.vue";
|
||||
import AmountInput from "../../../../Views/Components/AmountInput.vue";
|
||||
import {request} from "../../../../../resources/js/components/HttpClient.js";
|
||||
import {toast} from "vue3-toastify";
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
event: Object,
|
||||
})
|
||||
|
||||
|
||||
const dynmicProps = reactive({
|
||||
localGroups: [],
|
||||
eatingHabits:[]
|
||||
});
|
||||
|
||||
const contributingLocalGroups = ref([])
|
||||
const eatingHabits = ref([]);
|
||||
|
||||
const errors = reactive({})
|
||||
|
||||
const formData = reactive({
|
||||
contributingLocalGroups: contributingLocalGroups.value,
|
||||
eventName: props.event.name,
|
||||
eventLocation: props.event.location,
|
||||
postalCode: props.event.postalCode,
|
||||
email: props.event.email,
|
||||
earlyBirdEnd: props.event.earlyBirdEnd.internal,
|
||||
registrationFinalEnd: props.event.registrationFinalEnd.internal,
|
||||
alcoholicsAge: props.event.alcoholicsAge,
|
||||
eatingHabits: eatingHabits.value,
|
||||
sendWeeklyReports: props.event.sendWeeklyReports,
|
||||
registrationAllowed: props.event.registrationAllowed,
|
||||
flatSupport: props.event.flatSupportEdit,
|
||||
supportPerson: props.event.supportPersonEdit,
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await fetch('/api/v1/core/retrieve-event-setting-data');
|
||||
const data = await response.json();
|
||||
Object.assign(dynmicProps, data);
|
||||
|
||||
contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
|
||||
eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
|
||||
});
|
||||
|
||||
async function save() {
|
||||
const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: {
|
||||
eventName: formData.eventName,
|
||||
eventLocation: formData.eventLocation,
|
||||
postalCode: formData.postalCode,
|
||||
email: formData.email,
|
||||
earlyBirdEnd: formData.earlyBirdEnd,
|
||||
registrationFinalEnd: formData.registrationFinalEnd,
|
||||
alcoholicsAge: formData.alcoholicsAge,
|
||||
sendWeeklyReports: formData.sendWeeklyReports,
|
||||
registrationAllowed: formData.registrationAllowed,
|
||||
flatSupport: formData.flatSupport,
|
||||
supportPerson: formData.supportPerson,
|
||||
contributingLocalGroups: contributingLocalGroups.value,
|
||||
eatingHabits: eatingHabits.value,
|
||||
}
|
||||
})
|
||||
|
||||
if (response.status === 'success') {
|
||||
toast.success('Einstellungen wurden erfolgreich gespeichert.')
|
||||
emit('close')
|
||||
} else {
|
||||
toast.error('Beim Speichern ist ein Fehler aufgetreten.')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2>Einstellungen</h2>
|
||||
<div class="container">
|
||||
<div class="row top">
|
||||
<div class="left">
|
||||
<table class="event-settings-table" style="width: 80%;">
|
||||
<tr>
|
||||
<th>Veranstaltungsname</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.eventName" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventName" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Veranstaltungsort</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.eventLocation" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventLocation" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Postleitzahl des Veranstaltungsorts</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.postalCode" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventPostalCode" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>E-Mail-Adresse der Veranstaltungsleitung</th>
|
||||
<td>
|
||||
<input type="text" v-model="formData.email" class="width-full" /><br />
|
||||
<ErrorText :message="errors.eventEmail" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Ende der EarlyBird-Phase</th>
|
||||
<td>
|
||||
<input type="date" v-model="formData.earlyBirdEnd" class="width-full" /><br />
|
||||
<ErrorText :message="errors.earlyBirdEnd" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Finaler Anmeldeschluss</th>
|
||||
<td>
|
||||
<input type="date" v-model="formData.registrationFinalEnd" class="width-full" /><br />
|
||||
<ErrorText :message="errors.registrationFinalEnd" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Fördermittel</th>
|
||||
<td>
|
||||
<amountInput v-model="formData.supportPerson" clasS="width-small" /> Euro p.P. / Tag
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Zuschüsse</th>
|
||||
<td>
|
||||
<amountInput v-model="formData.flatSupport" clasS="width-small" /> Euro pauschal
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Mindestalter für Alkoholkonsum</th>
|
||||
<td>
|
||||
<input type="number" v-model="formData.alcoholicsAge" class="width-tiny" /><br />
|
||||
<ErrorText :message="errors.alcoholicsAge" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2" style="height: 25px !important;">
|
||||
<input type="checkbox" v-model="formData.sendWeeklyReports" id="sendWeeklyReports" />
|
||||
<label for="sendWeeklyReports">Wöchentliche Zusammenfassung per E-Mail an Stämme schicken</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<input type="checkbox" v-model="formData.registrationAllowed" id="registrationAllowed" />
|
||||
<label for="registrationAllowed">Veranstaltung ist für Anmeldungen geöffnet</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Teilnehmende Stämme</th>
|
||||
</tr>
|
||||
<tr v-for="localGroup in dynmicProps.localGroups">
|
||||
<td>
|
||||
<input type="checkbox" :id="'localgroup_' + localGroup.id" :value="localGroup.id" v-model="contributingLocalGroups" />
|
||||
<label style="padding-left: 5px;" :for="'localgroup_' + localGroup.id">{{localGroup.name}}</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th style="padding-top: 40px !important;">Angebotene Ernährung</th>
|
||||
</tr>
|
||||
|
||||
<tr v-for="eatingHabit in dynmicProps.eatingHabits">
|
||||
<td>
|
||||
<input type="checkbox" :id="'eatinghabit' + eatingHabit.id" :value="eatingHabit.id" v-model="eatingHabits" />
|
||||
<label style="padding-left: 5px;" :for="'eatinghabit' + eatingHabit.id">{{eatingHabit.name}}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row bott">
|
||||
<input type="button" value="Speichern" @click="save" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px; /* Abstand zwischen den Zeilen */
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px; /* Abstand zwischen den Spalten */
|
||||
}
|
||||
|
||||
.row.top .left {
|
||||
flex: 0 0 70%; /* feste Breite von 80% */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row.top .right {
|
||||
flex: 0 0 30%; /* feste Breite von 20% */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.row.bottom {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-settings-table {
|
||||
|
||||
}
|
||||
|
||||
.event-settings-table tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.event-settings-table td {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.event-settings-table th {
|
||||
vertical-align: top;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user