BuLi-Tipp asyncComputed und Ladeanimation hinzugefügt, Tippen Modal öffnen verbessert, Footer umbenannt

src/views/Bulitipp.vue

@@ -1,29 +1,33 @@
-<script lang="ts">
+<script lang="js">
 import Navbar from "../components/Navbar.vue";
-import Footer from "../components/Footer.vue";
+import MyFooter from "../components/MyFooter.vue";
 import Modal from "../components/Modal.vue";
 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";
+import Loading from "../components/bulitipp/Loading.vue";
 
 export default {
   components: {
     Navbar,
-    Footer,
+    MyFooter,
     Modal,
     Uebersicht,
     Rangliste,
     Paarungsergebnisse,
     Tabelle,
+    Loading
   },
   asyncComputed: {
-    async users() {
-      return fetch(RitzenbergenLib.api("/bulitipp/get-users.php"))
+    users: {
+      get(){
+        return fetch(RitzenbergenLib.api("/bulitipp/get-users.php"))
         .then((response) => response.json())
         .then((result) => {
+          console.log(result);
+          console.log(this.spieltage);
           result.forEach((user, i) => {
             let sum = 0;
             this.spieltage.forEach((spieltag) => {
@@ -34,16 +38,23 @@ export default {
             });
             user.points = sum;
           });
-        })
-        .catch((error) => console.error("Error:", error));
-
-      
+          return result;
+        }).catch((error) => {
+          return null;
+        });
+      },
+      default: [],
+      watch: ["spieltage"]
     },
+    spieltage: {
+      get() {
+        return fetch(RitzenbergenLib.api("/bulitipp/ts.php"))
+        .then((response) => response.json());
+      },
+      default: []
+    }
   },
   computed: {
-    tippenoffen() {
-      return this.$route.path === "/bulitipp/tippen";
-    },
 
     sortedUsers() {
       if(this.users instanceof Array) return [...this.users].sort((a, b) => b.points - a.points);
@@ -173,23 +184,13 @@ 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;
-    },
+    loading(){
+      console.log(this.$asyncComputed.users);
+      return this.$asyncComputed.users.updating || this.$asyncComputed.spieltage.updating;
+    }
   },
   methods: {
-    tippenschliessen() {
-      this.$router.push("/bulitipp");
-    },
-    gs(i: number) {
+    gs(i) {
       let result = 0;
       this.spieltage[i].forEach((element) => {
         result += element;
@@ -197,10 +198,16 @@ export default {
       return result;
     },
   },
+  data(){
+    return {
+      tippenoffen: false
+    }
+  }
 };
 </script>
 <template>
-  <Navbar buttontext="Tippen" mainlink="/bulitipp/tippen" />
+  <Loading v-show="loading"/>
+  <Navbar buttontext="Tippen" @clickbtn="tippenoffen=true" />
 
   <section
     class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background"
@@ -227,10 +234,9 @@ export default {
     </div>
   </section>
 
-  <Modal v-show="tippenoffen" @closemodal="tippenschliessen">
+  <Modal v-show="tippenoffen" @closemodal="tippenoffen=false">
     <h1>Test</h1>
   </Modal>
-
   <Uebersicht :users="users" />
 
   <!-- Rangliste -->
@@ -248,7 +254,7 @@ export default {
   <br />
   <br />
 
-  <Footer />
+  <MyFooter />
 
 </template>
 <style scoped>