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>