suche (angefangen) und kleine änderungen

kleine veränderungen
suche anfangen -> filter und suche ansich geht nicht

src/components/home_components/feed.vue

@@ -41,10 +41,9 @@
       comments_count: 500000, likes: 100000},
   ])
 
-  const addLike = (index: number) => {
+  function addLike(index: number) {
     post.value[index].likes += 1;
     console.log("New Like Amount: ", post.value[index].likes);
-
   }
   function post_publish_func(text:string) {
     console.log("Post: ", text);
@@ -63,7 +62,7 @@
 <template>
   <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
     <div> <!-- FEED HEADER -->
-      <h2 class="align-middle p-6 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
+      <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">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">
@@ -87,7 +86,7 @@
           <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 underline-offset-3 text-grau2">@{{ postitem.author_username }}</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>

src/components/home_components/legal.vue

@@ -10,9 +10,9 @@
 
     <a href="">Imprint</a>
     -
-    <a href="">Contact</a>
+    <a href="https://esp-projekt.notion.site/191fb990f26c808298dad302e97fb299?pvs=105">Contact</a>
     -
-    <a href="">Support</a>
+    <a href="https://esp-projekt.notion.site/191fb990f26c808298dad302e97fb299?pvs=105">Support</a>
   </div>
 </template>
 

src/components/home_components/quick_search.vue

@@ -3,11 +3,11 @@
 </script>
 
 <template>
-  <div class="flex p-4 border-b-2 border-b-grau2 ">
+  <div class="flex p-4 border-b-2 border-b-grau2">
     <div class="w-12">
-      <img class="p-2 bg-grau rounded-l-lg" src="../../assets/icons/lupe.png" alt="">
+      <img class="p-2 bg-grau-dunkel rounded-l-lg" src="../../assets/icons/lupe.png" alt="">
     </div>
-    <input type="text" class="bg-grau rounded-r-lg focus:outline-none text-weiss" placeholder="Search...">
+    <input type="text" class="bg-grau-dunkel rounded-r-lg focus:outline-none text-weiss" placeholder="Search...">
   </div>
 </template>
 

src/components/notifications.vue

@@ -4,6 +4,7 @@ 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,6 +21,7 @@ import Quick_search from "./home_components/quick_search.vue";
     </div>
     <div class="w-1/4">
       <quick_search></quick_search>
+      <contacts></contacts>
       <legal></legal>
     </div>
   </div>

src/components/notifications_components/notifi_main.vue

@@ -85,7 +85,7 @@ function go_filter(){
     <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">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">

src/components/search.vue

@@ -0,0 +1,31 @@
+<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";
+import Contacts from "./home_components/contacts.vue";
+</script>
+
+<template>
+  <div class="text-weiss flex">
+    <div id="left" class="border-1 border-b-grau w-72">
+      <navigationbar></navigationbar>
+    </div>
+    <div class="w-100p border-x-2 border-x-grau2">
+      <div class="border-b-grau2 border-b-2">
+        <h1 class="text-weiss text-3xl p-4">Search</h1>
+      </div>
+      <search_main></search_main>
+    </div>
+    <div class="w-1/4">
+      <quick_search></quick_search>
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/search_components/search_main.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const hashtags = [ // DIESE HASTAGS SIND NUR FÜR DIE TRANDING DA
+  {id: 8,name: "gym", nr_posts: 2144, category: "Lifestyle"},
+  {id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
+  {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
+  h: boolean; // hastag
+  p: boolean; // posts
+}
+// Standard filter
+const search_filter_status = ref<search_filter>({
+  u: true, // user default: true
+  h: true, // hastag default: true
+  p: true, // posts default: true
+});
+
+let usr_search;
+
+for(let i =0; i < dinge.value.length; i++) {
+  console.log("Getting Notifications...");
+  feed.value.push(dinge.value[i]);
+}
+
+function go_fs(){
+  console.log("These Filter applied: ", JSON.stringify(search_filter_status.value));
+  feed.value = [];
+
+
+  dinge.value.forEach((dinge) => {
+    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")){
+      feed2.value.push(dinge);
+    }
+  })
+  let i = 0;
+  feed2.value.forEach(() => {
+    switch (feed2.value[i].type) {
+      case "user":
+        if (feed2.value[i].displayname.includes(usr_search) || feed2.value[i].username.includes(usr_search)) {
+          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)) {
+          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");
+        break;
+    }
+    i++;
+  })
+
+
+  console.log("Feed:", feed.value);
+}
+
+
+</script>
+<template>
+<div>
+  <div class="flex justify-center"> <!-- Search-->
+    <div class="w-1/2">
+      <form @submit.prevent="go_fs">
+        <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-logo-farbe-rot" ><input type="checkbox" class="mr-1" v-model="search_filter_status.h">Hashtag</label>
+          <label class="m-2 accent-logo-farbe-lila"><input type="checkbox" class="mr-1" v-model="search_filter_status.p">Post</label>
+          <button class="px-1 text-weiss rounded-lg">Filter</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div> <!-- TRENDING HASHTAGS -->
+    <a class="text-2xl flex justify-center mt-4">Trending</a>
+    <ul class="flex justify-center ">
+      <li v-for="(bing, i) in most_posts_hashtags" :key="bing.id" class="w-2/12">
+        <div class="p-5 mt-4 border-b-grau2 border-b">
+          <p class="text-sm m-1 text-grau2">{{ i+1 }} - {{ bing.category}}</p>
+          <h1 class="text-xl font-bold m-1 text-weiss">#{{ bing.name }}</h1>
+          <p class="text-sm m-1 text-grau2">{{ bing.nr_posts }} posts</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <!-- ### ### ### ### ### ### ### -->
+  <div>
+    <div>
+      <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 class="flex">
+            <img src="/src/assets/default_pp.png" alt="profile picture" 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 -->
+              <label class="text-lg m-1 text-weiss">{{bing.author}}</label>
+              <label class="text-base m-1 text-grau2">@username</label>
+            </div>
+            <div class="m-2"> <!-- POST CONTENT -->
+              <p class="text-sm m-1 text-weiss">{{ bing.text_content }}</p>
+            </div>
+            <div class="pt-2">
+              <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="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 -->
+                  <img alt="" src="../../assets/icons/herz.png" class="align-middle">
+                  <label class="text-sm m-1 text-weiss">{{ bing.like }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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 v-else class="flex justify-center">
+      <a class="text-xl text-logo-farbe-rot p-10 text-center">No Results Found!</a>
+    </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/components/settings.vue

@@ -5,6 +5,8 @@ import Settings_sidebar from "./settings_components/settings_sidebar.vue";
 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('');
 
@@ -17,14 +19,16 @@ function handleUpdateSetting(setting: string) {
 
 <template>
   <div id="main" class="bg-hintergrund-farbe flex">
-    <div id="left" class="border-r border-r-1 border-r-grau2 w-72">
+    <div id="left" class=" w-72">
       <navigationbar></navigationbar>
       <settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
     </div>
-    <div class="w-100p">
+    <div class="w-100p border-x-grau2 border-x-2">
       <settings_main :selectedSetting="selectedSetting"></settings_main>
     </div>
     <div class="w-1/4">
+      <quick_search></quick_search>
+      <contacts></contacts>
       <legal></legal>
     </div>
   </div>

src/components/settings_components/settings_account_main.vue

@@ -12,7 +12,7 @@ console.log(`Setting got (SAM): ${props2.selectedAccountSetting}`);
 </script>
 
 <template>
-  <div class="border-x-2 border-x-grau2"> <!-- MAIN DIV -->
+  <div class="border-l-2 border-l-grau2"> <!-- MAIN DIV -->
     <div v-if="props2.selectedAccountSetting === 'sa_account-information'">
       <sa_account-information_comp></sa_account-information_comp>
     </div>

src/components/settings_components/settings_main.vue

@@ -19,8 +19,8 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
 
 <template>
   <div class="text-weiss">
-    <div v-if="props.selectedSetting === 'setting_account'" class=""> <!-- ACCOUNT SETTINGS-->
+    <div v-if="props.selectedSetting === 'setting_account'"> <!-- ACCOUNT SETTINGS-->
-      <div class="border-r-grau2 border-r-1 border-r border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
+      <div class="border-r-grau2 border-r-1 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-->
@@ -33,7 +33,7 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
 
 
     <div v-else-if="props.selectedSetting === 'setting_privacy'"> <!-- PRIVACY AND SAFTEY-->
-      <div class="border-r-grau2 border-r-2 border-r border-b-grau2 border-b-2"> <!-- HEADER PRIVACY-->
+      <div class="border-r-grau2 border-r-2 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-->
@@ -58,10 +58,10 @@ console.log(`Setting got (SM): ${props.selectedSetting}`);
     </div>
 
     <div v-else-if="props.selectedSetting === ''"> <!-- IF NOTHING SELECTED-->
-      <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-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-->
+      <div class="flex flex-row content-center justify-center"> <!-- BODY - ACCOUNT SETTINGS-->
         <settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
         <settings_account_main class="basis-1/2" :selectedAccountSetting="selectedAccountSetting"></settings_account_main>
       </div>

src/components/status.json

@@ -1,6 +1,6 @@
 {
   "home": "completed",
-  "search": "wip",
+  "search": "testing",
   "notifications": "testing",
   "messages": "wip",
   "accounts": "wip",

src/router/index.ts

@@ -9,8 +9,9 @@ import wip from "../components/wip.vue";
 import settings from "../components/settings.vue";
 import nottifications from "../components/notifications.vue";
 import register from "../components/register.vue";
+import search from "../components/search.vue";
 // The routing does not happen automatically
-// Each route has to be defined here, or it wont work.
+// Each route has to be defined here, or it won't work.
 const routes = [
     {
         path: "/",
@@ -41,6 +42,11 @@ const routes = [
         path: "/register",
         name: "Register",
         component: register,
+    },
+    {
+        path: "/search",
+        name: "Search",
+        component: search,
     }
 
 ]