R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
R40fendt
2025-10-25 17:36:34 +02:00
parent 3f02977a18
commit dc845e5da0
9 changed files with 146 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

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

2
src/App.vue
View File

@@ -32,4 +32,4 @@ export default {
margin: 0;
}
</style>
</style>

46
src/components/Navbar.vue
View File

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

2
src/components/bulitipp/Tippen.vue
View File

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

26
src/components/bulitipp/Uebersicht.vue
View File

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

7
src/ritzenbergenlib.ts
View File

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

4
src/views/Bildschau.vue
View File

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

6
src/views/Bildvorschau.vue
View File

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

122
src/views/Bulitipp.vue
View File

@@ -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;
});
@@ -70,7 +71,7 @@ export default {
result.map(element => element.map((element) => {
element.user=new RitzenbergenLib.User(element.user.name, element.user.kuerzel,0, element.user.id);
return element;
}));
return result;
@@ -83,7 +84,7 @@ export default {
get(){
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/saison.php"))
.then((response) => response.text())
.then((result)=> parseInt(result));
.then((result)=> parseInt(result));
},
default: ""
},
@@ -126,7 +127,7 @@ export default {
.then((result) => {
return result.map((el,i) => new RitzenbergenLib.Ergebnis(this.paarungen[i],el[0],el[1]));
})
},
watch: ["paarungen"]
},
@@ -156,14 +157,14 @@ export default {
},
default: null,
watch: ["kuerzel", "password"],
}
},
computed: {
sortedUsers() {
if(this.users instanceof Array) return [...this.users].sort((a, b) => b.points - a.points);
},
loading(){
return this.$asyncComputed.users.updating || this.$asyncComputed.ts.updating;
},
@@ -190,7 +191,10 @@ export default {
this.kuerzel = "";
this.password = "";
this.wrongpassword = false;
}
},
filterUsers(users){
return users.filter((el)=>el.points>0&&this.maxspieltag>=2);
}
},
data(){
return {
@@ -205,65 +209,77 @@ export default {
};
</script>
<template>
<Loading v-show="loading && !debug" />
<Navbar buttontext="Tippen" @clickbtn="tippenoffen = true" />
<section
class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background"
id="hero-17-u6k7q0xIhk"
>
<div
class="mbr-overlay"
style="opacity: 0.3; background-color: rgb(0, 0, 0)"
></div>
<div class="container-fluid">
<div class="row">
<div class="content-wrap col-12 col-md-10">
<h1
class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
>
<strong>Willkommen im Bundesliga Tippspiel</strong>
</h1>
<p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
Saison {{ saison }}/{{ saison + 1 }}
</p>
<br /><br />
</div>
</div>
</div>
</section>
<Loading v-show="loading && !debug" />
<Navbar buttontext="Tippen" @clickbtn="tippenoffen = true" />
<section
class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background"
id="hero-17-u6k7q0xIhk"
>
<div
class="mbr-overlay"
style="opacity: 0.3; background-color: rgb(0, 0, 0)"
></div>
<div class="container-fluid">
<div class="row">
<div class="content-wrap col-12 col-md-10">
<h1
class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
>
<strong>Willkommen im Bundesliga Tippspiel</strong>
</h1>
<p
class="mbr-fonts-style mbr-text mbr-white mb-4 display-7"
>
Saison {{ saison }}/{{ saison + 1 }}
</p>
<br /><br />
</div>
</div>
</div>
</section>
<Modal v-show="tippenoffen" @closemodal="tippenoffen = false">
<Tippen v-show="token!=null" :token="token" @logout="logout"/>
<TippenEinloggen v-show="token==null" @login="login" :wrongpassword="wrongpassword" />
</Modal>
<Modal v-show="tippenoffen" @closemodal="tippenoffen = false">
<Tippen v-show="token != null" :token="token" @logout="logout" />
<Uebersicht :users="users" :spieltag="maxspieltag" />
<TippenEinloggen
v-show="token == null"
@login="login"
:wrongpassword="wrongpassword"
/>
</Modal>
<!-- Rangliste -->
<Uebersicht
:paarungen="paarungen"
:tipps="tipps"
:users="filterUsers(users)"
:spieltag="maxspieltag"
/>
<Rangliste :users="sortedUsers" :spieltag="maxspieltag" :tipps="tipps" :results="ergebnisse" />
<!-- Rangliste -->
<!-- Paarungsergebnisse -->
<Rangliste
:users="filterUsers(sortedUsers)"
:spieltag="maxspieltag"
:tipps="tipps"
:results="ergebnisse"
/>
<Paarungsergebnisse
:ergebnisse="ergebnisse"
:maxspieltag="maxspieltag"
/>
<!-- Paarungsergebnisse -->
<!-- Punktetabelle -->
<Tabelle :users="users" :ts="ts" />
<Paarungsergebnisse :ergebnisse="ergebnisse" :maxspieltag="maxspieltag" />
<br />
<br />
<br />
<!-- Punktetabelle -->
<Tabelle :users="users" :ts="ts" />
<MyFooter />
<br />
<br />
<br />
<MyFooter />
</template>
<style scoped>
@import "../assets/css/bulitipp2.css";
#hero-17-u6k7q0xIhk {
margin-bottom: 100px;
margin-bottom: 100px;
}
</style>