inital commit

2024-06-15 23:01:46 +02:00
parent 1b7fefe381
commit 61653ff407
105 changed files with 7805 additions and 524 deletions
--- a/src/content/admin/EventManagement.vue
+++ b/src/content/admin/EventManagement.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="event-management">
+    <h2>Veranstaltungen</h2>
+    <button @click="createEvent">Neue Veranstaltung</button>
+    <EventForm v-if="showForm" 
+               :event="selectedEvent" 
+               :institutions="institutions" 
+               :eventPlaces="eventPlaces" 
+               :contactPersons="contactPersons" 
+               @saved="handleEventSaved" 
+               @cancelled="handleEventCancelled" />
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Typ</th>
+          <th>Datum</th>
+          <th>Uhrzeit</th>
+          <th>Wochentag</th>
+          <th>Beschreibung</th>
+          <th>Aktionen</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="event in events" :key="event.id">
+          <td>{{ event.name }}</td>
+          <td>{{ getEventTypeCaption(event.eventTypeId) }}</td>
+          <td>{{ event.date }}</td>
+          <td>{{ formatTime(event.time) }}<span v-if="event.endTime"> - {{ formatTime(event.endTime) }}</span></td>
+          <td>{{ getWeekdayName(event.dayOfWeek) }}</td>
+          <td>{{ event.description }}</td>
+          <td>
+            <button @click="editEvent(event)">Bearbeiten</button>
+            <button @click="deleteEvent(event.id)">Löschen</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import EventForm from '@/components/EventForm.vue';
+import { formatTime } from '../../utils/strings';
+
+export default {
+  components: { EventForm },
+  data() {
+    return {
+      events: [],
+      institutions: [],
+      eventPlaces: [],
+      contactPersons: [],
+      eventTypes: [],
+      selectedEvent: null,
+      showForm: false,
+    };
+  },
+  async created() {
+    await this.fetchData();
+  },
+  methods: {
+    formatTime,
+    async fetchData() {
+      try {
+        const [eventResponse, institutionResponse, eventPlaceResponse, contactPersonResponse, eventTypeResponse] = await Promise.all([
+          axios.get('http://localhost:3000/api/events'),
+          axios.get('http://localhost:3000/api/institutions'),
+          axios.get('http://localhost:3000/api/event-places'),
+          axios.get('http://localhost:3000/api/contact-persons'),
+          axios.get('http://localhost:3000/api/event-types')
+        ]);
+
+        this.events = eventResponse.data;
+        this.institutions = institutionResponse.data;
+        this.eventPlaces = eventPlaceResponse.data;
+        this.contactPersons = contactPersonResponse.data;
+        this.eventTypes = eventTypeResponse.data;
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Daten:', error);
+      }
+    },
+    createEvent() {
+      this.selectedEvent = {};
+      this.showForm = true;
+    },
+    editEvent(event) {
+      this.selectedEvent = { ...event };
+      this.showForm = true;
+    },
+    async deleteEvent(id) {
+      try {
+        await axios.delete(`http://localhost:3000/api/events/${id}`);
+        this.fetchData();
+      } catch (error) {
+        console.error('Fehler beim Löschen der Veranstaltung:', error);
+      }
+    },
+    handleEventSaved() {
+      this.showForm = false;
+      this.fetchData();
+    },
+    handleEventCancelled() {
+      this.showForm = false;
+    },
+    getEventTypeCaption(eventTypeId) {
+      const eventType = this.eventTypes.find(type => type.id === eventTypeId);
+      return eventType ? eventType.caption : 'Unbekannt';
+    },
+    getWeekdayName(dayOfWeek) {
+      const weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+      return weekdays[dayOfWeek - 1];
+    },
+  }
+};
+</script>
+
+<style scoped>
+.event-management {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+button {
+  margin: 5px;
+}
+</style>