Notifications gemacht. Settings, Login verändert

Nachrichten:
- Nachrichten anzeigen mit filter usw.
Login:
- Password ist sind jetzt punkte
Settings, WIP:
- Kleine Stylische anpassungen

src/components/home_components/navigationbar.vue

@@ -51,7 +51,7 @@ function fun_route(destination: string) {
 </script>
 
 <template>
-  <div class="pt-4 border-b-2 border-b-grau2">
+  <div class="pt-4 border-b-2 border-b-grau2 border-r-1 border-r-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="fun_route('home')">
     </div>

src/components/login_components/login_comp.vue

@@ -21,7 +21,7 @@ function handleSubmit(event: Event) {
     <div class="px-20 pt-7"><!--  FORM --->
       <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="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="password" placeholder="Password"><br>
         <button class="m-4 bg-grau-dunkel w-full max-w-xs p-4 text-weiss rounded-lg">Login</button>
       </form>
     </div>

src/components/notifications.vue

@@ -3,6 +3,7 @@ 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";
+import Quick_search from "./home_components/quick_search.vue";
 
 </script>
 
@@ -10,15 +11,17 @@ import Notif_sidebar from "./notifications_components/notif_sidebar.vue";
   <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-->
+      <div class="border-b-grau2 border-b-2">
         <h1 class="text-weiss text-3xl p-4">Notifications</h1>
       </div>
       <notifi_comp></notifi_comp>
     </div>
-    <legal class="w-1/4"></legal>
+    <div class="w-1/4">
+      <quick_search></quick_search>
+      <legal></legal>
+    </div>
   </div>
 </template>
 

src/components/notifications_components/notif_sidebar.vue

@@ -1,5 +1,10 @@
+<!---WIRD NICHT MEHR BENTUTZ ABER VIELLEICHT SPÄTER IRGENDWAN WICHTIG -->
 <script setup lang="ts">
 import { ref } from 'vue';
+import router from "../../router";
+
+const componentsStatus = ref({});
+const selected_destination = ref('');
 
 const props = defineProps({
   selectedNotification: String
@@ -11,14 +16,23 @@ function handleUpdateNotification(setting: string) {
   selectedNotification.value = setting;
 }
 
+function fun_route(destination: string) {
+  selected_destination.value = destination;
+  if (componentsStatus.value[destination] === 'wip') {
+    router.push("wip");
+  } else {
+
+  }
+}
+
 </script>
 
 <template>
-<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl text-grau2">
+<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 pr-2 font-bold text-xl text-grau2">
-  <label>All</label>
+  <p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1 " @click="fun_route('all')" :class="{'text-weiss': selected_destination === 'all' || selected_destination === ''}">All</p>
-  <label>You Following</label>
+  <p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('following')" :class="{'text-weiss': selected_destination === 'following'}">You Following</p>
-  <label>Messages</label>
+  <p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('messages')" :class="{'text-weiss': selected_destination === 'messages'}">Messages</p>
-  <label>Other</label>
+  <p class="flex text-center text-grau2 hover:text-grau-hell2 hover:shadow-md hover:shadow-grau hover:bg-grau rounded-lg p-1" @click="fun_route('other')" :class="{'text-weiss': selected_destination === 'other'}">Other</p>
 </div>
 </template>
 

src/components/notifications_components/notifi_main.vue

@@ -1,19 +1,116 @@
 <script setup lang="ts">
+console.log("SEITE WIRD AUSGEFÜHRT")
 import {ref} from "vue";
 
-const selectedNotification = ref('');
+const notifications = ref([
+  {id: 1, // Sollte im feed sein
+    profile_picture: "../../assets/default_pp.png",
+    author_display_name: "Linux Enjoyer",author_username: "lunix",
+    content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
+    type:"message",date: new Date(2024,11,13).toDateString() }, // 11 = Dezember, 10 = Nov, 9 = okt., 8 = sep.
+  {id: 2,
+    profile_picture: "../../assets/default_pp.png",
+    author_display_name: "XBOX",author_username: "Xbox",
+    content: "Call of Duty: Black Ops 6 is OUT NOW. Check it out: https://xbox.com",
+    type:"message",date: new Date(2024,9,13).toDateString()},
+  {id: 33,// Sollte im feed sein
+    profile_picture: "../../assets/default_pp.png",
+    author_display_name: "ESP Support",author_username: "esp_support",
+    content: "You're post was against our TOS and got deleted. Additionally your account has been suspended for 30 Days." ,
+    type:"support",date: new Date(2024,9,13).toDateString()},
+  {id: 4,// Sollte im feed sein
+    profile_picture: "../../assets/default_pp.png",
+    author_display_name: "System", author_username: "esp_notifications",
+    content: "GitHub posted something new. Check it out",
+    type:"following",date: new Date(2024,10,2).toDateString()},
+  {id: 5, // Sollte im feed sein
+    profile_picture: "../../assets/danielvici_pp.png",
+    author_display_name: "danielvici123", author_username: "danielvici",
+    content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
+    type:"message",date: new Date(2024,1,1).toDateString()}
+]);
 
-// Aktualisieren der ausgewählten Einstellung
+
-function handleUpdateNotification(setting: string) {
+let feed = ref([]);
-  selectedNotification.value = setting;
+
-  console.log(`Setting got (NA): ${setting}`);
+// wie enum in c bzw. arduino
+interface sortting_definition {
+  f: boolean; // following
+  m: boolean; // messages
+  da: boolean; // date-asc
+  dd: boolean; // date-desc
+  u: boolean; // user
+  sorting: string;
 }
+// Standard filter und sorting
+const check_type = ref<sortting_definition>({
+  f: true,
+  m: true,
+  da: false,
+  dd: false,
+  u: false,
+  sorting: "date-asc",
+});
+
+
+// Für jeden eintrag in notifications durschläuft die schleife einen durschlauf
+for(let i =0; i < notifications.value.length; i++) {
+  console.log("Getting Notifications...");
+
+
+    feed.value.push(notifications.value[i]);
+
+}
+
+function go_filter(){
+  console.log("Filter applied");
+  console.log("These Filter applied: ", JSON.stringify(check_type.value));
+  feed.value = [];
+
+  notifications.value.forEach((notification) => {
+    if ((check_type.value.f == true && notification.type === "following") || (check_type.value.m == true && notification.type === "message")|| (notification.type === "support")){
+      feed.value.push(notification);
+    }
+  })
+  console.log("Feed:", feed.value);
+}
+
 </script>
 
 <template>
 <div>
-  <div>
+  <div class="text-grau2 p-5 border-b-2 "><!-- FILTER -->
-    MOIN1
+    <!-- Wenn das Form submited wurde wird die Seite nicht-->
+    <!-- neugeladen und die Funktion -->
+    <form @submit.prevent="go_filter">
+      <label class="p-2 text-xl text-weiss">Filter</label>
+      <label class="m-2 accent-logo-farbe-blau">You Following<input type="checkbox" class="m-1 mr-3" v-model="check_type.f"></label>
+      <label class="m-2 accent-logo-farbe-lila">Messages<input type="checkbox" class="m-1 mr-3" v-model="check_type.m"></label>
+      <!--<label class="m-2 accent-logo-farbe-rot">Other<input type="checkbox" class="m-1 mr-3" v-model="check_type.o"></label>-->
+
+      <label class="p2">Sort by <select name="sorting" id="notification_sorting" class="mr-3 bg-hintergrund-farbe text-weiss" v-model="check_type.sorting">
+        <option value="date-asc">Date (asc.)</option>
+        <option value="date-desc">Date (desc.)</option>
+        <option value="user">User</option>
+      </select></label>
+      <button type="submit" class="bg-button-farbe text-schwarz p-2 rounded-lg">Filter</button>
+    </form>
+  </div>
+  <div> <!-- MAIN NACHRICHTEN-->
+    <ul v-if="feed.length > 0">
+      <li v-for="(notification) in feed" :key="notifications.id" class="border-b-grau2 border-b-1 border-b p-3 flex">
+        <img src="../../assets/default_pp.png" alt="user profile picture" class="rounded-full w-16 h-16">
+        <div>
+          <div class="flex">
+            <label class="text-lg font-bold m-1 text-weiss">{{notification.author_display_name}}</label>
+            <label class="m-2 text-grau2">Type: {{notification.type}}</label>
+           <label class="m-2 text-grau2">Date: {{notification.date}}</label>
+          </div>
+          <a class="ml-1">{{notification.content}}</a>
+        </div>
+      </li>
+    </ul>
+    <a v-else>You have no Notifications!</a>
   </div>
 </div>
 </template>

src/components/settings.vue

@@ -17,7 +17,7 @@ function handleUpdateSetting(setting: string) {
 
 <template>
   <div id="main" class="bg-hintergrund-farbe flex">
-    <div id="left" class="border-1 border-b-grau w-72">
+    <div id="left" class="border-r border-r-1 border-r-grau2 w-72">
       <navigationbar></navigationbar>
       <settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
     </div>

src/components/settings_components/settings_account.vue

@@ -12,7 +12,7 @@ function updateAccountSetting(setting: string) {
 </script>
 
 <template>
-  <div class="border-x border-x-grau2 "> <!-- MAIN DIV -->
+  <div class=""> <!-- 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>

src/components/settings_components/settings_main.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import Settings_account from "./settings_account.vue";
 import Settings_account_main from "./settings_account_main.vue";
+import Sps_main from "./sps_main.vue";
 
 const props = defineProps({
   selectedSetting: String
@@ -19,7 +20,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
 <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-->
+      <div class="border-r-grau2 border-r-1 border-r 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-->
@@ -32,11 +33,11 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
 
 
     <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-->
+      <div class="border-r-grau2 border-r-2 border-r 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>
+        <sps_main></sps_main>
       </div>
     </div>
 

src/components/settings_components/settings_sidebar.vue

@@ -14,10 +14,10 @@ function updateSetting(setting: string) {
 
 <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_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_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_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>
+    <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>
 

src/components/settings_components/sps_main.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+<div class="m-3 flex flex-col">
+
+  <label class="text-xl text-grau2 m-2">Blocked Users</label>
+
+  <label class="text-xl text-grau2 m-2">Mailing</label>
+
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/components/wip.vue

@@ -13,11 +13,9 @@ import QuickSearch from "./home_components/quick_search.vue";
       <navigationbar></navigationbar>
     </div>
     <div class="border-x border-x-grau2">
-      <label class="text-weiss text-5xl align-middle mx-60 pt-60">This site is currently Work in Progress...</label>
+      <label class="text-weiss text-5xl align-middle pt-60">This site is currently Work in Progress...</label>
     </div>
-    <div id="right">
+    <div id="right" class="ml-auto flex">
-      <quick-search> </quick-search>
-      <contacts></contacts>
       <legal></legal>
     </div>