From c7365703df6f9c72af293be21ae3641ac1f66bab Mon Sep 17 00:00:00 2001
From: danielvici123 <danielauto1000@gmail.com>
Date: Wed, 12 Mar 2025 14:11:25 +0100
Subject: [PATCH] =?UTF-8?q?quick=20chat=20entfernt,=20profil=20seiten=20hi?=
 =?UTF-8?q?nzugef=C3=BCgt,=20chatt=20(contacts)=20ver=C3=A4ndert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/send.png                     | Bin 0 -> 587 bytes
 src/assets/icons/x-klein.png                  | Bin 0 -> 340 bytes
 src/components/Home.vue                       |   2 -
 .../home_components/navigationbar.vue         |   3 +-
 src/components/home_components/popup_chat.vue |  25 +++-
 .../home_components/quick_search.vue          |  17 ---
 src/components/notifications.vue              |   3 -
 src/components/posts.vue                      |   3 -
 src/components/profile.vue                    |  26 ++++
 .../profile_components/profile_main.vue       | 139 ++++++++++++++++++
 src/components/search.vue                     |   3 +-
 .../search_components/search_main.vue         |   5 +-
 src/components/settings.vue                   |   2 -
 src/components/wip.vue                        |   4 -
 src/router/index.ts                           |  11 +-
 15 files changed, 199 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/icons/send.png
 create mode 100644 src/assets/icons/x-klein.png
 delete mode 100644 src/components/home_components/quick_search.vue
 create mode 100644 src/components/profile.vue
 create mode 100644 src/components/profile_components/profile_main.vue

diff --git a/src/assets/icons/send.png b/src/assets/icons/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..22a0b9dc2f802ffce33e7a8feee91b8d5317e00f
GIT binary patch
literal 587
zcmV-R0<`^!P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkP{YgYYRCt{2l|5(_Q51!rKVVc88#|*Qh={eVm|8^xE;hn|hPihZ
z?m2I>q_P-EA(moo3I!3t&S<OR4=A<@YL!k*q0uJz&s#N&!|crNW_Cfyf!EA?GvB;(
z&wbCiHT~~uG#VQcvk4`yD7m2IqoKi~C>o2sKQ6$W0*gxi%#4LvVR0O9>A=YALN4WC
z*>QQ*Ff-e!-cKocSIFfqpdZ;eA&(5UGhlZD#6sQ?;A_dw0_3xhHv+u#3|LIlbYsu3
z#QVJhP=UuQAE_7uycO?H<!rxN32S<PP{<1cyy^v%gWe0y<ljxaKUxYE@<G3_Og(3V
zodV4NGY5PMX)gsU@U-t;l1mAB^3RXY7Oc5dX>+U9+N{8}KEQ86X*y7|6Gb_Q$<vkK
zzY6J9@=HZM=SlA9I7RMP;A4Rs%VxH{XK+wV9#-;QVLgFMX_~GN>(0*1Y*X@Ox1V!^
zXv%Dt0?)ER5nwX2WSx+=OI$hU29=p@3VkTR>x4XzoeOPOQjTxogmbG^lxqnEjtTI+
zD;Rj_>Xrce1o%)9KGq7g-_{p~DI36Mv$@CBEeZE+`JwW{4MR~BjS2a@1bp5NOUd-~
zxRCFQ!1?so4>z00-_4=z+$f|#JJ&`R-KZqw%@v!0Ln8y9X}7lu`9y*H;TRnmculSc
Z{Q@`)ZW9Uz&C&n>002ovPDHLkV1l<>2aEs!

literal 0
HcmV?d00001

diff --git a/src/assets/icons/x-klein.png b/src/assets/icons/x-klein.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c1eb95ef33b1dc6605b7efe3d1003edd030e044
GIT binary patch
literal 340
zcmV-a0jvIrP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkP21!IgRCt`Vlut^-P!PsLQR-DJtryURXR=+XFwFnxF3W5^Lr+nP
zxNz?+w1U!-Vq#44NS~wwvzm|Z@tZd@Nph?pwk3(LfAR?cMj>rcD>Rj!ZP_*yyCd;!
zmFn}5A+jy%T4cZNdi8|FSHB|Lfa*m{r#d0=k4h)@oagyzH#Vi`4e=`goR#$~%f=}7
zQh$^vodx^Yi7x(7Lw)Q;?L#N=Z)U${POp&d>mbx-fa-LQQ<}29?elMcr%6n7pvR#e
zfF6%}R6}IH4<Q%rh%$pAKLr9~gQ}PR8XIh&B70iaiXo3er^wYK@z3Du#T*A@d+$ZZ
m7OLF@Nz~`P=z|~Fp<)LzyP`)l^Px-t0000<MNUMnLSTaDE|MAm

literal 0
HcmV?d00001

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 5c7ed61..faa3f8b 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -4,7 +4,6 @@ import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
 import Navigationbar from "./home_components/navigationbar.vue";
 import Trending from "./home_components/trending.vue";
-import QuickSearch from "./home_components/quick_search.vue";
 </script>
 
 
@@ -18,7 +17,6 @@ import QuickSearch from "./home_components/quick_search.vue";
       <feed></feed>
     </div>
     <div class="w-1/4">
-      <quick-search></quick-search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index abb1388..6ff1afe 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/src/components/home_components/navigationbar.vue
@@ -5,6 +5,7 @@
 import router from "../../router";
 import { ref, onMounted } from 'vue';
 
+let self = ref("danielvici123");
 
 </script>
 
@@ -18,7 +19,7 @@ import { ref, onMounted } from 'vue';
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/search')">        <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="router.push('/notifications')"> <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="router.push('/wip')">           <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/wip')">           <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push(`/profile/${self}`)">           <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/settings')">      <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
     </div>
   </div>
diff --git a/src/components/home_components/popup_chat.vue b/src/components/home_components/popup_chat.vue
index 2b9bf3c..9b39c42 100644
--- a/src/components/home_components/popup_chat.vue
+++ b/src/components/home_components/popup_chat.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, defineEmits, onMounted, watch } from 'vue';
+import {defineProps, defineEmits, onMounted, watch, ref} from 'vue';
 
 let current_contact = null;
 let self = "danielvici123";
@@ -13,7 +13,8 @@ const nachrichten = [
   { username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 }
 ];
 
-let geladeneNachrichten = [];
+let geladeneNachrichten = ref([]);
+const send_message = ref("");
 const props = defineProps({
   contact: Object
 });
@@ -25,19 +26,25 @@ function closeChat() {
 }
 
 function openCHAT() {
-  geladeneNachrichten = [];
+  geladeneNachrichten.value = [];
   console.log("Chat geöffnet");
   current_contact = props.contact;
   console.log(current_contact);
 
   nachrichten.forEach((nachricht) => {
     if (nachricht.username == current_contact.username) {
-      geladeneNachrichten.push(nachricht);
+      geladeneNachrichten.value.push(nachricht);
     }
   });
   console.log(geladeneNachrichten);
 }
 
+function sendMessage(){
+  event.preventDefault();
+  // API nachricht senden
+  console.log("Nachricht gesendet")
+}
+
 onMounted(() => {
   openCHAT();
 });
@@ -48,13 +55,13 @@ watch(() => props.contact, () => {
 </script>
 
 <template>
-  <div class="fixed bottom-0 right-0 m-4 p-4 bg-schwarz text-weiss rounded-lg shadow-lg w-80">
+  <div class="fixed bottom-0 right-0 m-3 p-4 bg-schwarz text-weiss rounded-lg shadow-lg w-80">
     <div class="flex justify-between items-center bborder-b-2 border-b-grau2">
       <div class="flex">
         <h3 class="text-lg font-bold">{{ contact.display_name }}</h3>
         <a class="px-2">@{{ contact.username }}</a>
       </div>
-      <button @click="closeChat" class="text-logo-farbe-rot">X</button>
+      <button @click="closeChat" class="text-logo-farbe-rot"><img src="../../assets/icons/x-klein.png" alt=""></button>
     </div>
     <div class="mt-2">
       <ul class="space-y-2">
@@ -67,6 +74,12 @@ watch(() => props.contact, () => {
           </div>
         </li>
       </ul>
+      <div>
+        <form class="flex mt-4" @submit="sendMessage">
+          <label><input v-model="send_message" class="bg-schwarz outline-none border-b-2 mt-2 py-2 px-1" placeholder="Message"></label>
+          <button type="submit"><img src="../../assets/icons/send.png" alt="senden" class="ml-4 mt-1"></button>
+        </form>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/home_components/quick_search.vue b/src/components/home_components/quick_search.vue
deleted file mode 100644
index 867e866..0000000
--- a/src/components/home_components/quick_search.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <div class="flex p-4 border-b-2 border-b-grau2">
-    <div class="w-12">
-      <img class="p-2 bg-grau-dunkel rounded-l-lg" src="../../assets/icons/lupe.png" alt="">
-    </div>
-    <input type="text" class="bg-grau-dunkel rounded-r-lg focus:outline-none text-weiss" placeholder="Search...">
-  </div>
-</template>
-
-<style scoped>
-
-</style>
-
diff --git a/src/components/notifications.vue b/src/components/notifications.vue
index fae6ea7..08f2318 100644
--- a/src/components/notifications.vue
+++ b/src/components/notifications.vue
@@ -2,8 +2,6 @@
 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";
 import Contacts from "./home_components/contacts.vue";
 
 </script>
@@ -20,7 +18,6 @@ import Contacts from "./home_components/contacts.vue";
       <notifi_comp></notifi_comp>
     </div>
     <div class="w-1/4">
-      <quick_search></quick_search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/components/posts.vue b/src/components/posts.vue
index 6733561..1e38cbd 100644
--- a/src/components/posts.vue
+++ b/src/components/posts.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import Trending from "./home_components/trending.vue";
 import Navigationbar from "./home_components/navigationbar.vue";
-import QuickSearch from "./home_components/quick_search.vue";
 import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
 
@@ -44,7 +42,6 @@ onMounted(async () => {
       </div>
     </div>
     <div class="w-1/4">
-      <quick-search></quick-search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/components/profile.vue b/src/components/profile.vue
new file mode 100644
index 0000000..6f47177
--- /dev/null
+++ b/src/components/profile.vue
@@ -0,0 +1,26 @@
+<script setup>
+
+import Navigationbar from "./home_components/navigationbar.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+import Profile_main from "./profile_components/profile_main.vue";
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <div id="left" class="w-72">
+      <navigationbar></navigationbar>
+    </div>
+    <div class="w-100p border-x border-x-grau2">
+      <profile_main></profile_main>
+    </div>
+    <div id="right" class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/profile_components/profile_main.vue b/src/components/profile_components/profile_main.vue
new file mode 100644
index 0000000..201e5ef
--- /dev/null
+++ b/src/components/profile_components/profile_main.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const profile = ref(null);
+
+
+const post = ref([
+  {id: 541242,
+    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.",
+    comments_count: undefined, likes: 532844},
+  {id: 145,
+    profile_picture: "../../assets/danielvici_pp.png",
+    author_display_name: "danielvici123", author_username: "danielvici",
+    content: "I like Animes. I use Anilist to track them.",
+    comments_count: undefined, likes: 5325466844},
+  {id: 246,
+    profile_picture: "../../assets/danielvici_pp.png",
+    author_display_name: "danielvici123", author_username: "danielvici",
+    content: "sfsafhffgf",
+    comments_count: undefined, likes: 5},
+
+])
+
+
+
+function fetchProfile(userId) {
+  // Replace with your actual API call
+  return fetch(`/api/profile/${userId}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      });
+}
+
+onMounted(async () => {
+  const userId = route.params.id;
+  try {
+    const data = await fetchProfile(userId);
+    profile.value = data;
+  } catch (error) {
+    console.error('Error fetching profile:', error);
+  }
+});
+
+router.beforeEach((to, from, next) => {
+  if ((from.name === 'Feed' || from.name === 'Settings') && to.name === 'Profile') {
+    // Set profile to 'danielvici123'
+    fetchProfile('danielvici123')
+        .then(data => {
+          profile.value = data;
+          next();
+        })
+        .catch(error => {
+          console.error('Error fetching profile:', error);
+          next();
+        });
+  } else {
+    next();
+  }
+});
+
+
+function addLike(index: number) {
+  post.value[index].likes += 1;
+  console.log("New Like Amount: ", post.value[index].likes);
+}
+
+</script>
+
+<template>
+<div><!-- MAIN -->
+    <div> <!-- FEED HEADER -->
+      <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Profile</h2>
+    </div>
+  <div>
+    <div class="text-weiss p-4"> <!-- PROFILE-->
+      <div class="flex justify-center">
+        <img src="../../assets/danielvici_pp.png" alt="" class="size-48 rounded-full"/>
+      </div>
+      <div class="text-center p-5 flex flex-col">
+        <label class="text-xl font-bold m-1 text-weiss">danielvici123</label>
+        <label class="text-base m-1 text-grau2">@danielvici</label>
+      </div>
+      <div class="text-grau2 p2 text-center">
+        <label class="text-base m-1 p-2"> Followers <a class="text-weiss">151</a></label>
+        <label class="text-base m-1 p-2"> Following <a class="text-weiss">2625</a></label>
+      </div>
+    </div>
+  </div>
+
+  <div> <!-- POSTS -->
+    <div>
+      <h2 class="align-middle  mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts</h2>
+    </div>
+    <ul>
+      <li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
+        <!-- POST -->
+        <img src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
+        <div>
+          <div> <!-- POST HEADER -->
+            <label class="text-lg font-bold m-1 text-weiss">{{postitem.author_display_name}}</label>
+            <label class="text-base m-1 text-grau2">@{{ postitem.author_username }}</label>
+          </div>
+          <div class="m-2"> <!-- POST CONTENT -->
+            <p class="text-sm m-1 text-weiss">{{ postitem.content }}</p>
+          </div>
+          <div class="flex"> <!-- POST FOOTER -->
+            <div class="flex"> <!-- Comments -->
+              <img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
+              <label class="text-sm m-1 text-weiss" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
+              <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
+            </div>
+
+            <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
+              <img alt="" src="../../assets/icons/herz.png" class="align-middle">
+              <label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
+            </div>
+
+            <div class="flex items-center mx-2"> <!-- View Post -->
+              <router-link :to="{ name: 'PostDetail', params: { id: postitem.id } }" class="text-weiss">View Post</router-link>
+            </div><!-- ENDE -->
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/search.vue b/src/components/search.vue
index 9d4dae2..a1e6199 100644
--- a/src/components/search.vue
+++ b/src/components/search.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import Quick_search from "./home_components/quick_search.vue";
+
 import Navigationbar from "./home_components/navigationbar.vue";
 import Legal from "./home_components/legal.vue";
 import Search_main from "./search_components/search_main.vue";
@@ -19,7 +19,6 @@ import Contacts from "./home_components/contacts.vue";
       <search_main></search_main>
     </div>
     <div class="w-1/4">
-      <quick_search></quick_search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/components/search_components/search_main.vue b/src/components/search_components/search_main.vue
index 9e3e94e..277b4c9 100644
--- a/src/components/search_components/search_main.vue
+++ b/src/components/search_components/search_main.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {ref} from "vue";
+import router from "../../router";
 
 const hashtags = [ // DIESE HASTAGS SIND NUR FÜR DIE TRANDING DA
   {id: 8,name: "gym", nr_posts: 2144, category: "Lifestyle"},
@@ -145,11 +146,11 @@ function go_fs(){
   <!-- ### ### ### ### ### ### ### -->
   <div>
     <div>
-      <a class="text-2xl flex justify-center mt-4">Result(s):</a> <!-- RESULTS -->
+      <a class="text-2xl flex justify-center mt-4">Result(s):</a> <!-- ---------RESULTS---------------- -->
     </div>
     <div v-if="feed.length > 0">
       <div v-for="(bing, i) in feed" :key="bing" class=""> <!-- SEARCH RESULTS -->
-        <div v-if="bing.type === 'user'" class="pt-2 p-3 border-b-grau2 border-b"> <!-- USER RESULT -->
+        <div v-if="bing.type === 'user'" class="pt-2 p-3 border-b-grau2 border-b" @click="router.push('/profile/${bing.username}')"> <!-- --- USER RESULT --- -->
           <div class="flex">
             <img src="/src/assets/default_pp.png" alt="profile picture" class="rounded-full w-16 h-16">
             <div class="">
diff --git a/src/components/settings.vue b/src/components/settings.vue
index 480a1a0..8559f2a 100644
--- a/src/components/settings.vue
+++ b/src/components/settings.vue
@@ -6,7 +6,6 @@ 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";
 import Contacts from "./home_components/contacts.vue";
-import Quick_search from "./home_components/quick_search.vue";
 
 const selectedSetting = ref('');
 
@@ -27,7 +26,6 @@ function handleUpdateSetting(setting: string) {
       <settings_main :selectedSetting="selectedSetting"></settings_main>
     </div>
     <div class="w-1/4">
-      <quick_search></quick_search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/components/wip.vue b/src/components/wip.vue
index 19452a3..f84a8bd 100644
--- a/src/components/wip.vue
+++ b/src/components/wip.vue
@@ -1,10 +1,7 @@
 <script setup>
 import Navigationbar from "./home_components/navigationbar.vue";
-import Feed from "./home_components/feed.vue";
 import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
-import Trending from "./home_components/trending.vue";
-import QuickSearch from "./home_components/quick_search.vue";
 </script>
 
 <template>
@@ -16,7 +13,6 @@ import QuickSearch from "./home_components/quick_search.vue";
       <label class="text-weiss text-5xl align-middle mx-60 pt-60">This site is currently Work in Progress...</label>
     </div>
     <div id="right">
-      <quick-search> </quick-search>
       <contacts></contacts>
       <legal></legal>
     </div>
diff --git a/src/router/index.ts b/src/router/index.ts
index d6abfe8..e9dc62b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,10 +7,11 @@ import Home from "../components/Home.vue";
 import Login from "../components/Login.vue";
 import wip from "../components/wip.vue";
 import settings from "../components/settings.vue";
-import nottifications from "../components/notifications.vue";
+import notifications from "../components/notifications.vue";
 import register from "../components/register.vue";
 import search from "../components/search.vue";
 import post from '../components/posts.vue';
+import profile from "../components/profile.vue";
 // The routing does not happen automatically
 // Each route has to be defined here, or it won't work.
 const routes = [
@@ -37,7 +38,7 @@ const routes = [
     {
         path: "/notifications",
         name: "Notifications",
-        component: nottifications,
+        component: notifications,
     },
     {
         path: "/register",
@@ -54,6 +55,12 @@ const routes = [
         name: 'PostDetail',
         component: post,
         props: true
+    },
+    {
+        path: '/profile/:username',
+        name: 'Profile ',
+        component: profile,
+        props: true
     }
 ]