162 lines
4.3 KiB
Vue
162 lines
4.3 KiB
Vue
<script lang="js">
|
|
import Navbar from "../components/Navbar.vue";
|
|
import Embla from "../components/Embla.vue";
|
|
import RitzenbergenLib from "../ritzenbergenlib.ts";
|
|
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
|
|
import $ from "jquery";
|
|
|
|
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");
|
|
let result = [
|
|
{
|
|
src: erntefeste.map((erntefest) =>
|
|
RitzenbergenLib.api(
|
|
"randomimage.php?path=/erntefest/" +
|
|
erntefest +
|
|
"&recursive=1&tn=1&text=" +
|
|
erntefest +
|
|
"&color=white"
|
|
)
|
|
),
|
|
title: "Erntefeste",
|
|
ev: "erntefest",
|
|
},
|
|
{
|
|
src: osterfeuer.map((osterfeuer) =>
|
|
RitzenbergenLib.api(
|
|
"randomimage.php?path=/osterfeuer/" +
|
|
osterfeuer +
|
|
"&recursive=1&tn=1&text=" +
|
|
osterfeuer +
|
|
"&color=white"
|
|
)
|
|
),
|
|
title: "Osterfeuer",
|
|
ev: "osterfeuer",
|
|
},
|
|
{
|
|
src: doppelkopf.map((doppelkopf) =>
|
|
RitzenbergenLib.api(
|
|
"randomimage.php?path=/doppelkopf/" +
|
|
doppelkopf +
|
|
"&recursive=1&tn=1&text=" +
|
|
doppelkopf +
|
|
"&color=white"
|
|
)
|
|
),
|
|
title: "Doppelkopf",
|
|
ev: "doppelkopf",
|
|
},
|
|
{
|
|
src: fussball.map((fussball) =>
|
|
RitzenbergenLib.api(
|
|
"randomimage.php?path=/fussball/" +
|
|
fussball +
|
|
"&recursive=1&tn=1&text=" +
|
|
fussball +
|
|
"&color=white"
|
|
)
|
|
),
|
|
title: "Fußballturniere",
|
|
ev: "fussball",
|
|
},
|
|
];
|
|
|
|
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.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;
|
|
|
|
this.$refs[ev][0].scrollIntoView();
|
|
this.$router.push("/galerie");
|
|
}
|
|
}
|
|
};
|
|
</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"
|
|
:ref="event.ev"
|
|
v-for="event in events"
|
|
>
|
|
<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 />
|
|
<Embla :src="event.src" :links="event.links" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br /><br /><br />
|
|
</section>
|
|
<MyFooter />
|
|
</template>
|
|
<style scoped></style>
|