Add bildschau and bildvorschau

app/pages/bildschau/[event]/[year]/[i].vue

@@ -1,28 +1,71 @@
 <script lang="ts">
-import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
-import Navbar from "../components/Navbar.vue";
-import RitzenbergenLib from "../ritzenbergenlib";
-import $ from "jquery";
+import type { JahrMitBild } from "~/dto/galerie.dto";
+import MyFooter from "../../../../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
+import Navbar from "../../../../components/Navbar.vue";
+import RitzenbergenLib from "../../../../ritzenbergenlib";
+const route=useRoute();
+
+const {$gql} = useNuxtApp();
+
 
 export default {
 	components: {
 		Navbar,
 		MyFooter, // Geändert von Footer auf MyFooter
 	},
+	onMounted(){
+		console.log($gql.request<{bilder:JahrMitBild[]}>(`
+{
+	bilder(event: "${route.params.ev}", jahr: ${route.params.jahr}) {
+
+		jahr
+		bild
+	
+	}
+}
+		`));
+		
+	},
 	data() {
+		
+
 		return {
-			bild: parseInt(<string>this.$route.params.bild),
-			ev: this.$route.params.ev,
-			jahr: this.$route.params.jahr,
+			bild: parseInt(<string>route.params.i),
+			ev: route.params.ev,
+			jahr: route.params.jahr,
 			RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
 			username: "",
 			kommentar: "",
-			reloader: false
+			reloader: false,
+			bilder: [],
 		};
 	},
 	asyncComputed: {
 		kommentare: {
 			get() {
+							},
+			default: null,
+			watch: ["bild", "ev", "jahr","reloader"],
+		},
+		bilder: {
+			get(){
+				// erwartete Rückgabe: ["/erntefest/2011/pi01.jpg"]
+				return $gql.request(`
+{
+	bilder(event: "${route.params.event}", jahr: ${route.params.year})
+}
+
+`).then(()=>{
+
+				});
+			},
+			default: [],
+			watch: []
+
+		}
+	},
+	methods: {
+		getKommentare(){
 				const url = new URL(
 					RitzenbergenLib.RitzenbergenLib.api(
 						"/galerie/get_kommentare.php"
@@ -34,34 +77,8 @@ export default {
 				return fetch(url, {
 					method: "GET",
 				}).then((response) => response.json());
-			},
-			default: null,
-			watch: ["bild", "ev", "jahr","reloader"],
-		},
-	},
-	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;
 		},
-	},
-	methods: {
 		kommentarsubmit() {
 			const url = new URL(
 				RitzenbergenLib.RitzenbergenLib.api(
@@ -153,7 +170,7 @@ export default {
 	<MyFooter></MyFooter>
 </template>
 <style scoped lang="scss">
-@import "../assets/bildschau/style.sass";
+@import "../../../../assets/bildschau/style.sass";
 
 .roboto-thin {
 	font-family: "Roboto", sans-serif;

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

@@ -1,31 +1,76 @@
-<script lang="ts">
-import Navbar from "../components/Navbar.vue";
-import RitzenbergenLib from "../../../ritzenbergenlib";
-import Footer from "../components/MyFooter.vue";
+<script lang="ts" setup>
+import Navbar from "../../../components/Navbar.vue";
+import Footer from "../../../components/MyFooter.vue";
+import type { JahrMitBild } from "~/dto/galerie.dto";
+
+const route=useRoute();
+
+const {event, year} = route.params;
+
+function capitalizeFirstLetter(str: string){
+
+  if (str.length === 0) return str;
+  return str[0].toUpperCase() + str.slice(1);
+
+}
+
+const {$gql} = useNuxtApp();
+
+const bilder: string[]=(await $gql.request<{bilder:JahrMitBild[]}>(`
+{
+  bilder(event: "${event}", jahr: ${year}) {
+    jahr
+    bild
+  }
+}
+`)).bilder[0].bild;
+
+function toTable<T>(input: T[], columns: number = 5): T[][] {
+    if (columns <= 0) {
+        throw new Error("columns must be > 0");
+    }
+
+    const result: T[][] = [];
+
+    for (let i = 0; i < input.length; i += columns) {
+        const row = input.slice(i, i + columns);
+        result.push(row);
+    }
+
+    return result;
+}
+
+function getImg(filename){
+
+  return 'http://localhost:3000/api/galerie/bild/'+event+'/'+year+'/'+filename;
+
+}
+
+const bildersplitted=toTable<string>(bilder);
+console.log(bildersplitted);;
 
 </script>
 <template>
   <Navbar />
-  Bildvorschau
-  <!--<section class="galerie-section">
+  <section class="galerie-section">
     <div class="galerie-container">
-      <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
+      <h2>{{ capitalizeFirstLetter(<string>event) }} {{ year }}</h2>
       Vorschaubilder <br />
       {{ bilder.length }} Bilder
       <table>
         <tbody>
           <tr v-for="row, i in bildersplitted">
             <td v-for="column, j in row">
-              <RouterLink :to="jahr+'/'+(i*5+j).toString()"
-                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
-              /></RouterLink>
+              <NuxtLink :to="'/bildschau/'+event+'/'+year+'/'+(i*5+j)"
+                ><img :src="getImg(column)" alt="Vorschaubild"
+              /></NuxtLink>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   </section>
-  <div class="platzhalter" v-if="einereihe"></div>-->
+  <div class="platzhalter" v-if="bilder.length<=5"></div> <!-- Eine Reihe -->
   <Footer></Footer>
 </template>
 <style scoped>