BuLi-Tipp Tabelle, Punkterechnung, Rangliste weiter programmiert

package-lock.json

@@ -17,6 +17,7 @@
         "sloc": "^0.3.2",
         "striptags": "^3.2.0",
         "vue": "^3.5.13",
+        "vue-async-computed": "^4.0.1",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -2278,6 +2279,15 @@
         }
       }
     },
+    "node_modules/vue-async-computed": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-4.0.1.tgz",
+      "integrity": "sha512-INDaMHK7MSkfSLdIDSxmeFCeW+JO+Hj7wO+tVNE4u+W7ixSEPfGi4hlwBnv2pk/NmyDCTqSnmcfgxYZpofE5eQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "~3"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vue": "^3.5.13",
+    "vue-async-computed": "^4.0.1",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

src/components/bulitipp/Rangliste.vue

@@ -21,7 +21,7 @@
           <td>Punkte</td>
         </tr>
         <tr v-for="(user, i) in users">
-          <td>{{ i }}</td>
+          <td>{{ i+1 }}</td>
           <td>
             <!-- <iframe class="iframeRanglisteDetailansicht"
                     data-src="">Detailansicht User 1</iframe> -->

src/components/bulitipp/Tabelle.vue

@@ -1,26 +1,20 @@
 <script lang="ts">
+
 export default {
   props: {
     users: {
-      type: Array,
+      type: Array<any>,
+      required: true,
+    },
+    spieltage: {
+      type: null,
       required: true,
     },
   },
   computed: {
-    spieltage() {
-      let result=[
-        [5,10,15,20,25,30],
-        [5,10,15,20,25,30],
-        [5,10,15,20,25,30]
-      ];
     
-        return result;
-    },
   },
   methods: {
-    tagessumme(spieltag:number, user:number){
-        return 5;
-    }
   }
 };
 </script>
@@ -29,14 +23,14 @@ export default {
     <br /><br />
 
     <h2>Punktetabelle</h2>
-    <div id="load-table-btn-container">
+    <!--<div id="load-table-btn-container">
       <button id="load-table-btn">Punkte ausrechnen</button>
-    </div>
+    </div>-->
     <table>
       <tbody>
         <tr>
           <td>Tag</td>
-          <td v-for="user in users">{{ user.name }}</td>
+          <td v-for="spieltag in spieltage[0]">{{ spieltag.user.name }}</td>
         </tr>
         <tr v-for="spieltag, i in spieltage">
           <td>{{ i+1 }}</td>
@@ -44,7 +38,7 @@ export default {
           <!-- Modal -->
 
           <!-- Open BTN -->
-          <td class="as-link" v-for="userpoints in spieltag">{{ userpoints }}</td>
+          <td class="as-link" v-for="userpoints in spieltag">{{ userpoints.points }}</td>
         </tr>
 
         <tr>

src/main.ts

@@ -1,7 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import AsyncComputed from "vue-async-computed";
 
 createApp(App)
 .use(router)
+.use(AsyncComputed)
 .mount("#app");

src/views/Bulitipp.vue

@@ -6,6 +6,8 @@ import Uebersicht from "../components/bulitipp/Uebersicht.vue";
 import Rangliste from "../components/bulitipp/Rangliste.vue";
 import Paarungsergebnisse from "../components/bulitipp/Paarungsergebnisse.vue";
 import Tabelle from "../components/bulitipp/Tabelle.vue";
+import $ from "jquery";
+import RitzenbergenLib from "../ritzenbergenlib.ts";
 
 export default {
   components: {
@@ -15,51 +17,36 @@ export default {
     Uebersicht,
     Rangliste,
     Paarungsergebnisse,
-    Tabelle
+    Tabelle,
+  },
+  asyncComputed: {
+    async users() {
+      return fetch(RitzenbergenLib.api("/bulitipp/get-users.php"))
+        .then((response) => response.json())
+        .then((result) => {
+          result.forEach((user, i) => {
+            let sum = 0;
+            this.spieltage.forEach((spieltag) => {
+              let points = spieltag.find((element) => {
+                return element.user.id === user.id;
+              });
+              sum += points.points;
+            });
+            user.points = sum;
+          });
+        })
+        .catch((error) => console.error("Error:", error));
+
+      
+    },
   },
   computed: {
     tippenoffen() {
       return this.$route.path === "/bulitipp/tippen";
     },
-    users() {
-      return [
-        {
-          id: 1,
-          name: "User 1",
-          points: 10,
-          kuerzel: "U1",
-        },
-        {
-          id: 2,
-          name: "User 2",
-          points: 20,
-          kuerzel: "U2",
-        },
-        {
-          id: 3,
-          name: "User 3",
-          points: 10,
-          kuerzel: "U3",
-        },
-        {
-          id: 4,
-          name: "User 4",
-          points: 20,
-          kuerzel: "U4",
-        },
-        {
-          id: 5,
-          name: "User 5",
-          points: 10,
-          kuerzel: "U5",
-        },
-        {
-          id: 6,
-          name: "User 6",
-          points: 20,
-          kuerzel: "U6",
-        },
-      ].sort((a, b) => b.points - a.points);
+
+    sortedUsers() {
+      if(this.users instanceof Array) return [...this.users].sort((a, b) => b.points - a.points);
     },
     teams() {
       return {
@@ -186,11 +173,29 @@ export default {
         },
       ];
     },
+    spieltage() {
+      let result: number[][] = [];
+      $.ajax(RitzenbergenLib.api("/bulitipp/ts.php"), {
+        async: false,
+        success(data) {
+          console.log("success");
+          result = JSON.parse(data);
+        },
+      });
+      return result;
+    },
   },
   methods: {
     tippenschliessen() {
       this.$router.push("/bulitipp");
     },
+    gs(i: number) {
+      let result = 0;
+      this.spieltage[i].forEach((element) => {
+        result += element;
+      });
+      return result;
+    },
   },
 };
 </script>
@@ -226,26 +231,25 @@ export default {
     <h1>Test</h1>
   </Modal>
 
-
-
   <Uebersicht :users="users" />
 
   <!-- Rangliste -->
 
-  <Rangliste :users="users"/>
+  <Rangliste :users="sortedUsers" />
 
   <!-- Paarungsergebnisse -->
 
   <Paarungsergebnisse :paarungen="paarungen" :teams="teams" />
 
   <!-- Punktetabelle -->
-  <Tabelle :users="users"/>
+  <Tabelle :users="users" :spieltage="spieltage" />
 
   <br />
   <br />
   <br />
 
   <Footer />
+
 </template>
 <style scoped>
 @import "../assets/css/bulitipp2.css";