danielvici123/esp-projekt
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings added (only one part), notification started and highlight added

Browse Source
This commit is contained in:
danielvici123
2024-11-10 18:10:28 +01:00
parent 860cd027cd
commit 2352c25c05
20 changed files with 526 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/home_components/navigationbar.vue
View File

@@ -1,28 +1,51 @@
<script setup lang="ts">
// Funktionen um die Seiten zu öffnen
// home -> app.vue
// PLACEHOLDER
import router from "../../router";
import { ref, onMounted } from 'vue';
const sb_home = () => {
console.log("home");
router.push("/");
const componentsStatus = ref({});
const selected_destination = ref('');
async function loadComponentsStatus() {
const response = await fetch('src/components/status.json');
componentsStatus.value = await response.json();
}
const sb_search = () => {
console.log("Search");
}
const sb_notifications = () => {
console.log("Notifications");
}
const sb_messages = () => {
console.log("Messages");
}
const sb_accounts = () => {
console.log("Accounts");
}
const sb_settings = () => {
console.log("Settings");
onMounted(() => {
loadComponentsStatus();
});
function fun_route(destination: string) {
selected_destination.value = destination;
if (componentsStatus.value[destination] === 'wip') {
router.push("wip");
} else {
switch (destination) {
case "home":
router.push("/");
break;
case "search":
router.push("search");
break;
case "notifications":
router.push("notifications");
break;
case "messages":
router.push("messages");
break;
case "accounts":
router.push("accounts");
break;
case "settings":
router.push("settings");
break;
default:
router.push("/");
break;
}
}
}
</script>
@@ -30,15 +53,15 @@ const sb_settings = () => {
<template>
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center"><!-- BILD-->
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="sb_home">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="fun_route('home')">
</div>
<div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text -->
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_home"><img class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_search"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_notifications"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_messages"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_accounts"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_settings"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
<div class="align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('home')" :class="{'text-weiss': selected_destination === 'home' || selected_destination === ''}"><img class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('search')" :class="{'text-weiss': selected_destination === 'search'}"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('notifications')" :class="{'text-weiss': selected_destination === 'notifications'}"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="fun_route('messages')" :class="{'text-weiss': selected_destination === 'messages'}"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('accounts')" :class="{'text-weiss': selected_destination === 'accounts'}"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="fun_route('settings')" :class="{'text-weiss': selected_destination === 'settings'}"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>
</div>
</template>