kleine veränderung und popup (bei kontakte) sowie testphase stay logged in

src/components/home_components/contacts.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
-const contacts =[
-    {display_name: "Linux Enjoyer", username: "lunix"},
-    {display_name: "XBOX", username: "Xbox"},
-    {display_name: "JETBrains", username: "Jetbrains"},
-]
+import { ref } from 'vue';
+import Popup_chat from "./popup_chat.vue";
+
+const contacts = [
+  { display_name: "Linux Enjoyer", username: "lunix" },
+  { display_name: "XBOX", username: "xbox" },
+  { display_name: "JETBrains", username: "jetbrains" },
+];
+
+const selectedContact = ref(null);
+const showChatPopup = ref(false);
+
+function openChat(contact) {
+  selectedContact.value = contact;
+  showChatPopup.value = true;
+}
 </script>
 
 <template>
@@ -13,19 +24,19 @@ const contacts =[
     </div>
     <div> <!--CONTENT-->
       <ul class="space-y-1">
-        <li v-for="(contact) in contacts" :key="contact" class="flex rounded-lg">
+        <li v-for="(contact) in contacts" :key="contact.username" @click="openChat(contact)" class="flex rounded-lg p-2 cursor-pointer">
           <!--CONTACT-->
           <img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2"> <!--PROFILBILD-->
           <div class="">
-            <label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br> <!-- display name-->
+            <label class="font-bold m-1 text-weiss">{{ contact.display_name }}</label><br> <!-- display name-->
             <p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p> <!-- username-->
           </div>
         </li>
       </ul>
     </div>
+    <popup_chat v-if="showChatPopup" :contact="selectedContact" @close="showChatPopup = false" />
   </div>
 </template>
 
 <style scoped>
-
 </style>

src/components/home_components/feed.vue

@@ -1,7 +1,25 @@
 <script setup lang="ts">
-  import { ref } from "vue";
+import {onMounted, ref} from "vue";
+  import router from "../../router";
   // import {valueOf} from "tailwindcss";
 
+  function checkLoginStatus() {
+    const isLoggedIn = localStorage.getItem('isLoggedIn');
+    if (isLoggedIn === 'true') {
+      console.log("User is logged in");
+      // Perform actions for logged-in users
+    } else {
+      console.log("User is not logged in");
+      // Redirect to login page or show a message
+      // router.push('/login');
+    }
+  }
+
+  // Call this function on component mount or when needed
+  onMounted(() => {
+    checkLoginStatus();
+  });
+
   // PLACEHOLDER
   const post = ref([
     {id: 1,
@@ -60,7 +78,7 @@
 </script>
 
 <template>
-  <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
+  <div class="border-x border-x-grau2"> <!-- MAIN -->
     <div> <!-- FEED HEADER -->
       <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Feed</h2>
       <!-- POSTING-->

src/components/home_components/popup_chat.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, onMounted, watch } from 'vue';
+
+let current_contact = null;
+let self = "danielvici123";
+
+const nachrichten = [
+  { username: "lunix", message: "Moin", msg_id: 1, chat_id: 16423 },
+  { username: "xbox", message: "Hey, was geht?", msg_id: 2, chat_id: 29874 },
+  { username: "danielvici123", message: "Alles gut, und bei dir?", msg_id: 3, chat_id: 29874 },
+  { username: "jetbrains", message: "Hat jemand Erfahrung mit IntelliJ?", msg_id: 4, chat_id: 41235 },
+  { username: "danielvici123", message: "Ja, was brauchst du?", msg_id: 5, chat_id: 41235 },
+  { username: "jetbrains", message: "Wie kann ich Plugins effizient verwalten?", msg_id: 6, chat_id: 41235 }
+];
+
+let geladeneNachrichten = [];
+const props = defineProps({
+  contact: Object
+});
+
+const emit = defineEmits(['close']);
+
+function closeChat() {
+  emit('close');
+}
+
+function openCHAT() {
+  geladeneNachrichten = [];
+  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);
+    }
+  });
+  console.log(geladeneNachrichten);
+}
+
+onMounted(() => {
+  openCHAT();
+});
+
+watch(() => props.contact, () => {
+  openCHAT();
+});
+</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="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>
+    </div>
+    <div class="mt-2">
+      <ul class="space-y-2">
+        <li v-for="(msg) in geladeneNachrichten" :key="msg.msg_id">
+          <div class="space-x-2">
+            <a class="font-bold">{{contact.display_name}}</a>
+          </div>
+          <div>
+            <p>{{ msg.message }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

src/components/home_components/quick_search.vue

@@ -13,4 +13,5 @@
 
 <style scoped>
 
-</style>
+</style>
+