ritzenbergen-frontend/src/components/startseite/Events.vue

<script lang="ts">
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import striptags from "striptags";
import moment, { Moment } from "moment";
import Modal from "../Modal.vue";
import $ from "jquery";
import MarkdownRender from "vue-renderer-markdown";
import "katex/dist/katex.min.css";

export default {
	data() {
		const openedModals: number[] = [];
		return {
			openedModals,
			modaltypes: ["text", "html"],
			RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
		};
	},
	computed: {
		events() {
			let result: Array<any> = [];

			$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
				crossDomain: true,
				async: false,
				success: function (data: string) {
					result = JSON.parse(data);
				},
			});
			console.log(result);
			return result;
			/*
      Beispiel-Event-Array:
      [
        {
          id: 0,
          eventname: "Eventname",
          datum: "2009-04-06",
          type: "text",
          content: "<h1>Test</h1>",
          link: undefined,
          foto: "erntefest/2011/pic08.jpg",
					minitext: ""
        },
        {
          id: 1,
          eventname: "Link",
          datum: "2009-04-06",
          type: "link",
          content: "<h1>Testlink</h1>",
          link: "#/test",
          foto: "erntefest/2011/pic08.jpg",
					minitext: ""
        },
        },
        {
          id: 2,
          eventname: "Download-Link",
          datum: "2009-04-06",
          type: "dlink",
          content: "<h1>Testlink2</h1>",
          link: "/",
          foto: "erntefest/2011/pic08.jpg",
					minitext: ""
        },
        },
        {
          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",
					minitext: ""
        },
        },
        {
          id: 4,
          eventname: "Eventname",
          datum: "2009-04-06",
          type: "html",
          content: "<h1>Test2</h1>",
          link: undefined,
          foto: "erntefest/2011/pic08.jpg",
					minitext: ""
        },
        },
      ];*/
		},
	},
	methods: {
		vorschautext(content: string) {
			const stripped = striptags(content);
			const vorschaulen = 30;
			if (stripped.length > vorschaulen) {
				return stripped.substring(0, vorschaulen) + "...";
			} else {
				return stripped;
			}
		},
		format_date(date: string) {
			const mymoment: Moment = moment(date);

			return mymoment.format("DD.MM.YYYY");
		},
		galerie(content: string) {
			this.$router.push({ path: "/bild/" + content });
		},
	},
	components: {
		Modal,
		MarkdownRender,
	},
};
</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
					v-for="(event, i) in events"
					:key="i"
					class="item features-image col-12 col-md-6 col-lg-3"
					:class="{ active: i % 4 == 0 }"
				>
					<Modal
						v-show="
							openedModals.includes(event.id) &&
							modaltypes.includes(event.type)
						"
						@closemodal="
							openedModals.splice(
								openedModals.indexOf(event.id),
								1
							)
						"
					>
						<MarkdownRender
							: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.minitext) }}
							</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'"
											@click="galerie(event.content)"
											>Fotos ansehen</span
										>
										<span v-else>Mehr</span>
									</button></a
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>
<style></style>