R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
R40fendt
2025-12-22 19:03:23 +01:00
parent a1e25d8dca
commit 5f85a75521
8 changed files with 277 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -5,13 +5,15 @@
TODO: TODO:
- Addhit - Addhit
- Galerie (Kommentare fixen, Rest geht)
- BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?) - BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
- Startseite Event Markdown-HTML Support
- Footer, Texte? - Footer, Texte?
- Navbar Hamburger Menu
- Klönkasten ungelesen Punkt (localStorage) - Klönkasten ungelesen Punkt (localStorage)
- Login Formular flexibleres Backend - Login Formular flexibleres Backend
- Modal Close Button fixen
- Typos fixen - Typos fixen
- Admin Panel - Admin Panel
Funktioniert komplett:
- Galerie
Bei der Migration beachten:
- neue galerie-kommentare Tabelle

30
eslint.config.js Normal file
View File

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

7
package.json
View File

@@ -22,6 +22,7 @@
"moment": "^2.30.1", "moment": "^2.30.1",
"sloc": "^0.3.2", "sloc": "^0.3.2",
"striptags": "^3.2.0", "striptags": "^3.2.0",
"vscode-langservers-extracted": "^4.10.0",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-async-computed": "^4.0.1", "vue-async-computed": "^4.0.1",
"vue-renderer-markdown": "^0.0.62", "vue-renderer-markdown": "^0.0.62",
@@ -30,9 +31,15 @@
"devDependencies": { "devDependencies": {
"@tauri-apps/cli": "^2", "@tauri-apps/cli": "^2",
"@types/jquery": "^3.5.32", "@types/jquery": "^3.5.32",
"@types/markdown-it": "^14.1.2",
"@vitejs/plugin-vue": "^5.2.1", "@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", "sass-embedded": "^1.86.3",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.50.0",
"vite": "^6.0.3", "vite": "^6.0.3",
"vue-tsc": "^2.1.10" "vue-tsc": "^2.1.10"
} }

4
src/App.vue
View File

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

6
src/assets/modal.css
View File

@@ -42,13 +42,15 @@
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
height: 70%; height: 70%;
overflow-y: scroll;
margin-top: 5%; margin-top: 5%;
max-width: 800px; max-width: 800px;
padding-top: 50px; padding-top: 50px;
position: relative; position: relative;
} }
.modal-inner-content {
overflow-y: scroll;
}
.close, .closeBtn { .close, .closeBtn {
color: #4CAF50; color: #4CAF50;
font-size: 28px; font-size: 28px;
@@ -100,4 +102,4 @@
.modal-content { .modal-content {
z-index: 1500; z-index: 1500;
} }

6
src/components/Modal.vue
View File

@@ -17,8 +17,10 @@ export default {
<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> <div class="modal-inner-content">
<span v-html="content" ref="contentspan"></span> <slot></slot>
<span v-html="content" ref="contentspan"></span>
</div>
</div> </div>
</div> </div>
</template> </template>

23
src/components/startseite/Events.vue
View File

@@ -4,12 +4,12 @@ import striptags from "striptags";
import moment, { Moment } from "moment"; import moment, { Moment } from "moment";
import Modal from "../Modal.vue"; import Modal from "../Modal.vue";
import $ from "jquery"; import $ from "jquery";
import MarkdownRender from 'vue-renderer-markdown' import MarkdownRender from "vue-renderer-markdown";
import 'katex/dist/katex.min.css' import "katex/dist/katex.min.css";
export default { export default {
data() { data() {
let openedModals: number[] = []; const openedModals: number[] = [];
return { return {
openedModals, openedModals,
modaltypes: ["text", "html"], modaltypes: ["text", "html"],
@@ -18,7 +18,7 @@ export default {
}, },
computed: { computed: {
events() { events() {
let result: any[] = []; let result: Array<any> = [];
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), { $.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
crossDomain: true, crossDomain: true,
@@ -91,8 +91,8 @@ export default {
}, },
methods: { methods: {
vorschautext(content: string) { vorschautext(content: string) {
let stripped = striptags(content); const stripped = striptags(content);
let vorschaulen = 30; const vorschaulen = 30;
if (stripped.length > vorschaulen) { if (stripped.length > vorschaulen) {
return stripped.substring(0, vorschaulen) + "..."; return stripped.substring(0, vorschaulen) + "...";
} else { } else {
@@ -100,7 +100,7 @@ export default {
} }
}, },
format_date(date: string) { format_date(date: string) {
let mymoment: Moment = moment(date); const mymoment: Moment = moment(date);
return mymoment.format("DD.MM.YYYY"); return mymoment.format("DD.MM.YYYY");
}, },
@@ -110,7 +110,7 @@ export default {
}, },
components: { components: {
Modal, Modal,
MarkdownRender MarkdownRender,
}, },
}; };
</script> </script>
@@ -136,9 +136,10 @@ export default {
</h5> </h5>
<div <div
v-for="(event, i) in events"
:key="i"
class="item features-image col-12 col-md-6 col-lg-3" class="item features-image col-12 col-md-6 col-lg-3"
:class="{ active: i % 4 == 0 }" :class="{ active: i % 4 == 0 }"
v-for="(event, i) in events"
> >
<Modal <Modal
v-show=" v-show="
@@ -152,7 +153,9 @@ export default {
) )
" "
> >
<MarkdownRender :content="event.content" :options="{'allowHtml': true}"/> <MarkdownRender
:content="event.content"
/>
</Modal> </Modal>
<div class="item-wrapper"> <div class="item-wrapper">

354
src/views/Bildschau.vue
View File

@@ -5,214 +5,282 @@ import RitzenbergenLib from "../ritzenbergenlib";
import $ from "jquery"; import $ from "jquery";
export default { export default {
components: { components: {
Navbar, Navbar,
MyFooter, // Geändert von Footer auf MyFooter MyFooter, // Geändert von Footer auf MyFooter
}, },
data() { data() {
return { return {
bild: parseInt(<string>this.$route.params.bild), bild: parseInt(<string>this.$route.params.bild),
ev: this.$route.params.ev, ev: this.$route.params.ev,
jahr: this.$route.params.jahr, jahr: this.$route.params.jahr,
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib, RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
}; username: "",
}, kommentar: "",
computed: { reloader: false
bilder() { };
let result: any[] = []; },
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(
async: false, RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),
success(data: string) { {
result = JSON.parse(data); async: false,
}, success(data: string) {
method: "GET", result = JSON.parse(data);
data: { },
ev: this.ev, method: "GET",
jahr: this.jahr, 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> </script>
<template> <template>
<Navbar /> <Navbar />
<div class="main"> <div class="main">
<section class="flex-card-wrapper"> <section class="flex-card-wrapper">
<article <article
class="flex-card-container lazy-loading" class="flex-card-container lazy-loading"
:class="{ :class="{
active: bild == i, active: bild == i,
unactive: (bild==i-1)||(bild==i+1) unactive: bild == i - 1 || bild == i + 1,
}" }"
:style="{ :style="{
backgroundImage: backgroundImage:
'url('+RitzenbergenLib.get_img(bildel)+')', 'url(' + RitzenbergenLib.get_img(bildel) + ')',
}" }"
v-for="(bildel, i) in bilder" v-for="(bildel, i) in bilder"
@click="bild=i" :key="i"
></article> @click="bild = i"
></article>
</section> </section>
<br /><br /> <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 <input
class="username-input" class="username-input"
type="text" type="text"
name="username" name="username"
placeholder="Name" placeholder="Name"
maxlength="32" maxlength="32"
required required
/> v-model="username"
<br /> />
<input <br />
class="kommentar-input" <input
type="text" class="kommentar-input"
name="kommentar" type="text"
placeholder="Kommentar" name="kommentar"
maxlength="1024" placeholder="Kommentar"
required maxlength="1024"
/> required
<input class="absenden-button" type="submit" value="Absenden" /> v-model="kommentar"
</form> />
</div> <input class="absenden-button" type="submit" value="Absenden" />
<br /><br /> </form>
<MyFooter></MyFooter> </div>
<br /><br />
<MyFooter></MyFooter>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../assets/bildschau/style.sass"; @import "../assets/bildschau/style.sass";
.roboto-thin { .roboto-thin {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
} }
.roboto-light { .roboto-light {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
} }
.roboto-regular { .roboto-regular {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
.roboto-medium { .roboto-medium {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
.roboto-bold { .roboto-bold {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
.roboto-black { .roboto-black {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
} }
.roboto-thin-italic { .roboto-thin-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
} }
.roboto-light-italic { .roboto-light-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
} }
.roboto-regular-italic { .roboto-regular-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
.roboto-medium-italic { .roboto-medium-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
} }
.roboto-bold-italic { .roboto-bold-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
} }
.roboto-black-italic { .roboto-black-italic {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 900; font-weight: 900;
font-style: italic; font-style: italic;
} }
.kommentare { .kommentare {
flex-direction: column; flex-direction: column;
margin: 10px; margin: 10px;
width: 80%; width: 80%;
text-align: center; text-align: center;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
.formular { .formular {
display: left; display: left;
flex-direction: row; flex-direction: row;
align-items: left; align-items: left;
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.username-input, .username-input,
.kommentar-input { .kommentar-input {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
align-items: left; align-items: left;
border-radius: 3px; border-radius: 3px;
} }
.absenden-button { .absenden-button {
background-color: #0073b7; background-color: #0073b7;
color: white; color: white;
padding: 10px 20px; padding: 10px 20px;
border: 1px solid #0073b7; border: 1px solid #0073b7;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
.absenden-button:hover { .absenden-button:hover {
background-color: #00578b; background-color: #00578b;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.kommentare { .kommentare {
flex-direction: column; flex-direction: column;
} }
.username-input, .username-input,
.kommentar-input { .kommentar-input {
width: 50%; width: 50%;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
} }
} }
.main { .main {
margin-top: 150px; margin-top: 150px;
} }
</style> </style>