Tipp-Formular hinzugefügt

README.md

@@ -14,3 +14,4 @@ TODO:
 - Klönkasten ungelesen Punkt (localStorage)
 - Deadline ist gesetzt, als nächstes Tippen
 - Login Formular flexibleres Backend
+- Modal Close Button fixen

src/assets/css/bulitipp2.css

@@ -131,8 +131,8 @@ tr:hover{
 
 span.vs{
   width: 20px;
-  /* margin-left: 10%;
-  margin-right: 10%; */
+  margin-left: 10px;
+  margin-right: 10px;
   height: 3px;
   background-color: black;
 }
@@ -161,12 +161,12 @@ h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100vw;
+  width: 100%;
 }
 
 .paarung {
   margin: 10px 0;
-  width: 100vw;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/bulitipp/Tippen.vue

@@ -1,12 +1,29 @@
 <script lang="ts">
 import ritzenbergenlib from "../../ritzenbergenlib";
+import "../../assets/css/bulitipp2.css";
 
 export default {
-  props: ["token"],
+  props: {
+    token: {
+      type: String,
+      required: false,
+    },
+  },
   data() {
     return {
       spieltag: "",
       vmodelspieltag: "",
+      tipps: [
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null),
+        new ritzenbergenlib.Tipp(null, null, null)
+      ]
     };
   },
   asyncComputed: {
@@ -26,13 +43,58 @@ export default {
       },
       default: null,
     },
+    paarungen: {
+      get() {
+        if (this.spieltag == null) return null;
+        return fetch(
+          ritzenbergenlib.RitzenbergenLib.api(
+            "/bulitipp/paarungen.php?spieltag=" + this.spieltag
+          )
+        )
+          .then((response) => response.json())
+          .then((response) => response.data)
+          .then((response) =>
+            response.map((el) => {
+              return new ritzenbergenlib.Paarung(el[0], el[1], el[2]);
+            })
+          );
+      },
+      default: null,
+    },
+  },
+  emits: ["logout"],
+  methods: {
+    getTeamImage(team: string) {
+      return ritzenbergenlib.RitzenbergenLib.api(
+        "/bulitipp/get-image.php?team=" + team
+      );
+    },
+    async tippen(){
+      this.tipps.forEach((tipp, i) => {
+        tipp.paarung = this.paarungen[i];
+      });
+      
+      const params = new URLSearchParams({
+        spieltag: this.spieltag.toString(),
+        tipps: JSON.stringify(this.tipps)
+      });
+
+      let result=await fetch(
+        ritzenbergenlib.RitzenbergenLib.api("/bulitipp/tippeintragen.php?"+params.toString()),
+        {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer " + this.token,
+          },
+        }
+      );
+      console.log(result);
+    }
   },
-  emits: ["logout"]
 };
 </script>
 <template>
   <div>
-        
     <div v-if="(spieltag == '' || spieltag == null) && userinfo != null">
       <h1>Moin {{ userinfo.username }}!</h1>
       <br /><br />
@@ -44,21 +106,21 @@ export default {
           required
         />
         <input type="submit" value="Tippen" />
-      <br><br>
+        <br /><br />
         <input type="button" value="Ausloggen" @click="$emit('logout')" />
       </form>
     </div>
     <div class="tippenEintragen" v-else>
-    <form @submit.prevent="" id="mainform">
-      <span class="paarung">
-        <img src="./get-buli-image.php?team=Bremen" alt="" />
-        <span class="team-name">Heim</span>
+      <form @submit.prevent="tippen" id="mainform">
+        <span class="paarung" v-for="(paarung,i) in paarungen" :key="paarung.id">
+          <img :src="getTeamImage(paarung.heim)" alt="" />
+          <span class="team-name">{{ paarung.heim }}</span>
 
-        <input type="number" min="0" class="score" required />
+          <input v-model="tipps[i].heim" type="number" min="0" class="score" required />
           <span class="vs"></span>
-        <input type="number" min="0" class="score" required />
-        <span class="team-name">Gast</span
-        ><img src="./get-buli-image.php?team=Bremen" alt="" /><br />
+          <input v-model="tipps[i].gast" type="number" min="0" class="score" required />
+          <span class="team-name">{{ paarung.gast }}</span>
+          <img :src="getTeamImage(paarung.gast)" alt="" /><br />
         </span>
         <!--<h1>Deadline überschritten!</h1>
     <h1>
@@ -67,11 +129,14 @@ export default {
       </h1>-->
 
         <input type="submit" value="Tippen" />
-      <br><br>
-      <input type="button" value="Abbrechen" @click="spieltag=''" />
-    
+        <br /><br />
+        <input type="button" value="Abbrechen" @click="spieltag = ''" />
       </form>
     </div>
-
   </div>
 </template>
+<style>
+img {
+  width: 30px;
+}
+</style>

src/ritzenbergenlib.ts

@@ -64,10 +64,23 @@ class Ergebnis {
   }
 }
 
+class Tipp{
+  heim: number|null;
+  gast: number|null;
+  paarung: Paarung|null;
+
+  constructor (paarung: Paarung|null, heim: number|null, gast: number|null) {
+    this.heim = heim;
+    this.gast = gast;
+    this.paarung = paarung;
+  }
+}
+
 export default {
   RitzenbergenLib,
   User,
   SpieltagSumme,
   Paarung,
-  Ergebnis
+  Ergebnis,
+  Tipp
 }