Add bildschau and bildvorschau

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>