Modal closelink hinzugefügt, Events werden jetzt von der API geholt

package-lock.json

@@ -20,6 +20,7 @@
       },
       "devDependencies": {
         "@tauri-apps/cli": "^2",
+        "@types/jquery": "^3.5.32",
         "@vitejs/plugin-vue": "^5.2.1",
         "sass-embedded": "^1.86.3",
         "typescript": "~5.6.2",
@@ -1034,6 +1035,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
+      "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
+      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
+    "@types/jquery": "^3.5.32",
     "@vitejs/plugin-vue": "^5.2.1",
     "sass-embedded": "^1.86.3",
     "typescript": "~5.6.2",

src/components/Modal.vue

@@ -1,19 +1,27 @@
 <script lang="ts">
-    export default {
+export default {
-        emits: ['closemodal'],
+  emits: ["closemodal"],
-        props: ["content"]
+  props: ["content"],
-    }
+  mounted() {
+    (<HTMLElement>this.$refs.contentspan)
+      .querySelectorAll(".closelink")
+      .forEach((el) => {
+        el.addEventListener("click", () => {
+          this.$emit("closemodal");
+        });
+      });
+  },
+};
 </script>
 <template>
-        <div class="modal">
+  <div class="modal">
-            <div class="modal-content">
+    <div class="modal-content">
-                <button class="closeBtn" @click="$emit('closemodal')">x</button>
+      <button class="closeBtn" @click="$emit('closemodal')">x</button>
-                <slot></slot>
+      <slot></slot>
-                <span v-html="content"></span>
+      <span v-html="content" ref="contentspan"></span>
-            </div>
+    </div>
-        </div>
+  </div>
 </template>
 <style lang="css" scoped>
-    @import "../assets/modal";
+@import "../assets/modal";
-
+</style>
-</style>

src/components/startseite/Events.vue

@@ -3,6 +3,8 @@ import RitzenbergenLib from "../../ritzenbergenlib.ts";
 import striptags from "striptags";
 import moment, { Moment } from "moment";
 import Modal from "../Modal.vue";
+import $ from "jquery";
+
 export default {
   data() {
     let openedModals: number[] = [];
@@ -14,7 +16,20 @@ export default {
   },
   computed: {
     events() {
-      return [
+      let result: any[]=[];
+
+      $.ajax(RitzenbergenLib.api("get_events.php"),{
+        crossDomain: true,
+        async: false,
+        success: function (data:string) {
+          result = JSON.parse(data);
+        },
+      });
+      console.log(result);
+      return result;
+      /*
+      Beispiel-Event-Array:
+      [
         {
           id: 0,
           eventname: "Eventname",
@@ -60,7 +75,7 @@ export default {
           link: undefined,
           foto: "erntefest/2011/pic08.jpg",
         },
-      ];
+      ];*/
     },
   },
   methods:{
@@ -74,11 +89,9 @@ export default {
         }
     },
     format_date(date: string){
-        let mymoment:Moment=moment();
+        let mymoment:Moment=moment(date);
-        mymoment.set("year",parseInt(date.split("-")[0]));
+        
-        mymoment.set("month",parseInt(date.split("-")[2])-1);
+        return mymoment.format("DD.MM.YYYY");
-        mymoment.set("day",parseInt(date.split("-")[1]));
-        return mymoment.format("DD.MM.YYYY")
     }
   },
     components: {

src/jquery.d.ts

@@ -0,0 +1 @@
+declare module 'jquery';

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://api.ritzenbergen.de"+path;
+    if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
-    else return "http://api.ritzenbergen.de/"+path;
+    else return "http://192.168.188.38/Jonas/ritzenbergenapi/"+path;
   }
 }