suche geht jetzt, special sachen für user 99 (danielvici gemacht) und in einstellungen werden daten angezeigt

src/components/home_components/feed.vue

@@ -81,17 +81,6 @@ async function addLike(post_id: string | number, user_id: number, index: number)
   }
 }
 
-function gotoPost(post_id: string | number) {
-  localStorage.setItem("viewedpost", post_id.toString());
-  router.push(`/post/${post_id}`);
-}
-
-function copyLink(post_id: string | number) {
-  const tocopy = `http://localhost:5173/post/${post_id}`;
-  navigator.clipboard.writeText(tocopy);
-  alert("Copied to clipboard");
-}
-
 async function post_create(post_text: string) {
   if (post_text === "") {
     alert("Please write something before posting.");
@@ -114,6 +103,17 @@ async function post_create(post_text: string) {
   console.log(post_text);
 }
 
+function gotoPost(post_id: string | number) {
+  localStorage.setItem("viewedpost", post_id.toString());
+  router.push(`/post/${post_id}`);
+}
+
+function copyLink(post_id: string | number) {
+  const tocopy = `http://localhost:5173/post/${post_id}`;
+  navigator.clipboard.writeText(tocopy);
+  alert("Copied to clipboard");
+}
+
 function gotoProfile(user_id: string | number) {
   router.push(`/profile/${user_id}`);
 }
@@ -126,7 +126,8 @@ function gotoProfile(user_id: string | number) {
       <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b-2 ">Feed</h2>
       <!-- POSTING-->
       <div class="flex border-2 border-b-grau2">
-        <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+        <img v-if="self_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+        <img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
         <form class="w-full pr-5">
           <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
           <textarea v-model="post_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
@@ -141,7 +142,9 @@ function gotoProfile(user_id: string | number) {
       <ul>
         <li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
           <!-- POST -->
-          <img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+
+          <img v-if="postitem.username != 'danielvici' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+          <img v-else 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.displayname}}</label>

src/components/posts.vue

@@ -42,28 +42,10 @@ const comments = ref<Comment[] | null>(null);
 let comment_text = ref();
 let self_id;
 
+const loading = ref(true);
+
 let post_uuid = ref();
 
-onMounted(async () => {
-  console.log("PARAMS: "+ route.path);
-  const pathArray = route.path.split('/');
-  console.log(pathArray);
-
-  if (pathArray.length > 2) {
-    post_uuid.value = pathArray[2];
-    console.log("post_id 0: ", post_uuid.value);
-
-  }
-
-  if (!post_uuid) {
-    alert('No post selected. Redirecting to feed.');
-    await router.push('/');
-    return;
-  }
-  self_id = localStorage.getItem('self_id');
-  getPost(parseInt(post_uuid.value));
-  getComment(parseInt(post_uuid.value));
-});
 
 async function getPost(post_id: any) {
   try {
@@ -92,6 +74,8 @@ async function getPost(post_id: any) {
     console.log(post.value);
   } catch (e) {
     console.error(e);
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -219,6 +203,26 @@ async function addLike_comment(comment_id: number | string) {
 function gotoProfile(user_id: string | number) {
   router.push(`/profile/${user_id}`);
 }
+
+onMounted(async () => {
+  console.log("PARAMS: "+ route.path);
+  const pathArray = route.path.split('/');
+  console.log(pathArray);
+
+  if (pathArray.length > 2) {
+    post_uuid.value = pathArray[2];
+    console.log("post_id 0: ", post_uuid.value);
+  }
+
+  if (!post_uuid) {
+    alert('No post selected. Redirecting to feed.');
+    await router.push('/');
+    return;
+  }
+  self_id = localStorage.getItem('self_id');
+  getPost(parseInt(post_uuid.value));
+  getComment(parseInt(post_uuid.value));
+});
 </script>
 
 <template>
@@ -233,7 +237,8 @@ function gotoProfile(user_id: string | number) {
 
 
       <div class="flex px-2 py-4 border-b-grau2 border-b">
-        <img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+        <img v-if="user.username != 'danielvici' " src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+        <img v-else 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">{{user.displayname}}</label>
@@ -266,7 +271,9 @@ function gotoProfile(user_id: string | number) {
 
         <div> <!-- WRITE COMMENTS -->
           <div class="flex border-b-2 border-b-grau2">
-            <img src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+            <img v-if="self_id != '99' " src="../assets/default_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+            <img v-else src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+             <!-- <img src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">-->
             <form class="w-full pr-5">
               <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
               <textarea v-model="comment_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
@@ -282,7 +289,8 @@ function gotoProfile(user_id: string | number) {
             <ul v-if="comments && comments.length > 0">
               <li v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
                 <div class="flex">
-                  <img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+                  <img v-if="c.author_user_id != '99' " src="../assets/default_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+                  <img v-else src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
                   <div>
                     <div> <!-- POST HEADER -->
                       <label class="text-lg font-bold m-1 text-weiss">{{c.displayname}}</label>

src/components/profile_components/profile_main.vue

@@ -132,11 +132,12 @@ function copyUser(){
 <template>
   <div>
     <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Profile</h2>
-    <div class="mb-12" v-if="userData">
+    <div class="mb-6" v-if="userData">
-      <div class="text-weiss p-4 flex justify-center">
+      <div class="text-weiss p-2 flex justify-center">
-        <img src="../../assets/default_pp.png" alt="" class="size-36 rounded-full" />
+        <img v-if="userData.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full size-36">
+        <img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full size-36">
       </div>
-      <div class="text-center p-5 flex flex-col">
+      <div class="text-center p-2 flex flex-col">
         <label class="text-xl font-bold m-1 text-weiss" @click="consoleLog()">{{ userData.displayname }}</label>
         <label class="text-base m-1 text-grau2">@{{ userData.username }}</label>
       </div>
@@ -155,10 +156,11 @@ function copyUser(){
     <div>
       <h2 class="align-middle p-6 text-xl text-weiss border-y-grau2 border-y ">Posts</h2>
     </div>
-    <div class="sm:overflow-y-auto sm:h-[350px] sm:scrollbar">
+    <div class="sm:overflow-y-auto sm:h-[400px] sm:scrollbar">
       <ul v-if="upc.length > 0">
         <li v-for="(postitem, indexus) in upc" :key="postitem.user_id" class="border border-grau2 p-3 flex">
-          <img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+          <img v-if="postitem.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+          <img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
           <div>
             <div>
               <label class="text-lg font-bold m-1 text-weiss">{{ userData.displayname }}</label>

src/components/search_components/search_main.vue

@@ -1,198 +1,216 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref, onMounted} from "vue";
 import router from "../../router";
 
-const hashtags = [ // DIESE HASTAGS SIND NUR FÜR DIE TRANDING DA
+const allItems = ref<any[]>([]);
-  {id: 8,name: "gym", nr_posts: 2144, category: "Lifestyle"},
+const feed = ref<any[]>([]);
-  {id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
+const feed2 = ref<any[]>([]);
-  {id: 2,name: "lol" , nr_posts: 16422, category: "Gaming"},
-  {id: 7,name: "jetbrains", nr_posts: 1251, category: "Programming"},
-  {id: 4,name: "github", nr_posts: 464, category: "Programming"},
-  {id: 5,name: "r6",nr_posts: 4463, category: "Gaming"},
-  {id: 6,name: "25" , nr_posts: 123, category: "Numbers"},
-  {id: 3,name: "minecraft", nr_posts: 466, category: "Gaming"},
-  {id: 9,name: "tiktok", nr_posts: 215474, category: "social media"},
-];
-
-const dinge = ref([ // SUCH DINGER
-  {id: 1, username: "danielvici123", displayname: "danielvici223", type: "user", like:0},
-  {id: 2, text_content: "My First Post on ESP", comments: 24,like: 2151, author: "danielvici123", author_id: 1, type: "post"},
-  {id: 3, hashtag:"civ6", posts: 123, category: "Gaming", type: "hashtag" ,like:0},
-  {id: 5, username: "xbox_official", displayname: "xbox", type: "user" ,like:0},
-  {id: 4, username: "jetbrains", displayname: "jetbrains", type: "user" ,like:0},
-  {id: 6, text_content: "xbox is the best platform", comments: 24,like: 2151, author: "xbox", author_id: 5, type: "post"},
-  {id: 7, text_content: "webstorm x.x is out now! Check it out!", comments: 24,like: 2151, author: "jetbrains", author_id: 4, type: "post"},
-  {id: 8, hashtag:"civ7", posts: 514, category: "Gaming", type: "hashtag" ,like:0},
-]);
-
-// HASTAGS
-let most_posts_hashtags = [];
-
-hashtags.sort((a, b) => {
-  return b.nr_posts - a.nr_posts;
-})
-
-most_posts_hashtags = hashtags.slice(0, 3);
-
-function addLike(index: number) {
-  dinge.value[index].like += 1; // damit das geht haben hastags und user likes.
-  console.log("New Like Amount: ", dinge.value[index].like);
-}
-
-console.log(most_posts_hashtags);
-
-// FEED mit filter und suche
-
-let feed = ref([]);
-let feed2 = ref([]);
 
 interface search_filter {
-  u: boolean; // user
+  u: boolean;
-  h: boolean; // hastag
+  p: boolean;
-  p: boolean; // posts
 }
-// Standard filter
 const search_filter_status = ref<search_filter>({
-  u: true, // user default: true
+  u: true,
-  h: true, // hastag default: true
+  p: true,
-  p: true, // posts default: true
+});
+let searched = false;
+
+const usr_search = ref<string | undefined>(undefined);
+
+async function get_posts_user() {
+  try {
+    const post_response = await fetch('http://localhost:8000/api/posts');
+    const postsDATA = await post_response.json();
+
+    const user_response = await fetch('http://localhost:8000/api/users');
+    const usersDATA = await user_response.json();
+
+    usersDATA.forEach(user => {
+      allItems.value.push({...user, id: user.user_id, type: 'user'});
     });
 
-let usr_search;
+    postsDATA.forEach(post => {
+      const author = usersDATA.find(user => user.user_id === post.user_id);
+      const postWithAuthorInfo = {
+        ...post,
+        type: 'post',
+        username: author ? author.username : 'unknown',
+        displayname: author ? author.displayname : 'unknown',
+      };
+      allItems.value.push(postWithAuthorInfo);
+    });
 
-for(let i =0; i < dinge.value.length; i++) {
+    feed.value = [...allItems.value];
-  console.log("Getting Notifications...");
+    feed2.value = [...allItems.value];
-  feed.value.push(dinge.value[i]);
+
+    //console.log("Data Loaded:", allItems.value);
+  } catch (error) {
+    console.error("Error:", error);
+  }
 }
 
+onMounted(async () => {
+  get_posts_user();
+});
+
 function go_fs(){
-  console.log("These Filter applied: ", JSON.stringify(search_filter_status.value));
+  searched = true;
   feed.value = [];
   feed2.value = [];
 
-
+  const combinedFilteredItems = allItems.value
-  dinge.value.forEach((dinge) => {
+      .filter(item => (search_filter_status.value.u == true && item.type === "user") ||
-    if ((search_filter_status.value.u == true && dinge.type === "user") || (search_filter_status.value.h == true && dinge.type === "hashtag")|| (search_filter_status.value.p == true && dinge.type === "post")){
+          (search_filter_status.value.p == true && item.type === "post"))
-      feed2.value.push(dinge);
+      .map(item => {
+        if (item.type === 'post') {
+          const user = allItems.value.find(u => u.id === item.user_id && u.type === 'user');
+          return {
+            ...item,
+            username: user ? user.username : 'unknown',
+            displayname: user ? user.displayname : 'unknown',
+          };
         }
-  })
+        return item;
-  let i = 0;
+      });
-  if (usr_search == undefined) {
+
-    feed = feed2;
+  feed2.value = combinedFilteredItems;
+
+  const searchTerm = usr_search.value ? usr_search.value.toLowerCase() : '';
+  if (!searchTerm) {
+    feed.value = [...feed2.value];
     return;
-  } else {
+  }
-    feed2.value.forEach(() => {
+
-      switch (feed2.value[i].type) {
+  feed.value = feed2.value.filter(item => {
+    switch (item.type) {
       case "user":
-          if (feed2.value[i].displayname.includes(usr_search) || feed2.value[i].username.includes(usr_search)) {
+        return (item.displayname && item.displayname.toLowerCase().includes(searchTerm)) || (item.username && item.username.toLowerCase().includes(searchTerm));
-            feed.value.push(feed2.value[i]);
-          }
-          console.log("User: ", feed2.value[i].displayname);
-          break;
       case "post":
-          if (feed2.value[i].text_content.includes(usr_search) || feed2.value[i].author.includes(usr_search)) {
+        return (item.post_text && item.post_text.toLowerCase().includes(searchTerm)) || (item.username && item.username.toLowerCase().includes(searchTerm) || item.displayname && item.displayname.toLowerCase().includes(searchTerm));
-            feed.value.push(feed2.value[i]);
-          }
-          console.log("Post: ", feed2.value[i]);
-          break;
-        case "hashtag":
-          if (feed2.value[i].hashtag.includes(usr_search)) {
-            feed.value.push(feed2.value[i]);
-          }
-          console.log("Hashtag: ", feed2.value[i].hashtag);
-          break;
       default:
-          console.log("No Results Found");
+        return false;
-          break;
     }
-      i++;
+  });
-    })
 }
 
+async function addLike(post_id: string | number, user_id: number, index: number) {
+  try {
+    feed.value[index].likes++;
+    const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
+      method: 'POST',
+      headers: {'content-type': 'application/json'},
+      body: `{"userId":${user_id}}`,
+    });
 
-  console.log("Feed:", feed.value);
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Server-Fehlertext:', errorText);
+      throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
     }
 
+    const data = await response.json();
 
+    return data;
+  } catch (error) {
+    console.error('Fehler beim Liken des Posts:', error);
+    throw error;
+  }
+}
+
+function gotoPost(post_id: string ) {
+  localStorage.setItem("viewedpost", post_id);
+  router.push(`/post/${post_id}`);
+  console.log("goto post: " + post_id);
+}
+
+function copyLink(post_id: string | number) {
+  const tocopy = `http://localhost:5173/post/${post_id}`;
+  navigator.clipboard.writeText(tocopy);
+  alert("Copied to clipboard");
+}
+
+function gotoProfile(user_id: string | number) {
+  router.push(`/profile/${user_id}`);
+}
 </script>
+
 <template>
   <div>
-  <div class="flex justify-center"> <!-- Search-->
+    <div class="flex justify-center">
       <div class="w-1/2">
         <form @submit.prevent="go_fs" class="flex flex-col">
           <input type="text" placeholder="Search..." class="w-full m-2 mt-6 p-4 bg-grau-dunkel focus:outline-none rounded-xl placeholder:text-center text-center" v-model="usr_search">
           <div class="flex justify-center text-grau2">
-          <label class="m-2 accent-logo-farbe-blau"><input type="checkbox" class="mr-1" v-model="search_filter_status.u">User</label>
+            <label class="m-2 accent-button-farbe"><input type="checkbox" class="mr-1" v-model="search_filter_status.u">User</label>
-          <label class="m-2 accent-logo-farbe-rot" ><input type="checkbox" class="mr-1" v-model="search_filter_status.h">Hashtag</label>
+            <label class="m-2 accent-button-farbe"><input type="checkbox" class="mr-1" v-model="search_filter_status.p">Post</label>
-          <label class="m-2 accent-logo-farbe-lila"><input type="checkbox" class="mr-1" v-model="search_filter_status.p">Post</label>
           </div>
-        <button class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe w-1/2 place-self-center">Filter</button>
+          <button class="text-schwarz pl-1 mx-1 px-1 rounded-lg bg-button-farbe w-1/2 place-self-center">Filter /Search </button>
         </form>
       </div>
     </div>
 
-  <!-- ### ### ### ### ### ### ### -->
     <div>
       <div>
-      <a class="text-2xl flex justify-center mt-4">Result(s):</a> <!-- ---------RESULTS---------------- -->
+        <a class="text-2xl flex justify-center mt-4 pt-2 p-3 border-b-grau2 border-b">Result(s):</a>
       </div>
-    <div v-if="feed.length > 0">
+      <div v-if="feed.length > 0 && searched == true" class="sm:overflow-y-auto sm:h-[650px] sm:scrollbar">
-      <div v-for="(bing, i) in feed" :key="bing" class=""> <!-- SEARCH RESULTS -->
+        <div v-for="(bing, i) in feed" :key="bing.id">
-        <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">
             <div class="flex">
-            <img src="/src/assets/default_pp.png" alt="profile picture" class="rounded-full w-16 h-16">
+              <img v-if="bing.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+              <img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
               <div class="">
                 <a class="text-lg m-1">{{ bing.displayname }}</a>
                 <a class="text-base m-1 text-grau2">@{{ bing.username }}</a>
-              <div><a class=" text-sm m-3 text-weiss">my cool bio</a></div>
-            </div>
-          </div>
-        </div>
-        <!-- ### ### -->
-        <div v-else-if="bing.type === 'post'" class="flex p-3 border-b-grau2 border-b " > <!-- POST RESULT-->
-          <img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
                 <div>
-            <div> <!-- POST HEADER -->
+                  <a class=" text-sm m-3 text-weiss" v-if="bing.bio">{{ bing.bio }}</a>
-              <label class="text-lg m-1 text-weiss">{{bing.author}}</label>
+                  <a class=" text-sm m-3 text-grau2 italic" v-else>User has no bio.</a>
-              <label class="text-base m-1 text-grau2">@username</label>
                 </div>
-            <div class="m-2"> <!-- POST CONTENT -->
+                <button @click="gotoProfile(bing.user_id)" class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe"> Go to Profile</button>
-              <p class="text-sm m-1 text-weiss">{{ bing.text_content }}</p>
               </div>
-            <div class="pt-2">
+            </div>
-              <div class="flex"> <!-- POST FOOTER -->
+          </div>
-                <div class="flex"> <!-- Comments -->
+          <div v-else-if="bing.type === 'post'" class="flex p-3 border-b-grau2 border-b "> <!-- POSTS -->
+            <img v-if="bing.user_id != '99' " src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+            <img v-else src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
+            <div>
+              <div>
+                <label class="text-lg m-1 text-weiss">{{ bing.displayname }}</label>
+                <label class="text-base m-1 text-grau2">@{{ bing.username }}</label>
+              </div>
+              <div class="m-2">
+                <p class="text-sm m-1 text-weiss">{{ bing.post_text }}</p>
+              </div>
+              <div class="sm:flex pt-2">
+                <div class="flex">
+                  <div class="flex">
                     <img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
                     <label class="text-sm m-1 text-weiss" v-if="bing.comments != undefined">{{ bing.comments }}</label>
                     <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
                   </div>
 
-                <div class="flex items-center" @click="addLike(i)"> <!-- Likes -->
+                  <div class="flex items-center" @click="addLike(bing.posts_uuid, bing.user_id, i)">
                     <img alt="" src="../../assets/icons/herz.png" class="align-middle">
-                  <label class="text-sm m-1 text-weiss">{{ bing.like }}</label>
+                    <label class="text-sm m-1 text-weiss">{{ bing.likes }}</label>
-                </div>
-              </div>
                   </div>
                 </div>
+                <br class="sm:hidden">
+                <div class="flex sm:tems-center mx-2"> <!-- View Post -->
+                  <button @click="gotoPost(bing.posts_uuid)" class="text-schwarz mx-1 px-1 rounded-lg bg-button-farbe">View Post</button>
+                  <button @click="copyLink(bing.posts_uuid)" class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
+                  <button @click="gotoProfile(bing.user_id)" class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe"> Go to Profile</button>
                 </div><!-- ENDE -->
-        <!-- ### ### -->
-        <div v-else-if="bing.type === 'hashtag'"> <!-- HASHTAG RESULT-->
-          <div class="p-3 border-b-grau2 border-b">
-            <h1 class="text-xl font-bold m-1 text-weiss">#{{ bing.hashtag }}</h1>
-            <p class="text-sm m-1 text-grau2">{{ bing.posts }} posts - {{ bing.category}}</p>
-          </div>
-        </div>
-
-        <!-- ### ### -->
-        <div v-else> <!-- NO RESULT-->
-          <div class="p-3 border-b-grau2 border-b">
-            <h1 class="text-xl font-bold m-1 text-weiss">No Results Found</h1>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div v-else-if="searched == false" class="flex justify-center">
+        <a class="text-2xl text-logo-farbe-rot p-10 text-center">To see results you have to search</a>
+      </div>
       <div v-else class="flex justify-center">
-      <a class="text-xl text-logo-farbe-rot p-10 text-center">No Results Found!</a>
+        <a class="text-xl text-logo-farbe-rot p-10 text-center">No Results Found</a>
       </div>
     </div>
   </div>

src/components/settings.vue

@@ -21,7 +21,7 @@ function handleUpdateSetting(setting: string) {
       <navigationbar></navigationbar>
       <settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
     </div>
-    <div class="w-100p sm:border-x-grau2 sm:border-x-2 border-y border-y-grau2 my-2">
+    <div class="w-100p sm:border-x-grau2 sm:border-x-2 my-2">
       <settings_main :selectedSetting="selectedSetting"></settings_main>
     </div>
     <div class="sm:w-1/4">

src/components/settings_components/sa_account-information_comp.vue

@@ -1,30 +1,79 @@
 <script setup>
+import { ref, onMounted } from "vue";
 
+let self = ref(null); // Initialisiere self mit null
+let self_id = ref();
+
+async function getSelf() {
+  try {
+    const response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
+
+    if (!response.ok) {
+      console.error(`HTTP-Fehler! Status: ${response.status}`);
+      self.value = null;
+      return;
+    }
+
+    const users = await response.json();
+
+    const foundUser = users.find(user => {
+      return String(user.user_id) === self_id.value;
+    });
+
+    if (foundUser) {
+      self.value = foundUser;
+
+    } else {
+      self.value = null;
+    }
+
+  } catch (error) {
+    console.error('ERROR:', error);
+    self.value = null;
+  }
+}
+
+onMounted(() => {
+  self_id.value = localStorage.getItem('self_id');
+  getSelf();
+  console.log("SELF ID (onMounted):", self_id.value);
+});
 </script>
 
 <template>
-  <div class="space-y-2 pl-2">
+  <div class="space-y-2 pl-2" v-if="self">
-    <p class="text-2xl text-weiss pt-2 items-center flex justify-center">danielvici (USERNAME)</p>
+    <p class="text-2xl text-weiss pt-2 items-center flex justify-center">{{ self.displayname }}</p>
     <div>
-      <a class="text-lg text-weiss">Displayname</a><br>
+      <a class="text-lg text-weiss">Username</a><br>
-      <a class="text-grau2">danielvici123</a>
+      <a class="text-grau2">{{ self.username }}</a>
+    </div>
+    <div>
+      <a class="text-lg text-weiss">User created at</a><br>
+      <a class="text-grau2">{{ self.account_created }}</a>
     </div>
     <div>
       <a class="text-lg text-weiss">Email</a><br>
-      <a class="text-grau2">email@e.mail</a>
+      <a class="text-grau2">{{ self.user_email }}</a>
     </div>
     <div>
-      <a class="text-lg text-weiss">firstname</a><br>
+      <a class="text-lg text-weiss">User ID</a><br>
-      <a class="text-grau2">daniel</a>
+      <a class="text-grau2">{{ self.user_id }}</a>
     </div>
     <div>
-      <a class="text-lg text-weiss">lastname</a><br>
+      <a class="text-lg text-weiss">Firstname</a><br>
-      <a class="text-grau2">vici</a>
+      <a class="text-grau2">{{ self.firstname }}</a>
     </div>
     <div>
-      <a class="text-lg text-weiss">phone</a><br>
+      <a class="text-lg text-weiss">Surname</a><br>
-      <a class="text-grau2">123</a>
+      <a class="text-grau2">{{ self.surname }}</a>
     </div>
+    <div>
+      <a class="text-lg text-weiss">Bio</a><br>
+      <a class="text-grau2">{{ self.bio }}</a>
+    </div>
+  </div>
+  <div v-else class="flex justify-center items-center">
+    <p class="text-2xl text-weiss pt-2 items-center flex justify-center">User data is being loaded or does not exist</p>
   </div>
 </template>
 

src/components/settings_components/settings_sidebar.vue

@@ -15,10 +15,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 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 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 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 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>