Added rendering of Event Images

.gitignore

@@ -26,3 +26,4 @@ node_modules
 server.key
 server.cert
 
+public/images/uploads/1ba24ea7-f52c-4179-896f-1909269cab58.jpg

controllers/eventController.js

@@ -61,7 +61,7 @@ const filterEvents = async (req, res) => {
           { model: Institution, as: 'institution' },
           { model: EventPlace, as: 'eventPlace' },
           { model: EventType, as: 'eventType' },
-          { model: ContactPerson, as: 'contactPersons', through: { attributes: [] } }
+          { model: ContactPerson, as: 'contactPersons', through: { attributes: [] } },
         ],
         order: ['name', 'date', 'time']
       });

models/event.js

@@ -41,6 +41,10 @@ module.exports = (sequelize) => {
     alsoOnHomepage: {
       type: DataTypes.INTEGER,
       allowNull: false
+    },
+    relatedImage: {
+      type: DataTypes.STRING,
+      allowNull: true
     }
   }, {
     tableName: 'events',
@@ -66,6 +70,10 @@ module.exports = (sequelize) => {
       otherKey: 'contact_person_id',
       as: 'contactPersons'
     });
+    Event.belongsTo(models.Image, {
+      foreignKey: 'relatedImage',
+      as: 'relatedImageAssociation'
+    })
   };
 
   return Event;

src/components/EventForm.vue

@@ -94,6 +94,13 @@
             ></multiselect>
           </td>
         </tr>
+        <tr>
+          <td colspan="2"><label><input type="checkbox" v-model="onHomepage">Auf der Startseite anzeigen</label></td>
+        </tr>
+        <tr>
+          <td>Zugewiesenes Bild:</td>
+          <td><img v-if="assignedImage != null" :src="getImagePath" /><button @click="removeImage">Bild entfernen</button></td>
+        </tr>
         <tr>
           <td colspan="2"><button type="submit">Speichern</button></td>
         </tr>

src/components/EventRender.vue

@@ -3,24 +3,33 @@
         <table v-if="events.length > 1" class="event-table">
             <tr v-for="event in events" :key="event.id">
                 <td>
+                    <div v-if="hasImage(event)" class="event-image"><img v-if="imageMap[event.relatedImage]"
+                            :src="imageMap[event.relatedImage]" /></div>
                     <div v-if="shouldDisplay('name')" class="event-name">{{ event.name }}</div>
                     <div>{{ formatDateOrDay(event.date, event.dayOfWeek) }}</div>
-                    <div v-if="shouldDisplay('time')">{{ formatTime(event.time) }} <span v-if="event.endTime"> - {{ formatTime(event.endTime) }}</span> Uhr</div>
+                    <div v-if="shouldDisplay('time')">{{ formatTime(event.time) }} <span v-if="event.endTime"> - {{
+                            formatTime(event.endTime) }}</span> Uhr</div>
                     <div v-if="shouldDisplay('place')">{{ event.eventPlace?.name }}</div>
                     <div v-if="shouldDisplay('description')" class="description">{{ event.description }}</div>
-                    <div v-if="shouldDisplay('contactPerson')">{{ event.contactPersons.map(cp => cp.name).join(', ') }}</div>
+                    <div v-if="shouldDisplay('contactPerson')">{{event.contactPersons.map(cp => cp.name).join(', ')}}
+                    </div>
                     <div v-if="shouldDisplay('institution')">{{ event.institution?.name }}</div>
                     <div v-if="shouldDisplay('type')">{{ event.eventType?.caption }}</div>
                 </td>
             </tr>
         </table> 
-        <div v-else-if="events.length === 1" :class="events[0].alsoOnHomepage && config.id === 'home' ? 'homepage' : ''">
+        <div v-else-if="events.length === 1"
+            :class="events[0].alsoOnHomepage && config.id === 'home' ? 'homepage' : ''">
+            <div v-if="hasImage(events[0])" class="event-image"><img v-if="imageMap[events[0].relatedImage]"
+                    :src="imageMap[events[0].relatedImage]" /></div>
             <div v-if="shouldDisplay('name')" class="event-name">{{ events[0].name }}</div>
             <div>{{ formatDateOrDay(events[0].date, events[0].dayOfWeek) }}</div>
-            <div v-if="shouldDisplay('time')">{{ formatTime(events[0].time) }} <span v-if="events[0].endTime"> - {{ formatTime(events[0].endTime) }}</span> Uhr</div>
+            <div v-if="shouldDisplay('time')">{{ formatTime(events[0].time) }} <span v-if="events[0].endTime"> - {{
+                formatTime(events[0].endTime) }}</span> Uhr</div>
             <div v-if="shouldDisplay('place')">{{ events[0].eventPlace?.name }}</div>
             <div v-if="shouldDisplay('description')" class="description">{{ events[0].description }}</div>
-            <div v-if="shouldDisplay('contactPerson')">{{ events[0].contactPersons.map(cp => cp.name).join(', ') }}</div>
+            <div v-if="shouldDisplay('contactPerson')">{{events[0].contactPersons.map(cp => cp.name).join(', ')}}
+            </div>
             <div v-if="shouldDisplay('institution')">{{ events[0].institution?.name }}</div>
             <div v-if="shouldDisplay('type')">{{ events[0].eventType?.caption }}</div>
         </div>
@@ -43,6 +52,7 @@ export default {
     data() {
         return {
             events: [],
+            imageMap: {},
         };
     },
     async created() {
@@ -56,6 +66,18 @@ export default {
                     this.config
                 );
                 this.events = response.data.events;
+                await Promise.all(
+                    this.events
+                        .filter(event => this.hasImage(event))
+                        .map(async event => {
+                            try {
+                                const response = await axios.get('/image/' + event.relatedImage);
+                                this.imageMap[event.relatedImage] = '/images/uploads/' + response.data.filename;
+                            } catch (err) {
+                                console.error(`Bild konnte nicht geladen werden (ID ${event.relatedImage}):`, err);
+                            }
+                        })
+                );
             } catch (error) {
                 console.error('Fehler beim Abrufen der Events', error);
             }
@@ -71,6 +93,15 @@ export default {
                 return daysOfWeek[dayOfWeek];
             }
             return '';
+        },
+        hasImage(event) {
+            return event.relatedImage && event.relatedImage != '';
+        },
+        async imagePath(eventImage) {
+            const response = await axios.get('/image/' + eventImage);
+            const path = '/images/uploads/' + response.data.filename;
+            console.log(path);
+            return path;
         }
     }
 };
@@ -80,18 +111,27 @@ export default {
 .event-name {
     font-weight: bold;
 }
+
 .event-table {
     border-collapse: collapse;
 }
+
 .event-table td {
     border: 1px solid black;
 }
+
 .homepage {
     border: 1px solid #9400ff;
     padding: 0.5em;
     text-align: center;
 }
+
 .description {
     padding: 0.5em 0;
 }
+
+.event-image > img {
+    max-width: 8em;
+    max-height: 8em;
+}
 </style>

vue.config.js

@@ -19,8 +19,8 @@ module.exports = defineConfig({
     },
     plugins: [
       new webpack.DefinePlugin({
-        'process.env': JSON.stringify(process.env)
+        'process.env.CUSTOM_VAR': JSON.stringify(process.env.CUSTOM_VAR)
-      }),
+      })
     ],
   },
 });