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

4
src/App.vue
View File

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

6
src/assets/modal.css
View File

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

6
src/components/Modal.vue
View File

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

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

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

354
src/views/Bildschau.vue
View File

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