Added multiple features

src/components/WorshipDialog.vue

@@ -7,12 +7,19 @@
                     <label for="location-select">Bitte wählen Sie den Ort für den Gottestdienst aus:</label>
                 </div>
                 <div>
-                    <select id="location-select" v-model="selectedLocation">
-                        <option :value="-1">Alle Orte</option>
-                        <option v-for="location in locations" :key="location.id" :value="location.id">
-                            {{ location.name }}
-                        </option>
-                    </select>
+                    <multiselect
+                        v-model="selectedLocations"
+                        :options="locations"
+                        :multiple="true"
+                        :close-on-select="false"
+                        :clear-on-select="false"
+                        :preserve-search="true"
+                        :preselect-first="false"
+                        label="name"
+                        track-by="id"
+                        placeholder="Orte auswählen"
+                    >
+                    </multiselect>
                 </div>
                 <div>
                     <button @click="confirmWorshipConfiguration">Bestätigen</button>
@@ -26,14 +33,19 @@
 <script>
 import { ref } from 'vue';
 import axios from '@/axios';
+import Multiselect from 'vue-multiselect';
+import 'vue-multiselect/dist/vue-multiselect.css';
 
 export default {
     name: 'WorshipDialog',
+    components: {
+        Multiselect
+    },
     emits: ['confirm'],
     setup(props, { emit }) {
         const isOpen = ref(false);
         const locations = ref([]);
-        const selectedLocation = ref(-1);
+        const selectedLocations = ref([]);
 
         const openWorshipDialog = () => {
             isOpen.value = true;
@@ -54,14 +66,15 @@ export default {
         };
 
         const confirmWorshipConfiguration = () => {
-            emit('confirm', selectedLocation.value);
+            const selectedLocationIds = selectedLocations.value.map(location => location.id).join('|');
+            emit('confirm', selectedLocationIds);
             closeWorshipDialog();
         };
 
         return {
             isOpen,
             locations,
-            selectedLocation,
+            selectedLocations,
             openWorshipDialog,
             closeWorshipDialog,
             confirmWorshipConfiguration,
@@ -88,4 +101,8 @@ export default {
     padding: 20px;
     border-radius: 8px;
 }
-</style>
+
+.multiselect {
+    width: 100%;
+}
+</style>

src/components/WorshipRender.vue

@@ -10,7 +10,7 @@
                     <div v-if="worship.neighborInvitation" class="neighborhood-invitation">Einladung zum Gottesdienst im Nachbarschaftsraum:</div>
                     <h3>
                         <span :class="worship.highlightTime ? 'highlight-time' : ''">{{ formatTime(worship.time) }}</span>&nbsp;-&nbsp;
-                        {{ !worship.neighborInvitation ? worship.title : '' }}
+                        {{ !worship.neighborInvitation ? worship.title : `Gottesdienst in ${worship.eventPlace.name}` }}
                     </h3>
                     <div v-if="worship.organizer">Gestaltung: {{ worship.organizer }}</div>
                     <div v-if="worship.collection">Kollekte: {{ worship.collection }}</div>