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

Rangliste angefangen

Browse Source
This commit is contained in:
R40fendt
2025-07-03 20:00:51 +02:00
parent c2b4707cb0
commit 4001879c70
5 changed files with 110 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -11,3 +11,5 @@ TODO:
- Footer, Texte? - Footer, Texte?
- Event Fotos - Event Fotos
- Navbar Hamburger Menu - Navbar Hamburger Menu
- Klönkasten ungelesen Punkt (localStorage)
- Deadline ist gesetzt, als nächstes Tippen

6
index.html
View File

@@ -6,6 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Willkommen auf ritzenbergen.de</title> <title>Willkommen auf ritzenbergen.de</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="manifest" href="./manifest.json"> <link rel="manifest" href="./manifest.json">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style" <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"
onload="this.onload=null;this.rel='stylesheet'"> onload="this.onload=null;this.rel='stylesheet'">
@@ -14,6 +19,7 @@
</noscript> </noscript>
<link rel="stylesheet" <link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head> </head>
<body> <body>

55
src/components/bulitipp/Rangliste.vue
View File

@@ -1,16 +1,43 @@
<script lang="js"> <script lang="js">
import * as RitzenbergenLib from '../../ritzenbergenlib'; import * as RitzenbergenLib from '../../ritzenbergenlib';
import Modal from '../Modal.vue';
export default { export default {
props: { props: {
users: { users: {
type: Array, type: Array,
required: true required: true
},
spieltag: {
type: Number,
required: true
},
results: {
type: Array,
required: true
},
tipps: {
type: Array,
required: true
} }
}, },
computed: { computed: {
testUsers(){
console.log(this.users); },
data(){
return {
modalOpen: false,
currentuser: null
}
},
components: {
Modal
},
methods: {
getById(results,paarungsid){
return results.find((result) => {
return result.paarung.id === paarungsid;
});
} }
} }
} }
@@ -18,7 +45,23 @@ export default {
<template> <template>
<section class="rangliste" id="rangliste-sektion"> <section class="rangliste" id="rangliste-sektion">
<br /><br /> <br /><br />
{{ testUsers }} <Modal v-if="modalOpen" @closemodal="modalOpen = false">
<h1 class="detailansichtSchriftart">Detailansicht für {{ currentuser.username }}, {{ spieltag }}. Spieltag</h1>
<table>
<tr>
<td>Tipps von {{ currentuser.username }}</td>
<td>Ergebnis</td>
<td>Tipp</td>
<td>Punkte</td>
</tr>
<tr v-for="result in results">
<td>{{ result.paarung.heim }} - {{ result.paarung.gast }}</td>
<td>{{ tipps }}</td>
<td></td>
<td>{{ result }}</td>
</tr>
</table>
</Modal>
<h2>Rangliste</h2> <h2>Rangliste</h2>
<table> <table>
<tbody> <tbody>
@@ -29,10 +72,7 @@ export default {
</tr> </tr>
<tr v-for="(user, i) in users"> <tr v-for="(user, i) in users">
<td>{{ i+1 }}</td> <td>{{ i+1 }}</td>
<td> <td @click="modalOpen=true; currentuser=user">
<!-- <iframe class="iframeRanglisteDetailansicht"
data-src="">Detailansicht User 1</iframe> -->
<span class="as-link">{{ user.username }}</span> <span class="as-link">{{ user.username }}</span>
</td> </td>
<td>{{ user.points }}</td> <td>{{ user.points }}</td>
@@ -42,6 +82,5 @@ export default {
</section> </section>
</template> </template>
<style scoped> <style scoped>
@import "../../assets/css/bulitipp2.css"; @import "../../assets/css/bulitipp2.css";
</style> </style>

4
src/ritzenbergenlib.ts
View File

@@ -33,8 +33,8 @@ class SpieltagSumme {
class RitzenbergenLib { class RitzenbergenLib {
static get_img(mypath: string) { static get_img(mypath: string) {
if(mypath.startsWith("/")) return "http://bilder.ritzenbergen.de"+mypath; if(mypath.startsWith("/")) return "https://bilder.ritzenbergen.de"+mypath;
else return "http://bilder.ritzenbergen.de/"+mypath; else return "https://bilder.ritzenbergen.de/"+mypath;
} }
static api(path:string){ static api(path:string){
if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path; if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;

97
src/views/Bulitipp.vue
View File

@@ -82,50 +82,59 @@ export default {
.then((result)=> parseInt(result)); .then((result)=> parseInt(result));
}, },
default: "" default: ""
}, },
maxspieltag: { maxspieltag: {
get(){ get(){
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/maxspieltag.php")) return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/maxspieltag.php"))
.then((response) => response.text()) .then((response) => response.text())
.then((result)=> parseInt(result)); .then((result)=> parseInt(result));
}
},
paarungen: {
get(){
const params = new URLSearchParams({
spieltag: this.maxspieltag
});
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/paarungen.php?"+params.toString()))
.then((response) => response.json())
.then((result2) => {
if(result2.reload) this.update();
return result2.data;
})
.then((result) => {
return result.map(el => new RitzenbergenLib.Paarung(el[0],el[1],el[2]));
})
.catch((error) => {
return null;
});
},
watch: ["maxspieltag"],
default: [new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade...")]
},
ergebnisse: {
get(){
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/ergebnisse.php"))
.then((response) => response.json())
.then((result2) => {
if(result2.reload) this.update();
return result2.data;
})
.then((result) => {
return result.map((el,i) => new RitzenbergenLib.Ergebnis(this.paarungen[i],el[0],el[1]));
})
},
watch: ["paarungen"]
} }
},
paarungen: {
get(){
const params = new URLSearchParams({
spieltag: this.maxspieltag
});
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/paarungen.php?"+params.toString()))
.then((response) => response.json())
.then((result2) => {
if(result2.reload) this.update();
return result2.data;
})
.then((result) => {
return result.map(el => new RitzenbergenLib.Paarung(el[0],el[1],el[2]));
})
.catch((error) => {
return null;
});
},
watch: ["maxspieltag"],
default: [new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade..."),new RitzenbergenLib.Paarung("Lade...","Lade...")]
},
ergebnisse: {
get(){
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/ergebnisse.php"))
.then((response) => response.json())
.then((result2) => {
if(result2.reload) this.update();
return result2.data;
})
.then((result) => {
return result.map((el,i) => new RitzenbergenLib.Ergebnis(this.paarungen[i],el[0],el[1]));
})
},
watch: ["paarungen"]
},
tipps: {
get(){
return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/tipps.php?spieltag="+this.maxspieltag))
.then((response) => response.json())
.then(response => response.data);
},
watch: ["maxspieltag"],
default: []
}
}, },
computed: { computed: {
sortedUsers() { sortedUsers() {
@@ -195,7 +204,7 @@ export default {
<!-- Rangliste --> <!-- Rangliste -->
<Rangliste :users="sortedUsers" /> <Rangliste :users="sortedUsers" :spieltag="maxspieltag" :tipps="tipps" :results="ergebnisse" />
<!-- Paarungsergebnisse --> <!-- Paarungsergebnisse -->