From 50dea58b5ae38e6f16debcecc0612b8486655ed6 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 9 May 2024 17:42:53 +0200
Subject: [PATCH] The user now has the ability to load more gifs | added a menu
 to the main chat-page to choose between the search tab and the chat list

---
 src/components/MessageComponent.vue |  10 +-
 src/models.ts                       |   8 +
 src/pages/IndexPage.vue             | 281 ++++++++++++++++++++--------
 src/stores/tenor-store.ts           |   8 +-
 src/stores/user-store.ts            |  11 ++
 5 files changed, 238 insertions(+), 80 deletions(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 2e7fd6b..ee8b378 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -4,14 +4,17 @@
     timestamp: String,
     message: String,
     gif: Boolean,
+    link: Boolean,
     url: String,
   })
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <p v-if="!props.gif" style="margin-bottom: 0;">{{props.message}}</p>
+    <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
     <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
+    <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>
+
     <div style="text-align: right;">
       <small style="margin-top: 0;">{{props.timestamp}}</small>
     </div>
@@ -27,6 +30,11 @@
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
   }
 
+  .message p {
+    max-width: 100%;
+    overflow-wrap: break-word;
+  }
+
   .sent {
     background: #729EA1;
     margin-left: auto;
diff --git a/src/models.ts b/src/models.ts
index 322436d..73e6569 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -11,6 +11,14 @@ export interface responseModel {
   response: any;
 }
 
+export interface message {
+  content: string;
+  timestamp: string;
+  isOwn: boolean;
+  gif: boolean;
+  link: boolean;
+}
+
 export interface tenorGif {
   url: string,
   duration: number,
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index b16504b..9cf4e30 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,41 +1,73 @@
 <template>
-  <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;">
-    <div style="background: gray; width: 30%;height:100%;padding: 20px;">
-      <div>
+  <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;position: fixed;">
+    <div style="background: gray; width: 25%;height:100%;">
+      <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
+        <div title="Nach Nutzern suchen" @click="activeMenu = 'search'" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}">
+          <q-icon name="search"></q-icon>
+        </div>
+
+        <div title="Meine Chats anzeigen" @click="activeMenu = 'chats'" :class="{menuItemActive : activeMenu === 'chats', menuItemInactive : activeMenu !== 'chats'}">
+          <q-icon name="chat"></q-icon>
+        </div>
+      </div>
+
+
+      <div style="margin: 20px;" v-if="activeMenu == 'search'">
         <q-input filled v-model="searchQuery" placeholder="Nach Nutzern suchen">
           <template v-slot:prepend>
             <q-icon name="search"></q-icon>
           </template>
         </q-input>
-        <p>{{searchQuery}}</p>
 
-        <ProfileCardComponent displayName="Max Mustermann" username="maxmustermann" profilePictureUrl="https://th.bing.com/th/id/OIP.ab5MRsPm1MXfNDVSMW6cjQHaHa?rs=1&pid=ImgDetMain" status="Hey there!"></ProfileCardComponent>
+        <div v-if="userStore.usersLoaded && searchQuery.length > 0" style="margin-top: 20px;">
+          <ProfileCardComponent v-for="user in userStore.users.filter(u => u.username.includes(searchQuery) || searchQuery == '*')" :displayName="user.firstName +  ' ' + user.lastName" :username="user.username" profilePictureUrl="https://th.bing.com/th/id/OIP.ab5MRsPm1MXfNDVSMW6cjQHaHa?rs=1&pid=ImgDetMain" status="Hey there!"></ProfileCardComponent>
+          <div v-if="userStore.users.filter(u => u.username.includes(searchQuery) || searchQuery == '*').length == 0" style="text-align: center;">
+            <!--<q-icon name="error"></q-icon>
+            <p>Wir konnten keine Nutzer mit diesem Nutzernamen finden</p>-->
+            <img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found">
+          </div>
+        </div>
 
+        <p v-else>Gib einen Nutzername ein, um die Suche zu beginnen</p>
       </div>
+
+      <div style="margin: 20px;" v-if="activeMenu == 'chats'">
+        <p>Hier werden dann die Chats angezeigt</p>
+      </div>
+
+
     </div>
 
-    <div style="width: 70%;height: 100%;background: #DFD0BF;">
+    <div style="width: 75%;height: 100%;background: #DFD0BF;">
 
       <div id="messageContainer" style="padding: 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;">
-        <MessageComponent timestamp="13:12" url="https://media.tenor.com/mtiOW6O-k8YAAAAd/shrek-shrek-rizz.gif" gif></MessageComponent>
-        <MessageComponent message="Halo" timestamp="13:03" own-message></MessageComponent>
-        <MessageComponent message="Hallo na" timestamp="13:04"></MessageComponent>
-        <MessageComponent message="Blubber" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Testtt" timestamp="13:03" own-message></MessageComponent>
-        <MessageComponent message="Hola" timestamp="13:03" own-message></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent><MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
-        <MessageComponent message="Mal schauen was hier passiert, wenn man viel reinschreibt hahahahahahhahahaha" timestamp="13:06"></MessageComponent>
+        <div v-for="(message, index) in messages" :key="index">
+          <MessageComponent
+            v-if="message.gif"
+            :url="message.content"
+            :timestamp="message.timestamp"
+            :own-message="message.isOwn"
+            gif
+          ></MessageComponent>
+
+          <MessageComponent
+            v-if="!message.gif && message.link"
+            :url="message.content"
+            :timestamp="message.timestamp"
+            :own-message="message.isOwn"
+            link
+          ></MessageComponent>
+
+          <MessageComponent
+            v-if="!message.gif && !message.link"
+            :message="message.content"
+            :timestamp="message.timestamp"
+            :own-message="message.isOwn"
+          ></MessageComponent>
+        </div>
       </div>
 
-      <div style="width: 70%;height:auto; background: gray;position: absolute;bottom:0;padding: 10px;">
+      <div class="footer">
 
         <q-input filled v-model="message" placeholder="Nachricht eingeben" tabindex="0" @keyup.enter.prevent="sendMessage">
           <template v-slot:after>
@@ -46,83 +78,149 @@
             <q-btn round dense flat icon="send" id="sendMessageBtn" @click="sendMessage"></q-btn>
           </template>
         </q-input>
+      </div>
 
-        <div style="background: white;padding: 10px;border-radius: 10px;width: 20rem;height: 30rem;overflow-y:auto;position: absolute;right:20px;bottom:5rem;" v-if="showGifMenu" id="gifSearchMenu">
-          <q-input v-model="gifSearch" @update:model-value="inputChanged" dense placeholder="Nach GIF suchen" id="gifSearchBar">
-            <template v-slot:append>
-              <q-icon name="search"></q-icon>
-            </template>
-          </q-input>
+      <!-- GIF SUCHE -->
+      <div style="background: white;padding: 10px;border-radius: 10px;width: 20rem;height: 30rem;overflow-y:auto;position: absolute;right:20px;bottom:5rem;" v-if="showGifMenu" id="gifSearchMenu">
+        <q-input v-model="gifSearch" @update:model-value="inputChanged" dense placeholder="Nach GIF suchen" id="gifSearchBar">
+          <template v-slot:append>
+            <q-icon name="search"></q-icon>
+          </template>
+        </q-input>
 
-          <div v-if="tenorStore.gifsLoaded" style="display: flex; flex-wrap: nowrap;margin-top: 20px;">
-            <div v-for="i in [0,1]">
-              <div style="display: flex;flex-wrap: wrap;">
-                <div v-for="gif in tenorStore.gifs.filter((e, index) => index % 2 == i)" style="margin: 3px;width: 100%;max-height: 100%;">
-                  <img :src="gif.media_formats.nanogif.url" alt="Gif" style="width: 100%;border-radius: 10px;" class="gifPreview" @click="sendGif(gif.media_formats.mediumgif.url)">
-                </div>
+        <div v-if="tenorStore.gifsLoaded" style="display: flex; flex-wrap: nowrap;margin-top: 20px;">
+          <div v-for="i in [0,1]">
+            <div style="display: flex;flex-wrap: wrap;">
+              <div v-for="gif in tenorStore.gifs.filter((e, index) => index % 2 == i)" style="margin: 3px;width: 100%;max-height: 100%;">
+                <img :src="gif.media_formats.nanogif.url" alt="Gif" style="width: 100%;border-radius: 10px;" class="gifPreview" @click="sendGif(gif.media_formats.mediumgif.url)">
               </div>
             </div>
           </div>
         </div>
 
-
+        <div style="text-align:  center;" v-if="loadedGifsAmount < 50">
+          <q-btn round dense flat @click="loadMoreGifs" title="Mehr anzeigen">+</q-btn>
+        </div>
       </div>
+      <!-- GIF SUCHE ENDE -->
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import MessageComponent from 'components/MessageComponent.vue';
-import { useTenorStore } from 'stores/tenor-store';
-import ProfileCardComponent from 'components/ProfileCardComponent.vue';
+  import { ref } from 'vue';
+  import MessageComponent from 'components/MessageComponent.vue';
+  import { useTenorStore } from 'stores/tenor-store';
+  import ProfileCardComponent from 'components/ProfileCardComponent.vue';
+  import {message} from 'src/models';
+  import {useUserStore} from 'stores/user-store';
 
-defineOptions({
-  name: 'IndexPage'
-});
+  defineOptions({
+    name: 'IndexPage'
+  });
 
-const searchQuery = ref("")
-const message = ref("");
-const gifSearch = ref("");
+  const searchQuery = ref("")
+  const message = ref("");
+  const gifSearch = ref("");
 
-const selectedGifURL = ref("");
-const showGifMenu = ref(false);
+  const activeMenu = ref("search");
 
-const changed = ref(false);
+  let loadedGifsAmount = 10;
 
-function inputChanged() {
-  changed.value = true;
-}
+  let messages : message[] = [
+    {content: "Halllo", timestamp: "13:38", isOwn: true, gif: false, link: false},
+    {content: "https://www.google.com/", timestamp: "13:20", isOwn: false, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:15", isOwn: false, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:14", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:13", isOwn: true, gif: false, link: false},
+    {content: "https://media.tenor.com/mtiOW6O-k8YAAAAd/shrek-shrek-rizz.gif", timestamp: "13:11", isOwn: false, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Halllo", timestamp: "13:10", isOwn: true, gif: false, link: false},
+    {content: "Hallo", timestamp: "13:10", isOwn: true, gif: false, link: false}
+  ];
 
-const tenorStore = useTenorStore();
-
-function getGifs() {
-  if(changed.value) {
-    tenorStore.getGifsBySearchTerm(gifSearch.value);
-    changed.value = false;
+  function isUrl(url : string) {
+    try {
+      new URL(url);
+      return true;
+    } catch (err) {
+      return false;
+    }
   }
-}
 
-function toggleGifMenu() {
-  showGifMenu.value = !showGifMenu.value;
-  if(showGifMenu.value) {
-    // Somehow focus the input field
-    document.getElementById("gifSearchBar")!.focus();
+  function isTenorGifUrl(url : string) {
+    return url.startsWith("https://media.tenor.com/") && url.endsWith(".gif");
+
   }
-}
 
-function sendMessage() {
-  alert(message.value);
-  message.value = "";
-}
+  messages.forEach((msg) => {
+    if(isTenorGifUrl(msg.content)) {
+      msg.gif = true;
+    } else if(isUrl(msg.content)) {
+      msg.link = true;
+    }
+  })
+
+  const selectedGifURL = ref("");
+  const showGifMenu = ref(false);
+
+  const changed = ref(true);
+
+  function inputChanged() {
+    changed.value = true;
+  }
+
+  const tenorStore = useTenorStore();
+  const userStore = useUserStore();
+
+  function getGifs() {
+    let query = gifSearch.value != "" ? gifSearch.value : "shrek";
+
+    if(changed.value) {
+      tenorStore.getGifsBySearchTerm(query, loadedGifsAmount);
+      changed.value = false;
+    }
+  }
+
+  function toggleGifMenu() {
+    showGifMenu.value = !showGifMenu.value;
+    if(showGifMenu.value) {
+      // Somehow focus the input field
+      //document.getElementById("gifSearchBar")!.focus();
+    }
+  }
+
+  function sendMessage() {
+    messages.unshift({content: message.value, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: false, link: false});
+    message.value = "";
+  }
+
+  function sendGif(url : string) {
+    messages.unshift({content: url, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: true, link: false});
+    toggleGifMenu();
+  }
+
+  function loadMoreGifs() {
+    loadedGifsAmount += 10;
+    console.log(loadedGifsAmount);
+    changed.value = true;
+  }
+
+
+  setInterval(getGifs, 500);
+
+  userStore.getAllPtpUsers();
 
-function sendGif(url : string) {
-  alert(url);
-  toggleGifMenu();
-}
 
-tenorStore.getGifsBySearchTerm("shrek");
-setInterval(getGifs, 500);
 
 
 </script>
@@ -146,4 +244,37 @@ setInterval(getGifs, 500);
     transition: .3s;
     filter: brightness(0.5);
   }
+
+  .footer {
+    width: 75%;
+    height:auto;
+    background: gray;
+    position: absolute;
+    bottom:0;
+    padding: 10px;
+  }
+
+  .navigation {
+    font-size: 2rem;
+  }
+
+  .navigation > div {
+    width: 50%;
+    text-align: center;
+    cursor: pointer;
+    transition: .3s;
+  }
+
+  .navigation > div:hover {
+    background: #555555;
+    transition: .3s;
+  }
+
+  .menuItemActive {
+    border-bottom: 2px solid black;
+  }
+
+  .menuItemInactive {
+    border-bottom: 2px solid transparent;
+  }
 </style>
diff --git a/src/stores/tenor-store.ts b/src/stores/tenor-store.ts
index c97b238..893af5a 100644
--- a/src/stores/tenor-store.ts
+++ b/src/stores/tenor-store.ts
@@ -12,15 +12,15 @@ export const useTenorStore = defineStore('tenorStore', {
 
   },
   actions: {
-    getGifsBySearchTerm(searchTerm : string) {
-      this.loadGifsBySearchTerm(searchTerm).then((response : any) => {
+    getGifsBySearchTerm(searchTerm : string, amount : number) {
+      this.loadGifsBySearchTerm(searchTerm, amount).then((response : any) => {
         this.gifs = response.data.results;
         this.gifsLoaded = true;
         console.log(this.gifsLoaded + " / from store");
       });
     },
-    async loadGifsBySearchTerm(searchTerm : string) : Promise<any> {
-      return await api.get("https://tenor.googleapis.com/v2/search?q="+searchTerm+"&key=AIzaSyBXsUPCjnmjXwcdqMLsyhrH1zm_6VYH_fY&client_key=praxistransferProjekt&limit=10");
+    async loadGifsBySearchTerm(searchTerm : string, amount : number) : Promise<any> {
+      return await api.get("https://tenor.googleapis.com/v2/search?q="+searchTerm+"&key=AIzaSyBXsUPCjnmjXwcdqMLsyhrH1zm_6VYH_fY&client_key=praxistransferProjekt&limit="+amount);
     }
   },
 });
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 0b226a7..160e178 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -7,6 +7,8 @@ export const useUserStore = defineStore('userStore', {
   state: () => ({
     user: {"keycloakID":null,"firstName":null,"lastName":null,"username":null},
     userLoaded: false,
+    users: [] as ptpUser[],
+    usersLoaded: false,
   }),
   getters: {
 
@@ -22,5 +24,14 @@ export const useUserStore = defineStore('userStore', {
     async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
       return (await api.get("/users/login/"+keycloakID)).data;
     },
+    getAllPtpUsers() {
+      this.loadAllPtpUsers().then((response : ptpUser[]) => {
+        this.users = response;
+        this.usersLoaded = true;
+      })
+    },
+    async loadAllPtpUsers() {
+      return (await api.get("/users/user")).data;
+    }
   },
 });