Ordnerstruktur verbessert

src/components/startseite/Events.vue

@@ -0,0 +1,165 @@
+<script lang="ts">
+import RitzenbergenLib from "../../ritzenbergenlib.ts";
+import striptags from "striptags";
+import moment, { Moment } from "moment";
+import Modal from "../Modal.vue";
+export default {
+  data() {
+    let openedModals: number[] = [];
+    return {
+      openedModals,
+      modaltypes: ["text", "html"],
+      RitzenbergenLib,
+    };
+  },
+  computed: {
+    events() {
+      return [
+        {
+          id: 0,
+          eventname: "Eventname",
+          datum: "2009-04-06",
+          type: "text",
+          content: "<h1>Test</h1>",
+          link: undefined,
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 1,
+          eventname: "Link",
+          datum: "2009-04-06",
+          type: "link",
+          content: "<h1>Testlink</h1>",
+          link: "#/test",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 2,
+          eventname: "Download-Link",
+          datum: "2009-04-06",
+          type: "dlink",
+          content: "<h1>Testlink2</h1>",
+          link: "/",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 3,
+          eventname: "Fotos endlich online!",
+          datum: "2009-04-06",
+          type: "fotos",
+          content: "Fotos vom Erntefest 2011",
+          link: "erntefest/2011",
+          foto: "erntefest/2011/pic08.jpg",
+        },
+        {
+          id: 4,
+          eventname: "Eventname",
+          datum: "2009-04-06",
+          type: "html",
+          content: "<h1>Test2</h1>",
+          link: undefined,
+          foto: "erntefest/2011/pic08.jpg",
+        },
+      ];
+    },
+  },
+  methods:{
+    vorschautext(content:string) {
+        let stripped=striptags(content);
+        let vorschaulen=30;
+        if(stripped.length>vorschaulen){
+            return stripped.substring(0,vorschaulen)+"...";
+        }else{
+            return stripped;
+        }
+    },
+    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")
+    }
+  },
+    components: {
+        Modal,
+    },
+};
+</script>
+<template>
+  <section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
+    <div class="container-fluid">
+      <div class="row justify-content-center mb-5">
+        <div class="col-12 content-head">
+          <div class="mbr-section-head">
+            <h4
+              class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+            >
+              <strong>Termine & Neuigkeiten</strong>
+            </h4>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <!-- Events -->
+
+        <h5 class="align-center" v-if="events.length == 0">
+          Es stehen keine Events an.
+        </h5>
+
+        <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="RitzenbergenLib.get_img(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" :data-id="event.id">{{
+                    event.eventname
+                  }}</a></strong
+                >
+              </h6>
+              <p class="mbr-text mbr-fonts-style mb-3 display-7">
+                {{ 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">
+                <a
+                  :download="event.type == 'dlink' ? event.link : undefined"
+                  :href="event.link"
+                  ><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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style></style>