quick chat entfernt, profil seiten hinzugefügt, chatt (contacts) verändert

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>

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>

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>

src/components/home_components/quick_search.vue

@@ -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>
-

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>

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>

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>

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>

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>

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="">

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>

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>

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
     }
 ]