Events erweitert, TODO-Liste erstellt

src/Main.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import Navbar from "./Navbar.vue";
 import striptags from "striptags";
+import moment, { Moment } from "moment";
 export default {
   components: {
     Navbar,
@@ -14,7 +15,43 @@ export default {
             datum: "2009-04-06",
             type: "text",
             content: "<h1>Test</h1>",
-            link: null,
+            link: undefined,
+            foto: "erntefest/2011/pic08.jpg"
+        },
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "link",
+            content: "<h1>Test</h1>",
+            link: "#/test",
+            foto: "erntefest/2011/pic08.jpg"
+        },
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "dlink",
+            content: "<h1>Test</h1>",
+            link: "/",
+            foto: "erntefest/2011/pic08.jpg"
+        },
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "fotos",
+            content: "<h1>Test</h1>",
+            link: undefined,
+            foto: "erntefest/2011/pic08.jpg"
+        },
+        {
+            id: 0,
+            eventname:"Eventname",
+            datum: "2009-04-06",
+            type: "html",
+            content: "<h1>Test</h1>",
+            link: undefined,
             foto: "erntefest/2011/pic08.jpg"
         }
       ];
@@ -31,7 +68,14 @@ export default {
         }
     },
     format_date(date: string){
-        
+        let mymoment:Moment=moment();
+        mymoment.set("year",parseInt(date.split("-")[0]));
+        mymoment.set("month",parseInt(date.split("-")[2])-1);
+        mymoment.set("day",parseInt(date.split("-")[1]));
+        return mymoment.format("DD.MM.YYYY")
+    },
+    get_file(filename:string){
+        return filename;
     }
   }
 };
@@ -105,36 +149,42 @@ export default {
         <h5 class="align-center" v-if="events.length == 0">
           Es stehen keine Events an.
         </h5>
-        <!--HTML-->
+
+
+
         <div class="item features-image col-12 col-md-6 col-lg-3" :class="{active: i%4==0}" v-for="event, i in events">
           <div class="item-wrapper">
             <div class="item-img mb-3">
-              <img :src="'../bilder/'+event.foto" />
+              <img :src="get_file('bilder/'+event.foto)" />
             </div>
             <div class="item-content align-left">
               <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
                 <strong
                   ><a
                     class="text-black fw-bold"
-                    @click.prevent
                     :data-id="event.id"
                     >{{ event.eventname }}</a
                   ></strong
                 >
               </h6>
               <p class="mbr-text mbr-fonts-style mb-3 display-7">
-                {{ event.datum }}
+                {{ format_date(event.datum) }}
               </p>
               <p class="mbr-text mbr-fonts-style mb-3 display-7">
                 {{ vorschautext(event.content) }}
               </p>
               <div class="mbr-section-btn item-footer">
-                <button
-                  class="btn item-btn btn-primary display-7 modal-open-btn"
+                <a
+                :download="event.type=='dlink' ? event.link : undefined"
+                :href="event.link"
+                    ><button
+                  class="btn item-btn btn-primary display-7"
                   :data-id="event.id"
                 >
-                  Mehr
-                </button>
+                  <span v-if="event.type=='link'">Einladung öffnen</span>
+                  <span v-else-if="event.type=='dlink'">Einladung runterladen</span>
+                  <span v-else>Mehr</span>
+                </button></a>
               </div>
             </div>
           </div>