Events weiter gemacht

README.md

@@ -8,3 +8,4 @@ TODO:
 - BuLi-Tipp
 - Startseite
 - Footer
+- Event Fotos

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "tauridev": "tauri dev"
   },
   "dependencies": {
     "@tauri-apps/api": "^2",

src/App.vue

@@ -39,7 +39,6 @@ export default {
     @import "assets/socicon/css/styles.css";
     @import "assets/animatecss/animate.css";
     @import "assets/theme/css/style.css";
-    @import "assets/modal.css";
     @import "assets/mobirise/css/additional.scss";
     @import "./assets/css/index.css";
 

src/Main.vue

@@ -2,9 +2,11 @@
 import Navbar from "./Navbar.vue";
 import striptags from "striptags";
 import moment, { Moment } from "moment";
+import Modal from "./Modal.vue";
 export default {
   components: {
     Navbar,
+    Modal
   },
   computed: {
     events() {
@@ -19,38 +21,38 @@ export default {
             foto: "erntefest/2011/pic08.jpg"
         },
         {
-            id: 0,
+            id: 1,
-            eventname:"Eventname",
+            eventname:"Link",
             datum: "2009-04-06",
             type: "link",
-            content: "<h1>Test</h1>",
+            content: "<h1>Testlink</h1>",
             link: "#/test",
             foto: "erntefest/2011/pic08.jpg"
         },
         {
-            id: 0,
+            id: 2,
-            eventname:"Eventname",
+            eventname:"Download-Link",
             datum: "2009-04-06",
             type: "dlink",
-            content: "<h1>Test</h1>",
+            content: "<h1>Testlink2</h1>",
             link: "/",
             foto: "erntefest/2011/pic08.jpg"
         },
         {
-            id: 0,
+            id: 3,
-            eventname:"Eventname",
+            eventname:"Fotos endlich online!",
             datum: "2009-04-06",
             type: "fotos",
-            content: "<h1>Test</h1>",
+            content: "Fotos vom Erntefest 2011",
-            link: undefined,
+            link: "erntefest/2011",
             foto: "erntefest/2011/pic08.jpg"
         },
         {
-            id: 0,
+            id: 4,
             eventname:"Eventname",
             datum: "2009-04-06",
             type: "html",
-            content: "<h1>Test</h1>",
+            content: "<h1>Test2</h1>",
             link: undefined,
             foto: "erntefest/2011/pic08.jpg"
         }
@@ -77,7 +79,14 @@ export default {
     get_file(filename:string){
         return filename;
     }
+  },
+  data() {
+    let openedModals: number[] = [];
+    return {
+      openedModals,
+      modaltypes: ["text", "html"],
     }
+  },
 };
 </script>
 
@@ -153,6 +162,7 @@ export default {
 
 
         <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
+          <Modal v-show="openedModals.includes(event.id)&&modaltypes.includes(event.type)" @closemodal="openedModals.splice(openedModals.indexOf(event.id),1)" :content="event.content"></Modal>
           <div class="item-wrapper">
             <div class="item-img mb-3">
               <img :src="get_file('bilder/'+event.foto)" />
@@ -180,9 +190,11 @@ export default {
                     ><button
                   class="btn item-btn btn-primary display-7"
                   :data-id="event.id"
+                  @click="openedModals.push(event.id);"
                 >
                   <span v-if="event.type=='link'">Einladung öffnen</span>
                   <span v-else-if="event.type=='dlink'">Einladung runterladen</span>
+                  <span v-else-if="event.type=='fotos'">Fotos ansehen</span>
                   <span v-else>Mehr</span>
                 </button></a>
               </div>

src/Modal.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export default {
+        emits: ['closemodal'],
+        props: ["content"]
+    }
+</script>
+<template>
+        <div class="modal">
+            <div class="modal-content">
+                <button class="closeBtn" @click="$emit('closemodal')">x</button>
+                <span v-html="content"></span>
+            </div>
+        </div>
+</template>
+<style lang="css" scoped>
+    @import "assets/modal";
+
+</style>

src/assets/modal.css

@@ -20,7 +20,7 @@
     height: 100%;
     align-items: center;
     z-index: 1000; 
-    display: none;
+    display: flex;
     background-color: rgba(255,255,255,0.5);
     
   }