Add Form Support

app/pages/galerie.vue

@@ -0,0 +1,163 @@
+<script lang="js">
+import Navbar from "../components/Navbar.vue";
+import Embla from "../components/Embla.vue";
+import RitzenbergenLib from "../ritzenbergenlib";
+import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
+
+export default {
+  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) => {
+        let jahre = this.get_jahre(ev.ev);
+        ev.links = jahre.map((jahr) => {
+          return "/bild/" + ev.ev + "/" + 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();
+      this.$router.push("/galerie");
+    }
+  }
+};
+</script>
+<template>
+  <Navbar :links="[
+    { title: 'Erntefest', link: '/galerie/erntefest' },
+    { title: 'Osterfeuer', link: '/galerie/osterfeuer' },
+    { title: 'Doppelkopf', link: '/galerie/doppelkopf' },
+    { title: 'Fußballturniere', link: '/galerie/fussball' },
+  ]" />
+  <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"
+    :ref="event.ev"
+    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" :links="event.links" />
+        </div>
+      </div>
+    </div>
+    <br /><br /><br />
+  </section>
+	<h1 v-if="events.length==0">Keine Internetverbindung!</h1>
+    <br /><br /><br />
+  <MyFooter />
+</template>
+<style scoped></style>