Rangliste angefangen

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>