ritzenbergen-frontend/src/Main.vue

<script lang="ts">
import Navbar from "./Navbar.vue";
import striptags from "striptags";
import moment, { Moment } from "moment";
export default {
  components: {
    Navbar,
  },
  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: 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"
        }
      ];
    },
  },
  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")
    },
    get_file(filename:string){
        return filename;
    }
  }
};
</script>

<template>
  <Navbar />
  <section
    class="header16 cid-u6k7q0xIhk mbr-fullscreen mbr-parallax-background"
    id="hero-17-u6k7q0xIhk"
  >
    <div
      class="mbr-overlay"
      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
    ></div>
    <div class="container-fluid">
      <div class="row">
        <div class="content-wrap col-12 col-md-10">
          <h1
            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
          >
            <strong>Willkommen auf ritzenbergen.de</strong>
          </h1>
          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
            Dies ist eine private Homepage über das Dorfleben in Amedorf und
            Ritzenbergen
          </p>
          <div class="mbr-section-btn">
            <a
              class="btn btn-white-outline display-7"
              href="#gallery-9-u6k7q0xbqP"
              >Erkunden</a
            >
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="features023 cid-u6k7q0xclF" id="metrics-1-u6k7q0xclF">
    <div class="container">
      <div class="row content-row justify-content-center">
        <div
          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
        >
          <div class="item-wrapper"></div>
        </div>
        <div
          class="item features-without-image col-12 col-md-6 col-lg-4 item-mb"
        >
          <div class="item-wrapper"></div>
        </div>
      </div>
    </div>
  </section>
  <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">
          <div class="item-wrapper">
            <div class="item-img mb-3">
              <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"
                    :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"
                >
                  <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>
        </div>
        
        </div>
    </div>
  </section>
</template>

<style lang="css" scoped></style>