From dfc042012114c5bbef1acb8c8b7c5dc0722328c5 Mon Sep 17 00:00:00 2001
From: R40fendt <r40test311@gmail.com>
Date: Mon, 5 May 2025 13:39:42 +0200
Subject: [PATCH] =?UTF-8?q?BuLi-Tipp=20asyncComputed=20und=20Ladeanimation?=
 =?UTF-8?q?=20hinzugef=C3=BCgt,=20Tippen=20Modal=20=C3=B6ffnen=20verbesser?=
 =?UTF-8?q?t,=20Footer=20umbenannt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{Footer.vue => MyFooter.vue} |   0
 src/components/Navbar.vue                   |  24 +++--
 src/components/bulitipp/Loading.vue         | 106 ++++++++++++++++++++
 src/views/Bildschau.vue                     |   8 +-
 src/views/Bulitipp.vue                      |  70 +++++++------
 src/views/Galerie.vue                       |   8 +-
 src/views/Main.vue                          |   8 +-
 7 files changed, 169 insertions(+), 55 deletions(-)
 rename src/components/{Footer.vue => MyFooter.vue} (100%)
 create mode 100644 src/components/bulitipp/Loading.vue

diff --git a/src/components/Footer.vue b/src/components/MyFooter.vue
similarity index 100%
rename from src/components/Footer.vue
rename to src/components/MyFooter.vue
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 72b6c45..f285375 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,4 @@
-<script lang="ts">
-import RouterLink from "vue-router";
+<script lang="js">
 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",
-      mainlinkdata: "/willkommen"
+      buttontextdata: "Über Ritzenbergen"
     }
   },
   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"
-              >{{ buttontextdata }}</RouterLink
+            <span class="btn btn-primary display-4" @click="clickmain"
+              >{{ buttontextdata }}</span
             >
           </div>
         </div>
diff --git a/src/components/bulitipp/Loading.vue b/src/components/bulitipp/Loading.vue
new file mode 100644
index 0000000..289dab0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Bildschau.vue b/src/views/Bildschau.vue
index 00d6cf7..fd92aa4 100644
--- a/src/views/Bildschau.vue
+++ b/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";
diff --git a/src/views/Bulitipp.vue b/src/views/Bulitipp.vue
index d24e57f..0e5c664 100644
--- a/src/views/Bulitipp.vue
+++ b/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>
diff --git a/src/views/Galerie.vue b/src/views/Galerie.vue
index 75b6373..3a1ce1f 100644
--- a/src/views/Galerie.vue
+++ b/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>
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 1be5433..a31e0e8 100644
--- a/src/views/Main.vue
+++ b/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>