R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Galerie

Browse Source
This commit is contained in:
Jonas
2026-05-05 12:29:21 +02:00
parent 75b50fb9ef
commit 8f8decf263
12 changed files with 187 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
app/pages/galerie.vue
View File

@@ -1,115 +1,82 @@
<script lang="js">
<script lang="ts" setup>
import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue";
import RitzenbergenLib from "../ritzenbergenlib";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
import MyFooter from "../components/MyFooter.vue";
export default {
components: {
Navbar,
Embla,
MyFooter, // Geändert von Footer auf MyFooter
},
computed: {
events() {
let erntefeste = this.get_jahre("erntefest");
let osterfeuer = this.get_jahre("osterfeuer");
let doppelkopf = this.get_jahre("doppelkopf");
let fussball = this.get_jahre("fussball");
if(erntefeste==undefined) return [];
let result = [
{
src: erntefeste.map((erntefest) =>
RitzenbergenLib.RitzenbergenLib.api(
"randomimage.php?path=/erntefest/" +
erntefest +
"&recursive=1&tn=1&text=" +
erntefest +
"&color=white"
)
),
title: "Erntefeste",
ev: "erntefest",
},
{
src: osterfeuer.map((osterfeuer) =>
RitzenbergenLib.RitzenbergenLib.api(
"randomimage.php?path=/osterfeuer/" +
osterfeuer +
"&recursive=1&tn=1&text=" +
osterfeuer +
"&color=white"
)
),
title: "Osterfeuer",
ev: "osterfeuer",
},
{
src: doppelkopf.map((doppelkopf) =>
RitzenbergenLib.RitzenbergenLib.api(
"randomimage.php?path=/doppelkopf/" +
doppelkopf +
"&recursive=1&tn=1&text=" +
doppelkopf +
"&color=white"
)
),
title: "Doppelkopf",
ev: "doppelkopf",
},
{
src: fussball.map((fussball) =>
RitzenbergenLib.RitzenbergenLib.api(
"randomimage.php?path=/fussball/" +
fussball +
"&recursive=1&tn=1&text=" +
fussball +
"&color=white"
)
),
title: "Fußballturniere",
ev: "fussball",
},
];
const { $gql } = useNuxtApp();
return result.map((ev) => {
let jahre = this.get_jahre(ev.ev);
ev.links = jahre.map((jahr) => {
return "/bild/" + ev.ev + "/" + jahr;
});
return ev;
});
},
},
methods: {
get_jahre(event) {
let result;
$.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_jahre.php"), {
success(data) {
result = JSON.parse(data);
},
async: false,
data: { event },
});
return result;
},
},
mounted(){
if(this.$route.params.ev){
let ev = this.$route.params.ev;
if(this.$refs[ev]) this.$refs[ev][0].scrollIntoView();
this.$router.push("/galerie");
}
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' },
{ title: 'Erntefest', link: '/galerie/#erntefest' },
{ title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
{ title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
{ title: 'Fußballturniere', link: '/galerie/#fussball' },
]" />
<br />
<br />
@@ -138,8 +105,8 @@ export default {
<br /><br />
<section
class="slider4 mbr-embla cid-u6k7q0yLdW"
:ref="event.ev"
v-for="event in events"
v-for="event in mappedEvents"
:id="event.id"
>
<div class="container-fluid">
<div class="row">
@@ -150,13 +117,14 @@ export default {
</h4>
<div class="col-12">
<br />
<Embla :src="event.src" :links="event.links" />
<!-- 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="events.length==0">Keine Internetverbindung!</h1>
<h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
<br /><br /><br />
<MyFooter />
</template>