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

60
app/pages/bildvorschau.vue → app/pages/bildvorschau/[event]/[year].vue
View File

@@ -1,65 +1,13 @@
<script lang="ts">
import { RouterLink } from "vue-router";
import Navbar from "../components/Navbar.vue";
import RitzenbergenLib from "../ritzenbergenlib";
import RitzenbergenLib from "../../../ritzenbergenlib";
import Footer from "../components/MyFooter.vue";
import $ from "jquery";
export default {
data() {
return {
ev: this.$route.params.ev,
jahr: this.$route.params.jahr,
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
};
},
computed: {
bilder() {
let result: any[] = [];
$.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),{
async: false,
success(data: string) {
result=JSON.parse(data);
},
method: "GET",
data: {
ev: this.ev,
jahr: this.jahr
}
});
return result;
},
bildersplitted() {
let result: any[] = [];
this.bilder.forEach((element, i) => {
if (i % 5 == 0) {
result.push([]);
}
result[result.length - 1].push(element);
});
return result;
},
einereihe() {
return this.bilder.length <= 5;
},
},
components: {
RouterLink,
Navbar,
Footer,
},
methods: {
capitalizeFirstLetter(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
},
};
</script>
<template>
<Navbar />
<section class="galerie-section">
Bildvorschau
<!--<section class="galerie-section">
<div class="galerie-container">
<h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
Vorschaubilder <br />
@@ -77,7 +25,7 @@ export default {
</table>
</div>
</section>
<div class="platzhalter" v-if="einereihe"></div>
<div class="platzhalter" v-if="einereihe"></div>-->
<Footer></Footer>
</template>
<style scoped>

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>

52
app/pages/index.vue
View File

@@ -1,10 +1,8 @@
<script lang="ts" setup>
import Navbar from "../components/Navbar.vue";
import Modal from "../components/Modal.vue";
import Embla from "../components/Embla.vue";
import Umgebung from "../components/startseite/Umgebung.vue";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
import RitzenbergenLib from "../ritzenbergenlib";
import MyFooter from "../components/MyFooter.vue";
import WillkommenText from "../components/startseite/WillkommenText.vue";
import Bilderbuch from "../components/startseite/Bilderbuch.vue";
import Forms from "../components/startseite/Forms.vue";
@@ -13,35 +11,7 @@ import Willkommen from "../components/startseite/Willkommen.vue";
import { ref } from "vue";
const images=ref([]);
async function loadImage(path: string) {
try{
const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
headers: {
"Accept":"image/png"
}
});
if(!response.ok) return false;
const blob = await response.blob();
return URL.createObjectURL(blob);
}catch(e){
console.warn(e);
}
}
// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
// images.value[0]=url;
// });
// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
// images.value[1]=url;
// });
// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
// images.value[2]=url;
// });
// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
// images.value[3]=url;
// });
const images=ref(["http://localhost:3000/api/galerie/randomimage/erntefest","http://localhost:3000/api/galerie/randomimage/osterfeuer","http://localhost:3000/api/galerie/randomimage/doppelkopf","http://localhost:3000/api/galerie/randomimage/fussball","http://localhost:3000/api/galerie/bild/andere/0/hauptfoto.jpg"]);
</script>
<template>
@@ -50,29 +20,31 @@ async function loadImage(path: string) {
<Willkommen/>
<!-- <Events style="margin-top: 120px;"/> -->
<Events style="margin-top: 120px;"/>
<Forms/>
<!-- <Bilderbuch/> -->
<Bilderbuch/>
<!-- <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<Embla :src="images"
:font-size="49"
:links='[
"/galerie/erntefest",
"/galerie/osterfeuer",
"/galerie/doppelkopf",
"/galerie/fussball",
"/galerie/#erntefest",
"/galerie/#osterfeuer",
"/galerie/#doppelkopf",
"/galerie/#fussball",
""
]'
:jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
/>
</div>
</div>
@@ -86,7 +58,7 @@ async function loadImage(path: string) {
<br>
<br> -->
<br>
<Umgebung ref="umgebung" id="umgebung" />