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

6
app/app2.vue
View File

@@ -1,6 +0,0 @@
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>

14
app/components/Embla.vue
View File

@@ -1,6 +1,5 @@
<script setup> <script setup lang="ts">
import emblaCarouselVue from "embla-carousel-vue"; import emblaCarouselVue from "embla-carousel-vue";
import RitzenbergenLib from "../ritzenbergenlib.ts";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import EmblaItem from "./EmblaItem.vue"; import EmblaItem from "./EmblaItem.vue";
@@ -42,13 +41,22 @@ defineProps({
type: Array, type: Array,
required: true, required: true,
}, },
jahre: {
type: Array,
required: false,
},
fontSize:{
type: Number,
required: false,
default: 100
}
}); });
</script> </script>
<template> <template>
<div class="embla" ref="emblaRef"> <div class="embla" ref="emblaRef">
<div class="embla__container"> <div class="embla__container">
<EmblaItem v-for="el, i in src" :src="el" :link="links[i]" /> <EmblaItem v-for="el, i in src" :src="el" :jahr="jahre?jahre[i]:null" :link="links[i]" :font-size="fontSize"/>
</div> </div>
<button class="embla__button embla__button--prev" @click="prev"> <button class="embla__button embla__button--prev" @click="prev">
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span> <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

27
app/components/EmblaItem.vue
View File

@@ -1,7 +1,5 @@
<script lang="ts"> <script lang="ts" setup>
export default { const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
props: ["src", "link"],
};
</script> </script>
<template> <template>
<div <div
@@ -11,16 +9,31 @@ export default {
<div class="slide-content"> <div class="slide-content">
<div class="item-img"> <div class="item-img">
<div class="item-wrapper"> <div class="item-wrapper">
<RouterLink :to="link"> <NuxtLink :to="link">
<img <img
:src=" :src="
src src
" "
/> />
</RouterLink> <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
{{ jahr }}
</span>
</NuxtLink>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style></style> <style scoped>
.item-wrapper {
position: relative;
}
.jahr-overlay {
color: white;
mix-blend-mode: difference;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>

73
app/components/startseite/Bilderbuch.vue
View File

@@ -1,38 +1,37 @@
<script lang="ts" setup> <script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import {ref} from "vue"; import {ref} from "vue";
async function loadImage(path: string) { // async function loadImage(path: string) {
try{ // try{
const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), { // const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
headers: { // headers: {
"Accept":"image/png" // "Accept":"image/png"
} // }
}); // });
if(!response.ok) return false; // if(!response.ok) return false;
const blob = await response.blob(); // const blob = await response.blob();
return URL.createObjectURL(blob); // return URL.createObjectURL(blob);
} // }
catch(e){ // catch(e){
console.warn(e); // console.warn(e);
} // }
} // }
loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{ // loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
images.value[0]=url; // images.value[0]=url;
}); // });
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{ // loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
images.value[1]=url; // images.value[1]=url;
}); // });
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{ // loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
images.value[2]=url; // images.value[2]=url;
}); // });
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{ // loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
images.value[3]=url; // images.value[3]=url;
}); // });
const images=ref([]); const images=ref(["bild1","bild2","bild3","bild4"]);
</script> </script>
<template> <template>
<section <section
@@ -64,9 +63,9 @@ const images=ref([]);
> >
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<RouterLink to="/galerie/doppelkopf" <NuxtLink to="/galerie/#doppelkopf"
><img :src="images[0]" ><img :src="images[0]"
/></RouterLink> /></NuxtLink>
</div> </div>
</div> </div>
</div> </div>
@@ -75,9 +74,9 @@ const images=ref([]);
> >
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<RouterLink to="/galerie/erntefest" <NuxtLink to="/galerie/#erntefest"
><img :src="images[1]" ><img :src="images[1]"
/></RouterLink> /></NuxtLink>
</div> </div>
</div> </div>
</div> </div>
@@ -86,9 +85,9 @@ const images=ref([]);
> >
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<RouterLink to="/galerie/fussball" <NuxtLink to="/galerie/#fussball"
><img :src="images[2]" ><img :src="images[2]"
/></RouterLink> /></NuxtLink>
</div> </div>
</div> </div>
</div> </div>
@@ -97,9 +96,9 @@ const images=ref([]);
> >
<div class="item-wrapper"> <div class="item-wrapper">
<div class="item-img"> <div class="item-img">
<RouterLink to="/galerie/osterfeuer" <NuxtLink to="/galerie/#osterfeuer"
><img :src="images[3]" ><img :src="images[3]"
/></RouterLink> /></NuxtLink>
</div> </div>
</div> </div>
</div> </div>

26
app/components/startseite/Forms.vue
View File

@@ -5,7 +5,7 @@ import { ref } from "vue";
import Modal from "../Modal.vue"; import Modal from "../Modal.vue";
import { Formular } from "../../dto/formular.dto"; import { Formular } from "../../dto/formular.dto";
const { $gql } = useNuxtApp(); const { $gql, $myfetch } = useNuxtApp();
const forms = await $gql.request<{formulare: Formular[] }>(` const forms = await $gql.request<{formulare: Formular[] }>(`
{ {
@@ -35,26 +35,17 @@ const forms = await $gql.request<{formulare: Formular[] }>(`
).then(data=>data.formulare); ).then(data=>data.formulare);
const props=defineProps({
formid: {
type: [Number, null],
required: false,
default: null
}
});
function submit($event: Event) { function submit($event: Event) {
/*const url = new URL( console.log($event);
RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php") if($event.target==null) return;
);
const formData = new FormData(<HTMLFormElement>$event.target); const formData = new FormData(<HTMLFormElement>$event.target);
fetch(url.toString(), { const body = Object.fromEntries(formData);
$myfetch("/formulare/submit/"+(<HTMLFormElement>$event.target).dataset.formid,{
method: "POST", method: "POST",
body: formData body
}).then(() => { }).then(() => {
init();
values.value={}; values.value={};
});*/ });
} }
const modalOpened=ref<boolean>(false); const modalOpened=ref<boolean>(false);
@@ -102,9 +93,9 @@ const values=ref({});
data-form-title="Form Name" data-form-title="Form Name"
:data-formid="form.id" :data-formid="form.id"
:data-i="i" :data-i="i"
@submit.prevent="submit"
> >
<!-- @submit.prevent="submit" -->
<div v-for="(field, j) in form.fields" :key="j"> <div v-for="(field, j) in form.fields" :key="j">
<label <label
v-if="field.placeholder == null" v-if="field.placeholder == null"
@@ -156,7 +147,6 @@ const values=ref({});
Absenden Absenden
</button> </button>
</div> </div>
<input type="hidden" :value="form.id" name="internalformid" />
</form> </form>
</div> </div>
</div> </div>

2
app/dto

Submodule app/dto updated: 12938c8125...78d9d15d64

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

@@ -1,65 +1,13 @@
<script lang="ts"> <script lang="ts">
import { RouterLink } from "vue-router";
import Navbar from "../components/Navbar.vue"; import Navbar from "../components/Navbar.vue";
import RitzenbergenLib from "../ritzenbergenlib"; import RitzenbergenLib from "../../../ritzenbergenlib";
import Footer from "../components/MyFooter.vue"; 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> </script>
<template> <template>
<Navbar /> <Navbar />
<section class="galerie-section"> Bildvorschau
<!--<section class="galerie-section">
<div class="galerie-container"> <div class="galerie-container">
<h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2> <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
Vorschaubilder <br /> Vorschaubilder <br />
@@ -77,7 +25,7 @@ export default {
</table> </table>
</div> </div>
</section> </section>
<div class="platzhalter" v-if="einereihe"></div> <div class="platzhalter" v-if="einereihe"></div>-->
<Footer></Footer> <Footer></Footer>
</template> </template>
<style scoped> <style scoped>

180
app/pages/galerie.vue
View File

@@ -1,115 +1,82 @@
<script lang="js"> <script lang="ts" setup>
import Navbar from "../components/Navbar.vue"; import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue"; import Embla from "../components/Embla.vue";
import RitzenbergenLib from "../ritzenbergenlib"; import MyFooter from "../components/MyFooter.vue";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
export default { const { $gql } = useNuxtApp();
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",
},
];
return result.map((ev) => { function mapperSrc(event:string, jahr:number){
let jahre = this.get_jahre(ev.ev); return "http://localhost:3000/api/galerie/randomimage/"+event+"/"+jahr;
ev.links = jahre.map((jahr) => { }
return "/bild/" + ev.ev + "/" + jahr; function mapperLink(event:string, jahr:number){
}); return "/bildvorschau/"+event+"/"+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(); const events = await $gql.request<{
this.$router.push("/galerie"); 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> </script>
<template> <template>
<Navbar :links="[ <Navbar :links="[
{ title: 'Erntefest', link: '/galerie/erntefest' }, { title: 'Erntefest', link: '/galerie/#erntefest' },
{ title: 'Osterfeuer', link: '/galerie/osterfeuer' }, { title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
{ title: 'Doppelkopf', link: '/galerie/doppelkopf' }, { title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
{ title: 'Fußballturniere', link: '/galerie/fussball' }, { title: 'Fußballturniere', link: '/galerie/#fussball' },
]" /> ]" />
<br /> <br />
<br /> <br />
@@ -138,8 +105,8 @@ export default {
<br /><br /> <br /><br />
<section <section
class="slider4 mbr-embla cid-u6k7q0yLdW" class="slider4 mbr-embla cid-u6k7q0yLdW"
:ref="event.ev" v-for="event in mappedEvents"
v-for="event in events" :id="event.id"
> >
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
@@ -150,13 +117,14 @@ export default {
</h4> </h4>
<div class="col-12"> <div class="col-12">
<br /> <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> </div>
</div> </div>
<br /><br /><br /> <br /><br /><br />
</section> </section>
<h1 v-if="events.length==0">Keine Internetverbindung!</h1> <h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
<br /><br /><br /> <br /><br /><br />
<MyFooter /> <MyFooter />
</template> </template>

52
app/pages/index.vue
View File

@@ -1,10 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import Navbar from "../components/Navbar.vue"; import Navbar from "../components/Navbar.vue";
import Modal from "../components/Modal.vue";
import Embla from "../components/Embla.vue"; import Embla from "../components/Embla.vue";
import Umgebung from "../components/startseite/Umgebung.vue"; import Umgebung from "../components/startseite/Umgebung.vue";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter import MyFooter from "../components/MyFooter.vue";
import RitzenbergenLib from "../ritzenbergenlib";
import WillkommenText from "../components/startseite/WillkommenText.vue"; import WillkommenText from "../components/startseite/WillkommenText.vue";
import Bilderbuch from "../components/startseite/Bilderbuch.vue"; import Bilderbuch from "../components/startseite/Bilderbuch.vue";
import Forms from "../components/startseite/Forms.vue"; import Forms from "../components/startseite/Forms.vue";
@@ -13,35 +11,7 @@ import Willkommen from "../components/startseite/Willkommen.vue";
import { ref } from "vue"; import { ref } from "vue";
const images=ref([]); 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"]);
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;
// });
</script> </script>
<template> <template>
@@ -50,29 +20,31 @@ async function loadImage(path: string) {
<Willkommen/> <Willkommen/>
<!-- <Events style="margin-top: 120px;"/> --> <Events style="margin-top: 120px;"/>
<Forms/> <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="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<Embla :src="images" <Embla :src="images"
:font-size="49"
:links='[ :links='[
"/galerie/erntefest", "/galerie/#erntefest",
"/galerie/osterfeuer", "/galerie/#osterfeuer",
"/galerie/doppelkopf", "/galerie/#doppelkopf",
"/galerie/fussball", "/galerie/#fussball",
"" ""
]' ]'
:jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
/> />
</div> </div>
</div> </div>
@@ -86,7 +58,7 @@ async function loadImage(path: string) {
<br> <br>
<br> --> <br>
<Umgebung ref="umgebung" id="umgebung" /> <Umgebung ref="umgebung" id="umgebung" />

2
app/plugins/graphql.ts
View File

@@ -3,7 +3,7 @@ import { GraphQLClient } from "graphql-request";
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
const config=useRuntimeConfig(); const config=useRuntimeConfig();
const endpoint = process.server const endpoint = import.meta.server
? config.graphqlEndpoint ? config.graphqlEndpoint
: config.public.graphqlEndpoint : config.public.graphqlEndpoint

15
app/plugins/my-fetch.ts Normal file
View File

@@ -0,0 +1,15 @@
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig()
const myfetch = $fetch.create({
baseURL: import.meta.server ? config.apiBase : config.public.apiBase,
onRequest({ options }) {
},
})
return {
provide: {
myfetch: myfetch,
},
}
})

4
nuxt.config.ts
View File

@@ -11,8 +11,10 @@ export default defineNuxtConfig({
}, },
runtimeConfig: { runtimeConfig: {
graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql", graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql",
apiBase: process.env.API_BASE_INTERNAL || "http://localhost:3000/api",
public: { public: {
graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_PUBLIC || "http://backend:3000/graphql" graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_PUBLIC || "http://backend:3000/graphql",
apiBase: process.env.API_BASE_PUBLIC || "http://backend:3000/api"
} }
}, },