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

src/components/Navbar.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
+<script lang="js">
-import RouterLink from "vue-router";
 export default {
   name: "Navbar",
   props: {
@@ -11,10 +10,6 @@ export default {
       type: String,
       required: false,
     },
-    mainlink: {
-      type: String,
-      required: false,
-    },
   },
   data(){
     return {
@@ -24,15 +19,22 @@ export default {
         { link: "/footer", title: "Kontakt" },
         { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
-      buttontextdata: "Über Ritzenbergen",
+      buttontextdata: "Über Ritzenbergen"
-      mainlinkdata: "/willkommen"
     }
   },
   created() {
       if(this.links) this.datalinks = this.links;
       if(this.buttontext) this.buttontextdata = this.buttontext;
-      if(this.mainlink) this.mainlinkdata = this.mainlink;
   },
+  methods: {
+    clickmain(){
+      if(this.buttontext){
+        this.$emit("clickbtn");
+      }else{
+        this.$router.push("/willkommen");
+      }
+    }
+  }
 };
 </script>
 <template>
@@ -86,8 +88,8 @@ export default {
             </li>
           </ul>
           <div class="navbar-buttons mbr-section-btn">
-            <RouterLink class="btn btn-primary display-4" :to="mainlinkdata"
+            <span class="btn btn-primary display-4" @click="clickmain"
-              >{{ buttontextdata }}</RouterLink
+              >{{ buttontextdata }}</span
             >
           </div>
         </div>

src/components/bulitipp/Loading.vue

@@ -0,0 +1,106 @@
+<script>
+    export default {
+
+    }
+</script>
+<template>
+    <div class="loading-container">
+        <div class="loading-main">
+            <h1>Lade...</h1>
+            <div class="dots-bars-6"></div>
+        </div>
+    </div>
+</template>
+<style scoped>
+    h1{
+        margin-bottom: 50px;
+    }
+    .loading-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        margin: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+    .loading-main{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 50%;
+        width: 50%;
+        background-color: white;
+        border-radius: 20px;
+        flex-direction: column;
+    }
+
+
+    
+.dots-bars-6 {
+    width: 40px;
+    height: 20px;
+    --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+    background:
+      var(--c) 0    0,
+      var(--c) 50%  0;
+    background-size:8px 8px;
+    background-repeat: no-repeat;
+    position: relative;
+    clip-path: inset(-200% -100% 0 0);
+    animation: db6-0 1.5s linear infinite;
+  }
+  .dots-bars-6:before {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 12px;
+    background:currentColor;
+    left:-16px;
+    top:0;
+    animation: 
+      db6-1 1.5s linear infinite,
+      db6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+  }
+  .dots-bars-6:after {
+    content: "";
+    position: absolute;
+    inset:0 0 auto auto;
+    width:8px;
+    height: 8px;
+    border-radius: 50%;
+    background:currentColor; 
+    animation: db6-3 1.5s  linear infinite;
+  }
+  
+  @keyframes db6-0 {
+    0%,30%  {background-position: 0  0   ,50% 0   }
+    33%     {background-position: 0  100%,50% 0   }
+    41%,63% {background-position: 0  0   ,50% 0   }
+    66%     {background-position: 0  0   ,50% 100%}
+    74%,100%{background-position: 0  0   ,50% 0   }
+  }
+  
+  @keyframes db6-1 {
+    90%  {transform:translateY(0)}
+    95%  {transform:translateY(15px)}
+    100% {transform:translateY(15px);left:calc(100% - 8px)}
+  }
+  
+  @keyframes db6-2 {
+    100% {top:-0.1px}
+  }
+  
+  @keyframes db6-3 {
+    0%,80%,100% {transform:translate(0)}
+    90%         {transform:translate(26px)}
+  }
+
+
+</style>

src/views/Bildschau.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Footer from "../components/Footer.vue";
+import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
 import Navbar from "../components/Navbar.vue";
 import RitzenbergenLib from "../ritzenbergenlib";
 import $ from "jquery";
@@ -7,11 +7,11 @@ import $ from "jquery";
 export default {
   components: {
     Navbar,
-    Footer,
+    MyFooter, // Geändert von Footer auf MyFooter
   },
   data() {
     return {
-      bild: this.$route.params.bild,
+      bild: parseInt(<string>this.$route.params.bild),
       ev: this.$route.params.ev,
       jahr: this.$route.params.jahr,
       RitzenbergenLib,
@@ -82,7 +82,7 @@ export default {
     </form>
   </div>
   <br /><br />
-  <Footer></Footer>
+  <MyFooter></MyFooter>
 </template>
 <style scoped lang="scss">
 @import "../assets/bildschau/style.sass";

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() {
+    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;
           });
-        })
+          return result;
-        .catch((error) => console.error("Error:", error));
+        }).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() {
+    loading(){
-      let result: number[][] = [];
+      console.log(this.$asyncComputed.users);
-      $.ajax(RitzenbergenLib.api("/bulitipp/ts.php"), {
+      return this.$asyncComputed.users.updating || this.$asyncComputed.spieltage.updating;
-        async: false,
+    }
-        success(data) {
-          console.log("success");
-          result = JSON.parse(data);
-        },
-      });
-      return result;
-    },
   },
   methods: {
-    tippenschliessen() {
+    gs(i) {
-      this.$router.push("/bulitipp");
-    },
-    gs(i: number) {
       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>

src/views/Galerie.vue

@@ -1,15 +1,15 @@
-<script lang="ts">
+<script lang="js">
 import Navbar from "../components/Navbar.vue";
 import Embla from "../components/Embla.vue";
 import RitzenbergenLib from "../ritzenbergenlib.ts";
-import Footer from "../components/Footer.vue";
+import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
 import $ from "jquery";
 
 export default {
   components: {
     Navbar,
     Embla,
-    Footer,
+    MyFooter, // Geändert von Footer auf MyFooter
   },
   computed: {
     events() {
@@ -156,6 +156,6 @@ export default {
     </div>
     <br /><br /><br />
   </section>
-  <Footer />
+  <MyFooter />
 </template>
 <style scoped></style>

src/views/Main.vue

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="js">
 import Navbar from "../components/Navbar.vue";
 import Modal from "../components/Modal.vue";
 import Embla from "../components/Embla.vue";
 import Umgebung from "../components/startseite/Umgebung.vue";
-import Footer from "../components/Footer.vue";
+import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
 import RitzenbergenLib from "../ritzenbergenlib.ts";
 import WillkommenText from "../components/startseite/WillkommenText.vue";
 import Bilderbuch from "../components/startseite/Bilderbuch.vue";
@@ -17,7 +17,7 @@ export default {
     Modal,
     Embla,
     Umgebung,
-    Footer,
+    MyFooter, // Geändert von Footer auf MyFooter
     WillkommenText,
     Bilderbuch,
     Forms,
@@ -94,7 +94,7 @@ export default {
 
 
   <Umgebung ref="umgebung" />
-  <Footer ref="footer" />
+  <MyFooter ref="footer" />
 
 </template>