From 4001879c70eca09c920bb7cd445dbbc2a9ec6d10 Mon Sep 17 00:00:00 2001
From: R40fendt <r40test311@gmail.com>
Date: Thu, 3 Jul 2025 20:00:51 +0200
Subject: [PATCH] Rangliste angefangen

---
 README.md                             |  2 +
 index.html                            |  6 ++
 src/components/bulitipp/Rangliste.vue | 55 ++++++++++++---
 src/ritzenbergenlib.ts                |  4 +-
 src/views/Bulitipp.vue                | 97 +++++++++++++++------------
 5 files changed, 110 insertions(+), 54 deletions(-)
diff --git a/README.md b/README.md
index 7b3e424..1d12885 100644
--- a/README.md
+++ b/README.md
@@ -11,3 +11,5 @@ TODO:
 - Footer, Texte?
 - Event Fotos
 - Navbar Hamburger Menu
+- Klönkasten ungelesen Punkt (localStorage)
+- Deadline ist gesetzt, als nächstes Tippen
diff --git a/index.html b/index.html
index e903eb2..e2f7416 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"
       onload="this.onload=null;this.rel='stylesheet'">
@@ -14,6 +19,7 @@
     </noscript>
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+
   </head>
 
   <body>
diff --git a/src/components/bulitipp/Rangliste.vue b/src/components/bulitipp/Rangliste.vue
index f450708..ebd32cd 100644
--- a/src/components/bulitipp/Rangliste.vue
+++ b/src/components/bulitipp/Rangliste.vue
@@ -1,16 +1,43 @@
 <script lang="js">
 import * as RitzenbergenLib from '../../ritzenbergenlib';
+import Modal from '../Modal.vue';
 
 export default {
         props: {
             users: {
                 type: Array,
                 required: true
+            },
+            spieltag: {
+              type: Number,
+              required: true
+            },
+            results: {
+              type: Array,
+              required: true
+            },
+            tipps: {
+              type: Array,
+              required: true
             }
         },
         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>
 <section class="rangliste" id="rangliste-sektion">
     <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>
     <table>
       <tbody>
@@ -29,10 +72,7 @@ export default {
         </tr>
         <tr v-for="(user, i) in users">
           <td>{{ i+1 }}</td>
-          <td>
-            <!-- <iframe class="iframeRanglisteDetailansicht"
-                    data-src="">Detailansicht User 1</iframe> -->
-
+          <td @click="modalOpen=true; currentuser=user">
             <span class="as-link">{{ user.username }}</span>
           </td>
           <td>{{ user.points }}</td>
@@ -42,6 +82,5 @@ export default {
   </section>
 </template>
 <style scoped>
-
 @import "../../assets/css/bulitipp2.css";
 </style>
\ No newline at end of file
diff --git a/src/ritzenbergenlib.ts b/src/ritzenbergenlib.ts
index cf5ee84..033904f 100644
--- a/src/ritzenbergenlib.ts
+++ b/src/ritzenbergenlib.ts
@@ -33,8 +33,8 @@ class SpieltagSumme {
 
 class RitzenbergenLib {
   static get_img(mypath: string) {
-    if(mypath.startsWith("/")) return "http://bilder.ritzenbergen.de"+mypath;
-    else return "http://bilder.ritzenbergen.de/"+mypath;
+    if(mypath.startsWith("/")) return "https://bilder.ritzenbergen.de"+mypath;
+    else return "https://bilder.ritzenbergen.de/"+mypath;
   }
   static api(path:string){
     if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
diff --git a/src/views/Bulitipp.vue b/src/views/Bulitipp.vue
index 241daf3..f77d711 100644
--- a/src/views/Bulitipp.vue
+++ b/src/views/Bulitipp.vue
@@ -82,50 +82,59 @@ export default {
         .then((result)=> parseInt(result));
       },
       default: ""
-      },
-      maxspieltag: {
-        get(){
-          return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/maxspieltag.php"))
-          .then((response) => response.text())
-          .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"]
+    },
+    maxspieltag: {
+      get(){
+        return fetch(RitzenbergenLib.RitzenbergenLib.api("/bulitipp/maxspieltag.php"))
+        .then((response) => response.text())
+        .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"]
+    },
+    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: {
     sortedUsers() {
@@ -195,7 +204,7 @@ export default {
 
   <!-- Rangliste -->
 
-  <Rangliste :users="sortedUsers" />
+  <Rangliste :users="sortedUsers" :spieltag="maxspieltag" :tipps="tipps" :results="ergebnisse" />
 
   <!-- Paarungsergebnisse -->
 
