Galerie hinzugefügt

src/views/Galerie.vue

@@ -0,0 +1,101 @@
+<script lang="ts">
+import Navbar from "../components/Navbar.vue";
+import Embla from "../components/Embla.vue";
+import RitzenbergenLib from "../ritzenbergenlib.ts";
+import Footer from "../components/Footer.vue";
+import $ from "jquery";
+
+export default {
+  components: {
+    Navbar,
+    Embla,
+    Footer
+  },
+  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");
+      return [
+        {
+          src: erntefeste.map(erntefest => RitzenbergenLib.api("randomimage.php?path=/erntefest/" + erntefest + "&recursive=1&tn=1&text=" + erntefest + "&color=white")),
+          title: "Erntefeste"
+        },
+        {
+          src: osterfeuer.map(osterfeuer => RitzenbergenLib.api("randomimage.php?path=/osterfeuer/" + osterfeuer + "&recursive=1&tn=1&text=" + osterfeuer + "&color=white")),
+          title: "Osterfeuer"
+        },
+        {
+          src: doppelkopf.map(doppelkopf => RitzenbergenLib.api("randomimage.php?path=/doppelkopf/" + doppelkopf + "&recursive=1&tn=1&text=" + doppelkopf + "&color=white")),
+          title: "Doppelkopf"
+        },
+        {
+          src: fussball.map(fussball => RitzenbergenLib.api("randomimage.php?path=/fussball/" + fussball + "&recursive=1&tn=1&text=" + fussball + "&color=white")),
+          title: "Fußballturniere"
+        }
+      ];
+    },
+  },
+  methods: {
+    get_jahre(event){
+      let result;
+      $.ajax(RitzenbergenLib.api("/galerie/get_jahre.php"),{
+        success(data){
+          result=JSON.parse(data);
+        },
+        async: false,
+        data: {event}
+      });
+      return result;
+    }
+  }
+};
+</script>
+<template>
+  <Navbar />
+  <br />
+  <br />
+  <br />
+  <br />
+  <br />
+  <br />
+
+  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-12 col-lg-10">
+          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
+            <strong>Willkommen in der Galerie</strong>
+          </h3>
+          <p class="mbr-text mbr-fonts-style display-7">
+            In unserem Fotoalbum findest du chronisch geordnete
+            Bilder verschiedener Veranstaltungen aus den letzten Jahrzehnten.
+            Einfach auf ein Bild mit einer Jahreszahl raufklicken.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <br /><br />
+  <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="erntefest" v-for="event in events">
+    <div class="container-fluid">
+      <div class="row">
+        <h4
+          class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
+        >
+          <strong>{{ event.title }}</strong>
+        </h4>
+        <div class="col-12">
+          <br>
+          <Embla :src="event.src" />
+        </div>
+        
+      </div>
+    </div>
+    <br /><br /><br />
+  </section>
+  <Footer />
+</template>
+<style scoped></style>