ritzenbergen-frontend/app/components/Kloenkasten.vue

<script lang="ts">
import "../assets/css/chatbox.css";
import RitzenbergenLib from "../ritzenbergenlib.ts";
export default {
	name: "Kloenkasten",
	data() {
		return {
			sender: "",
			message: "",
			email: "",
			opened: false,
			reloader: false,
			RitzenbergenLib: RitzenbergenLib,
			msgrefs: [],
		};
	},

	computed: {
		newMsg(): boolean {
			if (this.messages == undefined) return false;
			if (this.opened) this.open();
			const lastOpened: Date = new Date(
				parseInt(localStorage.getItem("kloenkasten_last_opened"))
			);
			const lastMsg = this.messages[this.messages.length - 1];
			if (this.messages && lastMsg.timestamp > lastOpened) {
				return true;
			}
			return false;
		},
	},
	created() {
		if (localStorage.getItem("kloenkasten_last_opened") == null) {
			localStorage.setItem(
				"kloenkasten_last_opened",
				Date.now().toString()
			);
		}
	},
	methods: {
		submitMsg() {
			const url = new URL(
				RitzenbergenLib.RitzenbergenLib.api("/kloenkasten_submit.php")
			);
			url.searchParams.append("sender", this.sender);
			url.searchParams.append("email", this.email);
			url.searchParams.append("message", this.message);

			fetch(url.toString(), { method: "GET" }).then(() => {
				this.reloader = !this.reloader;
				this.sender = "";
				this.email = "";
				this.message = "";
			});
		},
		open() {
			this.opened = true;

			localStorage.setItem(
				"kloenkasten_last_opened",
				Date.now().toString()
			);
			if(this.messages) window.setTimeout(
				() =>
					this.msgrefs[this.msgrefs.length - 1].scrollIntoView({
						behavior: "smooth",
					}),
				50
			);
		},
	},
	asyncComputed: {
		messages: {
			get() {
				const url = new URL(
					RitzenbergenLib.RitzenbergenLib.api(
						"/kloenkasten_nachrichten.php"
					)
				);
				return fetch(url.toString(), { method: "GET" })
						.then((response)=>{
								if(response.ok) return response.json();
								else throw new Error("fetch "+response.status);
						})
					.then((data) =>
						data.map((msg) => {
							msg.timestamp = new Date(msg.timestamp);
							return msg;
						})
					).catch(()=>{
						return false;

					});
			},
			watch: ["reloader"],
		},
	},
};
</script>
<template>
	<button
		id="chatbox-button"
		:class="{ newmsg: newMsg }"
		@click="open"
	>
		<span class="material-symbols-outlined">chat</span>
		
		<span :class="{ newmsgdot: newMsg, newmsgdotinvis: !newMsg }"></span>
	</button>
	<div v-show="opened" id="modalbox">
		<div id="modalbox-header">
			<span class="material-symbols-outlined">chat</span>
			<h3 id="modalbox-title">Klönkasten</h3>
			<span id="close-button" @click="opened = false">&times;</span>
		</div>

		<div id="chat-messages" v-if="messages">
			<div
				v-for="(msg, i) in messages"
				:key="i"
				:ref="(el) => (msgrefs[i] = el)"
			>
				<i>{{ msg.timestamp.toLocaleString() }}</i>
				<div class="message own-message animate__animated">
					<a :href="'mailto:' + msg.email" v-if="msg.email"
						>{{ msg.name }}:
					</a>
					<span class="message-sender animate__animated" v-else
						>{{ msg.name }}:
					</span>
					<span class="message-content animate__animated">{{
						msg.message
					}}</span>
				</div>
			</div>
			<form id="chat-input" @submit.prevent="submitMsg">
				<input
					id="name-input"
					v-model="sender"
					type="text"
					maxlength="64"
					placeholder="Name"
					required
				/>
				<input
					id="email-input"
					v-model="email"
					type="email"
					maxlength="128"
					placeholder="E-Mail"
				/>
				<input
					id="message-input"
					v-model="message"
					type="text"
					placeholder="Nachricht"
					maxlength="1024"
					required
				/>
				<input type="submit" id="send-button" value="Senden" />
			</form>
		</div>
		<div id="chat-messages" v-else>
				<h3>Konnte Server nicht erreichen.</h3>

		</div>
	</div>
</template>
<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

.newmsg {
	animation: newmsgblink 3s infinite;
}

.newmsgdot{
 width: 10px;
 height: 10px;
 background-color: #00ff00;
 position: absolute;
 border-radius: 50%;

 top: 5px;
 right: 5px;
 z-index: 10;

}
	.newmsgdotinvis{
			display: none;
	}

@keyframes newmsgblink {
	0% {
		transform: scale(1) rotate(0deg) translateX(0) translateY(0);
	}
	20% {
		transform: scale(1.5) rotate(0deg) translateX(-10px) translateY(-10px);
	}
	25% {
		transform: scale(1.5) rotate(10deg) translateX(-10px) translateY(-10px);
	}
	30% {
		transform: scale(1.5) rotate(-10deg) translateX(-10px) translateY(-10px);
	}
	35% {
		transform: scale(1.5) rotate(10deg) translateX(-10px) translateY(-10px);
	}
	40% {
		transform: scale(1.5) rotate(-10deg) translateX(-10px) translateY(-10px);
	}
	45% {
		transform: scale(1.5) rotate(0deg) translateX(-10px) translateY(-10px);
	}
}
</style>