inital commit
This commit is contained in:
Torsten Schulz
228
src/content/admin/WorshipManagement.vue
Normal file
228
src/content/admin/WorshipManagement.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="worship-management">
|
||||
<h2>Gottesdienst Verwaltung</h2>
|
||||
<form @submit.prevent="saveWorship">
|
||||
<label for="eventPlaceId">Veranstaltungsort:</label>
|
||||
<multiselect v-model="selectedEventPlace" :options="eventPlaces" label="name" track-by="id"
|
||||
placeholder="Veranstaltungsort wählen"></multiselect>
|
||||
|
||||
<label for="date">Datum:</label>
|
||||
<input type="date" id="date" v-model="worshipData.date" required>
|
||||
|
||||
<label for="time">Uhrzeit:</label>
|
||||
<input type="time" id="time" v-model="worshipData.time" required>
|
||||
|
||||
<label for="title">Titel:</label>
|
||||
<input type="text" id="title" v-model="worshipData.title" required>
|
||||
|
||||
<label for="organizer">Gestalter:</label>
|
||||
<input type="text" id="organizer" v-model="worshipData.organizer">
|
||||
|
||||
<label for="collection">Kollekte:</label>
|
||||
<input type="text" id="collection" v-model="worshipData.collection">
|
||||
|
||||
<label for="address">Adresse:</label>
|
||||
<input type="text" id="address" v-model="worshipData.address">
|
||||
|
||||
<label for="selfInformation">Selbstinformation:</label>
|
||||
<input type="checkbox" id="selfInformation" v-model="worshipData.selfInformation">
|
||||
|
||||
<label for="highlightTime">Uhrzeit hervorheben:</label>
|
||||
<input type="checkbox" id="highlightTime" v-model="worshipData.highlightTime">
|
||||
|
||||
<label for="neighborInvitation">Einladung zum Nachbarschaftsraum:</label>
|
||||
<input type="checkbox" id="neighborInvitation" v-model="worshipData.neighborInvitation">
|
||||
|
||||
<label for="introLine">Einleitungszeile:</label>
|
||||
<input type="text" id="introLine" v-model="worshipData.introLine">
|
||||
|
||||
<button type="submit">Speichern</button>
|
||||
<button type="button" @click="resetForm">Neuer Gottesdienst</button>
|
||||
</form>
|
||||
|
||||
<ul>
|
||||
<li v-for="worship in worships" :key="worship.id">
|
||||
<span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
|
||||
<button @click="editWorship(worship)">Bearbeiten</button>
|
||||
<button @click="deleteWorship(worship.id)">Löschen</button>
|
||||
<div class="tooltip">{{ getEventPlaceName(worship.eventPlaceId) }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import { formatTime, formatDate } from '../../utils/strings'; // Importieren der Methode
|
||||
|
||||
export default {
|
||||
name: 'WorshipManagement',
|
||||
components: { Multiselect },
|
||||
data() {
|
||||
return {
|
||||
worships: [],
|
||||
eventPlaces: [],
|
||||
worshipData: {
|
||||
eventPlaceId: null,
|
||||
date: '',
|
||||
time: '',
|
||||
title: '',
|
||||
organizer: '',
|
||||
collection: '',
|
||||
address: '',
|
||||
selfInformation: false,
|
||||
highlightTime: false,
|
||||
neighborInvitation: false,
|
||||
introLine: ''
|
||||
},
|
||||
selectedEventPlace: null,
|
||||
editMode: false,
|
||||
editId: null
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
await this.fetchEventPlaces();
|
||||
await this.fetchWorships();
|
||||
},
|
||||
methods: {
|
||||
formatTime,
|
||||
formatDate,
|
||||
async fetchWorships() {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:3000/api/worships');
|
||||
this.worships = response.data;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Abrufen der Gottesdienste:', error);
|
||||
}
|
||||
},
|
||||
async fetchEventPlaces() {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:3000/api/event-places');
|
||||
this.eventPlaces = response.data;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Abrufen der Veranstaltungsorte:', error);
|
||||
}
|
||||
},
|
||||
async saveWorship() {
|
||||
try {
|
||||
const payload = {
|
||||
...this.worshipData,
|
||||
eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null
|
||||
};
|
||||
|
||||
if (this.editMode) {
|
||||
await axios.put(`http://localhost:3000/api/worships/${this.editId}`, payload);
|
||||
} else {
|
||||
await axios.post('http://localhost:3000/api/worships', payload);
|
||||
}
|
||||
|
||||
this.resetForm();
|
||||
await this.fetchWorships();
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Speichern des Gottesdienstes:', error);
|
||||
}
|
||||
},
|
||||
editWorship(worship) {
|
||||
this.worshipData = { ...worship };
|
||||
this.selectedEventPlace = this.eventPlaces.find(ep => ep.id === worship.eventPlaceId);
|
||||
this.editMode = true;
|
||||
this.editId = worship.id;
|
||||
},
|
||||
async deleteWorship(id) {
|
||||
try {
|
||||
await axios.delete(`http://localhost:3000/api/worships/${id}`);
|
||||
await this.fetchWorships();
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Löschen des Gottesdienstes:', error);
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.worshipData = {
|
||||
eventPlaceId: null,
|
||||
date: '',
|
||||
time: '',
|
||||
title: '',
|
||||
organizer: '',
|
||||
collection: '',
|
||||
address: '',
|
||||
selfInformation: false,
|
||||
highlightTime: false,
|
||||
neighborInvitation: false,
|
||||
introLine: ''
|
||||
};
|
||||
this.selectedEventPlace = null;
|
||||
this.editMode = false;
|
||||
this.editId = null;
|
||||
},
|
||||
getEventPlaceName(eventPlaceId) {
|
||||
const place = this.eventPlaces.find(place => place.id === eventPlaceId);
|
||||
return place ? place.name : 'Unbekannter Ort';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import 'vue-multiselect/dist/vue-multiselect.css';
|
||||
|
||||
.worship-management {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid rgba(224, 224, 224, 0.9);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
width: auto;
|
||||
background-color: rgba(224, 224, 224, 0.6);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 75%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
padding: 5px;
|
||||
border: 1px solid #000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
li:hover .tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user