Modal Close Button behoben, Events verbessert, Galerie fertiggestellt, ESLint Config hinzugefügt

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

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
+);

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"
   }

src/App.vue

@@ -10,7 +10,7 @@ export default {
 
 <template>
   <!-- Haupt-Component -->
-    <RouterView :key="$route.fullPath"/>
+  <RouterView :key="$route.fullPath" />
 </template>
 
 <style lang="scss">

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;

src/components/Modal.vue

@@ -17,10 +17,12 @@ export default {
   <div class="modal">
     <div class="modal-content">
       <button class="closeBtn" @click="$emit('closemodal')">x</button>
+			<div class="modal-inner-content">
 					<slot></slot>
 					<span v-html="content" ref="contentspan"></span>
 			</div>
     </div>
+  </div>
 </template>
 <style lang="css" scoped>
 @import "../assets/modal";

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">

src/views/Bildschau.vue

@@ -15,13 +15,37 @@ export default {
 			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"), {
+			$.ajax(
+				RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),
+				{
 					async: false,
 					success(data: string) {
 						result = JSON.parse(data);
@@ -31,11 +55,36 @@ export default {
 						ev: this.ev,
 						jahr: this.jahr,
 					},
-      });
+				}
+			);
 
 			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>
@@ -46,21 +95,38 @@ export default {
 				class="flex-card-container lazy-loading"
 				:class="{
 					active: bild == i,
-            unactive: (bild==i-1)||(bild==i+1)
+					unactive: bild == i - 1 || bild == i + 1,
 				}"
 				:style="{
 					backgroundImage:
-            'url('+RitzenbergenLib.get_img(bildel)+')',
+						'url(' + RitzenbergenLib.get_img(bildel) + ')',
 				}"
 				v-for="(bildel, i) in bilder"
-        @click="bild=i"
+				:key="i"
+				@click="bild = i"
 			></article>
-      
 		</section>
 		<br /><br />
-    <div class="kommentare"></div>
+		<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">
+		<form class="formular" method="post" @submit.prevent="kommentarsubmit">
 			<input
 				class="username-input"
 				type="text"
@@ -68,6 +134,7 @@ export default {
 				placeholder="Name"
 				maxlength="32"
 				required
+				v-model="username"
 			/>
 			<br />
 			<input
@@ -77,6 +144,7 @@ export default {
 				placeholder="Kommentar"
 				maxlength="1024"
 				required
+				v-model="kommentar"
 			/>
 			<input class="absenden-button" type="submit" value="Absenden" />
 		</form>