Added ekhn logo, changed event form

src/common/components/HeaderComponent.vue

@@ -11,7 +11,7 @@
 <script>
 import NavbarComponent from './NavbarComponent.vue';
 import { mapActions } from 'vuex';
-import router from '@/router'; // Importieren Sie den Router
+import router from '@/router'; 
 
 export default {
   name: 'HeaderComponent',
@@ -22,7 +22,7 @@ export default {
     ...mapActions(['loadMenuData']),
     async reloadMenu() {
       await this.loadMenuData();
-      this.$router.push({ path: '/' }); // Zurück zur Startseite oder eine andere Seite, um sicherzustellen, dass der Router neu geladen wird
+      this.$router.push({ path: '/' }); 
       const routes = this.$store.state.menuData.map(item => {
         if (item.component) {
           return {
@@ -31,7 +31,7 @@ export default {
           };
         }
       });
-      routes.forEach(route => router.addRoute(route)); // Neue Routen hinzufügen
+      routes.forEach(route => router.addRoute(route)); 
     }
   }
 };

src/common/components/NavbarComponent.vue

@@ -4,6 +4,7 @@
       Menü
     </button>
     <ul v-if="isMenuOpen || windowWidth > 768">
+      <li class="ekhnlogo"><img src="/images/facettenkreuz.png" class="facettenkreuz" /></li>
       <li v-for="item in menu" :key="item.name" @click="toggleSubmenu(item.name)">
         <router-link :to="item.link" v-if="item.link" @click="closeMenu">
           {{ item.name }}
@@ -237,4 +238,14 @@ export default {
 .pointer {
   cursor: pointer;
 }
+
+.facettenkreuz {  
+  max-width:30px;
+  max-height:30px;
+  position: fixed;
+}
+
+.ekhnlogo {
+  width: 32px;
+}
 </style>

src/components/AddImageDialog.vue

@@ -11,7 +11,7 @@
                         <span v-else>{{ image.title }}</span>
                     </div>
                 </div>
-                <div>
+                <div class="button-container">
                     <button @click="confirmAddImageConfiguration">Bestätigen</button>
                     <button @click="closeAddImageDialog">Schließen</button>
                 </div>
@@ -82,11 +82,14 @@ export default {
     left: 5%;
     width: 90%;
     height: 50em;
-    background: rgba(0, 0, 0, .5);
+    background: rgba(240, 240, 240, .9);
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: auto;
+    position: fixed;
+    border: 1px solid #404040;
+    box-shadow: 3px 3px 8px #909090;
 }
 
 .dialog-content {
@@ -124,4 +127,11 @@ export default {
 .selected {
     border: 2px solid black;
 }
+
+.button-container {
+    border-top: 1px solid #404040;
+    background-color: #808080;
+    margin: 0 -20px -20px -20px;
+    padding: 12px 20px;
+}
 </style>

src/components/EventForm.vue

@@ -10,13 +10,8 @@
         <tr>
           <td><label for="eventType">Typ:</label></td>
           <td>
-            <multiselect 
-              v-model="selectedEventType" 
-              :options="eventTypes" 
-              label="caption" 
-              track-by="id" 
-              placeholder="Typ wählen"
-            ></multiselect>
+            <multiselect v-model="selectedEventType" :options="eventTypes" label="caption" track-by="id"
+              placeholder="Typ wählen"></multiselect>
           </td>
         </tr>
         <tr>
@@ -36,13 +31,8 @@
         <tr v-if="dateMode === 'weekday' || dateMode === 'interval'">
           <td><label for="dayOfWeek">Wochentag:</label></td>
           <td>
-            <multiselect 
-              v-model="eventData.dayOfWeek" 
-              :options="weekdays" 
-              label="name" 
-              track-by="value" 
-              placeholder="Wochentag wählen"
-            ></multiselect>
+            <multiselect v-model="eventData.dayOfWeek" :options="weekdays" label="name" track-by="value"
+              placeholder="Wochentag wählen"></multiselect>
           </td>
         </tr>
         <tr>
@@ -60,38 +50,22 @@
         <tr>
           <td><label for="institution">Institution:</label></td>
           <td>
-            <multiselect 
-              v-model="selectedInstitution" 
-              :options="localInstitutions" 
-              label="name" 
-              track-by="id" 
-              placeholder="Institution wählen"
-            ></multiselect>
+            <multiselect v-model="selectedInstitution" :options="localInstitutions" label="name" track-by="id"
+              placeholder="Institution wählen"></multiselect>
           </td>
         </tr>
         <tr>
           <td><label for="eventPlace">Veranstaltungsort:</label></td>
           <td>
-            <multiselect 
-              v-model="selectedEventPlace" 
-              :options="localEventPlaces" 
-              label="name" 
-              track-by="id" 
-              placeholder="Veranstaltungsort wählen"
-            ></multiselect>
+            <multiselect v-model="selectedEventPlace" :options="localEventPlaces" label="name" track-by="id"
+              placeholder="Veranstaltungsort wählen"></multiselect>
           </td>
         </tr>
         <tr>
           <td><label for="contactPersons">Kontaktpersonen:</label></td>
           <td>
-            <multiselect 
-              v-model="selectedContactPersons" 
-              :options="localContactPersons" 
-              :multiple="true" 
-              label="name" 
-              track-by="id" 
-              placeholder="Kontaktpersonen wählen"
-            ></multiselect>
+            <multiselect v-model="selectedContactPersons" :options="localContactPersons" :multiple="true" label="name"
+              track-by="id" placeholder="Kontaktpersonen wählen"></multiselect>
           </td>
         </tr>
         <tr>
@@ -99,7 +73,15 @@
         </tr>
         <tr>
           <td>Zugewiesenes Bild:</td>
-          <td><img v-if="assignedImage != null" :src="getImagePath" /><button @click="removeImage">Bild entfernen</button></td>
+          <td>
+            <div v-if="assignedImage != null && imageFilename">
+              <img :src="getImagePath" class="preview-image" />
+              <button @click="removeImage" type="button">Bild entfernen</button>
+            </div>
+            <div v-else>
+              <button type="button" @click="openAddImageDialog">Bild auswählen</button>
+            </div>
+          </td>
         </tr>
         <tr>
           <td colspan="2"><button type="submit">Speichern</button></td>
@@ -107,16 +89,18 @@
       </table>
     </form>
   </div>
+  <AddImageDialog ref="addImageDialog" @confirm="setImage" />
 </template>
 
 <script>
 import axios from 'axios';
 import Multiselect from 'vue-multiselect';
 import { formatTime } from '@/utils/strings';
+import AddImageDialog from '@/components/AddImageDialog.vue';
 
 export default {
   name: 'EventForm',
-  components: { Multiselect },
+  components: { Multiselect, AddImageDialog },
   props: {
     event: {
       type: Object,
@@ -159,7 +143,10 @@ export default {
       ],
       localInstitutions: [...this.institutions],
       localEventPlaces: [...this.eventPlaces],
-      localContactPersons: [...this.contactPersons]
+      localContactPersons: [...this.contactPersons],
+      onHomepage: false,
+      assignedImage: null,
+      imageFilename: '',
     };
   },
   watch: {
@@ -169,6 +156,11 @@ export default {
       this.selectedInstitution = newVal.institution || null;
       this.selectedEventPlace = newVal.eventPlace || null;
       this.selectedContactPersons = newVal.contactPersons || [];
+      this.onHomepage = newVal.alsoOnHomepage || false;
+      this.assignedImage = newVal.relatedImage || null;
+      if (this.assignedImage) {
+        this.fetchImageFilename();
+      }
       this.determineDateMode();
     },
     institutions(newVal) {
@@ -191,6 +183,11 @@ export default {
     }
     this.determineDateMode();
   },
+  computed: {
+    getImagePath() {
+      return this.imageFilename ? `/images/uploads/${this.imageFilename}` : '';
+    }
+  },
   methods: {
     formatTime,
     async saveEvent() {
@@ -203,6 +200,8 @@ export default {
           contactPersonIds: this.selectedContactPersons.map(person => person.id)
         };
         payload.dayOfWeek = payload.dayOfWeek ? payload.dayOfWeek.value ?? -1 : -1;
+        payload.relatedImage = this.assignedImage;
+        payload.alsoOnHomepage = this.onHomepage;
         let response;
         if (this.eventData.id) {
           response = await axios.put(`/events/${this.eventData.id}`, payload);
@@ -224,7 +223,34 @@ export default {
       } else {
         this.dateMode = 'date';
       }
+    },
+    async fetchImageFilename() {
+      try {
+        const response = await axios.get('/image/' + this.assignedImage);
+        this.imageFilename = response.data.filename;
+      } catch (error) {
+        console.error('Bild konnte nicht geladen werden:', error);
       }
+    },
+    openAddImageDialog() {
+      this.$refs.addImageDialog.openAddImageDialog();
+    },
+
+    async setImage(imageId) {
+      this.assignedImage = imageId;
+      try {
+        const response = await axios.get('/image/' + imageId);
+        this.imageFilename = response.data.filename;
+      } catch (error) {
+        console.error('Bild konnte nicht geladen werden:', error);
+        this.imageFilename = '';
+      }
+    },
+
+    removeImage() {
+      this.assignedImage = null;
+      this.imageFilename = '';
+    },
   }
 };
 </script>
@@ -238,22 +264,34 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
 table {
   width: 100%;
   border-collapse: collapse;
 }
+
 td {
   padding: 8px;
   vertical-align: top;
 }
+
 label {
   display: block;
 }
+
 button {
   margin-top: 20px;
 }
+
 .descriptionedit {
   width: 100%;
   height: 10em;
 }
+
+.preview-image {
+  max-width: 50px;
+  max-height: 50px;
+  object-fit: contain;
+}
+
 </style>