163 lines
3.7 KiB
Vue
163 lines
3.7 KiB
Vue
<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>
|