R40fendt/ritzenbergen-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
R40fendt
2025-05-05 13:39:42 +02:00
parent 1c1069a7a3
commit dfc0420121
7 changed files with 169 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/Footer.vue → src/components/MyFooter.vue
View File

24
src/components/Navbar.vue
View File

@@ -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>

106
src/components/bulitipp/Loading.vue Normal file
View File

@@ -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>

8
src/views/Bildschau.vue
View File

@@ -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";

68
src/views/Bulitipp.vue
View File

@@ -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;
});
})
.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>

8
src/views/Galerie.vue
View File

@@ -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>

8
src/views/Main.vue
View File

@@ -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>