Galerie hinzugefügt

package-lock.json

@@ -14,6 +14,7 @@
         "jarallax": "^2.2.1",
         "jquery": "^3.7.1",
         "moment": "^2.30.1",
+        "sloc": "^0.3.2",
         "striptags": "^3.2.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -1244,6 +1245,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1268,6 +1275,17 @@
       "dev": true,
       "license": "MIT/X11"
     },
+    "node_modules/cli-table": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.11.tgz",
+      "integrity": "sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==",
+      "dependencies": {
+        "colors": "1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/colorjs.io": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -1275,6 +1293,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+      "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1560,6 +1596,30 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.39.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz",
@@ -1995,6 +2055,21 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sloc": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sloc/-/sloc-0.3.2.tgz",
+      "integrity": "sha512-tnB+gi6TiFpt3qmCGfaV+78dfKwLiH5HRohkW+PnJYHNAcEdk408uxWG+F/3pu4w1eyCO2NC5CpZKuiyMac5GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.4",
+        "cli-table": "^0.3.11",
+        "commander": "^11.0.0",
+        "readdirp": "^3.3.0"
+      },
+      "bin": {
+        "sloc": "bin/sloc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "jarallax": "^2.2.1",
     "jquery": "^3.7.1",
     "moment": "^2.30.1",
+    "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

src/components/Footer.vue

@@ -33,7 +33,7 @@ export default {
                   <br />
                   Bei dieser Seite handelt es sich um eine private Homepage der
                   Dorfgemeinschaft Amedorf & Ritzenbergen.
-                  <br /><br />y<
+                  <br /><br />
                   © Front-End und Web Design: Mathis Kuhlenkamp <br />
                   © Back-End und Datenbanken: Tom Kuhlenkamp, Jonas Kuhlenkamp
                   <br />

src/components/Navbar.vue

@@ -1,5 +1,8 @@
 <script lang="ts">
-export default {};
+import RouterLink from "vue-router";
+export default {
+  name: "Navbar"
+};
 </script>
 <template>
   <section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
@@ -7,19 +10,19 @@ export default {};
       <div class="container">
         <div class="navbar-brand">
           <span class="navbar-logo">
-            <a href="/">
+            <RouterLink to="/">
               <img
                 class="navbar-logo-img"
                 src="../assets/RitzenbergenOrtsschild.png"
                 style="height: 60px; padding-left: 5px"
               />
-            </a>
+            </RouterLink>
           </span>
           <span class="navbar-caption-wrap">
-            <a
+            <RouterLink
               class="navbar-caption text-black display-4"
-              href="http://ritzenbergen.de"
+              to="/"
-              >Amedorf & Ritzenbergen</a
+              >Amedorf & Ritzenbergen</RouterLink
             >
           </span>
         </div>
@@ -47,12 +50,13 @@ export default {};
               <a class="nav-link link text-black display-4" href="#news-1-u6k7q0xyDG">Termine</a>
             </li>-->
             <li class="nav-item">
-              <a
+              <RouterLink
                 class="nav-link link text-black display-4"
-                href="galerie.php"
+                to="/galerie"
                 aria-expanded="false"
-                >Galerie</a
+                >
-              >
+                Galerie
+              </RouterLink>
             </li>
             <li class="nav-item">
               <a

src/ritzenbergenlib.ts

@@ -4,7 +4,7 @@ export default class RitzenbergenLib {
     else return "http://bilder.ritzenbergen.de/"+mypath;
   }
   static api(path:string){
-    if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
+    if(path.startsWith("/")) return "http://api.ritzenbergen.de"+path;
-    else return "http://192.168.188.38/Jonas/ritzenbergenapi/"+path;
+    else return "http://api.ritzenbergen.de/"+path;
   }
 }

src/router/index.ts

@@ -1,11 +1,13 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createWebHashHistory, createRouter } from 'vue-router'
+import Galerie from "../views/Galerie.vue";
 
 
 const routes = [
-  { path: '/', component: () => import('../views/Main.vue') }
+  { path: '/', component: () => import('../views/Main.vue') },
+  { path: '/galerie', component: Galerie }
 ]
 
 export default createRouter({
-  history: createMemoryHistory(),
+  history: createWebHashHistory(),
   routes,
 });

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>