Settings added (only one part), notification started and highlight added
This commit is contained in:
danielvici123
@@ -7,7 +7,7 @@
|
|||||||
<title>Vite + Vue + TS</title>
|
<title>Vite + Vue + TS</title>
|
||||||
<link rel="stylesheet" href="/src/assets/main.css" />
|
<link rel="stylesheet" href="/src/assets/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-hintergrund-farbe">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
BIN
src/assets/icons/other.png
Normal file
BIN
src/assets/icons/other.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
src/assets/icons/shield.png
Normal file
BIN
src/assets/icons/shield.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
BIN
src/assets/icons/trash.png
Normal file
BIN
src/assets/icons/trash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 B |
@@ -1,28 +1,51 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// Funktionen um die Seiten zu öffnen
|
|
||||||
// home -> app.vue
|
// home -> app.vue
|
||||||
// PLACEHOLDER
|
// PLACEHOLDER
|
||||||
import router from "../../router";
|
import router from "../../router";
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
const sb_home = () => {
|
const componentsStatus = ref({});
|
||||||
console.log("home");
|
const selected_destination = ref('');
|
||||||
router.push("/");
|
|
||||||
|
async function loadComponentsStatus() {
|
||||||
|
const response = await fetch('src/components/status.json');
|
||||||
|
componentsStatus.value = await response.json();
|
||||||
}
|
}
|
||||||
const sb_search = () => {
|
|
||||||
console.log("Search");
|
onMounted(() => {
|
||||||
}
|
loadComponentsStatus();
|
||||||
const sb_notifications = () => {
|
});
|
||||||
console.log("Notifications");
|
|
||||||
}
|
function fun_route(destination: string) {
|
||||||
const sb_messages = () => {
|
selected_destination.value = destination;
|
||||||
console.log("Messages");
|
if (componentsStatus.value[destination] === 'wip') {
|
||||||
}
|
router.push("wip");
|
||||||
const sb_accounts = () => {
|
} else {
|
||||||
console.log("Accounts");
|
switch (destination) {
|
||||||
}
|
case "home":
|
||||||
const sb_settings = () => {
|
router.push("/");
|
||||||
console.log("Settings");
|
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>
|
</script>
|
||||||
@@ -30,15 +53,15 @@ const sb_settings = () => {
|
|||||||
<template>
|
<template>
|
||||||
<div class="pt-4 border-b-2 border-b-grau2">
|
<div class="pt-4 border-b-2 border-b-grau2">
|
||||||
<div class="items-center flex justify-center"><!-- BILD-->
|
<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>
|
||||||
<div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text -->
|
<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="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="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="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-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="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="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="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-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="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="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="sb_settings"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,7 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
/** *
|
import router from "../../router";
|
||||||
* @author Daniel Cwikla
|
|
||||||
*/
|
function login() {
|
||||||
|
// alert("Account deleted. You will be redirected to the login page.");
|
||||||
|
router.push("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(event: Event) {
|
||||||
|
event.preventDefault();
|
||||||
|
login();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -11,7 +19,7 @@
|
|||||||
<p class="text-weiss text-center">Login or create a new Account to continue</p>
|
<p class="text-weiss text-center">Login or create a new Account to continue</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-20 pt-7"><!-- FORM --->
|
<div class="px-20 pt-7"><!-- FORM --->
|
||||||
<form class="flex flex-col items-center">
|
<form class="flex flex-col items-center" @submit.prevent="handleSubmit">
|
||||||
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Username or E-Mail"><br>
|
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Username or E-Mail"><br>
|
||||||
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Password"><br>
|
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Password"><br>
|
||||||
<button class="m-4 bg-grau-dunkel w-full max-w-xs p-4 text-weiss rounded-lg">Login</button>
|
<button class="m-4 bg-grau-dunkel w-full max-w-xs p-4 text-weiss rounded-lg">Login</button>
|
||||||
|
|||||||
27
src/components/notifications.vue
Normal file
27
src/components/notifications.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<script setup>
|
||||||
|
import Legal from "./home_components/legal.vue";
|
||||||
|
import Navigationbar from "./home_components/navigationbar.vue";
|
||||||
|
import Notifi_comp from "./notifications_components/notifi_main.vue";
|
||||||
|
import Notif_sidebar from "./notifications_components/notif_sidebar.vue";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="text-weiss flex">
|
||||||
|
<div id="left" class="border-1 border-b-grau w-72">
|
||||||
|
<navigationbar></navigationbar>
|
||||||
|
<notif_sidebar></notif_sidebar>
|
||||||
|
</div>
|
||||||
|
<div class="w-100p border-x-2 border-x-grau2">
|
||||||
|
<div class="border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
|
||||||
|
<h1 class="text-weiss text-3xl p-4">Notifications</h1>
|
||||||
|
</div>
|
||||||
|
<notifi_comp></notifi_comp>
|
||||||
|
</div>
|
||||||
|
<legal class="w-1/4"></legal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
27
src/components/notifications_components/notif_sidebar.vue
Normal file
27
src/components/notifications_components/notif_sidebar.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
selectedNotification: String
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedNotification = ref('');
|
||||||
|
|
||||||
|
function handleUpdateNotification(setting: string) {
|
||||||
|
selectedNotification.value = setting;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl text-grau2">
|
||||||
|
<label>All</label>
|
||||||
|
<label>You Following</label>
|
||||||
|
<label>Messages</label>
|
||||||
|
<label>Other</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
23
src/components/notifications_components/notifi_main.vue
Normal file
23
src/components/notifications_components/notifi_main.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
const selectedNotification = ref('');
|
||||||
|
|
||||||
|
// Aktualisieren der ausgewählten Einstellung
|
||||||
|
function handleUpdateNotification(setting: string) {
|
||||||
|
selectedNotification.value = setting;
|
||||||
|
console.log(`Setting got (NA): ${setting}`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
MOIN1
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
34
src/components/settings.vue
Normal file
34
src/components/settings.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Legal from "./home_components/legal.vue";
|
||||||
|
import Settings_sidebar from "./settings_components/settings_sidebar.vue";
|
||||||
|
import Settings_navbar from "./settings_components/settings_navbar.vue";
|
||||||
|
import Settings_main from "./settings_components/settings_main.vue";
|
||||||
|
import Navigationbar from "./home_components/navigationbar.vue";
|
||||||
|
|
||||||
|
const selectedSetting = ref('');
|
||||||
|
|
||||||
|
// Aktualisieren der ausgewählten Einstellung
|
||||||
|
function handleUpdateSetting(setting: string) {
|
||||||
|
selectedSetting.value = setting;
|
||||||
|
console.log(`Setting got (S): ${setting}`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="main" class="bg-hintergrund-farbe flex">
|
||||||
|
<div id="left" class="border-1 border-b-grau w-72">
|
||||||
|
<navigationbar></navigationbar>
|
||||||
|
<settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
|
||||||
|
</div>
|
||||||
|
<div class="w-100p">
|
||||||
|
<settings_main :selectedSetting="selectedSetting"></settings_main>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/4">
|
||||||
|
<legal></legal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="space-y-2 pl-2">
|
||||||
|
<p class="text-2xl text-weiss pt-2 items-center flex justify-center">danielvici (USERNAME)</p>
|
||||||
|
<div>
|
||||||
|
<a class="text-lg text-weiss">Displayname</a><br>
|
||||||
|
<a class="text-grau2">danielvici123</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="text-lg text-weiss">Email</a><br>
|
||||||
|
<a class="text-grau2">email@e.mail</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="text-lg text-weiss">firstname</a><br>
|
||||||
|
<a class="text-grau2">daniel</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="text-lg text-weiss">lastname</a><br>
|
||||||
|
<a class="text-grau2">vici</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="text-lg text-weiss">phone</a><br>
|
||||||
|
<a class="text-grau2">123</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
37
src/components/settings_components/sa_delete_account.vue
Normal file
37
src/components/settings_components/sa_delete_account.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import router from "../../router";
|
||||||
|
|
||||||
|
function deleteAccount() {
|
||||||
|
// alert("Account deleted. You will be redirected to the login page.");
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(event: Event) {
|
||||||
|
event.preventDefault();
|
||||||
|
deleteAccount();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex-col flex items-center justify-center">
|
||||||
|
<div> <!-- HEADER -->
|
||||||
|
<h1 class="text-weiß text-2xl p-4">Delete Account</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form class="flex flex-col space-y-4 p-4" @submit.prevent="handleSubmit">
|
||||||
|
<div class="flex flex-col space-y-2 items-center justify-center">
|
||||||
|
<input type="password" name="password" id="password" placeholder="Password" required class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" name="verification" id="verification" required class="">
|
||||||
|
<label for="verification" class="p-4">I agree that my account will be deleted permanently.</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="bg-logo-farbe-rot text-schwarz text-xl font-bold p-4 mt-8 rounded-lg">Delete Account</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
40
src/components/settings_components/sa_reset_password.vue
Normal file
40
src/components/settings_components/sa_reset_password.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import router from "../../router";
|
||||||
|
|
||||||
|
function reset_password() {
|
||||||
|
// alert("Account deleted. You will be redirected to the login page.");
|
||||||
|
router.push("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(event: Event) {
|
||||||
|
event.preventDefault();
|
||||||
|
reset_password();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div> <!--HEADER-->
|
||||||
|
<h1 class="text-weiss text-2xl p-3 items-center flex justify-center">Reset Password</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<form class="flex flex-col space-y-4 p-4" @submit.prevent="handleSubmit">
|
||||||
|
<div class="flex flex-col space-y-2">
|
||||||
|
<input type="password" name="old-password" id="old-password" placeholder="Old Password" class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-2">
|
||||||
|
<input type="password" name="new-password" id="new-password" placeholder="New Passoword" class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-2">
|
||||||
|
<input type="password" name="new-password-repeat" id="new-password-repeat" placeholder=" Repeat new passoword" class="mt-4 m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="bg-button-farbe text-schwarz text-xl font-bold p-4 mt-8 rounded-lg">Change Password</button>
|
||||||
|
<label class="text-logo-farbe-rot text-2xl">! INFO: PASSWÖRTER WIRD IN URLBAR ANGEZEIGT !</label>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
25
src/components/settings_components/settings_account.vue
Normal file
25
src/components/settings_components/settings_account.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {defineEmits, ref} from 'vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateAccountSetting']);
|
||||||
|
const selectedSetting = ref('');
|
||||||
|
|
||||||
|
function updateAccountSetting(setting: string) {
|
||||||
|
emit('updateAccountSetting', setting);
|
||||||
|
selectedSetting.value = setting;
|
||||||
|
console.log(`Setting selected (SA): ${setting}`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="border-x border-x-grau2 "> <!-- MAIN DIV -->
|
||||||
|
<div class="flex flex-col text-xl pl-4 pt-5 pr-4 space-y-5 text-grau2"> <!-- BODY -->
|
||||||
|
<label @click="updateAccountSetting('sa_account-information')" :class="{'text-weiss': selectedSetting === 'sa_account-information' || selectedSetting === ''}">Account Information</label>
|
||||||
|
<label @click="updateAccountSetting('sa_reset-password')" :class="{'text-weiss': selectedSetting === 'sa_reset-password'}">Reset Password</label>
|
||||||
|
<label @click="updateAccountSetting('sa_delete-account')" :class="{'text-weiss': selectedSetting === 'sa_delete-account'}">Delete Account</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
32
src/components/settings_components/settings_account_main.vue
Normal file
32
src/components/settings_components/settings_account_main.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {defineProps, ref} from 'vue';
|
||||||
|
import Sa_accountInformation_comp from "./sa_account-information_comp.vue";
|
||||||
|
import Sa_reset_password from "./sa_reset_password.vue";
|
||||||
|
import Sa_delete_account from "./sa_delete_account.vue";
|
||||||
|
|
||||||
|
const props2 = defineProps({
|
||||||
|
selectedAccountSetting: String
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`Setting got (SAM): ${props2.selectedAccountSetting}`);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="border-x-2 border-x-grau2"> <!-- MAIN DIV -->
|
||||||
|
<div v-if="props2.selectedAccountSetting === 'sa_account-information'">
|
||||||
|
<sa_account-information_comp></sa_account-information_comp>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="props2.selectedAccountSetting === 'sa_reset-password'">
|
||||||
|
<sa_reset_password></sa_reset_password>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="props2.selectedAccountSetting === 'sa_delete-account'">
|
||||||
|
<sa_delete_account></sa_delete_account>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<sa_account-information_comp></sa_account-information_comp>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
72
src/components/settings_components/settings_main.vue
Normal file
72
src/components/settings_components/settings_main.vue
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Settings_account from "./settings_account.vue";
|
||||||
|
import Settings_account_main from "./settings_account_main.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
selectedSetting: String
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedAccountSetting = ref('');
|
||||||
|
|
||||||
|
function handleUpdateAccountSetting(setting: string) {
|
||||||
|
selectedAccountSetting.value = setting;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`Setting got (SM): ${props.selectedSetting}`);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="text-weiss">
|
||||||
|
<div v-if="props.selectedSetting === 'setting_account'" class=""> <!-- ACCOUNT SETTINGS-->
|
||||||
|
<div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
|
||||||
|
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
|
||||||
|
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
|
||||||
|
<settings_account_main class="basis-1/2" :selectedAccountSetting="selectedAccountSetting"></settings_account_main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div v-else-if="props.selectedSetting === 'setting_privacy'"> <!-- PRIVACY AND SAFTEY-->
|
||||||
|
<div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER PRIVACY-->
|
||||||
|
<h1 class="text-weiss text-3xl p-4">Privacy and Saftey</h1>
|
||||||
|
</div>
|
||||||
|
<div> <!-- BODY - ACCOUNT SETTINGS-->
|
||||||
|
<label>MOIN1</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div v-else-if="props.selectedSetting === 'setting_messages'"> <!-- MESSAGES-->
|
||||||
|
<label>MOIN2</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="props.selectedSetting === 'setting_other'"> <!-- OTHER -->
|
||||||
|
<label>MOIN4</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div v-else-if="props.selectedSetting === undefined"> <!-- IF NOTHING SELECTED-->
|
||||||
|
<label>Select a Setting in the Sidebar</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="props.selectedSetting === ''"> <!-- IF NOTHING SELECTED-->
|
||||||
|
<div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
|
||||||
|
<h1 class="text-weiss text-3xl p-4">Account Settings</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
|
||||||
|
<settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
|
||||||
|
<settings_account_main class="basis-1/2" :selectedAccountSetting="selectedAccountSetting"></settings_account_main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
69
src/components/settings_components/settings_navbar.vue
Normal file
69
src/components/settings_components/settings_navbar.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// Funktionen um die Seiten zu öffnen
|
||||||
|
// home -> app.vue
|
||||||
|
import router from "../../router";
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
const componentsStatus = ref({});
|
||||||
|
|
||||||
|
async function loadComponentsStatus() {
|
||||||
|
const response = await fetch('src/components/status.json');
|
||||||
|
componentsStatus.value = await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadComponentsStatus();
|
||||||
|
});
|
||||||
|
|
||||||
|
function fun_route(destination: string) {
|
||||||
|
if (componentsStatus.value[destination] === 'wip') {
|
||||||
|
router.push("wip");
|
||||||
|
} else {
|
||||||
|
switch (destination) {
|
||||||
|
case "home":
|
||||||
|
router.push("/");
|
||||||
|
break;
|
||||||
|
case "search":
|
||||||
|
router.push("search");
|
||||||
|
break;
|
||||||
|
case "notifications_components":
|
||||||
|
router.push("notifications_components");
|
||||||
|
break;
|
||||||
|
case "messages":
|
||||||
|
router.push("messages");
|
||||||
|
break;
|
||||||
|
case "accounts":
|
||||||
|
router.push("accounts");
|
||||||
|
break;
|
||||||
|
case "settings":
|
||||||
|
router.push("settings");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
router.push("/");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="pt-4 border-b-2 border-b-grau2">
|
||||||
|
<div class="items-center flex justify-center">
|
||||||
|
<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-5 pt-3 pl-3 pb-4 font-bold text-xl">
|
||||||
|
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('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="fun_route('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_components')"><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')"><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')"><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')"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
25
src/components/settings_components/settings_sidebar.vue
Normal file
25
src/components/settings_components/settings_sidebar.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { defineEmits } from 'vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateSetting']);
|
||||||
|
const selectedSetting = ref('');
|
||||||
|
|
||||||
|
function updateSetting(setting: string) {
|
||||||
|
selectedSetting.value = setting;
|
||||||
|
emit('updateSetting', setting);
|
||||||
|
console.log(`Setting selected (SS): ${setting}`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="text-grau2 font-bold space-y-4 pl-2 pt-5">
|
||||||
|
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_account' || selectedSetting === ''}" @click="updateSetting('setting_account')"><img class="pr-2" src="../../assets/icons/user.png" alt=""> Account</label>
|
||||||
|
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_privacy'}" @click="updateSetting('setting_privacy')"><img class="pr-2" src="../../assets/icons/shield.png" alt=""> Privacy and Saftey</label>
|
||||||
|
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_message'}" @click="updateSetting('setting_messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt=""> Messages</label>
|
||||||
|
<label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_other'}" @click="updateSetting('setting_other')"><img class="pr-2" src="../../assets/icons/other.png" alt=""> Other</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
8
src/components/status.json
Normal file
8
src/components/status.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"home": "completed",
|
||||||
|
"search": "wip",
|
||||||
|
"notifications": "testing",
|
||||||
|
"messages": "wip",
|
||||||
|
"accounts": "wip",
|
||||||
|
"settings": "testing"
|
||||||
|
}
|
||||||
@@ -6,6 +6,8 @@ import { createRouter, createWebHistory } from "vue-router";
|
|||||||
import Home from "../components/Home.vue";
|
import Home from "../components/Home.vue";
|
||||||
import Login from "../components/Login.vue";
|
import Login from "../components/Login.vue";
|
||||||
import wip from "../components/wip.vue";
|
import wip from "../components/wip.vue";
|
||||||
|
import settings from "../components/settings.vue";
|
||||||
|
import nottifications from "../components/notifications.vue";
|
||||||
// The routing does not happen automatically
|
// The routing does not happen automatically
|
||||||
// Each route has to be defined here, or it wont work.
|
// Each route has to be defined here, or it wont work.
|
||||||
const routes = [
|
const routes = [
|
||||||
@@ -24,6 +26,16 @@ const routes = [
|
|||||||
name: "Work in Progress",
|
name: "Work in Progress",
|
||||||
component: wip,
|
component: wip,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/settings",
|
||||||
|
name: "Settings",
|
||||||
|
component: settings,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/notifications",
|
||||||
|
name: "Notifications",
|
||||||
|
component: nottifications,
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
Reference in New Issue
Block a user