Add Nuxt

app/components/startseite/Events.vue

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import RitzenbergenLib from "../../ritzenbergenlib";
+import Modal from "../Modal.vue";
+import MarkdownRender from "vue-renderer-markdown";
+import "katex/dist/katex.min.css";
+import Forms from "./Forms.vue";
+import { ref } from "vue";
+import { EventType, MyEvent } from "../../dto/event.dto.js";
+
+const initdone=ref(false);
+
+const events = ref<MyEvent[]>([]);
+
+const openedModals=ref<number[]>([]);
+
+const modaltypes=[EventType.html,EventType.markdown];
+
+async function init() {
+	
+	events.value=(await RitzenbergenLib.graphqlClient.request<{events: MyEvent[]}>
+(`{
+	events {
+		id
+		eventname
+		type
+		minitext
+		datum
+		content
+		link
+		foto
+		formular
+	}
+}`)).events;
+	console.log(events.value);
+
+	
+}
+
+init().then(()=>{
+
+	initdone.value=true;
+
+});
+
+function format_date(date: string){
+	return new Date(date).toDateString();
+}
+
+function vorschautext(str: string){
+	return str;
+}
+
+</script>
+<template>
+	<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG" v-if="initdone">
+		<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" v-if="events">
+				<!-- 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
+							v-if="event.type == EventType.markdown"
+							:content="event.content"
+						/>
+						<div v-else v-html="event.content"></div>
+						<Forms v-if="event.formular" :formid="event.formular"/>
+					</Modal>
+
+					<div class="item-wrapper">
+						<div class="item-img mb-3">
+							<img :src="RitzenbergenLib.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 class="row" v-else>
+					<h1>Keine Internetverbindung!</h1>
+
+			</div>
+		</div>
+	</section>
+</template>
+<style></style>