From dc79759d382237ac846a129d8eba7aa05ab8286e Mon Sep 17 00:00:00 2001
From: danielvici123 <danielauto1000@gmail.com>
Date: Sat, 14 Dec 2024 19:55:10 +0100
Subject: [PATCH] =?UTF-8?q?Notifications=20gemacht.=20Settings,=20Login=20?=
 =?UTF-8?q?ver=C3=A4ndert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nachrichten:
- Nachrichten anzeigen mit filter usw.
Login:
- Password ist sind jetzt punkte
Settings, WIP:
- Kleine Stylische anpassungen
---
 database/identifier.sqlite                    | Bin 0 -> 12288 bytes
 src/assets/icons/x.png                        | Bin 0 -> 538 bytes
 .../home_components/navigationbar.vue         |   2 +-
 .../login_components/login_comp.vue           |   2 +-
 src/components/notifications.vue              |   9 +-
 .../notif_sidebar.vue                         |  24 +++-
 .../notifications_components/notifi_main.vue  | 111 ++++++++++++++++--
 src/components/settings.vue                   |   2 +-
 .../settings_components/settings_account.vue  |   2 +-
 .../settings_components/settings_main.vue     |   7 +-
 .../settings_components/settings_sidebar.vue  |   8 +-
 .../settings_components/sps_main.vue          |  17 +++
 src/components/wip.vue                        |   6 +-
 13 files changed, 160 insertions(+), 30 deletions(-)
 create mode 100644 database/identifier.sqlite
 create mode 100644 src/assets/icons/x.png
 create mode 100644 src/components/settings_components/sps_main.vue

diff --git a/database/identifier.sqlite b/database/identifier.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..08f58537e6172543a3dfc2a0310bd29d43fbfd12
GIT binary patch
literal 12288
zcmeI#F-ycS6u|MMiXMfM+p=c#Km>6XtP<q#6zz5Jrc$xu!D;mp#nsUd=l5|m3EX^p
z`M;1CUegBh>-6S#v!(CMQ@?&`y*UwMA*DDoMhGFp+zE3NvEJPjVU6{+kmBg`r%-<)
zQ%)$Sez$$VJ^~0JfB*srAb<b@2q1s}0s|4am-||4`K^5Wu<G7==UqzKMP<v{nz}rn
zS(6@_gCdW^gqYsc_R?17wwhj-)xuoa#bJ7@X+QjPzb^90B-_)cT8icCWB29WSD~|y
zn|-RAbYgRyme|*iqGu7)I3@xC1Q0*~0R#|0009ILKmY**hANQ9i_!lN_4jfw1Q0*~
S0R#|0009ILKmY**lE6PoFERW8

literal 0
HcmV?d00001

diff --git a/src/assets/icons/x.png b/src/assets/icons/x.png
new file mode 100644
index 0000000000000000000000000000000000000000..36e1418660d6ca32256dd9050a250b382faa6e76
GIT binary patch
literal 538
zcmV+#0_FXQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkP%t=H+RCt`tS3OVMKoC6<0g)(x&?2P=iJw6ONKjk{TtVd7z0<sB
zbRbH%z`qDINkc`-Q1A;<<QMQ&B08Wzpe>NVc<yYUtz)FEyl-aw-t6p7qw$%nnIvQ0
z`{}o9z1y8A>n~u_{z42B;K)CYe15lpN3XhAG<d)SY}%gyr#2{#mp&vAK;(6&)0xQ~
z-1}((F0y=ia<wN|$fGQvBTw=s;K<*ZK7gNn!O`B{q$4jg9jI>f!wb1-1i#tZ-u{;B
z54<6T1Mb@G_IC^SLv>cj+fvl$l|q2?X0!Pvy+28k5h2e?Q(r_1QQb-JcjWHC)E77v
z4<1-}-Pexec}Lz?LVW=#{<m7Kuc|uk$bXelU+7ej2Lc>cPJP;<I9@SWcnT})Tfj7`
zG_f00J=7PJq8{qg=78mX2?(&(sLR|i6CgR|fUBWNAmnl0A`AsvY4B*6$B;d!7hpd$
zqgtg9gZezJcwi}<QT6G|NL1&n%c%6JV4&V=JV5sYQ>r_aN+CA&_JaiYTZt6TYB&Qt
z$#P4<9@Kkay>IfW8v{upcEid4EC+s-lET?lUuZB1ELwv}PbmaA9qMQnMbT*8!)b_7
c)?Y350wMBuJOtG4;{X5v07*qoM6N<$g4uBKVgLXD

literal 0
HcmV?d00001

diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index 7bee2c9..eab7000 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/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>
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
index ccadea1..aae54f3 100644
--- a/src/components/login_components/login_comp.vue
+++ b/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>
diff --git a/src/components/notifications.vue b/src/components/notifications.vue
index a8f057a..8f5bead 100644
--- a/src/components/notifications.vue
+++ b/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>
 
diff --git a/src/components/notifications_components/notif_sidebar.vue b/src/components/notifications_components/notif_sidebar.vue
index 57cac19..f9a57c7 100644
--- a/src/components/notifications_components/notif_sidebar.vue
+++ b/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">
-  <label>All</label>
-  <label>You Following</label>
-  <label>Messages</label>
-  <label>Other</label>
+<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 pr-2 font-bold text-xl text-grau2">
+  <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>
+  <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>
+  <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>
+  <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>
 
diff --git a/src/components/notifications_components/notifi_main.vue b/src/components/notifications_components/notifi_main.vue
index 1ea34cf..6f58585 100644
--- a/src/components/notifications_components/notifi_main.vue
+++ b/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) {
-  selectedNotification.value = setting;
-  console.log(`Setting got (NA): ${setting}`);
+
+let feed = ref([]);
+
+// 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>
-    MOIN1
+  <div class="text-grau2 p-5 border-b-2 "><!-- FILTER -->
+    <!-- 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>
diff --git a/src/components/settings.vue b/src/components/settings.vue
index 8b3a588..c25fb43 100644
--- a/src/components/settings.vue
+++ b/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>
diff --git a/src/components/settings_components/settings_account.vue b/src/components/settings_components/settings_account.vue
index a2a5f62..93d0d8e 100644
--- a/src/components/settings_components/settings_account.vue
+++ b/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>
diff --git a/src/components/settings_components/settings_main.vue b/src/components/settings_components/settings_main.vue
index 5a75089..1a4f598 100644
--- a/src/components/settings_components/settings_main.vue
+++ b/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>
 
diff --git a/src/components/settings_components/settings_sidebar.vue b/src/components/settings_components/settings_sidebar.vue
index c6e20ff..30efe73 100644
--- a/src/components/settings_components/settings_sidebar.vue
+++ b/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_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>
+    <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>
 
diff --git a/src/components/settings_components/sps_main.vue b/src/components/settings_components/sps_main.vue
new file mode 100644
index 0000000..a994e08
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/wip.vue b/src/components/wip.vue
index 19452a3..19acc45 100644
--- a/src/components/wip.vue
+++ b/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">
-      <quick-search> </quick-search>
-      <contacts></contacts>
+    <div id="right" class="ml-auto flex">
       <legal></legal>
     </div>