feat(RTF): add universal popup component and add it to the rtf page

Signed-off-by: Martin Dünkelmann <[email protected]>
Rad-Touristik-Club-Koln-e-V-1972 · Mar 22, 2023 · b306839 · b306839
1 parent 6e103c3
commit b306839
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/src/components/pages/DPopup.vue b/src/components/pages/DPopup.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-dialog id="DPopup" v-model="dialog" scrollable width="auto">
+        <v-card>
+            <v-toolbar color="primary" flat>
+                <v-toolbar-title class="accent--text">{{ props.value.title }}</v-toolbar-title>
+            </v-toolbar>
+            <!-- TODO style="padding: 16px" IS A WORKAROUND FOR https://github.com/vuetifyjs/vuetify/issues/12170 -->
+            <v-card-text style="padding: 16px">
+                <span class="black--text text-pre-wrap" v-html="props.value.text" />
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn class="font-weight-black" color="primary" text @click="dialog = false">OK</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Popup from '~/models/entities/Popup'
+
+const props = defineProps<{ value: Popup }>()
+
+const dialog = ref(true)
+</script>
diff --git a/src/models/builder/events/TourBuilder.ts b/src/models/builder/events/TourBuilder.ts
@@ -1,8 +1,9 @@
 import ABuilder from '~/models/builder/ABuilder'
-import EEvent from '~/models/enums/EEvent'
-import GalleryEntry from '~/models/entities/rtc-cologne/gallery/GalleryEntry'
+import PopupBuilder from '~/models/builder/PopupBuilder'
 import Tour from '~/models/entities/events/Tour'
 import Control from '~/models/entities/events/tours/Control'
+import GalleryEntry from '~/models/entities/rtc-cologne/gallery/GalleryEntry'
+import EEvent from '~/models/enums/EEvent'
 
 export default class TourBuilder<T extends Tour> extends ABuilder {
     protected tour = new Tour()
@@ -41,6 +42,12 @@ export default class TourBuilder<T extends Tour> extends ABuilder {
         return this
     }
 
+    setPopup(text: string, title: string): TourBuilder<T> {
+        this.tour.popup = new PopupBuilder().setId('04ad6a7c-7fff-4224-bdb6-b52fb64f1785').setText(text).setTitle(title).build()
+
+        return this
+    }
+
     setText(value: string): TourBuilder<T> {
         this.tour.text = value
 

diff --git a/src/models/entities/events/Tour.ts b/src/models/entities/events/Tour.ts
@@ -1,14 +1,16 @@
-import EEvent from '~/models/enums/EEvent'
-import GalleryEntry from '~/models/entities/rtc-cologne/gallery/GalleryEntry'
 import AEntity from '~/models/entities/AEntity'
 import Control from '~/models/entities/events/tours/Control'
+import Popup from '~/models/entities/Popup'
+import GalleryEntry from '~/models/entities/rtc-cologne/gallery/GalleryEntry'
+import EEvent from '~/models/enums/EEvent'
 
 export default class Tour extends AEntity {
     active = true
     category = EEvent.Vereinsfahrt
     controls: Control[] = []
     images: GalleryEntry[] = []
     lastChange!: Date
+    popup?: Popup
     text!: string
     title!: string
     urls: Record<string, URL> = {}

diff --git a/src/pages/events/tours/events/rtfs/index.vue b/src/pages/events/tours/events/rtfs/index.vue
@@ -139,11 +139,13 @@
                 </v-col>
             </v-row>
         </v-card-text>
+        <d-popup v-if="value.popup" :value="value.popup" />
     </v-card>
 </template>
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, ref } from 'vue'
+import DPopup from '~/components/pages/DPopup.vue'
 import DView from '~/components/pages/rtc-cologne/galleries/album/DView.vue'
 import Event from '~/models/entities/events/tours/Event'
 import Fee from '~/models/entities/events/tours/events/Fee'

diff --git a/src/store/events/Tour.ts b/src/store/events/Tour.ts
@@ -169,7 +169,13 @@ Gemeinsam geht es auf dem Radweg Richtung Altenrath weiter.`
                         .setImageUrl('content.rtc-koeln.de/pages/events/tours/events/rtfs/2023 Flyer.jpg')
                         .build()
                 )
-                .setLastChange('2023-01-28')
+                .setLastChange('2023-03-22')
+                .setPopup(
+                    `Natürlich sind all unsere Strecken ausgeschildert.
+
+Euer RTC Köln e.V.`,
+                    'Hinweis'
+                )
                 .setText(
                     `Liebe Radsportlerinnen und Radsportler,