From daa05dcfa6b6a148ddaa8af71fb4da859a0f070b Mon Sep 17 00:00:00 2001
From: R40fendt <r40test311@gmail.com>
Date: Mon, 21 Apr 2025 17:59:36 +0200
Subject: [PATCH] Bildvorschau fertig gemacht

---
 src/views/Bildvorschau.vue | 271 +++++++++++++++++++------------------
 1 file changed, 142 insertions(+), 129 deletions(-)

diff --git a/src/views/Bildvorschau.vue b/src/views/Bildvorschau.vue
index 3568c87..65fe6e9 100644
--- a/src/views/Bildvorschau.vue
+++ b/src/views/Bildvorschau.vue
@@ -1,146 +1,159 @@
 <script lang="ts">
-import { RouterLink } from 'vue-router';
-import Navbar from '../components/Navbar.vue';
-import RitzenbergenLib from '../ritzenbergenlib';
-import Footer from '../components/Footer.vue';
-    export default {
-        data(){
-            return {
-                ev: this.$route.params.ev,
-                jahr: this.$route.params.jahr,
-                RitzenbergenLib
-            }
+import { RouterLink } from "vue-router";
+import Navbar from "../components/Navbar.vue";
+import RitzenbergenLib from "../ritzenbergenlib";
+import Footer from "../components/Footer.vue";
+import $ from "jquery";
+
+export default {
+  data() {
+    return {
+      ev: this.$route.params.ev,
+      jahr: this.$route.params.jahr,
+      RitzenbergenLib,
+    };
+  },
+  computed: {
+    bilder() {
+      let result: any[] = [];
+
+      $.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
+        async: false,
+        success(data: string) {
+          result=JSON.parse(data);
         },
-        computed: {
-            bilder() {
-                return [
-                    "/erntefest/2011/pic01.jpg",
-                    "/erntefest/2011/pic02.jpg",
-                    "/erntefest/2011/pic03.jpg",
-                    "/erntefest/2011/pic04.jpg",
-                    "/erntefest/2011/pic05.jpg",
-                ];
-            },
-            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);
-            }
+        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">
+  <Navbar />
+  <section class="galerie-section">
     <div class="galerie-container">
-        <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
-        Vorschaubilder <br>
-        {{ bilder.length }} Bilder
-        <table>
-            <tbody>
-                <tr v-for="row in bildersplitted">
-                    <td v-for="column in row"><RouterLink to=""><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"></RouterLink></td>
-                </tr>
-
-            </tbody>
-                   
-          </table>
-      </div>
-      </section>
-      <div class="platzhalter" v-if="einereihe"></div>
-      <Footer></Footer>
+      <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
+      Vorschaubilder <br />
+      {{ bilder.length }} Bilder
+      <table>
+        <tbody>
+          <tr v-for="row in bildersplitted">
+            <td v-for="column in row">
+              <RouterLink to=""
+                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
+              /></RouterLink>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+  <div class="platzhalter" v-if="einereihe"></div>
+  <Footer></Footer>
 </template>
 <style scoped>
 .galerie-container {
-            width: 80%; /* Breite der Galerie anpassen */
-            margin: 0 auto; /* Galerie in der Mitte ausrichten */
-        }
+  width: 80%; /* Breite der Galerie anpassen */
+  margin: 0 auto; /* Galerie in der Mitte ausrichten */
+}
 
-        table {
-        width: 100%; /* Tabelle über die gesamte Breite des Containers */
-        border-collapse: collapse; /* Zellränder entfernen */
-        }
+table {
+  width: 100%; /* Tabelle über die gesamte Breite des Containers */
+  border-collapse: collapse; /* Zellränder entfernen */
+}
 
-        th, td {
-        padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
-        text-align: center; /* Text in der Mitte ausrichten */
-        }
+th,
+td {
+  padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
+  text-align: center; /* Text in der Mitte ausrichten */
+}
 
-        img {
-        width: 70%; /* Breite der Vorschaufotos */
-        height: auto; /* Automatisches Seitenverhältnis bewahren */
-        margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
-        border-radius: 15px;
-        }
+img {
+  width: 70%; /* Breite der Vorschaufotos */
+  height: auto; /* Automatisches Seitenverhältnis bewahren */
+  margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
+  border-radius: 15px;
+}
 
-        @media (max-width: 768px) { 
+@media (max-width: 768px) {
   /* Smartphones (ca. Portrait-Modus) */
-        table {
-          width: 100%; /* Galerie über die gesamte Breite */
-        }
-
-        tr {
-          display: flex; /* Bilder in einer Reihe anordnen */
-          flex-wrap: wrap; /* Zeilenumbruch aktivieren */
-        }
-
-        td {
-          flex: 1 0 50%; /* Zellenbreite gleichmäßig aufteilen */
-          padding: 10px; /* Randabstand verringern */
-        }
-
-        img {
-          width: 100%; /* Bilder über die gesamte Zellenbreite */
-          height: auto; /* Seitenverhältnis bewahren */
-          margin: 0; /* Bildränder entfernen */
-        }
-      }
-
-    @media (min-width: 769px) and (max-width: 1024px) {
-      /* Tablets (ca. Portrait-Modus) */
-      table {
-        width: 80%; /* Galerie etwas schmaler */
-      }
-
-      tr {
-        display: flex; /* Bilder in 3 Reihen anordnen */
-        flex-wrap: wrap;
-      }
-
-      td {
-        flex: 1 0 33%; /* Zellenbreite gleichmäßig aufteilen */
-        padding: 15px; /* Randabstand etwas erhöhen */
-      }
-
-      img {
-        width: 100%; /* Bilder über die gesamte Zellenbreite */
-        height: auto; /* Seitenverhältnis bewahren */
-        margin: 0; /* Bildränder entfernen */
-      }
+  table {
+    width: 100%; /* Galerie über die gesamte Breite */
   }
-  .galerie-section{
-    margin-top: 150px;
-    margin-bottom: 150px;
+
+  tr {
+    display: flex; /* Bilder in einer Reihe anordnen */
+    flex-wrap: wrap; /* Zeilenumbruch aktivieren */
   }
-  .platzhalter{
-    height: 150px;
+
+  td {
+    flex: 1 0 50%; /* Zellenbreite gleichmäßig aufteilen */
+    padding: 10px; /* Randabstand verringern */
   }
-</style>
\ No newline at end of file
+
+  img {
+    width: 100%; /* Bilder über die gesamte Zellenbreite */
+    height: auto; /* Seitenverhältnis bewahren */
+    margin: 0; /* Bildränder entfernen */
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  /* Tablets (ca. Portrait-Modus) */
+  table {
+    width: 80%; /* Galerie etwas schmaler */
+  }
+
+  tr {
+    display: flex; /* Bilder in 3 Reihen anordnen */
+    flex-wrap: wrap;
+  }
+
+  td {
+    flex: 1 0 33%; /* Zellenbreite gleichmäßig aufteilen */
+    padding: 15px; /* Randabstand etwas erhöhen */
+  }
+
+  img {
+    width: 100%; /* Bilder über die gesamte Zellenbreite */
+    height: auto; /* Seitenverhältnis bewahren */
+    margin: 0; /* Bildränder entfernen */
+  }
+}
+.galerie-section {
+  margin-top: 150px;
+  margin-bottom: 150px;
+}
+.platzhalter {
+  height: 150px;
+}
+</style>