Fix Galerie

app/app2.vue

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

app/components/Embla.vue

@@ -1,6 +1,5 @@
-<script setup>
+<script setup lang="ts">
 import emblaCarouselVue from "embla-carousel-vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
 import { onMounted, ref } from "vue";
 import EmblaItem from "./EmblaItem.vue";
 
@@ -42,13 +41,22 @@ defineProps({
     type: Array,
     required: true,
   },
+  jahre: {
+    type: Array,
+    required: false,
+  },
+  fontSize:{
+    type: Number,
+    required: false,
+    default: 100
+  }
 });
 </script>
 
 <template>
   <div class="embla" ref="emblaRef">
     <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>
     <button class="embla__button embla__button--prev" @click="prev">
       <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

app/components/EmblaItem.vue

@@ -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>
 <template>
   <div
@@ -11,16 +9,31 @@ export default {
     <div class="slide-content">
       <div class="item-img">
         <div class="item-wrapper">
-          <RouterLink :to="link">
+          <NuxtLink :to="link">
             <img
               :src="
                 src
               "
             />
-          </RouterLink>
+            <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
+              {{ jahr }}
+            </span>
+          </NuxtLink>
         </div>
       </div>
     </div>
   </div>
 </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>

app/components/startseite/Bilderbuch.vue

@@ -1,38 +1,37 @@
 <script lang="ts" setup>
-import RitzenbergenLib from "../../ritzenbergenlib.ts";
 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>
 <template>
 	<section
@@ -64,9 +63,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/doppelkopf"
+								<NuxtLink to="/galerie/#doppelkopf"
 									><img :src="images[0]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -75,9 +74,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/erntefest"
+								<NuxtLink to="/galerie/#erntefest"
 									><img :src="images[1]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -86,9 +85,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/fussball"
+								<NuxtLink to="/galerie/#fussball"
 									><img :src="images[2]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -97,9 +96,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/osterfeuer"
+								<NuxtLink to="/galerie/#osterfeuer"
 									><img :src="images[3]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>

app/components/startseite/Forms.vue

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

app/pages/bildvorschau/[event]/[year].vue

@@ -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>

app/pages/galerie.vue

@@ -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"; 
-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>
 <template>
   <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 />
@@ -138,8 +105,8 @@ export default {
   <br /><br />
   <section
     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="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>

app/pages/index.vue

@@ -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 MyFooter from "../components/MyFooter.vue"; 
-import RitzenbergenLib from "../ritzenbergenlib";
 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([]);
+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>
 
 <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/#erntefest",
-            "/galerie/osterfeuer",
+            "/galerie/#osterfeuer",
-            "/galerie/doppelkopf",
+            "/galerie/#doppelkopf",
-            "/galerie/fussball",
+            "/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" />

app/plugins/graphql.ts

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

app/plugins/my-fetch.ts

@@ -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,
+    },
+  }
+})

nuxt.config.ts

@@ -11,8 +11,10 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql",
+    apiBase: process.env.API_BASE_INTERNAL || "http://localhost:3000/api",
     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"
     }
   },