Klönkasten und BuLi-Tipp

README.md

@@ -4,16 +4,17 @@
 
 TODO:
 
-- Addhit
-- BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
 - Footer, Texte?
 - Klönkasten ungelesen Punkt (localStorage)
 - Login Formular flexibleres Backend
-- Typos fixen
 - Admin Panel
 
 Funktioniert komplett:
 - Galerie
+- Events
+- BuLi-Tipp
 
 Bei der Migration beachten:
 - neue galerie-kommentare Tabelle
+- addhit URL in der index.html anpassen
+- Event-Datenbank anpassen

index.html

@@ -19,6 +19,8 @@
     </noscript>
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+		<script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php">
+		</script>
 
   </head>
 

src/App.vue

@@ -1,9 +1,11 @@
 <script lang="js">
 import { RouterView } from 'vue-router';
+import Kloenkasten from "./components/Kloenkasten.vue";
 
 export default {
     components: {
-        RouterView
+        RouterView,
+				Kloenkasten
     }
 }
 </script>
@@ -11,6 +13,8 @@ export default {
 <template>
   <!-- Haupt-Component -->
   <RouterView :key="$route.fullPath" />
+	
+	<Kloenkasten />
 </template>
 
 <style lang="scss">

src/assets/css/chatbox.css

@@ -41,7 +41,6 @@
       padding: 20px;
       border-radius: 5px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-      display: none; /* Modalbox wird zunächst ausgeblendet */
       z-index: 100;
     }
 

src/components/Kloenkasten.vue

@@ -0,0 +1,205 @@
+<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 (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()
+			);
+			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) => response.json())
+					.then((data) =>
+						data.map((msg) => {
+							msg.timestamp = new Date(msg.timestamp);
+							return msg;
+						})
+					);
+			},
+			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">
+			<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>
+</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>

src/components/MyFooter.vue

@@ -25,6 +25,7 @@ export default {
           <ul class="header-menu">
             <li class="header-menu-item mbr-fonts-style display-5">
               <Modal v-show="aboutVisible" @closemodal="aboutVisible = false">
+							<br>
                 <h1>Über</h1>
                 <p>
                   Ritzenbergen ist ein kleines Dorf der Gemeinde Blender und
@@ -32,10 +33,10 @@ export default {
                   <br />
                   <br />
                   Bei dieser Seite handelt es sich um eine private Homepage der
-                  Dorfgemeinschaft Amedorf & Ritzenbergen.
+                  Dorfgemeinschaft Amedorf &amp; Ritzenbergen.
                   <br /><br />
-                  © Front-End und Web Design: Mathis Kuhlenkamp <br />
-                  © Back-End und Datenbanken: Tom Kuhlenkamp, Jonas Kuhlenkamp
+                  © Front-End und Web Design: Mathis Kuhlenkamp, Jonas Kuhlenkamp <br />
+                  © Back-End und Datenbanken: Jonas Kuhlenkamp
                   <br />
                   <br />
                   

src/components/bulitipp/Paarungsergebnisse.vue

@@ -1,81 +1,161 @@
 <script lang="js">
 import RitzenbergenLib from "../../ritzenbergenlib.ts";
 import Modal from "../Modal.vue";
-    export default {
-        props: {
-            ergebnisse: {
-                type: Array,
-                required: true
-            },
-            maxspieltag: {
-                type: Number,
-                required: true
-            }
-        },
-        data(){
-          return {
-            RitzenbergenLib,
-            showmodal: false,
-            modalindex: 0
-          }
-        },
-        components: {
-          Modal
-        },
-        methods: {
-          getbulipunktesrc(spieltag,paarung){ 
-            
-            return RitzenbergenLib.RitzenbergenLib.api("/bulitipp/buli-punkte.php?name=null&detail=spiel&spieltag="+spieltag+"&paarung="+paarung);
-          }
-        }
-    }
+export default {
+	props: {
+		ergebnisse: {
+			type: Array,
+			required: true,
+		},
+		maxspieltag: {
+			type: Number,
+			required: true,
+		},
+		tipps: {
+			type: Array,
+			required: true,
+		},
+		users: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			RitzenbergenLib,
+			showmodal: false,
+			modalindex: 0,
+		};
+	},
+	components: {
+		Modal,
+	},
+	methods: {
+		ps(heim, gast, ergebnisHeim, ergebnisGast) {
+			if(heim == ergebnisHeim && gast == ergebnisGast) {
+				return 3;
+			}
+			const tippDiff = heim - gast;
+			const ergebnisDiff = ergebnisHeim - ergebnisGast;
+			if(tippDiff === ergebnisDiff) {
+				return 2;
+			}
+			if(heim > gast && ergebnisHeim > ergebnisGast) {
+				return 1;
+			}
+			if(heim < gast && ergebnisHeim < ergebnisGast) {
+				return 1;
+			}
+			return 0;
+		},
+	},
+};
 </script>
 <template>
-<section class="buli-results scroll-x" id="buliresults-section">
-    <br /><br />
-    <h2>Paarungsergebnisse {{ maxspieltag }}. Spieltag</h2>
-    <Modal
-    v-if="showmodal" @closemodal="showmodal = false">
-    <iframe :src="getbulipunktesrc(maxspieltag,ergebnisse[modalindex].paarung.id)" frameborder="0"></iframe>
-  </Modal>
-    <table>
-      <tbody>
-        <tr>
-          <td>Paarung</td>
-          <td>Ergebnis</td>
-        </tr>
-        <tr v-for="ergebnis,i in ergebnisse">
-          <td @click="showmodal = true; modalindex = i">
-          
-            <span class="as-link">
-              <span class="teams">
-                <span class="team">
-                  <img :src='RitzenbergenLib.RitzenbergenLib.api("/bulitipp/get-image.php?team="+ergebnis.paarung.heim)' alt="" />
-                  <p>{{ ergebnis.paarung.heim }}</p>
-                </span>
-                <span class="vs"></span>
-                <span class="team">
-                  <p>{{ ergebnis.paarung.gast }}</p>
-                  <img :src='RitzenbergenLib.RitzenbergenLib.api("/bulitipp/get-image.php?team="+ergebnis.paarung.gast)' alt="" />
-                </span>
-              </span>
-            </span>
-          </td>
-          <td>
-            <p>{{ ergebnis.heim }} - {{ ergebnis.gast }}</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+	<section class="buli-results scroll-x" id="buliresults-section">
+		<br /><br />
+		<h2>Paarungsergebnisse {{ maxspieltag }}. Spieltag</h2>
+		<Modal v-if="showmodal" @closemodal="showmodal = false">
+			<h1 class="detailansichtSchriftart">
+				Detailansicht {{ maxspieltag }}. Spieltag
+			</h1>
+			<h2 class="detailansichtSchriftart">
+				{{ ergebnisse[modalindex].paarung.heim }} -
+				{{ ergebnisse[modalindex].paarung.gast }}
+			</h2>
+			<h1>
+				{{ ergebnisse[modalindex].heim }} -
+				{{ ergebnisse[modalindex].gast }}
+			</h1>
+			<table class="detailansichtSchriftart">
+				<tbody>
+					<tr>
+						<td>Name</td>
+						<td>Tipp</td>
+						<td>Punkte</td>
+						<td>Gesamtpunktzahl</td>
+					</tr>
+					<tr
+						v-for="(tipp, i) in tipps.filter(
+							(tipp) =>
+								tipp.tipp.paarungsid ==
+								ergebnisse[modalindex].paarung.id
+						)"
+						:key="i"
+					>
+						<td>
+							{{
+								users.filter((user) => user.id == tipp.user)[0]
+									.username
+							}}
+						</td>
+						<td>{{ tipp.tipp.heim }} - {{ tipp.tipp.gast }}</td>
+						<td>{{ ps(tipp.tipp.heim, tipp.tipp.gast, ergebnisse[modalindex].heim, ergebnisse[modalindex].gast) }}</td>
+						<td>
+							{{
+								users.filter((user) => user.id == tipp.user)[0]
+									.points
+							}}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</Modal>
+		<table>
+			<tbody>
+				<tr>
+					<td>Paarung</td>
+					<td>Ergebnis</td>
+				</tr>
+				<tr v-for="(ergebnis, i) in ergebnisse" :key="i">
+					<td
+						@click="
+							showmodal = true;
+							modalindex = i;
+						"
+					>
+						<span class="as-link">
+							<span class="teams">
+								<span class="team">
+									<img
+										:src="
+											RitzenbergenLib.RitzenbergenLib.api(
+												'/bulitipp/get-image.php?team=' +
+													ergebnis.paarung.heim
+											)
+										"
+										alt=""
+									/>
+									<p>{{ ergebnis.paarung.heim }}</p>
+								</span>
+								<span class="vs"></span>
+								<span class="team">
+									<p>{{ ergebnis.paarung.gast }}</p>
+									<img
+										:src="
+											RitzenbergenLib.RitzenbergenLib.api(
+												'/bulitipp/get-image.php?team=' +
+													ergebnis.paarung.gast
+											)
+										"
+										alt=""
+									/>
+								</span>
+							</span>
+						</span>
+					</td>
+					<td>
+						<p>{{ ergebnis.heim }} - {{ ergebnis.gast }}</p>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</section>
 </template>
 <style scoped>
-
 @import "../../assets/css/bulitipp2.css";
 
-iframe{
-  width: 100%;
-  height: 100%;
+h1 {
+	text-align: center;
 }
-
 </style>

src/components/bulitipp/Tippen.vue

@@ -183,7 +183,7 @@ export default {
     <div v-if="(spieltag == '' || spieltag == null) && userinfo != null">
       <h1>Moin {{ userinfo.username }}!</h1>
       <br />
-      <h4 v-if="zeitzutippen!=null">Du hast noch <span v-if="zeitzutippen.days!=0">{{ zeitzutippen.days }} Tage und </span>{{ zeitzutippen.hours }} Stunden Zeit, den {{ zeitzutippen.spieltag }}. Spieltag zu tippen.</h4>
+			<h4 v-if="zeitzutippen!=null">Du hast noch <span v-if="zeitzutippen.days!=0">{{ zeitzutippen.days }} Tage und </span>{{ zeitzutippen.hours }} Stunden Zeit, den {{ zeitzutippen.spieltag }}. Spieltag zu tippen.</h4>
       <br />
       <div v-if="disabled">
         <h3>Gerade kann nicht getippt werden.</h3><br>

src/components/startseite/Events.vue

@@ -12,7 +12,7 @@ export default {
 		const openedModals: number[] = [];
 		return {
 			openedModals,
-			modaltypes: ["text", "html"],
+			modaltypes: ["markdown", "html"],
 			RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
 		};
 	},
@@ -36,8 +36,8 @@ export default {
           id: 0,
           eventname: "Eventname",
           datum: "2009-04-06",
-          type: "text",
-          content: "<h1>Test</h1>",
+          type: "markdown",
+          content: "# Test",
           link: undefined,
           foto: "erntefest/2011/pic08.jpg",
 					minitext: ""
@@ -154,8 +154,10 @@ export default {
 						"
 					>
 						<MarkdownRender
+							v-if="event.type == 'markdown'"
 							:content="event.content"
 						/>
+						<div v-else v-html="event.content"></div>
 					</Modal>
 
 					<div class="item-wrapper">

src/components/startseite/Forms.vue

@@ -30,6 +30,14 @@ export default {
       return result;
     }
   },
+  mounted(){
+    if(this.$route.path=="/anmeldeformular"){
+      const hash = this.$route.path.replace("/","");
+      console.log(this.$refs[hash])
+      this.$refs[hash].scrollIntoView();
+      this.$router.push("/");
+    }
+  },
   components: {
     Modal,
   },
@@ -68,7 +76,7 @@ export default {
 };
 </script>
 <template>
-  <section id="anmeldeformular">
+  <section ref="anmeldeformular" id="anmeldeformular">
     <section class="form5 cid-u6k7q0BfGa">
       <div class="container" v-for="(form, i) in forms">
         <div class="row justify-content-center">

src/ritzenbergenlib.ts

@@ -89,7 +89,7 @@ class Spiel {
 		}
 		public calcPoints(){
       if(this.tipp==null) return 0;
-      if(this.result==this.tipp) return 3;
+      if(this.result[0]==this.tipp[0] && this.result[1]==this.tipp[1]) return 3;
       let differenztipp=this.tipp[0]-this.tipp[1];
       let differenz=this.result[0]-this.result[1];
       if(differenztipp==differenz) return 2;

src/router/index.ts

@@ -11,6 +11,7 @@ const routes = [
   { path: '/umgebung', component: () => import('../views/Main.vue') },
   { path: '/footer', component: () => import("../views/Main.vue")},
   { path: '/willkommen', component: () => import("../views/Main.vue")},
+  { path: '/anmeldeformular', component: () => import("../views/Main.vue")},
   { path: "/bulitipp", component: () => import("../views/Bulitipp.vue") },
   { path: "/bulitipp/tippen", component: () => import("../views/Bulitipp.vue") },
 ]

src/views/Bulitipp.vue

@@ -266,7 +266,7 @@ export default {
 
 	<!-- Paarungsergebnisse -->
 
-	<Paarungsergebnisse :ergebnisse="ergebnisse" :maxspieltag="maxspieltag" />
+	<Paarungsergebnisse :ergebnisse="ergebnisse" :maxspieltag="maxspieltag" :users="users" :tipps="tipps" />
 
 	<!-- Punktetabelle -->
 	<Tabelle :users="users" :ts="ts" />

src/views/Main.vue

@@ -14,7 +14,6 @@ import Willkommen from "../components/startseite/Willkommen.vue";
 export default {
   components: {
     Navbar,
-    Modal,
     Embla,
     Umgebung,
     MyFooter, // Geändert von Footer auf MyFooter
@@ -31,8 +30,8 @@ export default {
     };
   },
   mounted(){
-    if(this.$route.path !== "/"){
-      let hash = this.$route.path.replace("/","");
+    if(this.$route.path !== "/" && this.$route.path!=="/anmeldeformular"){
+      const hash = this.$route.path.replace("/","");
       console.log(this.$refs[hash])
       if(this.$refs[hash].$el) this.$refs[hash].$el.scrollIntoView();
       this.$router.push("/");