ritzenbergen-frontend/app/pages/Bildschau.vue

<script lang="ts">
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
import Navbar from "../components/Navbar.vue";
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,
			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,
					},
				}
			);

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

.roboto-light {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.roboto-medium {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.roboto-black {
	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;
}

.roboto-light-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;
}

.roboto-medium-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;
}

.roboto-black-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;
}

.formular {
	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;
}

.absenden-button {
	background-color: #0073b7;
	color: white;
	padding: 10px 20px;
	border: 1px solid #0073b7;
	border-radius: 5px;
	cursor: pointer;
}

.absenden-button:hover {
	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;
	}
}

.main {
	margin-top: 150px;
}
</style>