BuLi-Tipp Übersicht beendet, Galerie Debugged, Navbar Mobile Ansicht gefixt

README.md

@@ -5,9 +5,8 @@
 TODO:
 
 - Addhit
-- Galerie (Bilder müssen noch auf NAS)
-- BuLi-Tipp (Übersicht, Paarungsergebnisse Ladescreen) Tippen funktioniert, Min und Max beim Spieltag Input auch, Modals funktionieren alle bis auf Übersicht
-- BuLi-Tipp User Active Spalte
+- Galerie (randomimage.php, Rest geht)
+- BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
 - Startseite (Events testen, type=fotos?)
 - Footer, Texte?
 - Navbar Hamburger Menu

src/components/Navbar.vue

@@ -19,7 +19,9 @@ export default {
         { link: "/footer", title: "Kontakt" },
         { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
-      buttontextdata: "Über Ritzenbergen"
+      buttontextdata: "Über Ritzenbergen",
+			isNavCollapsed: true,
+			isCollapsing: false,
     }
   },
   created() {
@@ -33,13 +35,26 @@ export default {
       }else{
         this.$router.push("/willkommen");
       }
+    },
+		toggleCollapse(){
+				/*if (this.isNavCollapsed) {
+						document.body.classList.add("navbar-dropdown-open");
+				} else {
+						document.body.classList.remove("navbar-dropdown-open");
+				}*/
+				this.isCollapsing = true;
+				this.isNavCollapsed = !this.isNavCollapsed;
+				setTimeout(() => {
+					this.isCollapsing = false;
+				}, 300);
+				
 		}
-  }
+}
 };
 </script>
 <template>
   <section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
-    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
+			<nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg" :class="{ opened: !isNavCollapsed }">
       <div class="container">
         <div class="navbar-brand">
           <span class="navbar-logo">
@@ -59,6 +74,7 @@ export default {
         </div>
         <button
           class="navbar-toggler"
+					:class="{ collapsed: isNavCollapsed }"
           type="button"
           data-toggle="collapse"
           data-bs-toggle="collapse"
@@ -67,6 +83,7 @@ export default {
           aria-controls="navbarNavAltMarkup"
           aria-expanded="false"
           aria-label="Toggle navigation"
+					@click="toggleCollapse"
         >
           <div class="hamburger">
             <span></span>
@@ -75,7 +92,7 @@ export default {
             <span></span>
           </div>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+				<div class="navbar-collapse opacityScroll" :class="{show: !isNavCollapsed, collapsing: isCollapsing, collapse: !isCollapsing}" id="navbarSupportedContent">
           <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
             <li class="nav-item" v-for="link in datalinks">
               <RouterLink
@@ -108,4 +125,23 @@ export default {
 .link {
   font-weight: 400;
 }
+#navbarSupportedContent {
+		  transition: all 0.2s ease-in-out;
+			height: auto;
+}
+#navbarSupportedContent:not(.show) {
+		max-height: 0;
+		padding: 0;
+}
+#navbarSupportedContent.show {
+		max-height: 1000px;
+		padding: 16px;
+
+}
+@media (min-width: 1201px) {
+		#navbarSupportedContent {
+				max-height: 1000px !important;
+				height: 100%;
+		}
+}
 </style>

src/components/bulitipp/Tippen.vue

@@ -222,7 +222,7 @@ export default {
     </div>
   </div>
 </template>
-<style>
+<style scoped>
 img {
   width: 30px;
 }

src/components/bulitipp/Uebersicht.vue

@@ -9,6 +9,14 @@ export default {
 				spieltag: {
 						type: Number,
 						required: false
+				},
+				tipps: {
+						type: Array,
+						required: true
+				},
+				paarungen: {
+						type: Array,
+						required: true
 				}
     },
 		data(){
@@ -30,16 +38,28 @@ export default {
         <td v-for="user in users" @click="currentuser=user; modalOpen=true">{{ user.kuerzel }}</td>
       </tr>
       <tr>
-          <td v-for="user in users" :style="{color: user.hatgetippt()?'green':'red'}" @click="currentuser=user; modalOpen=true">{{ user.points }}</td>
+					<td v-for="user in users" :style='{"color": user.hatgetippt()?"green":"red"}' @click="currentuser=user; modalOpen=true">{{ user.points }}</td>
       </tr>
       </tbody>
     </table>
   </section>
 		<Modal v-if="modalOpen" @closemodal="modalOpen=false">
 				<div v-if="spieltag!=undefined">
-						{{ currentuser }}
-						
 						<h1>Detailansicht für {{ currentuser.username }}, {{ spieltag }}. Spieltag</h1>
+						<table>
+								<thead>
+										<tr>
+												<td>Paarung</td>
+												<td>Tipp von {{ currentuser.username }}</td>
+										</tr>
+								</thead>
+								<tbody>
+										<tr v-for="tipp, i in tipps.filter(t=>t.user==currentuser.id)">
+												<td>{{ paarungen[i].heim }} - {{ paarungen[i].gast }}</td>
+												<td>{{ tipp.tipp.heim }} - {{ tipp.tipp.gast }}</td>
+										</tr>
+								</tbody>
+						</table>
 				</div>
 				<div v-else>
 						<h1>Lade...</h1>

src/ritzenbergenlib.ts

@@ -11,11 +11,12 @@ class User {
     this.id=id;
   }
   hatgetippt():boolean{
-    let hatgetippt=false;
+    var hatgetippt=false;
     $.ajax(RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid="+this.id),{
       async: false,
-      success(response:boolean){
-        hatgetippt=response;
+      success(response): any{
+        hatgetippt=response==1;
+				console.log(response);
       }
     });
     return hatgetippt;

src/views/Bildschau.vue

@@ -14,7 +14,7 @@ export default {
       bild: parseInt(<string>this.$route.params.bild),
       ev: this.$route.params.ev,
       jahr: this.$route.params.jahr,
-      RitzenbergenLib,
+      RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
     };
   },
   computed: {
@@ -50,7 +50,7 @@ export default {
         }"
         :style="{
           backgroundImage:
-            'url('+RitzenbergenLib.RitzenbergenLib.get_img(bildel)+')',
+            'url('+RitzenbergenLib.get_img(bildel)+')',
         }"
         v-for="(bildel, i) in bilder"
         @click="bild=i"

src/views/Bildvorschau.vue

@@ -2,7 +2,7 @@
 import { RouterLink } from "vue-router";
 import Navbar from "../components/Navbar.vue";
 import RitzenbergenLib from "../ritzenbergenlib";
-import Footer from "../components/Footer.vue";
+import Footer from "../components/MyFooter.vue";
 import $ from "jquery";
 
 export default {
@@ -10,14 +10,14 @@ export default {
     return {
       ev: this.$route.params.ev,
       jahr: this.$route.params.jahr,
-      RitzenbergenLib,
+      RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
     };
   },
   computed: {
     bilder() {
       let result: any[] = [];
 
-      $.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
+      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),{
         async: false,
         success(data: string) {
           result=JSON.parse(data);

src/views/Bulitipp.vue

@@ -51,6 +51,7 @@ export default {
         .then((result) => {
           return result.map(el => new RitzenbergenLib.User(el.name,el.kuerzel, el.points, el.id));
         })
+				//.then((result)=>result.filter((el)=>(el.points>0&&maxspieltag>=2)))
         .catch((error) => {
           return null;
         });
@@ -190,6 +191,9 @@ export default {
       this.kuerzel = "";
       this.password = "";
       this.wrongpassword = false;
+    },
+		filterUsers(users){
+				return users.filter((el)=>el.points>0&&this.maxspieltag>=2);
 		}
   },
   data(){
@@ -223,7 +227,9 @@ export default {
 					>
 						<strong>Willkommen im Bundesliga Tippspiel</strong>
 					</h1>
-          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
+					<p
+						class="mbr-fonts-style mbr-text mbr-white mb-4 display-7"
+					>
 						Saison {{ saison }}/{{ saison + 1 }}
 					</p>
 					<br /><br />
@@ -233,24 +239,34 @@ export default {
 	</section>
 
 	<Modal v-show="tippenoffen" @closemodal="tippenoffen = false">
-    <Tippen v-show="token!=null" :token="token" @logout="logout"/>
+		<Tippen v-show="token != null" :token="token" @logout="logout" />
 
-    <TippenEinloggen v-show="token==null" @login="login" :wrongpassword="wrongpassword" />
+		<TippenEinloggen
+			v-show="token == null"
+			@login="login"
+			:wrongpassword="wrongpassword"
+		/>
 	</Modal>
 
-  
-  <Uebersicht :users="users" :spieltag="maxspieltag" />
+	<Uebersicht
+		:paarungen="paarungen"
+		:tipps="tipps"
+		:users="filterUsers(users)"
+		:spieltag="maxspieltag"
+	/>
 
 	<!-- Rangliste -->
 
-  <Rangliste :users="sortedUsers" :spieltag="maxspieltag" :tipps="tipps" :results="ergebnisse" />
+	<Rangliste
+		:users="filterUsers(sortedUsers)"
+		:spieltag="maxspieltag"
+		:tipps="tipps"
+		:results="ergebnisse"
+	/>
 
 	<!-- Paarungsergebnisse -->
 
-  <Paarungsergebnisse
-    :ergebnisse="ergebnisse"
-    :maxspieltag="maxspieltag"
-  />
+	<Paarungsergebnisse :ergebnisse="ergebnisse" :maxspieltag="maxspieltag" />
 
 	<!-- Punktetabelle -->
 	<Tabelle :users="users" :ts="ts" />