132 lines
3.6 KiB
Vue
132 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import Navbar from "../components/Navbar.vue";
|
|
import Embla from "../components/Embla.vue";
|
|
import MyFooter from "../components/MyFooter.vue";
|
|
|
|
const { $gql } = useNuxtApp();
|
|
|
|
function mapperSrc(event:string, jahr:number){
|
|
return "http://localhost:3000/api/galerie/randomimage/"+event+"/"+jahr;
|
|
}
|
|
function mapperLink(event:string, jahr:number){
|
|
return "/bildvorschau/"+event+"/"+jahr;
|
|
}
|
|
|
|
const events = await $gql.request<{
|
|
erntefest: Array<{jahr:number}>,
|
|
osterfeuer: Array<{jahr:number}>,
|
|
fussball: Array<{jahr:number}>,
|
|
doppelkopf: Array<{jahr:number}>
|
|
}>(`
|
|
{
|
|
erntefest: bilder(event: "erntefest") {
|
|
jahr
|
|
}
|
|
|
|
osterfeuer: bilder(event: "osterfeuer") {
|
|
jahr
|
|
}
|
|
|
|
doppelkopf: bilder(event: "doppelkopf") {
|
|
jahr
|
|
}
|
|
|
|
fussball: bilder(event: "fussball") {
|
|
jahr
|
|
}
|
|
}
|
|
|
|
`);
|
|
|
|
const mappedEvents=[
|
|
{
|
|
"title":"Erntefest",
|
|
"src": events.erntefest.map((event)=>mapperSrc("erntefest",event.jahr)),
|
|
"links": events.erntefest.map((event)=>mapperLink("erntefest",event.jahr)),
|
|
"id":"erntefest",
|
|
"jahre": events.erntefest.map((event)=>event.jahr)
|
|
},
|
|
{
|
|
"title":"Osterfeuer",
|
|
"src": events.osterfeuer.map((event)=>mapperSrc("osterfeuer",event.jahr)),
|
|
"links": events.osterfeuer.map((event)=>mapperLink("osterfeuer",event.jahr)),
|
|
"id":"osterfeuer",
|
|
"jahre": events.osterfeuer.map((ev)=>ev.jahr),
|
|
},
|
|
{
|
|
"title":"Preisdoppelkopf",
|
|
"src": events.doppelkopf.map((event)=>mapperSrc("doppelkopf",event.jahr)),
|
|
"links": events.doppelkopf.map((event)=>mapperLink("doppelkopf",event.jahr)),
|
|
"id":"doppelkopf",
|
|
"jahre": events.doppelkopf.map((ev)=>ev.jahr),
|
|
},
|
|
{
|
|
"title":"Fußballturniere",
|
|
"src": events.fussball.map((event)=>mapperSrc("fussball",event.jahr)),
|
|
"links": events.fussball.map((event)=>mapperLink("fussball",event.jahr)),
|
|
"id":"fussball",
|
|
"jahre": events.fussball.map((ev)=>ev.jahr),
|
|
},
|
|
]
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<Navbar :links="[
|
|
{ title: 'Erntefest', link: '/galerie/#erntefest' },
|
|
{ title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
|
|
{ title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
|
|
{ title: 'Fußballturniere', link: '/galerie/#fussball' },
|
|
]" />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
|
|
<section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-12 col-lg-10">
|
|
<h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
|
|
<strong>Willkommen in der Galerie</strong>
|
|
</h3>
|
|
<p class="mbr-text mbr-fonts-style display-7">
|
|
In unserem Fotoalbum findest du chronisch geordnete Bilder
|
|
verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
|
|
auf ein Bild mit einer Jahreszahl raufklicken.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<br /><br />
|
|
<section
|
|
class="slider4 mbr-embla cid-u6k7q0yLdW"
|
|
v-for="event in mappedEvents"
|
|
:id="event.id"
|
|
>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<h4
|
|
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
|
|
>
|
|
<strong>{{ event.title }}</strong>
|
|
</h4>
|
|
<div class="col-12">
|
|
<br />
|
|
<!-- src: Link zum Randomimage, links: Link zur Bildschau -->
|
|
<Embla :src="event.src" :links="event.links" :jahre="event.jahre" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br /><br /><br />
|
|
</section>
|
|
<h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
|
|
<br /><br /><br />
|
|
<MyFooter />
|
|
</template>
|
|
<style scoped></style>
|