Modal Tabelle hinzugefügt

src/components/bulitipp/Tabelle.vue

@@ -1,5 +1,6 @@
 <script lang="js">
-
+import ritzenbergenlib from "../../ritzenbergenlib";
+import Modal from "../Modal.vue";
 export default {
   props: {
     users: {
@@ -11,23 +12,56 @@ export default {
       required: true,
     },
   },
-  computed: {
-    myts(){
-      console.log(this.ts, this.users);
+  methods: {
+    closeModal(){
+      this.modalOpen=false;
+    },
+    openModal(spieltag, user){
+      this.modalOpen=true;
+      this.spieltag=spieltag;
+      this.user=user;
     }
   },
-  methods: {
+  components: {
+    Modal,
+  },
+  data(){
+    return {
+      modalOpen: false,
+      spieltag: null,
+      user: null
+    }
+  },
+  computed: {
+    tsSource(){
+      return ritzenbergenlib.RitzenbergenLib.api("/bulitipp/buli-punkte.php?spieltag="+(spieltag+1)+"&paarung=null&detail=user&name="+ts[spieltag][user].user.username);
+    }
   }
 };
 </script>
 <template>
+  <Modal v-if="modalOpen" @closemodal="closeModal"><h1 class="detailansichtSchriftart">Detailansicht für {{ ts[spieltag][user].user.username }}, {{ spieltag+1 }}. Spieltag</h1>
+        <table class="detailansichtSchriftart">
+            <tr>
+                <td>Tipp von {{ ts[spieltag][user].user.username }}</td>
+                <td>Ergebnis</td>
+                <td>Tipp</td>
+                <td>Punkte</td>
+            </tr>
+            <tr>
+                <td>0 - 0</td>
+                <td>0 - 0</td>
+                <td>0 - 0</td>
+                <td>3</td>
+            </tr>
+              
+        </table>
+        
+                
+  </Modal>
   <section class="buli-table" id="buli-table">
     <br /><br />
-    {{ myts }}
     <h2>Punktetabelle</h2>
-    <!--<div id="load-table-btn-container">
-      <button id="load-table-btn">Punkte ausrechnen</button>
-    </div>-->
     <table>
       <tbody>
         <tr>
@@ -37,10 +71,12 @@ export default {
         <tr v-for="spieltag, i in ts">
           <td>{{ i+1 }}</td>
 
-          <!-- Modal -->
-
           <!-- Open BTN -->
-          <td class="as-link" v-for="userpoints in spieltag">{{ userpoints.tsPoints }}</td>
+          <td class="as-link" v-for="userpoints,j in spieltag" @click="openModal(i,j)">
+
+            {{ userpoints.tsPoints }}
+            
+          </td>
         </tr>
 
         <tr>

src/components/bulitipp/Uebersicht.vue

@@ -16,7 +16,7 @@ export default {
         <td v-for="user in users">{{ user.kuerzel }}</td>
       </tr>
       <tr>
-          <td v-for="user in users" :style="{color: user.hatgetippt?'green':'red'}">{{ user.points }}</td>
+          <td v-for="user in users" :style="{color: user.hatgetippt()?'green':'red'}">{{ user.points }}</td>
       </tr>
       </tbody>
     </table>

src/ritzenbergenlib.ts

@@ -4,22 +4,21 @@ class User {
   public kuerzel: string;
   public points: number;
   public id: number;
-  public hatgetippt: boolean;
   constructor (username: string, kuerzel: string, points: number, id: number) {
     this.username = username;
     this.kuerzel = kuerzel;
     this.points=points;
     this.id=id;
+  }
+  hatgetippt():boolean{
     let hatgetippt=false;
-    $.ajax(RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid="+id),{
+    $.ajax(RitzenbergenLib.api("/bulitipp/hatgetippt.php?userid="+this.id),{
       async: false,
-      success(response:string){
-        hatgetippt=response=="true";
+      success(response:boolean){
+        hatgetippt=response;
       }
-    })
-    this.hatgetippt=hatgetippt;
-
-
+    });
+    return hatgetippt;
   }
 }
 

src/views/Bulitipp.vue

@@ -35,7 +35,6 @@ export default {
           result.forEach((user, i) => {
               let sum = 0;
               this.ts.forEach((spieltag) => {
-                console.log(spieltag);
                 let points = spieltag.find((element) => {
                   return element.user.id === user.id;
                 });
@@ -154,7 +153,7 @@ export default {
   data(){
     return {
       tippenoffen: false,
-      debug: true
+      debug: false
     }
   }
 };