From 5f85a755215b700878bae66e5760d6352707d176 Mon Sep 17 00:00:00 2001
From: R40fendt <r40test311@gmail.com>
Date: Mon, 22 Dec 2025 19:03:23 +0100
Subject: [PATCH] =?UTF-8?q?Modal=20Close=20Button=20behoben,=20Events=20ve?=
 =?UTF-8?q?rbessert,=20Galerie=20fertiggestellt,=20ESLint=20Config=20hinzu?=
 =?UTF-8?q?gef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  10 +-
 eslint.config.js                     |  30 +++
 package.json                         |   7 +
 src/App.vue                          |   4 +-
 src/assets/modal.css                 |   6 +-
 src/components/Modal.vue             |   6 +-
 src/components/startseite/Events.vue |  23 +-
 src/views/Bildschau.vue              | 354 ++++++++++++++++-----------
 8 files changed, 277 insertions(+), 163 deletions(-)
 create mode 100644 eslint.config.js

diff --git a/README.md b/README.md
index d38744a..3c46b76 100644
--- a/README.md
+++ b/README.md
@@ -5,13 +5,15 @@
 TODO:
 
 - Addhit
-- Galerie (Kommentare fixen, Rest geht)
 - BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
-- Startseite Event Markdown-HTML Support
 - Footer, Texte?
-- Navbar Hamburger Menu
 - Klönkasten ungelesen Punkt (localStorage)
 - Login Formular flexibleres Backend
-- Modal Close Button fixen
 - Typos fixen
 - Admin Panel
+
+Funktioniert komplett:
+- Galerie
+
+Bei der Migration beachten:
+- neue galerie-kommentare Tabelle
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..de8d9c7
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,30 @@
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default typescriptEslint.config(
+	{ ignores: ["*.d.ts", "**/coverage", "**/dist"] },
+	{
+		extends: [
+			eslint.configs.recommended,
+			...typescriptEslint.configs.recommended,
+			...eslintPluginVue.configs["flat/recommended"],
+		],
+		files: ["**/*.{ts,vue}"],
+		languageOptions: {
+			ecmaVersion: "latest",
+			sourceType: "module",
+			globals: globals.browser,
+			parserOptions: {
+				parser: typescriptEslint.parser,
+			},
+		},
+		rules: {
+			// your rules
+			"@typescript-eslint/no-explicit-any": "warn",
+		},
+	},
+	eslintConfigPrettier
+);
diff --git a/package.json b/package.json
index 5347484..2dfbdee 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "moment": "^2.30.1",
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
+    "vscode-langservers-extracted": "^4.10.0",
     "vue": "^3.5.13",
     "vue-async-computed": "^4.0.1",
     "vue-renderer-markdown": "^0.0.62",
@@ -30,9 +31,15 @@
   "devDependencies": {
     "@tauri-apps/cli": "^2",
     "@types/jquery": "^3.5.32",
+    "@types/markdown-it": "^14.1.2",
     "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^16.5.0",
     "sass-embedded": "^1.86.3",
     "typescript": "~5.6.2",
+    "typescript-eslint": "^8.50.0",
     "vite": "^6.0.3",
     "vue-tsc": "^2.1.10"
   }
diff --git a/src/App.vue b/src/App.vue
index e1b684d..673fdf8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,8 +9,8 @@ export default {
 </script>
 
 <template>
-    <!-- Haupt-Component -->
-    <RouterView :key="$route.fullPath"/>
+  <!-- Haupt-Component -->
+  <RouterView :key="$route.fullPath" />
 </template>
 
 <style lang="scss">
diff --git a/src/assets/modal.css b/src/assets/modal.css
index 45496dd..75e572f 100755
--- a/src/assets/modal.css
+++ b/src/assets/modal.css
@@ -42,13 +42,15 @@
     border-radius: 10px;
     width: 100%;
     height: 70%;
-    overflow-y: scroll;
     margin-top: 5%;
     max-width: 800px;
     padding-top: 50px;
     position: relative;
   }
 
+	.modal-inner-content {
+    overflow-y: scroll;
+	}
   .close, .closeBtn {
     color: #4CAF50;
     font-size: 28px;
@@ -100,4 +102,4 @@
 
   .modal-content {
     z-index: 1500;
-  }
\ No newline at end of file
+  }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a8f2413..f679c1d 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -17,8 +17,10 @@ export default {
   <div class="modal">
     <div class="modal-content">
       <button class="closeBtn" @click="$emit('closemodal')">x</button>
-      <slot></slot>
-      <span v-html="content" ref="contentspan"></span>
+			<div class="modal-inner-content">
+					<slot></slot>
+					<span v-html="content" ref="contentspan"></span>
+			</div>
     </div>
   </div>
 </template>
diff --git a/src/components/startseite/Events.vue b/src/components/startseite/Events.vue
index e7466c9..e7e8518 100644
--- a/src/components/startseite/Events.vue
+++ b/src/components/startseite/Events.vue
@@ -4,12 +4,12 @@ import striptags from "striptags";
 import moment, { Moment } from "moment";
 import Modal from "../Modal.vue";
 import $ from "jquery";
-import MarkdownRender from 'vue-renderer-markdown'
-import 'katex/dist/katex.min.css'
+import MarkdownRender from "vue-renderer-markdown";
+import "katex/dist/katex.min.css";
 
 export default {
 	data() {
-		let openedModals: number[] = [];
+		const openedModals: number[] = [];
 		return {
 			openedModals,
 			modaltypes: ["text", "html"],
@@ -18,7 +18,7 @@ export default {
 	},
 	computed: {
 		events() {
-			let result: any[] = [];
+			let result: Array<any> = [];
 
 			$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
 				crossDomain: true,
@@ -91,8 +91,8 @@ export default {
 	},
 	methods: {
 		vorschautext(content: string) {
-			let stripped = striptags(content);
-			let vorschaulen = 30;
+			const stripped = striptags(content);
+			const vorschaulen = 30;
 			if (stripped.length > vorschaulen) {
 				return stripped.substring(0, vorschaulen) + "...";
 			} else {
@@ -100,7 +100,7 @@ export default {
 			}
 		},
 		format_date(date: string) {
-			let mymoment: Moment = moment(date);
+			const mymoment: Moment = moment(date);
 
 			return mymoment.format("DD.MM.YYYY");
 		},
@@ -110,7 +110,7 @@ export default {
 	},
 	components: {
 		Modal,
-		MarkdownRender
+		MarkdownRender,
 	},
 };
 </script>
@@ -136,9 +136,10 @@ export default {
 				</h5>
 
 				<div
+					v-for="(event, i) in events"
+					:key="i"
 					class="item features-image col-12 col-md-6 col-lg-3"
 					:class="{ active: i % 4 == 0 }"
-					v-for="(event, i) in events"
 				>
 					<Modal
 						v-show="
@@ -152,7 +153,9 @@ export default {
 							)
 						"
 					>
-					<MarkdownRender :content="event.content" :options="{'allowHtml': true}"/>
+						<MarkdownRender
+							:content="event.content"
+						/>
 					</Modal>
 
 					<div class="item-wrapper">
diff --git a/src/views/Bildschau.vue b/src/views/Bildschau.vue
index f84de06..962a2a2 100644
--- a/src/views/Bildschau.vue
+++ b/src/views/Bildschau.vue
@@ -5,214 +5,282 @@ import RitzenbergenLib from "../ritzenbergenlib";
 import $ from "jquery";
 
 export default {
-  components: {
-    Navbar,
-    MyFooter, // Geändert von Footer auf MyFooter
-  },
-  data() {
-    return {
-      bild: parseInt(<string>this.$route.params.bild),
-      ev: this.$route.params.ev,
-      jahr: this.$route.params.jahr,
-      RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
-    };
-  },
-  computed: {
-    bilder() {
-      let result: any[] = [];
+	components: {
+		Navbar,
+		MyFooter, // Geändert von Footer auf MyFooter
+	},
+	data() {
+		return {
+			bild: parseInt(<string>this.$route.params.bild),
+			ev: this.$route.params.ev,
+			jahr: this.$route.params.jahr,
+			RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
+			username: "",
+			kommentar: "",
+			reloader: false
+		};
+	},
+	asyncComputed: {
+		kommentare: {
+			get() {
+				const url = new URL(
+					RitzenbergenLib.RitzenbergenLib.api(
+						"/galerie/get_kommentare.php"
+					)
+				);
+				url.searchParams.append("ev", this.ev);
+				url.searchParams.append("jahr", this.jahr);
+				url.searchParams.append("bild", this.bild);
+				return fetch(url, {
+					method: "GET",
+				}).then((response) => response.json());
+			},
+			default: null,
+			watch: ["bild", "ev", "jahr","reloader"],
+		},
+	},
+	computed: {
+		bilder() {
+			let result: any[] = [];
 
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"), {
-        async: false,
-        success(data: string) {
-          result = JSON.parse(data);
-        },
-        method: "GET",
-        data: {
-          ev: this.ev,
-          jahr: this.jahr,
-        },
-      });
+			$.ajax(
+				RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),
+				{
+					async: false,
+					success(data: string) {
+						result = JSON.parse(data);
+					},
+					method: "GET",
+					data: {
+						ev: this.ev,
+						jahr: this.jahr,
+					},
+				}
+			);
 
-      return result;
-    },
-  },
+			return result;
+		},
+	},
+	methods: {
+		kommentarsubmit() {
+			const url = new URL(
+				RitzenbergenLib.RitzenbergenLib.api(
+					"/galerie/submit_kommentar.php"
+				)
+			);
+
+			url.searchParams.append("ev", this.ev);
+			url.searchParams.append("jahr", this.jahr);
+			url.searchParams.append("username", this.username);
+			url.searchParams.append("kommentar", this.kommentar);
+			url.searchParams.append("bild", this.bild);
+
+			fetch(url, {
+				method: "GET",
+			}).then(() => {
+				this.username = "";
+				this.kommentar = "";
+				this.reloader=!this.reloader;
+				window.alert("Kommentar wurde abgeschickt!");
+			});
+		},
+	},
 };
 </script>
 <template>
-  <Navbar />
-  <div class="main">
-    <section class="flex-card-wrapper">
-      <article
-        class="flex-card-container lazy-loading"
-        :class="{
-            active: bild == i,
-            unactive: (bild==i-1)||(bild==i+1)
-        }"
-        :style="{
-          backgroundImage:
-            'url('+RitzenbergenLib.get_img(bildel)+')',
-        }"
-        v-for="(bildel, i) in bilder"
-        @click="bild=i"
-      ></article>
-      
-    </section>
-    <br /><br />
-    <div class="kommentare"></div>
+	<Navbar />
+	<div class="main">
+		<section class="flex-card-wrapper">
+			<article
+				class="flex-card-container lazy-loading"
+				:class="{
+					active: bild == i,
+					unactive: bild == i - 1 || bild == i + 1,
+				}"
+				:style="{
+					backgroundImage:
+						'url(' + RitzenbergenLib.get_img(bildel) + ')',
+				}"
+				v-for="(bildel, i) in bilder"
+				:key="i"
+				@click="bild = i"
+			></article>
+		</section>
+		<br /><br />
+		<div class="kommentare">
+			<div v-if="kommentare == null">Lade Kommentare...</div>
+			<div v-else-if="kommentare.length == 0">
+				Es gibt noch keine Kommentare.
+			</div>
+			<div v-else>
+				<div
+					v-for="(kommentar, i) in kommentare"
+					:key="i"
+					class="kommentar"
+				>
+					<strong class="roboto-medium">{{
+						kommentar.username
+					}}</strong
+					>: {{ kommentar.kommentar }}
+				</div>
+			</div>
+		</div>
 
-    <form class="formular" method="post">
-      <input
-        class="username-input"
-        type="text"
-        name="username"
-        placeholder="Name"
-        maxlength="32"
-        required
-      />
-      <br />
-      <input
-        class="kommentar-input"
-        type="text"
-        name="kommentar"
-        placeholder="Kommentar"
-        maxlength="1024"
-        required
-      />
-      <input class="absenden-button" type="submit" value="Absenden" />
-    </form>
-  </div>
-  <br /><br />
-  <MyFooter></MyFooter>
+		<form class="formular" method="post" @submit.prevent="kommentarsubmit">
+			<input
+				class="username-input"
+				type="text"
+				name="username"
+				placeholder="Name"
+				maxlength="32"
+				required
+				v-model="username"
+			/>
+			<br />
+			<input
+				class="kommentar-input"
+				type="text"
+				name="kommentar"
+				placeholder="Kommentar"
+				maxlength="1024"
+				required
+				v-model="kommentar"
+			/>
+			<input class="absenden-button" type="submit" value="Absenden" />
+		</form>
+	</div>
+	<br /><br />
+	<MyFooter></MyFooter>
 </template>
 <style scoped lang="scss">
 @import "../assets/bildschau/style.sass";
 
 .roboto-thin {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 100;
+	font-style: normal;
 }
 
 .roboto-light {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 300;
+	font-style: normal;
 }
 
 .roboto-regular {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 400;
+	font-style: normal;
 }
 
 .roboto-medium {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 500;
+	font-style: normal;
 }
 
 .roboto-bold {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 700;
+	font-style: normal;
 }
 
 .roboto-black {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: normal;
+	font-family: "Roboto", sans-serif;
+	font-weight: 900;
+	font-style: normal;
 }
 
 .roboto-thin-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 100;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 100;
+	font-style: italic;
 }
 
 .roboto-light-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 300;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 300;
+	font-style: italic;
 }
 
 .roboto-regular-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 400;
+	font-style: italic;
 }
 
 .roboto-medium-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 500;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 500;
+	font-style: italic;
 }
 
 .roboto-bold-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 700;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 700;
+	font-style: italic;
 }
 
 .roboto-black-italic {
-  font-family: "Roboto", sans-serif;
-  font-weight: 900;
-  font-style: italic;
+	font-family: "Roboto", sans-serif;
+	font-weight: 900;
+	font-style: italic;
 }
 
 .kommentare {
-  flex-direction: column;
-  margin: 10px;
-  width: 80%;
-  text-align: center;
-  font-family: "Roboto", sans-serif;
+	flex-direction: column;
+	margin: 10px;
+	width: 80%;
+	text-align: center;
+	font-family: "Roboto", sans-serif;
 }
 
 .formular {
-  display: left;
-  flex-direction: row;
-  align-items: left;
-  margin: 10px;
-  border-radius: 5px;
+	display: left;
+	flex-direction: row;
+	align-items: left;
+	margin: 10px;
+	border-radius: 5px;
 }
 
 .username-input,
 .kommentar-input {
-  width: 100%;
-  margin-bottom: 10px;
-  padding: 10px;
-  border: 1px solid #ddd;
-  align-items: left;
-  border-radius: 3px;
+	width: 100%;
+	margin-bottom: 10px;
+	padding: 10px;
+	border: 1px solid #ddd;
+	align-items: left;
+	border-radius: 3px;
 }
 
 .absenden-button {
-  background-color: #0073b7;
-  color: white;
-  padding: 10px 20px;
-  border: 1px solid #0073b7;
-  border-radius: 5px;
-  cursor: pointer;
+	background-color: #0073b7;
+	color: white;
+	padding: 10px 20px;
+	border: 1px solid #0073b7;
+	border-radius: 5px;
+	cursor: pointer;
 }
 
 .absenden-button:hover {
-  background-color: #00578b;
+	background-color: #00578b;
 }
 
 @media (max-width: 768px) {
-  .kommentare {
-    flex-direction: column;
-  }
-  .username-input,
-  .kommentar-input {
-    width: 50%;
-    margin-bottom: 10px;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-  }
+	.kommentare {
+		flex-direction: column;
+	}
+	.username-input,
+	.kommentar-input {
+		width: 50%;
+		margin-bottom: 10px;
+		padding: 10px;
+		border: 1px solid #ddd;
+		border-radius: 3px;
+	}
 }
 
 .main {
-  margin-top: 150px;
+	margin-top: 150px;
 }
 </style>