From 176abf58b2f72152124597e5069081b7bffac675 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 19 May 2024 12:04:43 +0200
Subject: [PATCH 01/38] When a chat is selected, the header now shows the
 member list

---
 src/components/HeaderInfoContainerComponent.vue |  4 ++++
 src/pages/IndexPage.vue                         | 12 +++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/HeaderInfoContainerComponent.vue b/src/components/HeaderInfoContainerComponent.vue
index 856183a..0a3af7b 100644
--- a/src/components/HeaderInfoContainerComponent.vue
+++ b/src/components/HeaderInfoContainerComponent.vue
@@ -19,6 +19,10 @@
   .displayName {
     height: 100%;
     margin: 0.5rem 1rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 200px;
   }
 
   .image {
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index f276a85..c6c9127 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -126,11 +126,20 @@
           :image="selectedUser.profilePictureUrl"
         ></HeaderInfoContainerComponent>
 
-        <div v-if="selectedChat.id != null">
+        <div v-if="selectedChat.id != null" style="display: flex;">
           <HeaderInfoContainerComponent  
             :displayName="selectedChat.displayName"
             image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
           ></HeaderInfoContainerComponent>
+
+          <div>
+            <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 14px;height:50px;margin: 0px;display: table-cell;vertical-align: middle;padding: 10px;max-width: 300px;">
+              <span>Du, </span>
+              <span v-for="(user, index) in selectedChat.members.filter(u => u.id != userStore.user!.id)">@{{ user.username }}{{ index < selectedChat.members.length - 2 ? ", " : "" }} </span>
+            </p>
+          </div>
+
+          <!--<ChatSettingsComponent :chat="selectedChat"></ChatSettingsComponent>-->
         </div>
         
       </div>
@@ -223,6 +232,7 @@
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
+  import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
 
   defineOptions({
     name: 'IndexPage'

From c8d5bc57344650defc5c90e60a69ce4a6f934be0 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sat, 25 May 2024 13:37:50 +0200
Subject: [PATCH 02/38] Worked on several new features: - ProfilePictures for
 users are now pulled from the backend - added a component for chat settings
 (WIP) - added a loading screen when the backend is not available - reworked
 the "add chat" feature - started to implement the general send-message
 functionality

---
 src/App.vue                                   |  85 +++++---
 src/components/ChatSettingsComponent.vue      |  83 ++++++++
 src/components/CreateChatComponent.vue        | 189 ++++++++++++++++++
 .../HeaderInfoContainerComponent.vue          |   2 +-
 src/components/MessageComponent.vue           |   7 +-
 src/components/SettingsPopUp.vue              |  36 ++--
 src/main.ts                                   |  27 +++
 src/models.ts                                 |   5 +
 src/pages/IndexPage.vue                       |  79 ++++++--
 src/stores/chat-store.ts                      |  13 +-
 src/stores/message-store.ts                   |  28 +++
 src/stores/user-store.ts                      |  18 +-
 12 files changed, 486 insertions(+), 86 deletions(-)
 create mode 100644 src/components/ChatSettingsComponent.vue
 create mode 100644 src/components/CreateChatComponent.vue
 create mode 100644 src/stores/message-store.ts

diff --git a/src/App.vue b/src/App.vue
index 31388fe..a0e42f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,46 +1,65 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router';
-import ProtectedData from './components/ProtectedData.vue';
-import IndexPage from 'pages/IndexPage.vue';
-defineOptions({
-  name: 'App'
-});
+  import { RouterView } from 'vue-router';
+  import ProtectedData from './components/ProtectedData.vue';
+  import IndexPage from 'pages/IndexPage.vue';
+  import { useUserStore } from './stores/user-store';
+import { useQuasar } from 'quasar';
+  defineOptions({
+    name: 'App'
+  });
+
+  const userStore = useUserStore();
+
+  
 </script>
 
 <template>
-  <IndexPage></IndexPage>
+  <IndexPage v-if="userStore.userLoaded"></IndexPage>
+
+  <div style="display: flex; align-items: center;justify-content: center;padding-top: 45vh;flex-direction: column;" v-else>
+    <div>
+      <q-spinner
+        color="primary"
+        size="3em"
+      />
+    </div>
+    <div class="text-h6" v-if="userStore.reconnectTries < 2">ptpChat wird geladen...</div>
+    <div class="text-h6" v-else>Verbindung wird wiederhergestellt (Versuch {{ userStore.reconnectTries }})</div>
+  </div>
+
   <router-view />
 </template>
 
 <style>
-header {
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 7vh;
-}
+  header {
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 7vh;
+  }
 
-/* CUSTOM SCROLLBAR DESIGN START */
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-}
+  /* CUSTOM SCROLLBAR DESIGN START */
+  /* width */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
 
-/* Track */
-::-webkit-scrollbar-track {
-  background: white;
-}
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: white;
+  }
 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  /* CUSTOM SCROLLBAR DESIGN ENDE */
 
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-/* CUSTOM SCROLLBAR DESIGN ENDE */
 </style>
diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
new file mode 100644
index 0000000..afcbea5
--- /dev/null
+++ b/src/components/ChatSettingsComponent.vue
@@ -0,0 +1,83 @@
+<template>
+  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
+    <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h4">{{ props.chat!.displayName }}</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <div class="grid-container">
+        <q-card-section>
+          <div class="text-h5">Mitglieder</div>
+          <table>
+            <tr v-for="user in props.chat!.members">
+              <td>
+                <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
+              </td>
+              <td v-if="user.id != userStore.user!.id">
+                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen"></q-btn>
+                <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
+              </td>
+            </tr>
+          </table>
+        </q-card-section>
+
+        <!-- Namen des Chats ändern -->
+        <q-card-section>
+          <div class="text-h5">Namen ändern</div>
+          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter />
+        </q-card-section>
+
+        <q-card-section>
+          <div class="text-h5">Aktionen</div>
+          <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
+          <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
+        </q-card-section>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import ProfileCardComponent from './ProfileCardComponent.vue';
+import { useUserStore } from 'src/stores/user-store';
+
+  const showDialog = ref(true);
+  const userStore = useUserStore();
+
+  const emit = defineEmits(['update:showDialog', 'showModal']);
+  const props = defineProps({
+    showDialog: Boolean,
+    chat: Object
+  });
+
+  const internalShowDialog = computed({
+      get: () => props.showDialog,
+      set: (value) => emit('update:showDialog', value)
+  });
+
+  const closeDialog = () => {
+    emit('showModal', true);
+  }
+</script>
+
+<style scoped>
+  .deleteButton {
+    color:darkred;
+    border:2px solid darkred;
+    border-radius: 6px;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto;
+    padding: 10px;
+  }
+
+  .grid-container > div:nth-child(odd) {
+    margin-right: 50px;
+    min-width: 30vw;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
new file mode 100644
index 0000000..1e02fba
--- /dev/null
+++ b/src/components/CreateChatComponent.vue
@@ -0,0 +1,189 @@
+<template>
+  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" full-width>
+    <q-card style="padding: 20px;margin: 0 40rem;height: 80vh;">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h4">Chat erstellen</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <div style="display: flex;overflow-x: auto;height: 42px;">
+        <div v-for="user in usersForChat" style="background: #e0e0e0;border-radius: 10px;display: flex;padding: 3px;margin: 3px;">
+          <div 
+            style="width: 30px; height: 30px; background-size: cover;background-position: center;border-radius: 100%;"
+            :style="{'background-image' : 'url('+user.profilePictureUrl+')'}"
+          ></div>
+          <div class="text-body" style="margin: 3px 10px 0 10px;white-space: nowrap;">{{ user.firstName }} {{ user.lastName }}</div>
+          <q-btn round flat icon="close" style="font-size: 10px;" @click="handleClickEvent(user)"/>
+        </div>
+      </div>
+
+      <q-input 
+        filled
+        v-model="chatName"
+        placeholder="Name des Chats"
+        style="margin: 20px 0;"
+      >
+        <template v-slot:prepend>
+          <q-icon name="edit"></q-icon>
+        </template>
+      </q-input>
+
+      <q-input 
+        filled 
+        v-model="searchQuery"
+        placeholder="Nach Nutzern suchen"
+        @update:model-value="updateSearchResults"
+      >
+        <template v-slot:prepend>
+          <q-icon name="search"></q-icon>
+        </template>
+      </q-input>
+
+      <div style="height: 50%;">
+        <div v-for="(user, index) in searchResults" class="grid-container">
+          <div class="wrapper-div">
+            <q-btn 
+              round 
+              flat 
+              dense 
+              :icon="isUserSelected(user) ? 'remove' : 'add'" 
+              :title="isUserSelected(user) ? 'Entfernen' : 'Hinzufügen'"
+              style="width:3rem;height:3rem;" 
+              class="button"
+              @click="handleClickEvent(user)"
+            />
+          </div>
+          <profile-card-component :user="user" :selected="false"></profile-card-component>
+        </div>
+      </div>
+
+      <q-btn style="width: 100%;" @click="createChat">Chat erstellen</q-btn>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import ProfileCardComponent from './ProfileCardComponent.vue';
+  import { useUserStore } from 'src/stores/user-store';
+  import type { ptpUser } from 'src/models';
+import { useQuasar } from 'quasar';
+import { useChatStore } from 'src/stores/chat-store';
+
+  const showDialog = ref(true);
+  const userStore = useUserStore();
+  const searchQuery = ref("");
+  const chatName = ref("");
+  const usersForChat = ref([] as ptpUser[]);
+
+  const searchResults = ref([] as ptpUser[]);
+
+  const $q = useQuasar();
+
+  const emit = defineEmits(['update:showDialog', 'showModal']);
+  const props = defineProps({
+    showDialog: Boolean,
+    chat: Object
+  });
+
+  const internalShowDialog = computed({
+      get: () => props.showDialog,
+      set: (value) => emit('update:showDialog', value)
+  });
+
+  const closeDialog = () => {
+    emit('showModal', true);
+  }
+
+  const updateSearchResults = () => {
+    searchResults.value = userStore.users.filter((u) => u.username.toLocaleLowerCase().includes(searchQuery.value.toLocaleLowerCase()) && u.id != userStore.user?.id);
+  }
+
+  const isUserSelected = (user : ptpUser) => {
+    return usersForChat.value.indexOf(user) >= 0;
+  }
+
+  const handleClickEvent = (user : ptpUser) => {
+    if(isUserSelected(user)) {
+      const index = usersForChat.value.indexOf(user);
+      usersForChat.value.splice(index, 1);
+    } else {
+      usersForChat.value.push(user);
+    } 
+  }
+
+  const createChat = () => {
+    let errorOccured = false;
+
+    if(usersForChat.value.length == 0) {
+      $q.notify({
+        message: 'Du hast keine Mitglieder ausgewählt',
+        position: 'top',
+        timeout: 2000,
+        color: "red",
+        icon: 'warning'
+      });
+      errorOccured = true;
+    }
+
+    if(chatName.value == "") {
+      $q.notify({
+        message: 'Du hast keinen Namen festgelegt',
+        position: 'top',
+        timeout: 2000,
+        color: "red",
+        icon: 'warning'
+      }); 
+      errorOccured = true; 
+    }
+
+    if(!errorOccured) {
+      $q.notify({
+        message: 'Der Chat "'+chatName.value+'" wurde erstellt',
+        position: 'top',
+        timeout: 2000,
+        color: "green",
+        type: "positive"
+      });   
+
+      setupChat(chatName.value);
+      closeDialog();
+      chatName.value = "";
+      usersForChat.value = [] as ptpUser[];
+    }
+  }
+
+  const chatStore = useChatStore();
+
+  const setupChat = async(chatName: string)=>{
+    await chatStore.createChat(chatName, usersForChat.value.map((user) => user.id));
+    reloadChats();
+  }
+
+  const reloadChats = async() => {
+    await chatStore.loadChatsByUser();
+  };
+
+</script>
+
+<style scoped>
+  .grid-container {
+    display: grid;
+    grid-template-columns: 70px auto;
+  }
+
+  .grid-container > div:nth-child(even) {
+    min-width: 20rem;
+  }
+
+  .wrapper-div {
+    height:100%;
+    position: relative;
+  }
+  .button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/HeaderInfoContainerComponent.vue b/src/components/HeaderInfoContainerComponent.vue
index 0a3af7b..cd0c258 100644
--- a/src/components/HeaderInfoContainerComponent.vue
+++ b/src/components/HeaderInfoContainerComponent.vue
@@ -4,7 +4,7 @@
       :style="{'background-image' : 'url('+props.image+')' }"
       class="image"
     ></div>
-    <h6 class="displayName">{{ props.displayName }}</h6>
+    <h6 class="displayName" :title="props.displayName">{{ props.displayName }}</h6>
   </div>
 </template>
 
diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index ee8b378..81d3314 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { decodedTextSpanIntersectsWith } from 'typescript';
+
   const props =  defineProps({
     ownMessage: Boolean,
     timestamp: String,
@@ -7,6 +9,9 @@
     link: Boolean,
     url: String,
   })
+
+  const date = new Date(Number(props.timestamp));
+  const timestampFormatted = date.getDay() + "." + date.getMonth() + "." + date.getFullYear() + ", " + date.getHours() + ":" + date.getMinutes();
 </script>
 
 <template>
@@ -16,7 +21,7 @@
     <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>
+      <small style="margin-top: 0;">{{timestampFormatted}}</small>
     </div>
   </div>
 </template>
diff --git a/src/components/SettingsPopUp.vue b/src/components/SettingsPopUp.vue
index 7d8aba2..edea8b5 100644
--- a/src/components/SettingsPopUp.vue
+++ b/src/components/SettingsPopUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="internalShowDialog" backdrop-filter="brightness(60%)" full-width>
+  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" backdrop-filter="brightness(60%)" full-width>
       <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
         <!--<h1>{{ internalShowDialog }}</h1>-->
 
@@ -37,19 +37,25 @@
             <h5>Profilbild</h5>
             <p>Du kannst eins der folgenden Porfilbilder aussuchen</p>
 
-            <div style="display: flex;">
+            <div style="display: flex;" v-if="userStore.profilePicturesLoaded">
               <div
-                v-for="(imageUrl, index) in profilePictures"
-                :style="{'background-image' : 'url('+imageUrl+')' , 'outline' : imageUrl == userStore.user!.profilePictureUrl ? 'dashed grey' : 'none'}"
+                v-for="(image, index) in userStore.profilePictures"
+                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilePictureUrl ? 'dashed grey' : 'none'}"
                 style="color: red;"
                 round
                 flat
                 outline
                 class="profilePictureSelector"
-                @click="selectProfilePicture(index)"
+                @click="selectProfilePicture(image)"
               >
               </div>
             </div>
+            <div v-else>
+              <q-spinner
+                color="primary"
+                size="3em"
+              />
+            </div>
           </q-card-section>
 
           <q-card-section>
@@ -73,7 +79,7 @@
 
 <script setup lang="ts">
   import { useQuasar } from 'quasar';
-  import {message, ptpTestUser} from 'src/models';
+  import {profilePicture, message, ptpTestUser} from 'src/models';
   import { useUserStore } from 'src/stores/user-store';
   import { computed, onMounted, toRefs } from 'vue';
   import { ref } from 'vue';
@@ -82,7 +88,7 @@
   const showingAlert = ref(false);
   const $q = useQuasar();
 
-  const emit = defineEmits(['update:showDialog']);
+  const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean
   });
@@ -92,18 +98,9 @@
       set: (value) => emit('update:showDialog', value)
   });
 
-  // Eine Liste der möglichen Bilder soll später aus dem Backend kommen
-  let profilePictures : string[] = [
-    "https://assets.change.org/photos/8/jw/ax/QMjwAxeQAfcpoxs-1600x900-noPad.jpg?1597557421",
-    "https://media.tenor.com/fErt1YElZ2gAAAAe/shrek-rizz-reverse.png",
-    "https://i.pinimg.com/736x/8b/08/d0/8b08d0127947da23310a14135b865f61.jpg",
-    "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0",
-    "https://media.discordapp.net/attachments/698162708427833355/1241378744032297041/image.png?ex=6649fb8c&is=6648aa0c&hm=2024b84dc61ec55d1923ff2e517af250d8e63cf599fcc223d014801adfe5b4e0&=&format=webp&quality=lossless&width=416&height=350"
-  ]
-
-  function selectProfilePicture(id : number) {
+  function selectProfilePicture(image : profilePicture) {
     showUnsavedChangesAlert();
-    userStore.user!.profilePictureUrl = profilePictures[id];
+    userStore.user!.profilePictureUrl = image.url;
   }
 
   function saveProfileChanges() {
@@ -116,7 +113,8 @@
   };
 
   const closeDialog = () => {
-    internalShowDialog.value = false;
+    //internalShowDialog.value = false;
+    emit('showModal', true);
   };
 
   const showUnsavedChangesAlert = () => {
diff --git a/src/main.ts b/src/main.ts
index 06f019a..646db5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,8 @@ import App from './App.vue';
 
 import Keycloak from 'keycloak-js';
 import {useUserStore} from 'stores/user-store';
+import { useQuasar } from 'quasar';
+import { useChatStore } from './stores/chat-store';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -13,16 +15,41 @@ app.use(pinia);
 
 
 const userStore = useUserStore();
+const chatStore = useChatStore();
 const keycloak: Keycloak = await userStore.initKeycloak();
 
+const $q = useQuasar();
+let tries = 1;
+
 // Anfrage ans Backend
 
 if (keycloak.subject) {
+
   userStore.id = keycloak.subject;
   await userStore.getPtpUserById(keycloak.subject);
   userStore.loadPtpUsersById(keycloak.subject).then(user  => {
     console.log(JSON.stringify(user));
   })
+
+  
+
+  const interval = setInterval(() => {
+    if(userStore.userLoaded) clearInterval(interval);
+
+    userStore.getPtpUserById(keycloak.subject!).then(user  => {
+      console.log("New attempt: " + JSON.stringify(user));
+      console.warn(userStore.userLoaded);
+    }).catch(error => {
+      console.error("Ein Netzwerkfehler ist aufgetreten " + tries);
+      userStore.reconnectTries = tries;
+
+      tries++;
+    });
+  }, 5000);
+
+  chatStore.loadProfilePictures();
+  userStore.loadProfilePictures();
+
 } else {
   console.error("hier ist was schlimmes passiert menno");
 }
diff --git a/src/models.ts b/src/models.ts
index 0e5a3fc..c9ddd3b 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -70,3 +70,8 @@ export interface tenorResponseElement {
 export interface tenorResponse {
   results: Array<tenorGif>,
 }
+
+export interface profilePicture {
+  shortName: string;
+  url: string;
+}
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index c6c9127..74a0b80 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -2,7 +2,9 @@
   <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;position: fixed;">
     <!-- Hier gibt es die ganzen PopUps und so -->
 
-    <SettingsPopUp :showDialog="settingsDialog"/>
+    <SettingsPopUp :showDialog="settingsDialog" @showModal="() => settingsDialog = false"/>
+
+    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false"></CreateChatComponent>
 
     <div style="background: gray; width: 25%;height:100%;">
       <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
@@ -23,7 +25,7 @@
           </template>
         </q-input>
 
-        <div v-if="userStore.usersLoaded && searchQuery.length > 0 && searchQuery.replace(/\s/g, '').length" style="margin-top: 20px;">
+        <div v-if="userStore.usersLoaded && userStore.userLoaded && searchQuery.length > 0 && searchQuery.replace(/\s/g, '').length" style="margin-top: 20px;">
           <ProfileCardComponent
             v-for="user in userStore.users.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id && searchQuery.replace(/\s/g, '').length)" :displayName="user.firstName +  ' ' + user.lastName" :username="user.username"
             :profilePictureUrl="user.profilePictureUrl"
@@ -41,9 +43,10 @@
       </div>
 
       <div style="margin: 20px;" v-if="activeMenu == 'chats'">
+        <q-btn round flat icon="group_add" style="float:right;" @click="createChatDialog = true"></q-btn>
         <p>Chats, in denen du Mitglied bist:</p>
-        <div v-if="chatStore.chatsLoaded">
-          <div v-for="chat in chatStore.chats" :key="chat.id">
+        <div v-if="chatStore.chatsLoaded" style="padding-top: 10px;">
+          <div v-for="chat in chatStore.chats" :key="chat.id" style="margin-top: 10px;">
 
             <ChatCardComponent 
               v-if="chat.members.length > 2" 
@@ -70,7 +73,7 @@
         </div>
 
 
-        <br>
+        <!--<br>
         <q-input
           v-model="chatName"
           label="Chat Name"
@@ -101,7 +104,7 @@
           >
           </q-option-group>
         </div>
-        <q-btn @click="createChat(chatName)" label="Create Chat"/>
+        <q-btn @click="createChat(chatName)" label="Create Chat"/>-->
       </div>
 
       <q-btn 
@@ -139,9 +142,11 @@
             </p>
           </div>
 
-          <!--<ChatSettingsComponent :chat="selectedChat"></ChatSettingsComponent>-->
+          <q-space />
+          <q-btn icon="more_vert" round flat @click="chatSettingsDialog = true"></q-btn>
+
+          <ChatSettingsComponent :chat="selectedChat" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
         </div>
-        
       </div>
 
 
@@ -152,7 +157,35 @@
         <div v-else>
           <p>Du hast schonmal mit dem geschrieben wie schön</p>
 
-          <div v-for="(message, index) in messages" :key="index">
+          <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :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>
+
+      <div v-if="selectedChat.id != null" style="padding: 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
+        <div v-for="(message, index) in (messageStore.messages[selectedChat.id].sort((a, b) =>  {return (Number(b.timestamp)-Number(a.timestamp))}))" :key="index">
           <MessageComponent
             v-if="message.gif"
             :url="message.content"
@@ -173,10 +206,9 @@
             v-if="!message.gif && !message.link"
             :message="message.content"
             :timestamp="message.timestamp"
-            :own-message="message.isOwn"
+            :own-message="message.sender.id == userStore.user!.id"
           ></MessageComponent>
         </div>
-        </div>
       </div>
 
       <div class="footer">
@@ -233,6 +265,8 @@
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
   import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
+  import CreateChatComponent from 'src/components/CreateChatComponent.vue';
+import { useMessageStore } from 'src/stores/message-store';
 
   defineOptions({
     name: 'IndexPage'
@@ -249,7 +283,11 @@
   const userSearch = ref('');
   const usersForChat = ref([] as string[]);
 
+  const messageStore = useMessageStore();
+
   const settingsDialog = ref(false);
+  const chatSettingsDialog = ref(false);
+  const createChatDialog = ref(false);
 
 
   const activeMenu = ref("search");
@@ -328,12 +366,12 @@
   }
 
   function sendMessage() {
-    //messages.unshift({content: message.value, timestamp: new Date().toTimeString().split(' ')[0].substring(0, 5), isOwn: true, gif: false, link: false});
+    messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value);
     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});
+    messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, url);
     toggleGifMenu();
   }
 
@@ -348,15 +386,6 @@
 
   userStore.getAllPtpUsers();
 
-
-  const createChat = async(chatName: string)=>{
-    if(chatName == ""){
-      chatName = "Chat";
-    }
-    await chatStore.createChat(chatName, usersForChat.value);
-    loadChats();
-  }
-
   const loadChats = async() => {
     await chatStore.loadChatsByUser();
   };
@@ -372,6 +401,12 @@
   function selectChat(chat : chat) {
     selectedChat.value = chat;
     selectedUser.value = {} as ptpTestUser;
+
+    if(messageStore.messages[chat.id] == null) {
+      messageStore.messages[chat.id] = [] as message[];
+    }
+
+    messageStore.loadMessagesByChatID(chat.id);
   }
 
   function hasChatWith(id : string) : boolean {
diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 98876d1..6df4c80 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -8,6 +8,8 @@ export const useChatStore = defineStore('chatStore',{
     chats: [] as chat[],
     chatsLoaded: false,
     chatExistsReponse: false,
+    profilePictures : [] as string[],
+    profilePicturesLoaded: false
   }),
   actions: {
     async getChatsByUser(): Promise<chat[]> {
@@ -21,6 +23,10 @@ export const useChatStore = defineStore('chatStore',{
       this.chatsLoaded = true;
       return this.chats;
     },
+    async loadProfilePictures(){
+      this.profilePictures = (await api.get("/users/profilePictures")).data;
+      this.profilePicturesLoaded = true;
+    },
     async createChat(chatName: string, members: string[]){
       const userStore = useUserStore();
       if(userStore.id) {
@@ -34,13 +40,6 @@ export const useChatStore = defineStore('chatStore',{
       }
       console.log(members);
       return (await api.post("/chats/create/" + chatName, members)).data;
-    },
-    async loadDoesChatExist(keycloakID : string, otherKeycloakID : string) : Promise<responseModel> {
-      return (await api.get("/chats/"+keycloakID+"/"+otherKeycloakID)).data;
-    },
-    doesChatExist(keycloakID : string, otherKeycloakID : string)   {
-      this.loadDoesChatExist(keycloakID, otherKeycloakID)
-        .then(m => this.chatExistsReponse = m.success);
     }
   }
 });
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
new file mode 100644
index 0000000..72353f6
--- /dev/null
+++ b/src/stores/message-store.ts
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { message, ptpUser, responseModel } from 'src/models';
+import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
+
+
+export const useMessageStore = defineStore('messageStore', {
+  state: () => ({
+    messages: [[]] as [message[]],
+  }),
+  actions: {
+    async sendMessage(chatId : number, senderId : string, content : string)  {
+      await api.post("/messages/"+chatId+"/"+senderId+"/"+content).then((result) => {
+        this.loadMessagesByChatID(chatId);
+      });
+    },
+
+    loadMessagesByChatID(chatID : number) {
+      this.getAllMessagesByChatID(chatID).then((messages) => {
+        this.messages[chatID] = messages;
+      });
+    },
+
+    async getAllMessagesByChatID(chatID : number) {
+      return (await api.get("/messages/chat/"+chatID)).data;
+    },
+  },
+});
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index accb002..60a530d 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
-import { ptpUser, responseModel } from 'src/models';
+import { profilePicture, ptpUser, responseModel } from 'src/models';
 import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
 
 /**
@@ -34,6 +34,9 @@ export const useUserStore = defineStore('userStore', {
     usersLoaded: false,
     keycloak: null as Keycloak | null,
     id: "",
+    reconnectTries: 0,
+    profilePictures: [] as profilePicture[],
+    profilePicturesLoaded: false
   }),
   actions: {
     async getPtpUserById(id : string) {
@@ -48,11 +51,20 @@ export const useUserStore = defineStore('userStore', {
         if(this.user!.status == null) {
           this.user!.status = "Hey there, I am using ptpChat!";
         }
+      }).catch(error => {
+        console.error("Ein Netzwerkfehler ist aufgetreten");
       });
     },
     async loadPtpUsersById(id : string) : Promise<responseModel>  {
       return (await api.get("/users/login/"+id)).data;
     },
+    async loadProfilePictures() {
+      (await api.get("/users/profilePictures")).data.forEach((element: string) => {
+        this.profilePictures.push({ shortName: element.split(" ")[0].replace(":", ""), url: element.split(" ")[1]});
+        console.log("Hallo ich mache hier was");
+      });
+      this.profilePicturesLoaded = true;
+    },
 
     getAllPtpUsers() {
       this.loadAllPtpUsers().then((response : ptpUser[]) => {
@@ -67,9 +79,9 @@ export const useUserStore = defineStore('userStore', {
             user.status = "Hey there, I am using ptpChat!";
           }
         })
-
-        this.usersLoaded = true;
       })
+
+      this.usersLoaded = true;
     },
 
     async loadAllPtpUsers() {

From eed9df488e07060bc96955efa10f2dc93059ffc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Sat, 25 May 2024 14:15:40 +0200
Subject: [PATCH 03/38] changed endpoint

---
 src/stores/user-store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 60a530d..fc88b56 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -85,7 +85,7 @@ export const useUserStore = defineStore('userStore', {
     },
 
     async loadAllPtpUsers() {
-      return (await api.get("/users/user")).data;
+      return (await api.get("/users")).data;
     },
 
     async initKeycloak() : Promise<Keycloak>{

From 641efea6c4f41d95de0c3b751611da2ea71537a8 Mon Sep 17 00:00:00 2001
From: JonaKl <jonaklaess@gmail.com>
Date: Mon, 27 May 2024 11:19:11 +0200
Subject: [PATCH 04/38] swapped await to then for being able to build app

---
 src/main.ts | 63 +++++++++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 646db5d..5d0a6f7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,8 +5,7 @@ import App from './App.vue';
 
 import Keycloak from 'keycloak-js';
 import {useUserStore} from 'stores/user-store';
-import { useQuasar } from 'quasar';
-import { useChatStore } from './stores/chat-store';
+import { useChatStore } from 'stores/chat-store';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -16,41 +15,47 @@ app.use(pinia);
 
 const userStore = useUserStore();
 const chatStore = useChatStore();
-const keycloak: Keycloak = await userStore.initKeycloak();
-
-const $q = useQuasar();
-let tries = 1;
+let keycloak:Keycloak;
+userStore.initKeycloak()
+  .then(r=>
+  {
+    keycloak=r
+    let tries = 1;
 
 // Anfrage ans Backend
 
-if (keycloak.subject) {
+    if (keycloak.subject) {
 
-  userStore.id = keycloak.subject;
-  await userStore.getPtpUserById(keycloak.subject);
-  userStore.loadPtpUsersById(keycloak.subject).then(user  => {
-    console.log(JSON.stringify(user));
-  })
+      userStore.id = keycloak.subject;
+      userStore.getPtpUserById(keycloak.subject).then(() =>
+        userStore.loadPtpUsersById(keycloak.subject||"").then(user  => {
+          console.log(JSON.stringify(user));
+        }));
 
-  
 
-  const interval = setInterval(() => {
-    if(userStore.userLoaded) clearInterval(interval);
 
-    userStore.getPtpUserById(keycloak.subject!).then(user  => {
-      console.log("New attempt: " + JSON.stringify(user));
-      console.warn(userStore.userLoaded);
-    }).catch(error => {
-      console.error("Ein Netzwerkfehler ist aufgetreten " + tries);
-      userStore.reconnectTries = tries;
 
-      tries++;
-    });
-  }, 5000);
+      const interval = setInterval(() => {
+        if(userStore.userLoaded) clearInterval(interval);
+
+        userStore.getPtpUserById(keycloak.subject!).then(user  => {
+          console.log("New attempt: " + JSON.stringify(user));
+          console.warn(userStore.userLoaded);
+        }).catch(() => {
+          console.error("Ein Netzwerkfehler ist aufgetreten " + tries);
+          userStore.reconnectTries = tries;
+
+          tries++;
+        });
+      }, 5000);
+
+      chatStore.loadProfilePictures();
+      userStore.loadProfilePictures();
+
+    } else {
+      console.error("hier ist was schlimmes passiert menno");
+    }
+  }).catch(e=>console.error(e));
 
-  chatStore.loadProfilePictures();
-  userStore.loadProfilePictures();
 
-} else {
-  console.error("hier ist was schlimmes passiert menno");
-}
 

From c01654c59c68be46b2f3a76e2cc58efef9b59f1c Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 08:40:58 +0200
Subject: [PATCH 05/38] Message timestamp now adds a leading zero to values
 under ten (minutes only)

---
 src/components/MessageComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 81d3314..00eaaf8 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -11,7 +11,7 @@ import { decodedTextSpanIntersectsWith } from 'typescript';
   })
 
   const date = new Date(Number(props.timestamp));
-  const timestampFormatted = date.getDay() + "." + date.getMonth() + "." + date.getFullYear() + ", " + date.getHours() + ":" + date.getMinutes();
+  const timestampFormatted = date.getDay() + "." + date.getMonth() + "." + date.getFullYear() + ", " + date.getHours() + ":" + (date.getMinutes() + '').padStart(2, '0');
 </script>
 
 <template>

From dd6c588eb5138d6d5db541d432117ec4d14541b7 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 08:44:53 +0200
Subject: [PATCH 06/38] Removed some old models and adjusted the component
 accordingly

---
 src/models.ts           | 25 +++++--------------------
 src/pages/IndexPage.vue | 31 ++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/models.ts b/src/models.ts
index c9ddd3b..25593e8 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -3,17 +3,8 @@ export interface ptpUser {
   firstName: string;
   lastName: string;
   username: string;
-  status?: string;
-  profilePictureUrl?: string;
-}
-
-export interface ptpTestUser {
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  status?: string;
-  profilePictureUrl?: string;
+  status: string;
+  profilepicture: string;
 }
 
 export interface responseModel {
@@ -27,20 +18,14 @@ export interface chat{
   members: ptpUser[];
   messages: message[];
   displayName: string;
-}
-
-export interface user{
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  chats: chat[];
+  profilepicture: string;
+  profilepictureAsString: string;
 }
 
 export interface message {
   id: number;
   chat: chat;
-  sender:user;
+  sender:ptpUser;
   content: string;
   timestamp: string;
   isOwn: boolean;
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 74a0b80..3ffc4b4 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -28,11 +28,11 @@
         <div v-if="userStore.usersLoaded && userStore.userLoaded && searchQuery.length > 0 && searchQuery.replace(/\s/g, '').length" style="margin-top: 20px;">
           <ProfileCardComponent
             v-for="user in userStore.users.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id && searchQuery.replace(/\s/g, '').length)" :displayName="user.firstName +  ' ' + user.lastName" :username="user.username"
-            :profilePictureUrl="user.profilePictureUrl"
+            :profilePictureUrl="user.profilepicture"
             :status="user.status"
             :user="user"
             :selected="selectedUser.id == user.id"
-            @click="selectUser(user as ptpTestUser)"
+            @click="selectUser(user as ptpUser)"
           ></ProfileCardComponent>
           <div v-if="userStore.users.filter(u => u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*').length == 0 || !searchQuery.replace(/\s/g, '').length" style="text-align: center;">
             <img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found">
@@ -67,7 +67,7 @@
               v-else
               :user="userStore.users.find((user) => user.id === chat.members.find((member) => member.id !== userStore.user!.id)?.id)"
               :selected="selectedUser.id == chat.members[0].id"
-              @click="selectUser(chat.members[0] as ptpTestUser)"
+              @click="selectUser(chat.members[0] as ptpUser)"
             ></ProfileCardComponent>-->
           </div>
         </div>
@@ -111,7 +111,7 @@
         round 
         flat 
         v-if="userStore.userLoaded"
-        :style="{'background-image' : 'url('+userStore.user!.profilePictureUrl+')' }"
+        :style="{'background-image' : 'url('+userStore.user!.profilepicture+')' }"
         style="background-size: cover;background-position: center;position: fixed; left:1rem; bottom: 1rem;"
         title="Profil und Einstellungen" 
         @click="settingsDialog = true"
@@ -126,13 +126,13 @@
         <HeaderInfoContainerComponent 
           v-if="selectedUser.id != null" 
           :displayName="selectedUser.firstName + ' ' + selectedUser.lastName"
-          :image="selectedUser.profilePictureUrl"
+          :image="selectedUser.profilepicture"
         ></HeaderInfoContainerComponent>
 
         <div v-if="selectedChat.id != null" style="display: flex;">
           <HeaderInfoContainerComponent  
             :displayName="selectedChat.displayName"
-            image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
+            :image="selectedChat.profilepictureAsString"
           ></HeaderInfoContainerComponent>
 
           <div>
@@ -259,8 +259,8 @@
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
   import ChatCardComponent from 'components/ChatCardComponent.vue';
   import HeaderInfoContainerComponent from 'components/HeaderInfoContainerComponent.vue';
-  import {message, ptpTestUser} from 'src/models';
-  import type {chat} from 'src/models';
+  import {message} from 'src/models';
+  import type {chat, ptpUser} from 'src/models';
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
@@ -381,6 +381,15 @@ import { useMessageStore } from 'src/stores/message-store';
     changed.value = true;
   }
 
+  function getMessages() {
+    if(selectedChat.value.id != null) {
+      messageStore.loadMessagesByChatID(selectedChat.value.id);
+    }
+    
+  }
+
+  setInterval(getMessages, 2000);
+
 
   setInterval(getGifs, 500);
 
@@ -390,17 +399,17 @@ import { useMessageStore } from 'src/stores/message-store';
     await chatStore.loadChatsByUser();
   };
 
-  const selectedUser = ref({} as ptpTestUser);
+  const selectedUser = ref({} as ptpUser);
   const selectedChat = ref({} as chat);
 
-  function selectUser(user : ptpTestUser) {
+  function selectUser(user : ptpUser) {
     selectedUser.value = user;
     selectedChat.value = {} as chat;
   }
 
   function selectChat(chat : chat) {
     selectedChat.value = chat;
-    selectedUser.value = {} as ptpTestUser;
+    selectedUser.value = {} as ptpUser;
 
     if(messageStore.messages[chat.id] == null) {
       messageStore.messages[chat.id] = [] as message[];

From 466b854f8e9999f796adb0c518677117949daa7d Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 08:48:21 +0200
Subject: [PATCH 07/38] Removed some unused example files and adjusted imports
 accordingly

---
 src/components/EssentialLink.vue    | 39 -----------------------------
 src/components/ExampleComponent.vue | 37 ---------------------------
 src/components/models.ts            |  8 ------
 src/layouts/MainLayout.vue          |  2 --
 4 files changed, 86 deletions(-)
 delete mode 100644 src/components/EssentialLink.vue
 delete mode 100644 src/components/ExampleComponent.vue
 delete mode 100644 src/components/models.ts

diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
deleted file mode 100644
index 0075b5c..0000000
--- a/src/components/EssentialLink.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
-      <q-icon :name="icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: 'EssentialLink'
-});
-
-export interface EssentialLinkProps {
-  title: string;
-  caption?: string;
-  link?: string;
-  icon?: string;
-};
-
-withDefaults(defineProps<EssentialLinkProps>(), {
-  caption: '',
-  link: '#',
-  icon: '',
-});
-</script>
diff --git a/src/components/ExampleComponent.vue b/src/components/ExampleComponent.vue
deleted file mode 100644
index 6fd2d2a..0000000
--- a/src/components/ExampleComponent.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id" @click="increment">
-        {{ todo.id }} - {{ todo.content }}
-      </li>
-    </ul>
-    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
-    <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Todo, Meta } from './models';
-
-interface Props {
-  title: string;
-  todos?: Todo[];
-  meta: Meta;
-  active: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  todos: () => []
-});
-
-const clickCount = ref(0);
-function increment() {
-  clickCount.value += 1;
-  return clickCount.value;
-}
-
-const todoCount = computed(() => props.todos.length);
-</script>
diff --git a/src/components/models.ts b/src/components/models.ts
deleted file mode 100644
index 6945920..0000000
--- a/src/components/models.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a1f7679..4abdc59 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
 
 defineOptions({
   name: 'MainLayout'

From f6291c4af2bcf9b809d0fbd5b765af9f0a5d8372 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:55:02 +0200
Subject: [PATCH 08/38] Removed  the default profile picture from the
 ChatCardComponent

---
 src/components/ChatCardComponent.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ChatCardComponent.vue b/src/components/ChatCardComponent.vue
index b677429..ae8a182 100644
--- a/src/components/ChatCardComponent.vue
+++ b/src/components/ChatCardComponent.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import {message, ptpTestUser} from 'src/models';
 
   const props =  defineProps({
     chat: Object,
@@ -10,7 +9,7 @@
 
 <template>
   <div class="profileCard" :class="selected ? 'selected' : ''">
-    <div class="profilePicture" :style="{'background-image' : 'url(https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg)' }"></div>
+    <div class="profilePicture" :style="{'background-image' : 'url('+props.chat!.profilepictureAsString+')' }"></div>
     <div style="margin-left:10px;">
       <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
         <span style="font-weight: bold;font-size: 1.2rem;">{{props.chat!.displayName}}</span>

From 52b72992ee6a71dfc73c1155dcb6c9bd3ea15783 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:55:29 +0200
Subject: [PATCH 09/38] Added a profile picture selector to the
 ChatSettingsComponent

---
 src/components/ChatSettingsComponent.vue | 47 ++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index afcbea5..cfb48b6 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -34,6 +34,30 @@
           <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
           <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
         </q-card-section>
+
+        <q-card-section>
+          <div class="text-h5">Gruppenbild ändern</div>
+
+          <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
+            <div
+              v-for="(image, index) in chatStore.profilePictures"
+              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepicture ? 'dashed grey' : 'none'}"
+              style="color: red;"
+              round
+              flat
+              outline
+              class="profilePictureSelector"
+              @click="selectProfilePicture(image)"
+            >
+            </div>
+          </div>
+          <div v-else>
+            <q-spinner
+              color="primary"
+              size="3em"
+            />
+          </div>
+        </q-card-section>
       </div>
     </q-card>
   </q-dialog>
@@ -43,9 +67,12 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
+import { profilePicture } from 'src/models';
+import { useChatStore } from 'src/stores/chat-store';
 
   const showDialog = ref(true);
   const userStore = useUserStore();
+  const chatStore = useChatStore();
 
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
@@ -61,6 +88,10 @@ import { useUserStore } from 'src/stores/user-store';
   const closeDialog = () => {
     emit('showModal', true);
   }
+
+  const selectProfilePicture = (image: profilePicture) => {
+    props.chat!.profilepicture = image.url;
+  }
 </script>
 
 <style scoped>
@@ -80,4 +111,20 @@ import { useUserStore } from 'src/stores/user-store';
     margin-right: 50px;
     min-width: 30vw;
   }
+
+  .profilePictureSelector {
+    transition: .3s;
+    background-size: cover;
+    background-position:center;
+    width: 6rem;
+    height:6rem;
+    margin: 15px;
+    border-radius: 100%;
+    cursor: pointer;
+  }
+
+  .profilePictureSelector:hover {
+    transition: .3s;
+    filter: brightness(0.6);
+  }
 </style>
\ No newline at end of file

From 3c3098f323d6524baa7d825eec63ba552d0c6b8a Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:56:02 +0200
Subject: [PATCH 10/38] User-Search in CreateChatComponent now displays the
 correct profile pictures

---
 src/components/CreateChatComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
index 1e02fba..8c8351a 100644
--- a/src/components/CreateChatComponent.vue
+++ b/src/components/CreateChatComponent.vue
@@ -11,7 +11,7 @@
         <div v-for="user in usersForChat" style="background: #e0e0e0;border-radius: 10px;display: flex;padding: 3px;margin: 3px;">
           <div 
             style="width: 30px; height: 30px; background-size: cover;background-position: center;border-radius: 100%;"
-            :style="{'background-image' : 'url('+user.profilePictureUrl+')'}"
+            :style="{'background-image' : 'url('+user.profilepicture+')'}"
           ></div>
           <div class="text-body" style="margin: 3px 10px 0 10px;white-space: nowrap;">{{ user.firstName }} {{ user.lastName }}</div>
           <q-btn round flat icon="close" style="font-size: 10px;" @click="handleClickEvent(user)"/>

From a225aaace3786562640969be77d06ed0ccbb5535 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:56:25 +0200
Subject: [PATCH 11/38] Deleted the unused ExampleStore

---
 src/stores/example-store.ts | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 src/stores/example-store.ts

diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
deleted file mode 100644
index 83e8390..0000000
--- a/src/stores/example-store.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    counter: 0,
-  }),
-  getters: {
-    doubleCount: (state) => state.counter * 2,
-  },
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});

From 0403a48a304c429d2f8cbcc881b83f5ed93f9656 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:56:50 +0200
Subject: [PATCH 12/38] Removed default values for status and profile picture
 and added updateUser call

---
 src/stores/user-store.ts | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 60a530d..cbb51e9 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -43,14 +43,6 @@ export const useUserStore = defineStore('userStore', {
       await this.loadPtpUsersById(id).then((response : responseModel) => {
         this.user = response.response;
         this.userLoaded = true;
-
-        if(this.user!.profilePictureUrl == null) {
-          this.user!.profilePictureUrl = "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0";
-        }
-
-        if(this.user!.status == null) {
-          this.user!.status = "Hey there, I am using ptpChat!";
-        }
       }).catch(error => {
         console.error("Ein Netzwerkfehler ist aufgetreten");
       });
@@ -61,7 +53,6 @@ export const useUserStore = defineStore('userStore', {
     async loadProfilePictures() {
       (await api.get("/users/profilePictures")).data.forEach((element: string) => {
         this.profilePictures.push({ shortName: element.split(" ")[0].replace(":", ""), url: element.split(" ")[1]});
-        console.log("Hallo ich mache hier was");
       });
       this.profilePicturesLoaded = true;
     },
@@ -69,23 +60,28 @@ export const useUserStore = defineStore('userStore', {
     getAllPtpUsers() {
       this.loadAllPtpUsers().then((response : ptpUser[]) => {
         this.users = response;
-
-        this.users.forEach((user : ptpUser) => {
-          if(user.profilePictureUrl == null) {
-            user.profilePictureUrl = "https://th.bing.com/th/id/R.487fe8708797950ab745a3800c31b7a4?rik=qW3zkDdZfweqmQ&pid=ImgRaw&r=0";
-          }
-
-          if(user.status == null) {
-            user.status = "Hey there, I am using ptpChat!";
-          }
-        })
       })
 
       this.usersLoaded = true;
     },
 
     async loadAllPtpUsers() {
-      return (await api.get("/users/user")).data;
+      return (await api.get("/users")).data;
+    },
+
+    async updateUser() {
+      // Find corerspoding short name for link
+
+      const updatedUser : ptpUser = {...this.user!};
+
+      this.profilePictures.forEach((element: profilePicture) => {
+        if(element.url === this.user!.profilepicture){
+          updatedUser.profilepicture = element.shortName;
+        }
+      });
+
+
+      await api.post("/users/update", updatedUser);
     },
 
     async initKeycloak() : Promise<Keycloak>{

From 9f516b56196e59c14f223f109cbd4ae9f5a86c4c Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Wed, 29 May 2024 11:57:19 +0200
Subject: [PATCH 13/38] chat store now uses dedicated ProfilePicture model

---
 src/stores/chat-store.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 6df4c80..4e8a60d 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import {chat, responseModel} from 'src/models';
+import {chat, profilePicture, responseModel} from 'src/models';
 import { api } from 'src/boot/axios';
 import { useUserStore } from 'stores/user-store';
 
@@ -8,7 +8,7 @@ export const useChatStore = defineStore('chatStore',{
     chats: [] as chat[],
     chatsLoaded: false,
     chatExistsReponse: false,
-    profilePictures : [] as string[],
+    profilePictures : [] as profilePicture[],
     profilePicturesLoaded: false
   }),
   actions: {
@@ -24,7 +24,9 @@ export const useChatStore = defineStore('chatStore',{
       return this.chats;
     },
     async loadProfilePictures(){
-      this.profilePictures = (await api.get("/users/profilePictures")).data;
+      (await api.get("/chats/profilePictures")).data.forEach((element: string) => {
+        this.profilePictures.push({shortName: element.split(" ")[0].replace(":", ""), url: element.split(" ")[1]});
+      });
       this.profilePicturesLoaded = true;
     },
     async createChat(chatName: string, members: string[]){

From d12ca80375a3b30466f5d7ea4ca46de154e9a17b Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:15:51 +0200
Subject: [PATCH 14/38] Users can now be removed from chats

---
 src/components/ChatSettingsComponent.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index cfb48b6..6db68f9 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -16,7 +16,7 @@
                 <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
               </td>
               <td v-if="user.id != userStore.user!.id">
-                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen"></q-btn>
+                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn>
                 <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
               </td>
             </tr>
@@ -67,8 +67,10 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
-import { profilePicture } from 'src/models';
+import { profilePicture, responseModel } from 'src/models';
 import { useChatStore } from 'src/stores/chat-store';
+import { useQuasar } from 'quasar';
+import { sendNotification } from 'src/utils';
 
   const showDialog = ref(true);
   const userStore = useUserStore();
@@ -92,6 +94,19 @@ import { useChatStore } from 'src/stores/chat-store';
   const selectProfilePicture = (image: profilePicture) => {
     props.chat!.profilepicture = image.url;
   }
+
+  const $q = useQuasar();
+
+  const removeUser = (keycloakID : string) => {
+    chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => {
+      reloadChats();
+      sendNotification(response.message, response.success);
+    });
+  }
+
+  const reloadChats = async() => {
+    await chatStore.loadChatsByUser();
+  };
 </script>
 
 <style scoped>

From d3b2eaa32a6f3e72c8f9c072991a81582f51b980 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:17:40 +0200
Subject: [PATCH 15/38] Outsourced notify funtionality into utils file

---
 src/components/CreateChatComponent.vue | 36 +++++++-------------------
 src/utils.ts                           | 16 ++++++++++++
 2 files changed, 25 insertions(+), 27 deletions(-)
 create mode 100644 src/utils.ts

diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
index 8c8351a..283968d 100644
--- a/src/components/CreateChatComponent.vue
+++ b/src/components/CreateChatComponent.vue
@@ -67,7 +67,8 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
   import { useUserStore } from 'src/stores/user-store';
-  import type { ptpUser } from 'src/models';
+  import type { ptpUser, responseModel } from 'src/models';
+  import {sendNotification} from 'src/utils';
 import { useQuasar } from 'quasar';
 import { useChatStore } from 'src/stores/chat-store';
 
@@ -79,8 +80,6 @@ import { useChatStore } from 'src/stores/chat-store';
 
   const searchResults = ref([] as ptpUser[]);
 
-  const $q = useQuasar();
-
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean,
@@ -117,36 +116,16 @@ import { useChatStore } from 'src/stores/chat-store';
     let errorOccured = false;
 
     if(usersForChat.value.length == 0) {
-      $q.notify({
-        message: 'Du hast keine Mitglieder ausgewählt',
-        position: 'top',
-        timeout: 2000,
-        color: "red",
-        icon: 'warning'
-      });
+      sendNotification("Du hast keine Mitglieder ausgewählt", false);
       errorOccured = true;
     }
 
     if(chatName.value == "") {
-      $q.notify({
-        message: 'Du hast keinen Namen festgelegt',
-        position: 'top',
-        timeout: 2000,
-        color: "red",
-        icon: 'warning'
-      }); 
+      sendNotification("Du hast keinen Namen festgelegt", false);
       errorOccured = true; 
     }
 
     if(!errorOccured) {
-      $q.notify({
-        message: 'Der Chat "'+chatName.value+'" wurde erstellt',
-        position: 'top',
-        timeout: 2000,
-        color: "green",
-        type: "positive"
-      });   
-
       setupChat(chatName.value);
       closeDialog();
       chatName.value = "";
@@ -157,8 +136,11 @@ import { useChatStore } from 'src/stores/chat-store';
   const chatStore = useChatStore();
 
   const setupChat = async(chatName: string)=>{
-    await chatStore.createChat(chatName, usersForChat.value.map((user) => user.id));
-    reloadChats();
+    chatStore.createChat(chatName, usersForChat.value.map((user) => user.id), userStore.user!.id).then((response : responseModel) => {
+      sendNotification(response.message, response.success);
+      reloadChats();
+    });
+    
   }
 
   const reloadChats = async() => {
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..326d4ef
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,16 @@
+import { Notify } from "quasar";
+import { responseModel } from "./models";
+
+export const sendRestResponseAsNotification = (response : responseModel) => {
+  
+}
+
+export const sendNotification = (message : string, successful : Boolean) => {
+  Notify.create({
+    message: message,
+    position: 'top',
+    timeout: 2000,
+    color: successful ? "green" : "red",
+    icon: successful ? "success" : "warning"
+  });
+}
\ No newline at end of file

From 33279335cb5f02e1d48b32d000102468961f8e47 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:18:37 +0200
Subject: [PATCH 16/38] Changed return values in order to be able to introduce
 error handling

---
 src/stores/chat-store.ts | 8 ++++++--
 src/stores/user-store.ts | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 4e8a60d..393a812 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import {chat, profilePicture, responseModel} from 'src/models';
 import { api } from 'src/boot/axios';
 import { useUserStore } from 'stores/user-store';
+import { useQuasar } from 'quasar';
 
 export const useChatStore = defineStore('chatStore',{
   state:() => ({
@@ -29,7 +30,7 @@ export const useChatStore = defineStore('chatStore',{
       });
       this.profilePicturesLoaded = true;
     },
-    async createChat(chatName: string, members: string[]){
+    async createChat(chatName: string, members: string[], keycloakID: string){
       const userStore = useUserStore();
       if(userStore.id) {
         if (!members.includes(userStore.id)) {
@@ -41,7 +42,10 @@ export const useChatStore = defineStore('chatStore',{
         }
       }
       console.log(members);
-      return (await api.post("/chats/create/" + chatName, members)).data;
+      return (await api.post("/chats/create/" + chatName + "/" + keycloakID, members)).data;
+    },
+    async removeUserFromChat(keycloakID : string, chatID : number) {
+      return (await api.delete("/chats/removeUser/"+chatID+"/"+keycloakID)).data;
     }
   }
 });
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index cbb51e9..1f3d942 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -81,7 +81,7 @@ export const useUserStore = defineStore('userStore', {
       });
 
 
-      await api.post("/users/update", updatedUser);
+      return (await api.post("/users/update", updatedUser)).data;
     },
 
     async initKeycloak() : Promise<Keycloak>{

From b32599e6afb7f818ca114aa6332b8e0a67545e93 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:19:09 +0200
Subject: [PATCH 17/38] MessageComponent now displays the Display- and username
 of the sender

---
 src/components/MessageComponent.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 00eaaf8..205c204 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { decodedTextSpanIntersectsWith } from 'typescript';
 
   const props =  defineProps({
     ownMessage: Boolean,
     timestamp: String,
     message: String,
+    sender: Object,
     gif: Boolean,
     link: Boolean,
     url: String,
+    showSender: Boolean,
   })
 
   const date = new Date(Number(props.timestamp));
@@ -16,6 +17,10 @@ import { decodedTextSpanIntersectsWith } from 'typescript';
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
+    <div v-if="props.showSender" style="display: flex; justify-content: space-between;">
+      <div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
+      <div class="text-body">@{{ props.sender!.username }}</div>
+    </div>
     <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>

From 6e2525da877960dc88a8c00f930b1e3a4d720b92 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:19:39 +0200
Subject: [PATCH 18/38] Added slim variant for the profilecardcomponent

---
 src/components/ProfileCardComponent.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue
index 26e5b73..e05cba1 100644
--- a/src/components/ProfileCardComponent.vue
+++ b/src/components/ProfileCardComponent.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
-  import {message, ptpTestUser} from 'src/models';
 
   const props =  defineProps({
     user: Object,
     selected: Boolean,
+    slim: Boolean,
   })
 
 </script>
 
 <template>
   <div class="profileCard" :class="selected ? 'selected' : ''">
-    <div class="profilePicture" :style="{'background-image' : 'url('+props.user!.profilePictureUrl+')' }"></div>
+    <div class="profilePicture" :style="{'background-image' : 'url('+props.user!.profilepicture+')' }"></div>
     <div style="margin-left:10px;">
       <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
         <span style="font-weight: bold;font-size: 1.2rem;">{{props.user!.firstName}} {{ props.user!.lastName }}</span>
-        @{{props.user!.username}}
+        <span v-if="!props.slim">@{{props.user!.username}}</span>
       </p>
 
-      <p style="margin: 0;">{{ props.user!.status }}</p>
+      <p v-if="!props.slim" style="margin: 0;">{{ props.user!.status }}</p>
+      <p v-else style="margin: 0;">Hier steht die letzte Nachricht</p>
     </div>
   </div>
 </template>

From ec64e269ca44ae8a14a31898e3b71140633e97e0 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:20:03 +0200
Subject: [PATCH 19/38] Removed unused code, two-person-chats are now displayed
 correctly

---
 src/pages/IndexPage.vue | 92 +++++++++--------------------------------
 1 file changed, 20 insertions(+), 72 deletions(-)

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 3ffc4b4..d3f0d57 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -55,56 +55,19 @@
               @click="selectChat(chat as chat)"
             ></ChatCardComponent>
 
-
-            <div v-else>
-              <h5>Ist ein Chat für zwei</h5>
-            </div>
-
-            <!--<p v-for="member in chat.members">
-              {{ member.id }}
-            </p>-->
-            <!----<ProfileCardComponent
-              v-else
+            <ProfileCardComponent
+              v-else-if="chat.members.length == 2"
               :user="userStore.users.find((user) => user.id === chat.members.find((member) => member.id !== userStore.user!.id)?.id)"
-              :selected="selectedUser.id == chat.members[0].id"
-              @click="selectUser(chat.members[0] as ptpUser)"
-            ></ProfileCardComponent>-->
+              :selected="chat.id == selectedChat.id"
+              @click="selectChat(chat as chat)"
+              slim
+            ></ProfileCardComponent> 
+            
+            <p v-else>
+              <span v-for="member in chat.members">{{ member.id }}<br></span>
+            </p>
           </div>
         </div>
-
-
-        <!--<br>
-        <q-input
-          v-model="chatName"
-          label="Chat Name"
-          clearable
-        />
-        <div class="q-gutter-y-md" style="max-width: 300px">
-          <q-input
-            standout
-            bottom-slots
-            v-model="userSearch"
-            label="Search User"
-            clearable
-            filled
-            color="orange"
-            @update:model-value=""
-          >
-          </q-input>
-        </div>
-        <div class="q-pa-lg">
-          <q-option-group
-            v-model="usersForChat"
-            rules="[val => val.length > 0 || 'Please select at least one user']"
-            :options="userStore.users.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id).map((u) => {
-        return {label: u.firstName + ' ' + u.lastName, value: u.id}})"
-            type="checkbox"
-            color="primary"
-            inline
-          >
-          </q-option-group>
-        </div>
-        <q-btn @click="createChat(chatName)" label="Create Chat"/>-->
       </div>
 
       <q-btn 
@@ -124,13 +87,13 @@
     <div style="width: 75%;height: 100%;background: #DFD0BF;">
       <div class="header" v-if="selectedUser.id != null || selectedChat.id != null" style="padding: 10px;">
         <HeaderInfoContainerComponent 
-          v-if="selectedUser.id != null" 
-          :displayName="selectedUser.firstName + ' ' + selectedUser.lastName"
-          :image="selectedUser.profilepicture"
+          v-if="selectedChat.members.length == 2" 
+          :displayName="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.firstName + ' ' + selectedChat.members.find((member) => member.id !== userStore.user!.id)?.lastName"
+          :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture"
         ></HeaderInfoContainerComponent>
 
-        <div v-if="selectedChat.id != null" style="display: flex;">
-          <HeaderInfoContainerComponent  
+        <div v-else-if="selectedChat.members.length > 2" style="display: flex;">
+          <HeaderInfoContainerComponent
             :displayName="selectedChat.displayName"
             :image="selectedChat.profilepictureAsString"
           ></HeaderInfoContainerComponent>
@@ -150,7 +113,7 @@
       </div>
 
 
-      <div v-if="selectedUser.id != null" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;">
+      <div v-if="selectedUser.id != null" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
         <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
           <p>Das ist der Beginn deines Chats mit <strong>{{selectedUser.firstName}} {{selectedUser.lastName}}</strong></p>
         </div>
@@ -184,8 +147,8 @@
         </div>
       </div>
 
-      <div v-if="selectedChat.id != null" style="padding: 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
-        <div v-for="(message, index) in (messageStore.messages[selectedChat.id].sort((a, b) =>  {return (Number(b.timestamp)-Number(a.timestamp))}))" :key="index">
+      <div v-if="selectedChat.id != null" style="padding: 75px 25px 0 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
+        <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :key="index">
           <MessageComponent
             v-if="message.gif"
             :url="message.content"
@@ -207,6 +170,8 @@
             :message="message.content"
             :timestamp="message.timestamp"
             :own-message="message.sender.id == userStore.user!.id"
+            :sender="message.sender"
+            :showSender="selectedChat.members.length > 2 && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
           ></MessageComponent>
         </div>
       </div>
@@ -295,23 +260,6 @@ import { useMessageStore } from 'src/stores/message-store';
   let loadedGifsAmount = 10;
 
   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}
   ];
 
   function isUrl(url : string) {

From 2bd8dbc991aa7dbba78af5e00db2faaa8c5d9912 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:21:09 +0200
Subject: [PATCH 20/38] Added popup to allow the user to confirm the deletion
 of their account

---
 src/components/SettingsPopUp.vue | 46 +++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/SettingsPopUp.vue b/src/components/SettingsPopUp.vue
index edea8b5..ae8bf02 100644
--- a/src/components/SettingsPopUp.vue
+++ b/src/components/SettingsPopUp.vue
@@ -1,4 +1,16 @@
 <template>
+  <q-dialog v-bind:model-value="showDeleteAccountPopup">
+    <q-card style="padding: 20px;">
+      <q-card-section>
+        <div class="text-h4">Account löschen</div>
+        <div class="text-body">Bist du sicher, dass du deinen Account löschen möchtest?</div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn label="Abbrechen" class="greyButton" style="width: 48%;" @click="showDeleteAccountPopup = false" />
+        <q-btn label="Account löschen" class="buttonRed" style="width: 48%" @click="" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
   <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" backdrop-filter="brightness(60%)" full-width>
       <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
         <!--<h1>{{ internalShowDialog }}</h1>-->
@@ -40,7 +52,7 @@
             <div style="display: flex;" v-if="userStore.profilePicturesLoaded">
               <div
                 v-for="(image, index) in userStore.profilePictures"
-                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilePictureUrl ? 'dashed grey' : 'none'}"
+                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilepicture ? 'dashed grey' : 'none'}"
                 style="color: red;"
                 round
                 flat
@@ -62,7 +74,7 @@
             <h5>Aktionen</h5>
             <q-btn @click="logout()" label="Abmelden" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
             <q-btn @click="logout()" label="Account privatisieren" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
-            <q-btn @click="" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
+            <q-btn @click="deleteAccount()" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
           </q-card-section>
 
           <q-card-section>
@@ -79,8 +91,9 @@
 
 <script setup lang="ts">
   import { useQuasar } from 'quasar';
-  import {profilePicture, message, ptpTestUser} from 'src/models';
+  import {profilePicture, responseModel,} from 'src/models';
   import { useUserStore } from 'src/stores/user-store';
+import { sendNotification } from 'src/utils';
   import { computed, onMounted, toRefs } from 'vue';
   import { ref } from 'vue';
 
@@ -100,11 +113,16 @@
 
   function selectProfilePicture(image : profilePicture) {
     showUnsavedChangesAlert();
-    userStore.user!.profilePictureUrl = image.url;
+    userStore.user!.profilepicture = image.url;
   }
 
   function saveProfileChanges() {
     showingAlert.value = false;
+    userStore.updateUser().then((response : responseModel) => {
+      sendNotification(response.message, true);
+    });
+    closeDialog();
+    
     // Hier muss ein request ans Backend geschickt werden, welcher den gesamten User enthält
   }
 
@@ -112,6 +130,12 @@
     userStore.logout();
   };
 
+  const showDeleteAccountPopup = ref(false);
+
+  const deleteAccount = () => {
+    showDeleteAccountPopup.value = true;
+  }
+
   const closeDialog = () => {
     //internalShowDialog.value = false;
     emit('showModal', true);
@@ -170,4 +194,18 @@
   .grid-container > div:nth-child(odd) {
     margin-right: 50px;
   }
+
+  .buttonRed {
+    color: white;
+    background: darkred;
+  }
+
+  .buttonRed:hover, .greyButton:hover {
+    filter: brightness(0.7);
+  }
+
+  .greyButton {
+    color: white;
+    background: grey;
+  }
 </style>

From 47e84a54d66f7f0766eb51b78807073df09a4949 Mon Sep 17 00:00:00 2001
From: JonaKl <jonaklaess@gmail.com>
Date: Fri, 31 May 2024 20:53:54 +0200
Subject: [PATCH 21/38] swapped await to then for being able to build app

---
 Dockerfile | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..86b97b2
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,13 @@
+# build stage
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist/spa/ /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

From 919b4888e60f7166672a6b3998a7f7b2e25f5a31 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Mon, 3 Jun 2024 15:19:49 +0200
Subject: [PATCH 22/38] Messages are now properly displayed and formatted

---
 src/components/ChatSettingsComponent.vue | 16 +++++++++++--
 src/pages/IndexPage.vue                  | 15 ++++--------
 src/stores/message-store.ts              | 30 ++++++++++++++++++++++--
 src/utils.ts                             |  5 ----
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index 6db68f9..e2ace4f 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -11,7 +11,7 @@
         <q-card-section>
           <div class="text-h5">Mitglieder</div>
           <table>
-            <tr v-for="user in props.chat!.members">
+            <tr v-for="user in members">
               <td>
                 <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
               </td>
@@ -67,7 +67,7 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
-import { profilePicture, responseModel } from 'src/models';
+import { profilePicture, ptpUser, responseModel } from 'src/models';
 import { useChatStore } from 'src/stores/chat-store';
 import { useQuasar } from 'quasar';
 import { sendNotification } from 'src/utils';
@@ -96,11 +96,23 @@ import { sendNotification } from 'src/utils';
   }
 
   const $q = useQuasar();
+  const members = ref([] as ptpUser[]);
+
+  members.value = props.chat!.members;
 
   const removeUser = (keycloakID : string) => {
     chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => {
       reloadChats();
       sendNotification(response.message, response.success);
+      if(response.success) {
+        members.value = members.value.filter((user) => user.id != keycloakID);
+      }
+
+      if(members.value.length == 1) {
+        sendNotification("Es ist ein kritischer Fehler aufgetreten", false);
+      } else if(members.value.length == 2) {
+        closeDialog();
+      }
     });
   }
 
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index d3f0d57..7abdc04 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -149,20 +149,15 @@
 
       <div v-if="selectedChat.id != null" style="padding: 75px 25px 0 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
         <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :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"
+            v-if="message.gif || message.link"
             :url="message.content"
             :timestamp="message.timestamp"
-            :own-message="message.isOwn"
-            link
+            :own-message="message.sender.id == userStore.user!.id"
+            :link="message.link"
+            :gif="message.gif"
+            :showSender="selectedChat.members.length > 2 && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
           ></MessageComponent>
 
           <MessageComponent
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index 72353f6..cfc81d7 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/message-store.ts
@@ -10,19 +10,45 @@ export const useMessageStore = defineStore('messageStore', {
   }),
   actions: {
     async sendMessage(chatId : number, senderId : string, content : string)  {
-      await api.post("/messages/"+chatId+"/"+senderId+"/"+content).then((result) => {
+      const config = { headers: {'Content-Type': 'application/json'} };
+      await api.post("/messages/"+chatId+"/"+senderId, content, config).then((result) => {
         this.loadMessagesByChatID(chatId);
       });
     },
 
     loadMessagesByChatID(chatID : number) {
       this.getAllMessagesByChatID(chatID).then((messages) => {
+        messages.forEach((message : message) => {
+          message.content = message.content.substring(1, message.content.length-1);
+          if (isUrl(message.content)) {
+            if (isTenorGifUrl(message.content)) {
+              message.gif = true;
+            } else {
+              message.link = true;
+            }
+          }
+        });
+
         this.messages[chatID] = messages;
       });
     },
 
     async getAllMessagesByChatID(chatID : number) {
-      return (await api.get("/messages/chat/"+chatID)).data;
+      return (await api.get("/messages/"+chatID)).data;
     },
   },
 });
+
+function isUrl(url : string) {
+  try {
+    new URL(url);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+function isTenorGifUrl(url : string) {
+  return url.startsWith("https://media.tenor.com/") && url.endsWith(".gif");
+
+}
diff --git a/src/utils.ts b/src/utils.ts
index 326d4ef..8e23921 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,9 +1,4 @@
 import { Notify } from "quasar";
-import { responseModel } from "./models";
-
-export const sendRestResponseAsNotification = (response : responseModel) => {
-  
-}
 
 export const sendNotification = (message : string, successful : Boolean) => {
   Notify.create({

From c2c1106cfd70a1ea5bbaa2cf6ef7321bccca6d5e Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Mon, 10 Jun 2024 12:25:24 +0200
Subject: [PATCH 23/38] Timestamp is now formatted properly

---
 src/components/MessageComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 205c204..d4e809f 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -12,7 +12,7 @@
   })
 
   const date = new Date(Number(props.timestamp));
-  const timestampFormatted = date.getDay() + "." + date.getMonth() + "." + date.getFullYear() + ", " + date.getHours() + ":" + (date.getMinutes() + '').padStart(2, '0');
+  const timestampFormatted = date.toLocaleString('de-DE');
 </script>
 
 <template>

From fee2fb4bdde9260cd7d2d8751baceab4b19bf84b Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:01:21 +0200
Subject: [PATCH 24/38] fixed Date-Formatting

---
 src/components/MessageComponent.vue | 18 +++++++++++++++++-
 src/utils.ts                        | 20 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index d4e809f..419398f 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { getDaysOffset, isToday } from 'src/utils';
+
 
   const props =  defineProps({
     ownMessage: Boolean,
@@ -11,8 +13,22 @@
     showSender: Boolean,
   })
 
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+
   const date = new Date(Number(props.timestamp));
-  const timestampFormatted = date.toLocaleString('de-DE');
+  let timestampFormatted = date.toLocaleString('de-DE', options);
+  const daysOffset = getDaysOffset(date, new Date());
+
+  if(daysOffset <= 1) {
+    const descriptions = ['Heute', 'Gestern'];
+    timestampFormatted = descriptions[daysOffset] + ', ' + date.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
+  }
 </script>
 
 <template>
diff --git a/src/utils.ts b/src/utils.ts
index 8e23921..8907b9c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -6,6 +6,24 @@ export const sendNotification = (message : string, successful : Boolean) => {
     position: 'top',
     timeout: 2000,
     color: successful ? "green" : "red",
-    icon: successful ? "success" : "warning"
+    icon: successful ? "check" : "warning"
   });
+}
+
+export const isToday = (date : Date) => {
+  const today = new Date();
+  return date.getFullYear() === today.getFullYear() &&
+         date.getMonth() === today.getMonth() &&
+         date.getDate() === today.getDate();
+}
+
+export const getDaysOffset = (date1: Date, date2: Date) => {
+  // Berechne die Differenz in Millisekunden
+  const diffInMillis = date2.getTime() - date1.getTime();
+  
+  // Eine Konstante für die Anzahl der Millisekunden in einem Tag
+  const millisInDay = 1000 * 60 * 60 * 24;
+  
+  // Berechne die Differenz in vollen Tagen und runde ab
+  return Math.floor(diffInMillis / millisInDay);
 }
\ No newline at end of file

From e239e69ff73a39fcf4c20c34665bb61e714456b1 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:03:33 +0200
Subject: [PATCH 25/38] User is now able to start a new dm chat with another
 user, optimized message loading

---
 src/models.ts               |   2 +
 src/pages/IndexPage.vue     | 119 ++++++++++++++++++++++--------------
 src/stores/message-store.ts |  51 ++++++++++++++--
 3 files changed, 122 insertions(+), 50 deletions(-)

diff --git a/src/models.ts b/src/models.ts
index 25593e8..dea6c4a 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -5,6 +5,7 @@ export interface ptpUser {
   username: string;
   status: string;
   profilepicture: string;
+  isPrivate: boolean;
 }
 
 export interface responseModel {
@@ -20,6 +21,7 @@ export interface chat{
   displayName: string;
   profilepicture: string;
   profilepictureAsString: string;
+  isGroupChat: boolean;
 }
 
 export interface message {
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 7abdc04..1642d64 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -53,6 +53,7 @@
               :selected="chat.id == selectedChat.id" 
               :chat="chat"
               @click="selectChat(chat as chat)"
+              :lastMessage="getChatPreviewMessage(chat.id)"
             ></ChatCardComponent>
 
             <ProfileCardComponent
@@ -61,11 +62,16 @@
               :selected="chat.id == selectedChat.id"
               @click="selectChat(chat as chat)"
               slim
+              :lastMessage="getChatPreviewMessage(chat.id)"
             ></ProfileCardComponent> 
-            
-            <p v-else>
-              <span v-for="member in chat.members">{{ member.id }}<br></span>
-            </p>
+
+            <ChatCardComponent 
+              v-else 
+              :selected="chat.id == selectedChat.id" 
+              :chat="chat"
+              @click="selectChat(chat as chat)"
+              :lastMessage="getChatPreviewMessage(chat.id)"
+            ></ChatCardComponent>
           </div>
         </div>
       </div>
@@ -92,7 +98,7 @@
           :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture"
         ></HeaderInfoContainerComponent>
 
-        <div v-else-if="selectedChat.members.length > 2" style="display: flex;">
+        <div v-else style="display: flex;">
           <HeaderInfoContainerComponent
             :displayName="selectedChat.displayName"
             :image="selectedChat.profilepictureAsString"
@@ -100,7 +106,8 @@
 
           <div>
             <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 14px;height:50px;margin: 0px;display: table-cell;vertical-align: middle;padding: 10px;max-width: 300px;">
-              <span>Du, </span>
+              <span>Du</span>
+              <span v-if="selectedChat.members.length > 1">, </span>
               <span v-for="(user, index) in selectedChat.members.filter(u => u.id != userStore.user!.id)">@{{ user.username }}{{ index < selectedChat.members.length - 2 ? ", " : "" }} </span>
             </p>
           </div>
@@ -113,37 +120,13 @@
       </div>
 
 
-      <div v-if="selectedUser.id != null" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
+      <div v-if="selectedUser.id != null && selectedChat.members.length == 2" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
         <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
           <p>Das ist der Beginn deines Chats mit <strong>{{selectedUser.firstName}} {{selectedUser.lastName}}</strong></p>
         </div>
+
         <div v-else>
           <p>Du hast schonmal mit dem geschrieben wie schön</p>
-
-          <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :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>
 
@@ -173,7 +156,7 @@
 
       <div class="footer">
 
-        <q-input filled v-model="message" placeholder="Nachricht eingeben" tabindex="0" @keyup.enter.prevent="sendMessage">
+        <q-input filled v-model="message" placeholder="Nachricht eingeben" tabindex="0" @keyup.enter.prevent="sendMessage" :disable="!selectedChat.id">
           <template v-slot:after>
             <q-btn round dense flat icon="gif_box" id="sendMessageBtn" style="font-size: 1.2rem;" @click="toggleGifMenu"></q-btn>
           </template>
@@ -219,7 +202,7 @@
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
   import ChatCardComponent from 'components/ChatCardComponent.vue';
   import HeaderInfoContainerComponent from 'components/HeaderInfoContainerComponent.vue';
-  import {message} from 'src/models';
+  import type {message} from 'src/models';
   import type {chat, ptpUser} from 'src/models';
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
@@ -257,6 +240,31 @@ import { useMessageStore } from 'src/stores/message-store';
   let messages : message[] = [
   ];
 
+  const getChatPreviewMessage = (chatId : number) => {
+    const messageArray : message[] = messageStore.messages[chatId];
+    
+
+    if(messageArray && messageArray.length > 0) {
+      const newestMessage = messageArray[0];
+
+      let messageContent = newestMessage.content;
+      let userDescriptor = newestMessage.sender.firstName;
+
+      if(isTenorGifUrl(newestMessage.content)) {
+        messageContent = "GIF";
+      }
+
+      if(newestMessage.sender.id == userStore.user!.id) {
+        userDescriptor = "Du";
+      }
+        
+      return userDescriptor + ": " + messageContent;
+      
+    } else {
+      return "Der Chat wurde erstellt";
+    }
+  }
+
   function isUrl(url : string) {
     try {
       new URL(url);
@@ -292,7 +300,7 @@ import { useMessageStore } from 'src/stores/message-store';
 
 
   function getGifs() {
-    let query = gifSearch.value != "" ? gifSearch.value : "shrek";
+    let query = gifSearch.value != "" ? gifSearch.value : "the office";
 
     if(changed.value) {
       tenorStore.getGifsBySearchTerm(query, loadedGifsAmount);
@@ -309,7 +317,16 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function sendMessage() {
-    messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value);
+    if(selectedChat.value.id != -1) {
+      messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value);
+    } else {
+      messageStore.createChatAndSendFirstMessage(selectedUser.value.id,userStore.user!.id, message.value).then((response) => {
+        reloadChats().then(() => {
+          activeMenu.value = 'chats';
+          selectChat(chatStore.chats.find((chat) => chat.id == response)!);
+        });
+      });
+    }
     message.value = "";
   }
 
@@ -325,13 +342,17 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function getMessages() {
-    if(selectedChat.value.id != null) {
-      messageStore.loadMessagesByChatID(selectedChat.value.id);
+    for(let chat of chatStore.chats) {
+      messageStore.loadMessagesByChatID(chat.id);
     }
     
   }
 
-  setInterval(getMessages, 2000);
+  const reloadChats = async() => {
+    await chatStore.loadChatsByUser();
+  };
+
+  setInterval(getMessages, 5000);
 
 
   setInterval(getGifs, 500);
@@ -347,7 +368,18 @@ import { useMessageStore } from 'src/stores/message-store';
 
   function selectUser(user : ptpUser) {
     selectedUser.value = user;
-    selectedChat.value = {} as chat;
+    //selectedChat.value = {} as chat;
+    // CHECKEN, OB ES SCHON EINEN CHAT GIBT
+    const exampleChat: chat = {
+      id: -1,
+      members: [user, userStore.user!],
+      messages: [],
+      displayName: user.firstName + " " + user.lastName,
+      profilepicture: user.profilepicture,
+      profilepictureAsString: user.profilepicture,
+      isGroupChat: false
+    };
+    selectedChat.value = exampleChat;
   }
 
   function selectChat(chat : chat) {
@@ -365,22 +397,19 @@ import { useMessageStore } from 'src/stores/message-store';
     // Hier wird geprüft, ob es ein Chat mit einem bestimmten anderen Nutzer existiert
     const chatExists = chatStore.chats.find((chat) => chat.members.length === 2 && chat.members.find((member) => member.id === id));
 
-    if(chatExists) return true;
-
-    return false;
+    return Boolean(chatExists);
   }
 
 
   // Init methods
+  
   loadChats();
 
 
   const user = ref();
 
   onMounted(() => {
-    //alert("mounted");
     user.value = userStore.user;
-    //alert(user.value.firstName);
   })
 
 </script>
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index cfc81d7..1b485fa 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/message-store.ts
@@ -2,11 +2,14 @@ import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 import { message, ptpUser, responseModel } from 'src/models';
 import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
+import { useNotificationStore } from './notification-store';
+import { useUserStore } from './user-store';
 
 
 export const useMessageStore = defineStore('messageStore', {
   state: () => ({
     messages: [[]] as [message[]],
+    loadedMessagesForChats: [] as number[],
   }),
   actions: {
     async sendMessage(chatId : number, senderId : string, content : string)  {
@@ -16,9 +19,28 @@ export const useMessageStore = defineStore('messageStore', {
       });
     },
 
+    async createChatAndSendFirstMessage(receiverId : string, senderId : string, content : string) {
+      const config = { headers: {'Content-Type': 'application/json'} };
+      return (await api.post("/messages/dm/"+senderId+"/"+receiverId, content, config).then((response) => {
+        console.info("LET ME IN");
+        console.info(response.data);
+        console.info(response.data.id);
+        this.loadMessagesByChatID(response.data.id);
+        
+        return response.data.id;
+        
+      }));
+    },
+
     loadMessagesByChatID(chatID : number) {
-      this.getAllMessagesByChatID(chatID).then((messages) => {
-        messages.forEach((message : message) => {
+      const notificationStore = useNotificationStore();
+      const userStore = useUserStore();
+      const messagesTemp : message[] = [];
+
+      const initialLoad = !this.loadedMessagesForChats.includes(chatID);
+
+      this.getAllMessagesByChatID(chatID).then((responseBody) => {
+        responseBody.response.forEach((message : message) => {
           message.content = message.content.substring(1, message.content.length-1);
           if (isUrl(message.content)) {
             if (isTenorGifUrl(message.content)) {
@@ -27,14 +49,33 @@ export const useMessageStore = defineStore('messageStore', {
               message.link = true;
             }
           }
-        });
 
-        this.messages[chatID] = messages;
+          if(!this.loadedMessagesForChats.includes(chatID)){
+            this.messages[chatID] = [];
+            this.loadedMessagesForChats.push(chatID);
+          }
+          if(!initialLoad){
+            if(message.sender.id !== userStore.user!.id) {
+              notificationStore.sendNotificationIfAllowed(message.sender.profilepicture, message.sender.username, message.content);
+            }
+          }
+          
+          this.messages[chatID].unshift(message);
+
+          
+          
+        });
       });
     },
 
     async getAllMessagesByChatID(chatID : number) {
-      return (await api.get("/messages/"+chatID)).data;
+      //const timestamp = !this.messages[chatID] ? 0 : this.messages[chatID][0].timestamp;
+      let timestamp = "0";
+      if(this.loadedMessagesForChats.includes(chatID)){
+        timestamp = this.messages[chatID][0].timestamp;
+      }
+      //console.log("Timestamp: "+timestamp);
+      return (await api.get("/messages/"+chatID+"/"+timestamp)).data;
     },
   },
 });

From a5c4aea7381c810773710ebe8ac713551e49d362 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:04:07 +0200
Subject: [PATCH 26/38] Profile- and Chat Card now display the last message as
 a preview

---
 src/components/ChatCardComponent.vue    | 3 +++
 src/components/ProfileCardComponent.vue | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatCardComponent.vue b/src/components/ChatCardComponent.vue
index ae8a182..7eb24ec 100644
--- a/src/components/ChatCardComponent.vue
+++ b/src/components/ChatCardComponent.vue
@@ -3,6 +3,7 @@
   const props =  defineProps({
     chat: Object,
     selected: Boolean,
+    lastMessage: String,
   })
 
 </script>
@@ -14,6 +15,8 @@
       <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
         <span style="font-weight: bold;font-size: 1.2rem;">{{props.chat!.displayName}}</span>
       </p>
+
+      <p style="margin: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:20rem;">{{ props.lastMessage }}</p>
     </div>
   </div>
 </template>
diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue
index e05cba1..00a75be 100644
--- a/src/components/ProfileCardComponent.vue
+++ b/src/components/ProfileCardComponent.vue
@@ -4,6 +4,7 @@
     user: Object,
     selected: Boolean,
     slim: Boolean,
+    lastMessage: String
   })
 
 </script>
@@ -18,7 +19,7 @@
       </p>
 
       <p v-if="!props.slim" style="margin: 0;">{{ props.user!.status }}</p>
-      <p v-else style="margin: 0;">Hier steht die letzte Nachricht</p>
+      <p v-else style="margin: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:20rem;">{{ props.lastMessage }}</p>
     </div>
   </div>
 </template>

From a57f0c11e8a58128bc0eb5822a169dae489d8e97 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:04:52 +0200
Subject: [PATCH 27/38] introduced the notification-store, which allows to
 notify the user about new messages

---
 src/stores/notification-store.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/stores/notification-store.ts

diff --git a/src/stores/notification-store.ts b/src/stores/notification-store.ts
new file mode 100644
index 0000000..22427a6
--- /dev/null
+++ b/src/stores/notification-store.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+export const useNotificationStore = defineStore('notificationStore',{
+  state:() => ({
+    decision: false,
+    isTabActive: true,
+  }),
+  actions: {
+    saveDecision(decision : boolean) {
+      this.decision = decision;
+    },
+
+    sendNotificationIfAllowed(image : string, headline : string, message : string) {
+      if(this.decision && !this.isTabActive){
+        new Notification(headline, { body: message, icon: image });
+      }
+    }
+  }
+});

From 1ba391f30fe261c7e772c9ed92cfbcceda131ed8 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:05:27 +0200
Subject: [PATCH 28/38] Changes made to a group chat can now be saved (WIP)

---
 src/components/ChatSettingsComponent.vue | 37 ++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index e2ace4f..d58b682 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -9,7 +9,7 @@
 
       <div class="grid-container">
         <q-card-section>
-          <div class="text-h5">Mitglieder</div>
+          <div class="text-h5">Mitglieder ({{ members.length }})</div>
           <table>
             <tr v-for="user in members">
               <td>
@@ -26,7 +26,7 @@
         <!-- Namen des Chats ändern -->
         <q-card-section>
           <div class="text-h5">Namen ändern</div>
-          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter />
+          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
         </q-card-section>
 
         <q-card-section>
@@ -41,7 +41,7 @@
           <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
             <div
               v-for="(image, index) in chatStore.profilePictures"
-              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepicture ? 'dashed grey' : 'none'}"
+              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepictureAsString ? 'dashed grey' : 'none'}"
               style="color: red;"
               round
               flat
@@ -67,7 +67,7 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
-import { profilePicture, ptpUser, responseModel } from 'src/models';
+import { chat, profilePicture, ptpUser, responseModel } from 'src/models';
 import { useChatStore } from 'src/stores/chat-store';
 import { useQuasar } from 'quasar';
 import { sendNotification } from 'src/utils';
@@ -76,6 +76,8 @@ import { sendNotification } from 'src/utils';
   const userStore = useUserStore();
   const chatStore = useChatStore();
 
+  const showingAlert = ref(false);
+
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean,
@@ -92,7 +94,8 @@ import { sendNotification } from 'src/utils';
   }
 
   const selectProfilePicture = (image: profilePicture) => {
-    props.chat!.profilepicture = image.url;
+    props.chat!.profilepictureAsString = image.url;
+    showUnsavedChangesAlert();
   }
 
   const $q = useQuasar();
@@ -119,6 +122,30 @@ import { sendNotification } from 'src/utils';
   const reloadChats = async() => {
     await chatStore.loadChatsByUser();
   };
+
+  const saveChatChanges = () => {
+    chatStore.updateChat(props.chat! as chat).then((response : responseModel) => {
+      showingAlert.value = false;
+      sendNotification(response.message, response.success);
+    });
+  }
+
+  const showUnsavedChangesAlert = () => {
+    if(!showingAlert.value) {
+      $q.notify({
+        message: 'Du hast Änderungen vorgenommen, die noch nicht gespeichert wurden',
+        position: 'top',
+        timeout: 0,
+        color: "green",
+        icon: 'announcement',
+        actions: [
+          { label: 'Änderungen speichern', color: 'white', handler: () => { saveChatChanges() } },
+        ]
+      });
+
+      showingAlert.value = true;
+    }
+  }
 </script>
 
 <style scoped>

From 9804be54c444bd618b3f624c8da7d4a151292163 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:06:06 +0200
Subject: [PATCH 29/38] notification-store now saves wether the applications
 tab is focussed

---
 src/main.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 5d0a6f7..324a87f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import App from './App.vue';
 import Keycloak from 'keycloak-js';
 import {useUserStore} from 'stores/user-store';
 import { useChatStore } from 'stores/chat-store';
+import { useNotificationStore } from './stores/notification-store';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -52,10 +53,24 @@ userStore.initKeycloak()
       chatStore.loadProfilePictures();
       userStore.loadProfilePictures();
 
+      Notification.requestPermission().then((result) => {
+        useNotificationStore().saveDecision(result === "granted");
+      });
+      
+
     } else {
       console.error("hier ist was schlimmes passiert menno");
     }
   }).catch(e=>console.error(e));
 
 
+  window.onfocus = function() {
+    useNotificationStore().isTabActive = true;
+  }
+
+  window.onblur = function() {
+    useNotificationStore().isTabActive = false;
+  }
+
+
 

From 487ecdfaf6e6917a876d5921128e01b67116fd7a Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:06:38 +0200
Subject: [PATCH 30/38] Some smaller changes

---
 src/components/CreateChatComponent.vue |  7 ++-----
 src/components/SettingsPopUp.vue       |  9 ++++++++-
 src/stores/chat-store.ts               | 14 ++++++++++++++
 src/stores/user-store.ts               |  7 +++++--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
index 283968d..9e07686 100644
--- a/src/components/CreateChatComponent.vue
+++ b/src/components/CreateChatComponent.vue
@@ -22,6 +22,8 @@
         filled
         v-model="chatName"
         placeholder="Name des Chats"
+        maxlength="256"
+        counter 
         style="margin: 20px 0;"
       >
         <template v-slot:prepend>
@@ -115,11 +117,6 @@ import { useChatStore } from 'src/stores/chat-store';
   const createChat = () => {
     let errorOccured = false;
 
-    if(usersForChat.value.length == 0) {
-      sendNotification("Du hast keine Mitglieder ausgewählt", false);
-      errorOccured = true;
-    }
-
     if(chatName.value == "") {
       sendNotification("Du hast keinen Namen festgelegt", false);
       errorOccured = true; 
diff --git a/src/components/SettingsPopUp.vue b/src/components/SettingsPopUp.vue
index ae8bf02..6952000 100644
--- a/src/components/SettingsPopUp.vue
+++ b/src/components/SettingsPopUp.vue
@@ -73,7 +73,7 @@
           <q-card-section>
             <h5>Aktionen</h5>
             <q-btn @click="logout()" label="Abmelden" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
-            <q-btn @click="logout()" label="Account privatisieren" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
+            <q-btn @click="toggleSetPrivate()" :label="userStore.user!.isPrivate ? 'Account entprivatisieren' : 'Account privatisieren'" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
             <q-btn @click="deleteAccount()" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
           </q-card-section>
 
@@ -126,6 +126,13 @@ import { sendNotification } from 'src/utils';
     // Hier muss ein request ans Backend geschickt werden, welcher den gesamten User enthält
   }
 
+  function toggleSetPrivate() {
+    userStore.setPrivateForUser(userStore.user!.id, !userStore.user!.isPrivate).then((response : responseModel) => {
+      userStore.user!.isPrivate = !userStore.user!.isPrivate;
+      sendNotification(response.message, response.success);
+    });
+  }
+
   const logout = () => {
     userStore.logout();
   };
diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 393a812..77babd6 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -44,6 +44,20 @@ export const useChatStore = defineStore('chatStore',{
       console.log(members);
       return (await api.post("/chats/create/" + chatName + "/" + keycloakID, members)).data;
     },
+    async updateChat(chat : chat) {
+    
+      const updatedChat : chat = {...chat};
+
+      this.profilePictures.forEach((element: profilePicture) => {
+        if(element.url === updatedChat.profilepicture){
+          updatedChat.profilepicture = element.shortName;
+        }
+      });
+
+
+      return (await api.post("/chats/update", chat)).data;
+    },
+
     async removeUserFromChat(keycloakID : string, chatID : number) {
       return (await api.delete("/chats/removeUser/"+chatID+"/"+keycloakID)).data;
     }
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 1f3d942..33a9650 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -70,8 +70,6 @@ export const useUserStore = defineStore('userStore', {
     },
 
     async updateUser() {
-      // Find corerspoding short name for link
-
       const updatedUser : ptpUser = {...this.user!};
 
       this.profilePictures.forEach((element: profilePicture) => {
@@ -83,6 +81,10 @@ export const useUserStore = defineStore('userStore', {
 
       return (await api.post("/users/update", updatedUser)).data;
     },
+    
+    async setPrivateForUser(keycloakId : string, isPrivate : boolean) {
+      return (await api.post("/users/setPrivate/"+keycloakId+"/"+isPrivate)).data;
+    },
 
     async initKeycloak() : Promise<Keycloak>{
 
@@ -104,5 +106,6 @@ export const useUserStore = defineStore('userStore', {
     async logout() {
       window.location.href= 'http://localhost:' + keycloakPort + '/realms/' + realm + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + frontendPort + '&client_id=' + clientId;
     },
+
   },
 });

From 03f16315fac11c3488fbe79024f85212cfbde79c Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:27:38 +0200
Subject: [PATCH 31/38] Usernames are now displayed in different colors

---
 src/components/MessageComponent.vue | 19 ++++++++++---------
 src/utils.ts                        | 27 +++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 419398f..4b41d48 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { getDaysOffset, isToday } from 'src/utils';
-
+  import { getDaysOffset } from 'src/utils';
 
   const props =  defineProps({
     ownMessage: Boolean,
@@ -11,6 +10,7 @@ import { getDaysOffset, isToday } from 'src/utils';
     link: Boolean,
     url: String,
     showSender: Boolean,
+    nametagColor: String,
   })
 
   const options: Intl.DateTimeFormatOptions = {
@@ -25,24 +25,24 @@ import { getDaysOffset, isToday } from 'src/utils';
   let timestampFormatted = date.toLocaleString('de-DE', options);
   const daysOffset = getDaysOffset(date, new Date());
 
-  if(daysOffset <= 1) {
-    const descriptions = ['Heute', 'Gestern'];
+  if(daysOffset <= 2) {
+    const descriptions = ['Heute', 'Gestern', 'Vorgestern'];
     timestampFormatted = descriptions[daysOffset] + ', ' + date.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
   }
 </script>
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
-    <div v-if="props.showSender" style="display: flex; justify-content: space-between;">
-      <div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
-      <div class="text-body">@{{ props.sender!.username }}</div>
+    <div v-if="props.showSender && !props.ownMessage" style="display: flex; justify-content: space-between;">
+      <div class="text-body" style="font-weight: bold;" :style="{'color' : props.nametagColor }">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
+      <div class="text-body" style="color: #505050"><small>@{{ props.sender!.username }}</small></div>
     </div>
     <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;">{{timestampFormatted}}</small>
+      <small style="margin-top: 0;color: #505050;">{{timestampFormatted}}</small>
     </div>
   </div>
 </template>
@@ -50,7 +50,8 @@ import { getDaysOffset, isToday } from 'src/utils';
 <style scoped>
   .message {
     border-radius: 10px;
-    width: 15rem;
+    max-width: 20rem;
+    width: auto;
     padding: 7px;
     margin:3px;
     box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
diff --git a/src/utils.ts b/src/utils.ts
index 8907b9c..7457e25 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -26,4 +26,31 @@ export const getDaysOffset = (date1: Date, date2: Date) => {
   
   // Berechne die Differenz in vollen Tagen und runde ab
   return Math.floor(diffInMillis / millisInDay);
+}
+
+export const getRandomHexColor2 = () => {
+  const hexChars = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+      color += hexChars[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+export const hslToHex = (h : number, s: number, l : number) => {
+  l /= 100;
+  const a = s * Math.min(l, 1 - l) / 100;
+  const f = (n : number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      return Math.round(255 * color).toString(16).padStart(2, '0'); // Convert to Hex and pad with zeroes if necessary
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export const getRandomHexColor = () => {
+  const hue = Math.floor(Math.random() * 360); // Random hue (0-360)
+  const saturation = 100; // Full saturation
+  const lightness = 30; // Adjust this value to set the desired lightness (0-100)
+  return hslToHex(hue, saturation, lightness);
 }
\ No newline at end of file

From 0c9ca7c36a3ea738f184ee6ebaed74f0dde99254 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:28:36 +0200
Subject: [PATCH 32/38] ChatSettingsComponent no longer accepts type "chat" as
 prop, chatID instead

---
 src/components/ChatSettingsComponent.vue | 77 ++++++++++++------------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index d58b682..0cb6150 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -2,20 +2,20 @@
   <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
     <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
       <q-card-section class="row items-center q-pb-none">
-        <div class="text-h4">{{ props.chat!.displayName }}</div>
+        <div class="text-h4">{{ chat!.displayName }}</div>
         <q-space />
         <q-btn icon="close" flat round dense v-close-popup />
       </q-card-section>
 
-      <div class="grid-container">
+      <div class="grid-container" v-if="chat?.members">
         <q-card-section>
-          <div class="text-h5">Mitglieder ({{ members.length }})</div>
+          <div class="text-h5">Mitglieder ({{ chat!.members.length }})</div>
           <table>
-            <tr v-for="user in members">
+            <tr v-for="user in chat.members">
               <td>
                 <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
               </td>
-              <td v-if="user.id != userStore.user!.id">
+              <td v-if="user.id != userStore.user!.id && currentUserIsAdmin">
                 <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn>
                 <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
               </td>
@@ -24,24 +24,24 @@
         </q-card-section>
 
         <!-- Namen des Chats ändern -->
-        <q-card-section>
+        <q-card-section v-if="currentUserIsAdmin">
           <div class="text-h5">Namen ändern</div>
-          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
+          <q-input filled v-model="chat.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
         </q-card-section>
 
         <q-card-section>
           <div class="text-h5">Aktionen</div>
-          <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
-          <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
+          <q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
+          <q-btn class="deleteButton" v-if="currentUserIsAdmin">Gruppenchat löschen</q-btn>
         </q-card-section>
 
-        <q-card-section>
+        <q-card-section v-if="currentUserIsAdmin">
           <div class="text-h5">Gruppenbild ändern</div>
 
           <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
             <div
               v-for="(image, index) in chatStore.profilePictures"
-              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepictureAsString ? 'dashed grey' : 'none'}"
+              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepictureAsString ? 'dashed grey' : 'none'}"
               style="color: red;"
               round
               flat
@@ -66,13 +66,13 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
-import { useUserStore } from 'src/stores/user-store';
-import { chat, profilePicture, ptpUser, responseModel } from 'src/models';
-import { useChatStore } from 'src/stores/chat-store';
-import { useQuasar } from 'quasar';
-import { sendNotification } from 'src/utils';
+  import { useUserStore } from 'src/stores/user-store';
+  import { profilePicture, ptpUser, responseModel } from 'src/models';
+  import type { chat } from 'src/models';
+  import { useChatStore } from 'src/stores/chat-store';
+  import { useQuasar } from 'quasar';
+  import { sendNotification } from 'src/utils';
 
-  const showDialog = ref(true);
   const userStore = useUserStore();
   const chatStore = useChatStore();
 
@@ -81,7 +81,8 @@ import { sendNotification } from 'src/utils';
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean,
-    chat: Object
+    chatID: Number,
+    leaveChat: Function
   });
 
   const internalShowDialog = computed({
@@ -94,37 +95,39 @@ import { sendNotification } from 'src/utils';
   }
 
   const selectProfilePicture = (image: profilePicture) => {
-    props.chat!.profilepictureAsString = image.url;
+    chat.value!.profilepictureAsString = image.url;
+    //props.chat!.profilepictureAsString = image.url;
     showUnsavedChangesAlert();
   }
 
   const $q = useQuasar();
-  const members = ref([] as ptpUser[]);
 
-  members.value = props.chat!.members;
+  const chat = ref(chatStore.chats.find((chat) => chat.id == props.chatID));
+
+  const currentUserIsAdmin = computed(() => {
+    return chat.value!.adminIds.includes(userStore.user!.id);
+  });
 
   const removeUser = (keycloakID : string) => {
-    chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => {
-      reloadChats();
-      sendNotification(response.message, response.success);
-      if(response.success) {
-        members.value = members.value.filter((user) => user.id != keycloakID);
-      }
+    chatStore.removeUserFromChat(keycloakID, props.chatID!).then((response : responseModel) => {
+      chatStore.loadChatsByUser().then(() => {
+        if(response.success) {
+          if(userStore.user!.id == keycloakID) {
+            sendNotification("Du hast den Chat verlassen", true);
+            props.leaveChat!();
+            closeDialog();
+          } else {
+            sendNotification(response.message, response.success);
+          }
 
-      if(members.value.length == 1) {
-        sendNotification("Es ist ein kritischer Fehler aufgetreten", false);
-      } else if(members.value.length == 2) {
-        closeDialog();
-      }
+          chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
+        }
+      });
     });
   }
 
-  const reloadChats = async() => {
-    await chatStore.loadChatsByUser();
-  };
-
   const saveChatChanges = () => {
-    chatStore.updateChat(props.chat! as chat).then((response : responseModel) => {
+    chatStore.updateChat(chat.value as chat).then((response : responseModel) => {
       showingAlert.value = false;
       sendNotification(response.message, response.success);
     });

From 85b6da4387ba4c37ed0184ae155479dc2618b4a8 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:29:00 +0200
Subject: [PATCH 33/38] Random colors are now assigned to every member of a
 chat at startup

---
 src/stores/chat-store.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index 77babd6..beb1190 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia';
-import {chat, profilePicture, responseModel} from 'src/models';
+import {chat, profilePicture, ptpUser, responseModel} from 'src/models';
 import { api } from 'src/boot/axios';
 import { useUserStore } from 'stores/user-store';
 import { useQuasar } from 'quasar';
+import { getRandomHexColor } from 'src/utils';
 
 export const useChatStore = defineStore('chatStore',{
   state:() => ({
@@ -21,6 +22,13 @@ export const useChatStore = defineStore('chatStore',{
     },
     async loadChatsByUser() : Promise<chat[]>{
       this.chats = (await api.get("/users/chat/" + useUserStore().id)).data.response;
+
+      this.chats.forEach((c) => {
+        c.members.forEach((member) => {
+          member.nametagColor = getRandomHexColor();
+        })
+      })
+
       this.chatsLoaded = true;
       return this.chats;
     },
@@ -44,6 +52,7 @@ export const useChatStore = defineStore('chatStore',{
       console.log(members);
       return (await api.post("/chats/create/" + chatName + "/" + keycloakID, members)).data;
     },
+    
     async updateChat(chat : chat) {
     
       const updatedChat : chat = {...chat};
@@ -54,7 +63,6 @@ export const useChatStore = defineStore('chatStore',{
         }
       });
 
-
       return (await api.post("/chats/update", chat)).data;
     },
 

From 6b558e6d48bf09d0962bccca28394817b0507316 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:29:25 +0200
Subject: [PATCH 34/38] removed unused methods

---
 src/stores/message-store.ts | 37 +++----------------------------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index 1b485fa..63a052a 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/message-store.ts
@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
-import { message, ptpUser, responseModel } from 'src/models';
-import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
+import { message } from 'src/models';
 import { useNotificationStore } from './notification-store';
 import { useUserStore } from './user-store';
 
@@ -22,33 +21,21 @@ export const useMessageStore = defineStore('messageStore', {
     async createChatAndSendFirstMessage(receiverId : string, senderId : string, content : string) {
       const config = { headers: {'Content-Type': 'application/json'} };
       return (await api.post("/messages/dm/"+senderId+"/"+receiverId, content, config).then((response) => {
-        console.info("LET ME IN");
-        console.info(response.data);
-        console.info(response.data.id);
         this.loadMessagesByChatID(response.data.id);
         
         return response.data.id;
-        
       }));
     },
 
     loadMessagesByChatID(chatID : number) {
       const notificationStore = useNotificationStore();
       const userStore = useUserStore();
-      const messagesTemp : message[] = [];
 
       const initialLoad = !this.loadedMessagesForChats.includes(chatID);
 
       this.getAllMessagesByChatID(chatID).then((responseBody) => {
         responseBody.response.forEach((message : message) => {
           message.content = message.content.substring(1, message.content.length-1);
-          if (isUrl(message.content)) {
-            if (isTenorGifUrl(message.content)) {
-              message.gif = true;
-            } else {
-              message.link = true;
-            }
-          }
 
           if(!this.loadedMessagesForChats.includes(chatID)){
             this.messages[chatID] = [];
@@ -61,35 +48,17 @@ export const useMessageStore = defineStore('messageStore', {
           }
           
           this.messages[chatID].unshift(message);
-
-          
-          
         });
       });
     },
 
     async getAllMessagesByChatID(chatID : number) {
-      //const timestamp = !this.messages[chatID] ? 0 : this.messages[chatID][0].timestamp;
       let timestamp = "0";
       if(this.loadedMessagesForChats.includes(chatID)){
         timestamp = this.messages[chatID][0].timestamp;
       }
-      //console.log("Timestamp: "+timestamp);
+
       return (await api.get("/messages/"+chatID+"/"+timestamp)).data;
     },
   },
-});
-
-function isUrl(url : string) {
-  try {
-    new URL(url);
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-
-function isTenorGifUrl(url : string) {
-  return url.startsWith("https://media.tenor.com/") && url.endsWith(".gif");
-
-}
+});
\ No newline at end of file

From 629a9efb4fa071e09cc7f101f4ac07388fb65af8 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:30:03 +0200
Subject: [PATCH 35/38] removed unused code

---
 src/components/SettingsPopUp.vue | 43 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/SettingsPopUp.vue b/src/components/SettingsPopUp.vue
index 6952000..d60a4a1 100644
--- a/src/components/SettingsPopUp.vue
+++ b/src/components/SettingsPopUp.vue
@@ -1,3 +1,6 @@
+<!--
+  Diese Komponente erlaubt dem Nutzer die Änderung seiner Accountdaten
+-->
 <template>
   <q-dialog v-bind:model-value="showDeleteAccountPopup">
     <q-card style="padding: 20px;">
@@ -13,8 +16,6 @@
   </q-dialog>
   <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" backdrop-filter="brightness(60%)" full-width>
       <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
-        <!--<h1>{{ internalShowDialog }}</h1>-->
-
         <!-- HEADLINE -->
         <q-card-section class="row items-center q-pb-none">
           <h4 style="margin: 0;">Einstellungen</h4>
@@ -27,20 +28,24 @@
             <h5>Nutzerdaten</h5>
             <div style="display: flex; flex-wrap: nowrap">
               <div>
-                  <table>
-                      <tr>
-                          <td>Vorname:</td>
-                          <td>{{ userStore.user!.firstName }}</td>
-                      </tr>
-                      <tr>
-                          <td>Nachname:</td>
-                          <td>{{ userStore.user!.lastName }}</td>
-                      </tr>
-                      <tr>
-                          <td>Nutzername:</td>
-                          <td>{{ userStore.user!.username }}</td>
-                      </tr>
-                  </table>
+                <table>
+                  <tr>
+                    <td>Vorname:</td>
+                    <td>{{ userStore.user!.firstName }}</td>
+                  </tr>
+                  <tr>
+                    <td>Nachname:</td>
+                    <td>{{ userStore.user!.lastName }}</td>
+                  </tr>
+                  <tr>
+                    <td>Nutzername:</td>
+                    <td>{{ userStore.user!.username }}</td>
+                  </tr>
+                  <tr>
+                    <td>Sichtbarkeit:</td>
+                    <td>{{ userStore.user!.isPrivate ? 'Privat' : 'Öffentlich' }}</td>
+                  </tr>
+                </table>
               </div>
             </div>
           </q-card-section>
@@ -93,8 +98,8 @@
   import { useQuasar } from 'quasar';
   import {profilePicture, responseModel,} from 'src/models';
   import { useUserStore } from 'src/stores/user-store';
-import { sendNotification } from 'src/utils';
-  import { computed, onMounted, toRefs } from 'vue';
+  import { sendNotification } from 'src/utils';
+  import { computed } from 'vue';
   import { ref } from 'vue';
 
   const userStore = useUserStore();
@@ -122,8 +127,6 @@ import { sendNotification } from 'src/utils';
       sendNotification(response.message, true);
     });
     closeDialog();
-    
-    // Hier muss ein request ans Backend geschickt werden, welcher den gesamten User enthält
   }
 
   function toggleSetPrivate() {

From f229e3bfbba388ef56e455c237467bceb4fae94d Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 20 Jun 2024 07:30:38 +0200
Subject: [PATCH 36/38] Some more minor changes

---
 src/components/CreateChatComponent.vue  |  5 ++--
 src/components/ProfileCardComponent.vue |  5 ++++
 src/models.ts                           |  4 ++-
 src/pages/IndexPage.vue                 | 39 ++++++++++++++++++++-----
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
index 9e07686..5de3ca9 100644
--- a/src/components/CreateChatComponent.vue
+++ b/src/components/CreateChatComponent.vue
@@ -56,7 +56,7 @@
               @click="handleClickEvent(user)"
             />
           </div>
-          <profile-card-component :user="user" :selected="false"></profile-card-component>
+          <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
         </div>
       </div>
 
@@ -71,8 +71,7 @@
   import { useUserStore } from 'src/stores/user-store';
   import type { ptpUser, responseModel } from 'src/models';
   import {sendNotification} from 'src/utils';
-import { useQuasar } from 'quasar';
-import { useChatStore } from 'src/stores/chat-store';
+  import { useChatStore } from 'src/stores/chat-store';
 
   const showDialog = ref(true);
   const userStore = useUserStore();
diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue
index 00a75be..4a1ebb4 100644
--- a/src/components/ProfileCardComponent.vue
+++ b/src/components/ProfileCardComponent.vue
@@ -1,3 +1,8 @@
+<!--
+  Diese Komponente erlaubt das Anzeigen eines Nutzers
+  Sie wird unter anderem bei der Suche verwendet
+-->
+
 <script setup lang="ts">
 
   const props =  defineProps({
diff --git a/src/models.ts b/src/models.ts
index dea6c4a..33cd8fd 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -6,6 +6,7 @@ export interface ptpUser {
   status: string;
   profilepicture: string;
   isPrivate: boolean;
+  nametagColor?: string;
 }
 
 export interface responseModel {
@@ -21,7 +22,8 @@ export interface chat{
   displayName: string;
   profilepicture: string;
   profilepictureAsString: string;
-  isGroupChat: boolean;
+  groupChat: boolean;
+  adminIds: string[];
 }
 
 export interface message {
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 1642d64..360f8a3 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -4,9 +4,9 @@
 
     <SettingsPopUp :showDialog="settingsDialog" @showModal="() => settingsDialog = false"/>
 
-    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false"></CreateChatComponent>
+    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false" :leaveChat="resetSelectedChat"></CreateChatComponent>
 
-    <div style="background: gray; width: 25%;height:100%;">
+    <div style="background: gray; width: 25%;height:100%;border-right: 1px solid black;">
       <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>
@@ -49,7 +49,7 @@
           <div v-for="chat in chatStore.chats" :key="chat.id" style="margin-top: 10px;">
 
             <ChatCardComponent 
-              v-if="chat.members.length > 2" 
+              v-if="chat.groupChat" 
               :selected="chat.id == selectedChat.id" 
               :chat="chat"
               @click="selectChat(chat as chat)"
@@ -93,7 +93,7 @@
     <div style="width: 75%;height: 100%;background: #DFD0BF;">
       <div class="header" v-if="selectedUser.id != null || selectedChat.id != null" style="padding: 10px;">
         <HeaderInfoContainerComponent 
-          v-if="selectedChat.members.length == 2" 
+          v-if="!selectedChat.groupChat" 
           :displayName="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.firstName + ' ' + selectedChat.members.find((member) => member.id !== userStore.user!.id)?.lastName"
           :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture"
         ></HeaderInfoContainerComponent>
@@ -115,10 +115,15 @@
           <q-space />
           <q-btn icon="more_vert" round flat @click="chatSettingsDialog = true"></q-btn>
 
-          <ChatSettingsComponent :chat="selectedChat" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
+          <ChatSettingsComponent :chat="selectedChat" :chatID="selectedChat.id" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
         </div>
       </div>
 
+      <div v-else style="text-align: center; margin-top: 10rem;">
+        <img src="https://media1.tenor.com/m/SpXWQo0Mq7EAAAAd/welcome-michael-scott.gif" style="width:20rem;border-radius: 1rem; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);">
+        <div class="text-h6">Wähle einen Chat aus</div>
+      </div>
+
 
       <div v-if="selectedUser.id != null && selectedChat.members.length == 2" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
         <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
@@ -146,6 +151,7 @@
           <MessageComponent
             v-if="!message.gif && !message.link"
             :message="message.content"
+            :nametagColor="chatStore.chats.find((chat) => chat.id == selectedChat.id)!.members.find((member) => member.id === message.sender.id)?.nametagColor!"
             :timestamp="message.timestamp"
             :own-message="message.sender.id == userStore.user!.id"
             :sender="message.sender"
@@ -209,7 +215,9 @@
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
   import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
   import CreateChatComponent from 'src/components/CreateChatComponent.vue';
-import { useMessageStore } from 'src/stores/message-store';
+  import { useMessageStore } from 'src/stores/message-store';
+  import { useNotificationStore } from 'src/stores/notification-store';
+  import { sendNotification } from 'src/utils';
 
   defineOptions({
     name: 'IndexPage'
@@ -218,6 +226,7 @@ import { useMessageStore } from 'src/stores/message-store';
   const tenorStore = useTenorStore();
   const userStore = useUserStore();
   const chatStore = useChatStore();
+  const notificationStore = useNotificationStore();
 
   const searchQuery = ref("")
   const message = ref("");
@@ -233,7 +242,7 @@ import { useMessageStore } from 'src/stores/message-store';
   const createChatDialog = ref(false);
 
 
-  const activeMenu = ref("search");
+  const activeMenu = ref("chats");
 
   let loadedGifsAmount = 10;
 
@@ -309,6 +318,8 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function toggleGifMenu() {
+    if(!selectedChat.value.id) return;
+
     showGifMenu.value = !showGifMenu.value;
     if(showGifMenu.value) {
       // Somehow focus the input field
@@ -317,6 +328,11 @@ import { useMessageStore } from 'src/stores/message-store';
   }
 
   function sendMessage() {
+    if(message.value == "") {
+      sendNotification("Nachricht kann nicht leer sein", false);
+      return;
+    }
+
     if(selectedChat.value.id != -1) {
       messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value);
     } else {
@@ -353,6 +369,7 @@ import { useMessageStore } from 'src/stores/message-store';
   };
 
   setInterval(getMessages, 5000);
+  setInterval(chatStore.loadChatsByUser, 5000);
 
 
   setInterval(getGifs, 500);
@@ -366,6 +383,11 @@ import { useMessageStore } from 'src/stores/message-store';
   const selectedUser = ref({} as ptpUser);
   const selectedChat = ref({} as chat);
 
+  const resetSelectedChat = () => {
+    //console.log("HAHHSHHDSD");
+    selectedChat.value = {} as chat
+  }
+
   function selectUser(user : ptpUser) {
     selectedUser.value = user;
     //selectedChat.value = {} as chat;
@@ -377,7 +399,8 @@ import { useMessageStore } from 'src/stores/message-store';
       displayName: user.firstName + " " + user.lastName,
       profilepicture: user.profilepicture,
       profilepictureAsString: user.profilepicture,
-      isGroupChat: false
+      groupChat: false,
+      adminIds: []
     };
     selectedChat.value = exampleChat;
   }

From b38e610d61fa74ee3fcbe82208e46800f97a6589 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Tue, 25 Jun 2024 08:52:05 +0200
Subject: [PATCH 37/38] =?UTF-8?q?fixed=20some=20bugs=20so=20that=20the=20P?=
 =?UTF-8?q?r=C3=A4sentation=20kein=20komplettes=20Desaster=20wird?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              |  17 +-
 src/components/ChatCardComponent.vue     |  55 ++--
 src/components/ChatSettingsComponent.vue | 185 +++++++++++---
 src/components/CreateChatComponent.vue   |   9 +-
 src/components/MessageComponent.vue      |  22 +-
 src/components/ProfileCardComponent.vue  |   4 +-
 src/components/SettingsPopUp.vue         |  11 +-
 src/main.ts                              |  67 ++---
 src/models.ts                            |   1 -
 src/pages/IndexPage.vue                  | 310 +++++++++++------------
 src/stores/chat-store.ts                 |  33 ++-
 src/stores/user-store.ts                 |   5 +-
 src/utils.ts                             |   5 +
 13 files changed, 440 insertions(+), 284 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0e42f5..acd40df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,7 @@ import { useQuasar } from 'quasar';
 <template>
   <IndexPage v-if="userStore.userLoaded"></IndexPage>
 
-  <div style="display: flex; align-items: center;justify-content: center;padding-top: 45vh;flex-direction: column;" v-else>
+  <div style="display: flex; align-items: center;justify-content: center;padding-top: 45vh;flex-direction: column;width: 100vw; height: 100vh;background: white;" v-else>
     <div>
       <q-spinner
         color="primary"
@@ -24,7 +24,8 @@ import { useQuasar } from 'quasar';
       />
     </div>
     <div class="text-h6" v-if="userStore.reconnectTries < 2">ptpChat wird geladen...</div>
-    <div class="text-h6" v-else>Verbindung wird wiederhergestellt (Versuch {{ userStore.reconnectTries }})</div>
+    <div class="text-h6" v-else-if="userStore.reconnectTries < 20">Verbindung wird wiederhergestellt (Versuch {{ userStore.reconnectTries }})</div>
+    <div class="text-h6" v-else>Also langsam wirds peinlich</div>
   </div>
 
   <router-view />
@@ -62,4 +63,16 @@ import { useQuasar } from 'quasar';
   }
   /* CUSTOM SCROLLBAR DESIGN ENDE */
 
+  :root {
+    --defaultGridBorderRadius: 1rem;
+    --defaultElementBackground: rgb(197, 197, 197);
+  }
+
+  body {
+    background: rgb(50, 50, 50);
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden !important;
+  }
+
 </style>
diff --git a/src/components/ChatCardComponent.vue b/src/components/ChatCardComponent.vue
index 7eb24ec..f084963 100644
--- a/src/components/ChatCardComponent.vue
+++ b/src/components/ChatCardComponent.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 
   const props =  defineProps({
-    chat: Object,
+    chat: {
+      type: Object,
+      required: true
+    },
     selected: Boolean,
     lastMessage: String,
   })
@@ -9,42 +12,52 @@
 </script>
 
 <template>
-  <div class="profileCard" :class="selected ? 'selected' : ''">
-    <div class="profilePicture" :style="{'background-image' : 'url('+props.chat!.profilepictureAsString+')' }"></div>
-    <div style="margin-left:10px;">
-      <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
-        <span style="font-weight: bold;font-size: 1.2rem;">{{props.chat!.displayName}}</span>
-      </p>
-
-      <p style="margin: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:20rem;">{{ props.lastMessage }}</p>
+  <div class="profileCard" :class="{ selected: props.selected }">
+    <div class="profilePicture" :style="{ backgroundImage: 'url(' + props.chat.profilepicture + ')' }"></div>
+    <div class="profileInfo">
+      <p class="displayName">{{ props.chat.displayName }}</p>
+      <p class="lastMessage">{{ props.lastMessage }}</p>
     </div>
   </div>
 </template>
 
 <style scoped>
+  .profileCard {
+    display: flex;
+    border-radius: 10px;
+    padding: 10px;
+    transition: 0.3s;
+    cursor: pointer;
+  }
+
+  .profileCard:hover,
+  .selected {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
   .profilePicture {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-size: cover;
     background-position: center;
-
   }
 
-  .profileCard {
-    display: flex;
-    border-radius: 10px;
-    padding: 10px;
-    transition: .3s;
-    cursor: pointer;
+  .profileInfo {
+    margin-left: 10px;
   }
 
-  .profileCard:hover {
-    transition: .3s;
-    background: rgba(0,0,0,0.2);
+  .displayName {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin-bottom: 0;
   }
 
-  .selected {
-    background: rgba(0,0,0,0.2);
+  .lastMessage {
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 20rem;
   }
 </style>
diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index 0cb6150..b67a841 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -1,38 +1,35 @@
 <template>
-  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
-    <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
+  <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow-x: hidden;" full-width>
+    <q-card style="margin: 3rem 15rem;height: 80vh;padding: 20px;overflow: auto !important;">
       <q-card-section class="row items-center q-pb-none">
-        <div class="text-h4">{{ chat!.displayName }}</div>
+        <div class="text-h4">{{ props.chat!.displayName }}</div>
         <q-space />
         <q-btn icon="close" flat round dense v-close-popup />
       </q-card-section>
 
       <div class="grid-container" v-if="chat?.members">
-        <q-card-section>
-          <div class="text-h5">Mitglieder ({{ chat!.members.length }})</div>
-          <table>
-            <tr v-for="user in chat.members">
-              <td>
-                <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
-              </td>
-              <td v-if="user.id != userStore.user!.id && currentUserIsAdmin">
-                <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn>
-                <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
-              </td>
-            </tr>
-          </table>
+        <q-card-section style="grid-row: span 2;">
+          <div class="text-h5">Mitglieder ({{ props.chat!.members.length }})</div>
+          <div style="height:15rem;overflow-y: auto;">  
+            <table>
+              <tr v-for="user in props.chat!.members">
+                <td>
+                  <ProfileCardComponent :user="user" :selected="false" :showAdminTag="isUserAdmin(user.id)"></ProfileCardComponent>
+                </td>
+                <td v-if="user.id != userStore.user!.id && currentUserIsAdmin">
+                  <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn>
+                  <q-btn round flat icon="arrow_downward" title="Adminrechte entziehen" @click="removeAdmin(user.id)" v-if="isUserAdmin(user.id)"></q-btn>
+                  <q-btn round flat icon="arrow_upward" title="Nutzer zum Admin machen" @click="addAdmin(user.id)" v-if="!isUserAdmin(user.id)"></q-btn>
+                </td>
+              </tr>
+            </table>
+          </div>  
         </q-card-section>
 
         <!-- Namen des Chats ändern -->
         <q-card-section v-if="currentUserIsAdmin">
           <div class="text-h5">Namen ändern</div>
-          <q-input filled v-model="chat.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
-        </q-card-section>
-
-        <q-card-section>
-          <div class="text-h5">Aktionen</div>
-          <q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
-          <q-btn class="deleteButton" v-if="currentUserIsAdmin">Gruppenchat löschen</q-btn>
+          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert" style="width: 30rem"/>
         </q-card-section>
 
         <q-card-section v-if="currentUserIsAdmin">
@@ -41,7 +38,8 @@
           <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
             <div
               v-for="(image, index) in chatStore.profilePictures"
-              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepictureAsString ? 'dashed grey' : 'none'}"
+              :key="index"
+              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepicture ? 'dashed grey' : 'none'}"
               style="color: red;"
               round
               flat
@@ -58,6 +56,46 @@
             />
           </div>
         </q-card-section>
+
+        <q-card-section>
+          <div class="text-h5">Mitglieder hinzufügen</div>
+          <q-input 
+            filled 
+            v-model="searchQuery"
+            placeholder="Nach Nutzern suchen"
+            @update:model-value="updateSearchResults"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search"></q-icon>
+            </template>
+          </q-input>
+
+          <div style="height: 12rem; overflow-y: auto;">
+            <div v-for="(user, index) in searchResults" class="grid-container-search">
+              <div class="wrapper-div">
+                <q-btn 
+                  v-if="!props.chat!.members.find((u : ptpUser) => user.id == u.id)"
+                  round 
+                  flat 
+                  dense 
+                  icon="add" 
+                  title="Hinzufügen"
+                  style="width:3rem;height:3rem;" 
+                  class="button"
+                  @click="handleClickEvent(user)"
+                />
+              </div>
+              <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
+            </div>
+          </div>
+        </q-card-section>
+
+
+        <q-card-section>
+          <div class="text-h5">Aktionen</div>
+          <q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
+          <q-btn class="deleteButton" v-if="currentUserIsAdmin" @click="deleteChat">Gruppenchat löschen</q-btn>
+        </q-card-section>
       </div>
     </q-card>
   </q-dialog>
@@ -71,18 +109,25 @@
   import type { chat } from 'src/models';
   import { useChatStore } from 'src/stores/chat-store';
   import { useQuasar } from 'quasar';
-  import { sendNotification } from 'src/utils';
+  import { sendNotification, getFilteredUserList } from 'src/utils';
 
   const userStore = useUserStore();
   const chatStore = useChatStore();
 
   const showingAlert = ref(false);
 
+  const searchQuery = ref("");
+  const searchResults = ref([] as ptpUser[]);
+
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean,
     chatID: Number,
-    leaveChat: Function
+    chat: Object,
+    leaveChat: {
+      type: Function,
+      required: true
+    }
   });
 
   const internalShowDialog = computed({
@@ -95,37 +140,86 @@
   }
 
   const selectProfilePicture = (image: profilePicture) => {
-    chat.value!.profilepictureAsString = image.url;
+    chat.value!.profilepicture = image.url;
     //props.chat!.profilepictureAsString = image.url;
     showUnsavedChangesAlert();
   }
 
   const $q = useQuasar();
 
-  const chat = ref(chatStore.chats.find((chat) => chat.id == props.chatID));
+  const chat = ref(chatStore.chats.find((chat) => chat.id == props.chat!.id));
 
   const currentUserIsAdmin = computed(() => {
-    return chat.value!.adminIds.includes(userStore.user!.id);
+    return props.chat!.adminIds.includes(userStore.user!.id);
   });
 
+  const updateSearchResults = () => {
+    searchResults.value = getFilteredUserList(searchQuery.value, userStore.users, userStore.user!.id);
+  }
+
+  const handleClickEvent = (user : ptpUser) => {
+    chatStore.addUserToChat(user.id, props.chatID!).then((response : responseModel) => {
+      chatStore.loadChatsByUser().then(() => {
+        sendNotification(response.message, response.success);
+        props.chat!.members.unshift(user);
+      });
+    });
+  }
+
   const removeUser = (keycloakID : string) => {
     chatStore.removeUserFromChat(keycloakID, props.chatID!).then((response : responseModel) => {
       chatStore.loadChatsByUser().then(() => {
         if(response.success) {
           if(userStore.user!.id == keycloakID) {
             sendNotification("Du hast den Chat verlassen", true);
-            props.leaveChat!();
+            props.leaveChat();
             closeDialog();
           } else {
             sendNotification(response.message, response.success);
           }
 
-          chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
+          //props.chat!.members.shift();
+          const index = props.chat!.members.indexOf(props.chat!.members.find((user : ptpUser) => user.id == keycloakID));
+          if (index > -1) {
+            props.chat!.members.splice(index, 1);
+          }
+
+          //chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
         }
       });
     });
   }
 
+  const deleteChat = () => {
+    chatStore.deleteChat(props.chatID!).then((response : responseModel) => {
+      sendNotification(response.message, response.success);
+      props.leaveChat();
+      closeDialog();
+    });
+  }
+
+  const addAdmin = (keycloakID : string) => {
+    chatStore.addAdmin(props.chatID!, keycloakID).then((response : responseModel) => {
+      chatStore.loadChatsByUser().then(() => {
+        sendNotification(response.message, response.success);
+        chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
+      });
+    });
+  }
+
+  const removeAdmin = (keycloakID : string) => {
+    chatStore.removeAdmin(props.chatID!, keycloakID).then((response : responseModel) => {
+      chatStore.loadChatsByUser().then(() => {
+        sendNotification(response.message, response.success);
+        chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
+      });
+    });
+  }
+
+  const isUserAdmin = (keycloakID : string) => {
+    return chat.value!.adminIds.includes(keycloakID);
+  }
+
   const saveChatChanges = () => {
     chatStore.updateChat(chat.value as chat).then((response : responseModel) => {
       showingAlert.value = false;
@@ -142,13 +236,19 @@
         color: "green",
         icon: 'announcement',
         actions: [
-          { label: 'Änderungen speichern', color: 'white', handler: () => { saveChatChanges() } },
+          { label: 'Speichern', color: 'white', handler: () => { saveChatChanges() } },
+          { label: 'Verwerfen', color: 'white', handler: () => { discardChanges() } },
         ]
       });
 
       showingAlert.value = true;
     }
   }
+
+  const discardChanges = () => {
+    showingAlert.value = false;
+    closeDialog();
+  }
 </script>
 
 <style scoped>
@@ -184,4 +284,25 @@
     transition: .3s;
     filter: brightness(0.6);
   }
+
+  /* MIGHT BE MOVED LATER */
+  .grid-container-search {
+    display: grid;
+    grid-template-columns: 70px auto;
+  }
+
+  .grid-container-search > div:nth-child(even) {
+    min-width: 20rem;
+  }
+
+  .wrapper-div {
+    height:100%;
+    position: relative;
+  }
+
+  .button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/CreateChatComponent.vue b/src/components/CreateChatComponent.vue
index 5de3ca9..d53909d 100644
--- a/src/components/CreateChatComponent.vue
+++ b/src/components/CreateChatComponent.vue
@@ -18,6 +18,7 @@
         </div>
       </div>
 
+
       <q-input 
         filled
         v-model="chatName"
@@ -70,10 +71,9 @@
   import ProfileCardComponent from './ProfileCardComponent.vue';
   import { useUserStore } from 'src/stores/user-store';
   import type { ptpUser, responseModel } from 'src/models';
-  import {sendNotification} from 'src/utils';
+  import {getFilteredUserList, sendNotification} from 'src/utils';
   import { useChatStore } from 'src/stores/chat-store';
 
-  const showDialog = ref(true);
   const userStore = useUserStore();
   const searchQuery = ref("");
   const chatName = ref("");
@@ -83,8 +83,7 @@
 
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
-    showDialog: Boolean,
-    chat: Object
+    showDialog: Boolean
   });
 
   const internalShowDialog = computed({
@@ -97,7 +96,7 @@
   }
 
   const updateSearchResults = () => {
-    searchResults.value = userStore.users.filter((u) => u.username.toLocaleLowerCase().includes(searchQuery.value.toLocaleLowerCase()) && u.id != userStore.user?.id);
+    searchResults.value = getFilteredUserList(searchQuery.value, userStore.users, userStore.user!.id);
   }
 
   const isUserSelected = (user : ptpUser) => {
diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 4b41d48..7f1efbe 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -3,14 +3,12 @@
 
   const props =  defineProps({
     ownMessage: Boolean,
-    timestamp: String,
-    message: String,
-    sender: Object,
-    gif: Boolean,
-    link: Boolean,
-    url: String,
     showSender: Boolean,
     nametagColor: String,
+    message: {
+      type: Object,
+      required: true
+    }
   })
 
   const options: Intl.DateTimeFormatOptions = {
@@ -21,7 +19,7 @@
     minute: '2-digit',
   };
 
-  const date = new Date(Number(props.timestamp));
+  const date = new Date(Number(props.message.timestamp));
   let timestampFormatted = date.toLocaleString('de-DE', options);
   const daysOffset = getDaysOffset(date, new Date());
 
@@ -34,12 +32,12 @@
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
     <div v-if="props.showSender && !props.ownMessage" style="display: flex; justify-content: space-between;">
-      <div class="text-body" style="font-weight: bold;" :style="{'color' : props.nametagColor }">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
-      <div class="text-body" style="color: #505050"><small>@{{ props.sender!.username }}</small></div>
+      <div class="text-body" style="font-weight: bold;" :style="{'color' : props.nametagColor }">{{ props.message!.sender.firstName }} {{ props.message!.sender.lastName }}</div>
+      <div class="text-body" style="color: #505050"><small>@{{ props.message!.sender.username }}</small></div>
     </div>
-    <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>
+    <p v-if="!props.message.gif && !props.message.link" style="margin-bottom: 0;">{{props.message.content}}</p>
+    <img v-if="props.message.gif" :src="props.message.content" alt="GIF" style="width: 100%;border-radius: 10px;" />
+    <a v-if="props.message.link" :href="props.message.content" target="_blank">{{props.message.content}}</a>
 
     <div style="text-align: right;">
       <small style="margin-top: 0;color: #505050;">{{timestampFormatted}}</small>
diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue
index 4a1ebb4..c031afc 100644
--- a/src/components/ProfileCardComponent.vue
+++ b/src/components/ProfileCardComponent.vue
@@ -9,7 +9,8 @@
     user: Object,
     selected: Boolean,
     slim: Boolean,
-    lastMessage: String
+    lastMessage: String,
+    showAdminTag: Boolean
   })
 
 </script>
@@ -21,6 +22,7 @@
       <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
         <span style="font-weight: bold;font-size: 1.2rem;">{{props.user!.firstName}} {{ props.user!.lastName }}</span>
         <span v-if="!props.slim">@{{props.user!.username}}</span>
+        <span v-if="props.showAdminTag" style="color: darkred;"> [Administrator]</span>
       </p>
 
       <p v-if="!props.slim" style="margin: 0;">{{ props.user!.status }}</p>
diff --git a/src/components/SettingsPopUp.vue b/src/components/SettingsPopUp.vue
index d60a4a1..a5bc79f 100644
--- a/src/components/SettingsPopUp.vue
+++ b/src/components/SettingsPopUp.vue
@@ -6,7 +6,7 @@
     <q-card style="padding: 20px;">
       <q-card-section>
         <div class="text-h4">Account löschen</div>
-        <div class="text-body">Bist du sicher, dass du deinen Account löschen möchtest?</div>
+        <div class="text-body">Bist du sicher, dass du deinen Account löschen möchtest? (Dieses Feature ist momentan noch nicht aktiv)</div>
       </q-card-section>
       <q-card-actions align="right">
         <q-btn label="Abbrechen" class="greyButton" style="width: 48%;" @click="showDeleteAccountPopup = false" />
@@ -147,7 +147,6 @@
   }
 
   const closeDialog = () => {
-    //internalShowDialog.value = false;
     emit('showModal', true);
   };
 
@@ -160,13 +159,19 @@
         color: "green",
         icon: 'announcement',
         actions: [
-          { label: 'Änderungen speichern', color: 'white', handler: () => { saveProfileChanges() } },
+          { label: 'Speichern', color: 'white', handler: () => { saveProfileChanges() } },
+          { label: 'Verwerfen', color: 'white', handler: () => { discardChanges() } },
         ]
       });
 
       showingAlert.value = true;
     }
   }
+
+  const discardChanges = () => {
+    showingAlert.value = false;
+    closeDialog();
+  }
 </script>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index 324a87f..6ec30ad 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,7 @@ import { useNotificationStore } from './stores/notification-store';
 
 const app = createApp(App);
 const pinia = createPinia();
+
 app.use(pinia);
 
 
@@ -17,51 +18,35 @@ app.use(pinia);
 const userStore = useUserStore();
 const chatStore = useChatStore();
 let keycloak:Keycloak;
-userStore.initKeycloak()
-  .then(r=>
-  {
-    keycloak=r
-    let tries = 1;
+userStore.initKeycloak().then(r=> {
+  keycloak=r;
 
-// Anfrage ans Backend
+  if (keycloak.subject) {
+    userStore.id = keycloak.subject;
+    userStore.getPtpUserById(keycloak.subject).then(() =>
+      userStore.loadPtpUsersById(keycloak.subject||"").then(user  => {
+        console.log(JSON.stringify(user));
+      })
+    );
 
-    if (keycloak.subject) {
+    const interval = setInterval(() => {
+      if(userStore.userLoaded) {
+        chatStore.loadProfilePictures();
+        userStore.loadProfilePictures();
+        clearInterval(interval);
+      }
 
-      userStore.id = keycloak.subject;
-      userStore.getPtpUserById(keycloak.subject).then(() =>
-        userStore.loadPtpUsersById(keycloak.subject||"").then(user  => {
-          console.log(JSON.stringify(user));
-        }));
+      userStore.getPtpUserById(keycloak.subject!);
+    }, 5000);
 
-
-
-
-      const interval = setInterval(() => {
-        if(userStore.userLoaded) clearInterval(interval);
-
-        userStore.getPtpUserById(keycloak.subject!).then(user  => {
-          console.log("New attempt: " + JSON.stringify(user));
-          console.warn(userStore.userLoaded);
-        }).catch(() => {
-          console.error("Ein Netzwerkfehler ist aufgetreten " + tries);
-          userStore.reconnectTries = tries;
-
-          tries++;
-        });
-      }, 5000);
-
-      chatStore.loadProfilePictures();
-      userStore.loadProfilePictures();
-
-      Notification.requestPermission().then((result) => {
-        useNotificationStore().saveDecision(result === "granted");
-      });
-      
-
-    } else {
-      console.error("hier ist was schlimmes passiert menno");
-    }
-  }).catch(e=>console.error(e));
+    Notification.requestPermission().then((result) => {
+      useNotificationStore().saveDecision(result === "granted");
+    });
+    
+  } else {
+    console.error("hier ist was schlimmes passiert menno");
+  }
+}).catch(e=>console.error(e));
 
 
   window.onfocus = function() {
diff --git a/src/models.ts b/src/models.ts
index 33cd8fd..6765d6a 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -21,7 +21,6 @@ export interface chat{
   messages: message[];
   displayName: string;
   profilepicture: string;
-  profilepictureAsString: string;
   groupChat: boolean;
   adminIds: string[];
 }
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 360f8a3..fe71a26 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,23 +1,22 @@
 <template>
-  <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;position: fixed;">
+  <div class="container">
     <!-- Hier gibt es die ganzen PopUps und so -->
 
     <SettingsPopUp :showDialog="settingsDialog" @showModal="() => settingsDialog = false"/>
 
-    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false" :leaveChat="resetSelectedChat"></CreateChatComponent>
+    <CreateChatComponent :showDialog="createChatDialog" @showModal="() => createChatDialog = false"></CreateChatComponent>
 
-    <div style="background: gray; width: 25%;height:100%;border-right: 1px solid black;">
+    <div class="menu">
       <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'}">
+        <div title="Nach Nutzern suchen" @click="selectTab('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'}">
+        <div title="Meine Chats anzeigen" @click="selectTab('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>
@@ -27,14 +26,13 @@
 
         <div v-if="userStore.usersLoaded && userStore.userLoaded && searchQuery.length > 0 && searchQuery.replace(/\s/g, '').length" style="margin-top: 20px;">
           <ProfileCardComponent
-            v-for="user in userStore.users.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id && searchQuery.replace(/\s/g, '').length)" :displayName="user.firstName +  ' ' + user.lastName" :username="user.username"
-            :profilePictureUrl="user.profilepicture"
-            :status="user.status"
+            v-for="user in getFilteredUserList(searchQuery, userStore.users, userStore.user!.id)"
             :user="user"
             :selected="selectedUser.id == user.id"
             @click="selectUser(user as ptpUser)"
           ></ProfileCardComponent>
-          <div v-if="userStore.users.filter(u => u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*').length == 0 || !searchQuery.replace(/\s/g, '').length" style="text-align: center;">
+
+          <div v-if="getFilteredUserList(searchQuery, userStore.users, userStore.user!.id).length == 0" style="text-align: center;">
             <img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found">
           </div>
         </div>
@@ -57,21 +55,13 @@
             ></ChatCardComponent>
 
             <ProfileCardComponent
-              v-else-if="chat.members.length == 2"
+              v-else
               :user="userStore.users.find((user) => user.id === chat.members.find((member) => member.id !== userStore.user!.id)?.id)"
               :selected="chat.id == selectedChat.id"
               @click="selectChat(chat as chat)"
               slim
               :lastMessage="getChatPreviewMessage(chat.id)"
-            ></ProfileCardComponent> 
-
-            <ChatCardComponent 
-              v-else 
-              :selected="chat.id == selectedChat.id" 
-              :chat="chat"
-              @click="selectChat(chat as chat)"
-              :lastMessage="getChatPreviewMessage(chat.id)"
-            ></ChatCardComponent>
+            ></ProfileCardComponent>
           </div>
         </div>
       </div>
@@ -81,16 +71,13 @@
         flat 
         v-if="userStore.userLoaded"
         :style="{'background-image' : 'url('+userStore.user!.profilepicture+')' }"
-        style="background-size: cover;background-position: center;position: fixed; left:1rem; bottom: 1rem;"
+        style="background-size: cover;background-position: center;position: fixed; left:36px; bottom: 30px;"
         title="Profil und Einstellungen" 
         @click="settingsDialog = true"
-      >
-      </q-btn>
+      ></q-btn>
     </div>
 
     <!-- RECHTE SPALTE -->
-
-    <div style="width: 75%;height: 100%;background: #DFD0BF;">
       <div class="header" v-if="selectedUser.id != null || selectedChat.id != null" style="padding: 10px;">
         <HeaderInfoContainerComponent 
           v-if="!selectedChat.groupChat" 
@@ -101,7 +88,7 @@
         <div v-else style="display: flex;">
           <HeaderInfoContainerComponent
             :displayName="selectedChat.displayName"
-            :image="selectedChat.profilepictureAsString"
+            :image="selectedChat.profilepicture"
           ></HeaderInfoContainerComponent>
 
           <div>
@@ -115,7 +102,7 @@
           <q-space />
           <q-btn icon="more_vert" round flat @click="chatSettingsDialog = true"></q-btn>
 
-          <ChatSettingsComponent :chat="selectedChat" :chatID="selectedChat.id" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false"></ChatSettingsComponent>
+          <ChatSettingsComponent :chat="selectedChat" :chatID="selectedChat.id" :showDialog="chatSettingsDialog" @showModal="() => chatSettingsDialog = false" :leaveChat="resetSelectedChat"></ChatSettingsComponent>
         </div>
       </div>
 
@@ -124,40 +111,19 @@
         <div class="text-h6">Wähle einen Chat aus</div>
       </div>
 
-
-      <div v-if="selectedUser.id != null && selectedChat.members.length == 2" id="messageContainer" style="padding: 25px;overflow-y: auto;height: 100%;display: flex;flex-direction: column-reverse;">
-        <div v-if="!hasChatWith(selectedUser.id)" style="width: 100%; text-align: center;font-size: 1.2rem;">
-          <p>Das ist der Beginn deines Chats mit <strong>{{selectedUser.firstName}} {{selectedUser.lastName}}</strong></p>
-        </div>
-
-        <div v-else>
-          <p>Du hast schonmal mit dem geschrieben wie schön</p>
-        </div>
-      </div>
-
-      <div v-if="selectedChat.id != null" style="padding: 75px 25px 0 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
-        <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :key="index">
-
-          <MessageComponent
-            v-if="message.gif || message.link"
-            :url="message.content"
-            :timestamp="message.timestamp"
-            :own-message="message.sender.id == userStore.user!.id"
-            :link="message.link"
-            :gif="message.gif"
-            :showSender="selectedChat.members.length > 2 && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
-          ></MessageComponent>
-
-          <MessageComponent
-            v-if="!message.gif && !message.link"
-            :message="message.content"
-            :nametagColor="chatStore.chats.find((chat) => chat.id == selectedChat.id)!.members.find((member) => member.id === message.sender.id)?.nametagColor!"
-            :timestamp="message.timestamp"
-            :own-message="message.sender.id == userStore.user!.id"
-            :sender="message.sender"
-            :showSender="selectedChat.members.length > 2 && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
-          ></MessageComponent>
+      <div v-if="selectedChat.id != null" class="main" style="overflow-y: auto;display: flex;flex-direction: column-reverse;">
+        <div v-if="selectedChat.id == -1" style="text-align: center;">
+          <div class="text-h5" style="font-weight: normal;">Das ist der Beginn deines Chats mit <b>{{ selectedChat.displayName }}</b></div>
         </div>
+        
+        <MessageComponent
+          v-for="(message, index) in (messageStore.messages[selectedChat.id])" 
+          :key="index"
+          :message="message"
+          :nametagColor="!chatStore.userColors[message.sender.username] ? 'black' : chatStore.userColors[message.sender.username]"
+          :own-message="message.sender.id == userStore.user!.id"
+          :showSender="selectedChat.groupChat && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
+        ></MessageComponent>
       </div>
 
       <div class="footer">
@@ -196,13 +162,11 @@
         </div>
       </div>
       <!-- GIF SUCHE ENDE -->
-
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { ref } from 'vue';
   import MessageComponent from 'components/MessageComponent.vue';
   import { useTenorStore } from 'stores/tenor-store';
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
@@ -216,8 +180,8 @@
   import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
   import CreateChatComponent from 'src/components/CreateChatComponent.vue';
   import { useMessageStore } from 'src/stores/message-store';
-  import { useNotificationStore } from 'src/stores/notification-store';
-  import { sendNotification } from 'src/utils';
+  import { sendNotification, getFilteredUserList } from 'src/utils';
+  import { Notify } from 'quasar';
 
   defineOptions({
     name: 'IndexPage'
@@ -226,14 +190,10 @@
   const tenorStore = useTenorStore();
   const userStore = useUserStore();
   const chatStore = useChatStore();
-  const notificationStore = useNotificationStore();
 
   const searchQuery = ref("")
   const message = ref("");
   const gifSearch = ref("");
-  const chatName = ref('');
-  const userSearch = ref('');
-  const usersForChat = ref([] as string[]);
 
   const messageStore = useMessageStore();
 
@@ -241,13 +201,23 @@
   const chatSettingsDialog = ref(false);
   const createChatDialog = ref(false);
 
+  const showGifMenu = ref(false);
 
-  const activeMenu = ref("chats");
+  // Speichert, ob der Suchbegriff im GIF-Menü sich geändert hat
+  // Wenn nicht, wird keine neue Anfrage an Tenor geschickt
+  const gifSearchQueryChanged = ref(true);
+
+  const activeMenu = ref("search");
+
+  const selectedUser = ref({} as ptpUser);
+  const selectedChat = ref({} as chat);
 
   let loadedGifsAmount = 10;
 
-  let messages : message[] = [
-  ];
+  const selectTab = (tab : string) => {
+    activeMenu.value = tab;
+    getMessages();
+  }
 
   const getChatPreviewMessage = (chatId : number) => {
     const messageArray : message[] = messageStore.messages[chatId];
@@ -259,7 +229,7 @@
       let messageContent = newestMessage.content;
       let userDescriptor = newestMessage.sender.firstName;
 
-      if(isTenorGifUrl(newestMessage.content)) {
+      if(newestMessage.gif) {
         messageContent = "GIF";
       }
 
@@ -274,46 +244,16 @@
     }
   }
 
-  function isUrl(url : string) {
-    try {
-      new URL(url);
-      return true;
-    } catch (err) {
-      return false;
-    }
-  }
-
-  function isTenorGifUrl(url : string) {
-    return url.startsWith("https://media.tenor.com/") && url.endsWith(".gif");
-
-  }
-
-  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;
+    gifSearchQueryChanged.value = true;
   }
 
-
-
-
   function getGifs() {
     let query = gifSearch.value != "" ? gifSearch.value : "the office";
 
-    if(changed.value) {
+    if(gifSearchQueryChanged.value) {
       tenorStore.getGifsBySearchTerm(query, loadedGifsAmount);
-      changed.value = false;
+      gifSearchQueryChanged.value = false;
     }
   }
 
@@ -354,7 +294,7 @@
   function loadMoreGifs() {
     loadedGifsAmount += 10;
     console.log(loadedGifsAmount);
-    changed.value = true;
+    gifSearchQueryChanged.value = true;
   }
 
   function getMessages() {
@@ -368,10 +308,30 @@
     await chatStore.loadChatsByUser();
   };
 
+  const updateChatList = () => {
+    chatStore.loadChatsByUser().then(() => {
+      // Hier wird geprüft, ob man immer noch Mitglied des momentan ausgewählten Chats ist
+      if(chatStore.chats.find((chat) => chat.id == selectedChat.value.id) == null && selectedChat.value.id && selectedChat.value.groupChat) {
+        Notify.create({
+          message: "Der Chat '"+selectedChat.value.displayName+"' existiert nicht mehr, oder du bist kein Teil mehr davon",
+          position: 'top',
+          color: "red",
+          icon: "warning",
+          actions: [
+            { icon: 'close', color: 'white', round: true, handler: () => { /* ... */ } }
+          ]
+        });
+
+        chatSettingsDialog.value = false;
+        
+
+        selectedChat.value = {} as chat;
+      }
+    });
+  }
+
   setInterval(getMessages, 5000);
-  setInterval(chatStore.loadChatsByUser, 5000);
-
-
+  setInterval(updateChatList, 5000);
   setInterval(getGifs, 500);
 
   userStore.getAllPtpUsers();
@@ -380,29 +340,40 @@
     await chatStore.loadChatsByUser();
   };
 
-  const selectedUser = ref({} as ptpUser);
-  const selectedChat = ref({} as chat);
+  
 
   const resetSelectedChat = () => {
-    //console.log("HAHHSHHDSD");
     selectedChat.value = {} as chat
   }
 
   function selectUser(user : ptpUser) {
-    selectedUser.value = user;
-    //selectedChat.value = {} as chat;
-    // CHECKEN, OB ES SCHON EINEN CHAT GIBT
-    const exampleChat: chat = {
-      id: -1,
-      members: [user, userStore.user!],
-      messages: [],
-      displayName: user.firstName + " " + user.lastName,
-      profilepicture: user.profilepicture,
-      profilepictureAsString: user.profilepicture,
-      groupChat: false,
-      adminIds: []
-    };
-    selectedChat.value = exampleChat;
+    // Hier wird zuerst geprüft, ob es bereits einen Chat mit dem Nutzer gibt
+    // Wenn ja, wird dieser Chat ausgewählt
+    // Wenn nein, wird ein Dummy-Objekt erstellt
+
+    let chatExists = false;
+
+    chatStore.chats.forEach((chat) => {
+      if(!chat.groupChat && chat.members.find((member) => member.id == user.id)) {
+        selectedChat.value = chat;
+        getMessages();
+        chatExists = true;
+      }
+    });
+
+    if(!chatExists) {
+      selectedUser.value = user;
+      const exampleChat: chat = {
+        id: -1,
+        members: [user, userStore.user!],
+        messages: [],
+        displayName: user.firstName + " " + user.lastName,
+        profilepicture: user.profilepicture,
+        groupChat: false,
+        adminIds: []
+      };
+      selectedChat.value = exampleChat;
+    }
   }
 
   function selectChat(chat : chat) {
@@ -416,25 +387,11 @@
     messageStore.loadMessagesByChatID(chat.id);
   }
 
-  function hasChatWith(id : string) : boolean {
-    // Hier wird geprüft, ob es ein Chat mit einem bestimmten anderen Nutzer existiert
-    const chatExists = chatStore.chats.find((chat) => chat.members.length === 2 && chat.members.find((member) => member.id === id));
-
-    return Boolean(chatExists);
-  }
-
 
   // Init methods
   
   loadChats();
 
-
-  const user = ref();
-
-  onMounted(() => {
-    user.value = userStore.user;
-  })
-
 </script>
 
 <style scoped>
@@ -457,24 +414,6 @@
     filter: brightness(0.5);
   }
 
-  .footer {
-    width: 75%;
-    height:auto;
-    background: gray;
-    position: absolute;
-    bottom:0;
-    padding: 10px;
-  }
-
-  .header {
-    width: 75%;
-    height: auto;
-    background: gray;
-    position: fixed;
-    right: 0;
-    top: 0;
-  }
-
   .navigation {
     font-size: 2rem;
   }
@@ -503,4 +442,55 @@
     font-weight: bold;
     margin-bottom: 0;
   }
-</style>
+
+  /* CSS GRID THINGS */
+
+  .container {
+    display: grid;
+    color: #111111;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+        "menu header"
+        "menu main"
+        "menu footer";
+    height: 97vh;
+    background: #FFF5E1;
+    margin: 1.5vh 20px;
+    border-radius: var(--defaultGridBorderRadius);
+  }
+
+  .menu {
+    grid-area: menu;
+    background-color: var(--defaultElementBackground);
+    color: black;
+    border-radius: 1rem 0 0 1rem;
+    width: 30rem;
+  }
+
+  .header {
+    grid-area: header;
+    background-color: var(--defaultElementBackground);
+    color: black;
+    padding: 10px;
+    border-top-right-radius: 1rem;
+    margin-bottom: 0;
+  }
+
+  .main {
+    grid-area: main;
+    background-color: transparent;
+    padding: 20px;
+    overflow-y: auto;
+    border-radius: var(--defaultGridBorderRadius);
+    margin-bottom: 0;
+  }
+
+  .footer {
+    grid-area: footer;
+    background-color: var(--defaultElementBackground);
+    color: black;
+    padding: 10px;
+    border-bottom-right-radius: 1rem;
+  }
+</style>
\ No newline at end of file
diff --git a/src/stores/chat-store.ts b/src/stores/chat-store.ts
index beb1190..d6db580 100644
--- a/src/stores/chat-store.ts
+++ b/src/stores/chat-store.ts
@@ -5,13 +5,18 @@ import { useUserStore } from 'stores/user-store';
 import { useQuasar } from 'quasar';
 import { getRandomHexColor } from 'src/utils';
 
+interface StringKeyValue {
+  [key: string]: string;
+}
+
 export const useChatStore = defineStore('chatStore',{
   state:() => ({
     chats: [] as chat[],
     chatsLoaded: false,
     chatExistsReponse: false,
     profilePictures : [] as profilePicture[],
-    profilePicturesLoaded: false
+    profilePicturesLoaded: false,
+    userColors: {} as StringKeyValue
   }),
   actions: {
     async getChatsByUser(): Promise<chat[]> {
@@ -25,9 +30,11 @@ export const useChatStore = defineStore('chatStore',{
 
       this.chats.forEach((c) => {
         c.members.forEach((member) => {
-          member.nametagColor = getRandomHexColor();
+          if(!this.userColors[member.username]){
+            this.userColors[member.username] = getRandomHexColor();
+          }
         })
-      })
+      });
 
       this.chatsLoaded = true;
       return this.chats;
@@ -57,17 +64,35 @@ export const useChatStore = defineStore('chatStore',{
     
       const updatedChat : chat = {...chat};
 
+      console.log("UpdatedChatUrl: " + updatedChat.profilepicture);
+
       this.profilePictures.forEach((element: profilePicture) => {
         if(element.url === updatedChat.profilepicture){
           updatedChat.profilepicture = element.shortName;
         }
       });
 
-      return (await api.post("/chats/update", chat)).data;
+      return (await api.post("/chats/update", updatedChat)).data;
+    },
+
+    async addAdmin(chatID: number, keycloakID: string){
+      return (await api.post("/chats/addAdmin/"+chatID+"/"+keycloakID)).data;
+    },
+
+    async removeAdmin(chatID: number, keycloakID: string){
+      return (await api.post("/chats/removeAdmin/"+chatID+"/"+keycloakID)).data;
     },
 
     async removeUserFromChat(keycloakID : string, chatID : number) {
       return (await api.delete("/chats/removeUser/"+chatID+"/"+keycloakID)).data;
+    },
+
+    async addUserToChat(keycloakID : string, chatID : number) {
+      return (await api.post("/chats/addUser/"+chatID+"/"+keycloakID)).data;
+    },
+
+    async deleteChat(chatID : number) {
+      return (await api.delete("/chats/"+chatID)).data;
     }
   }
 });
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 33a9650..cf50b15 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -44,7 +44,7 @@ export const useUserStore = defineStore('userStore', {
         this.user = response.response;
         this.userLoaded = true;
       }).catch(error => {
-        console.error("Ein Netzwerkfehler ist aufgetreten");
+        this.reconnectTries++;
       });
     },
     async loadPtpUsersById(id : string) : Promise<responseModel>  {
@@ -87,7 +87,6 @@ export const useUserStore = defineStore('userStore', {
     },
 
     async initKeycloak() : Promise<Keycloak>{
-
       try {
         await keycloak.init(initOptions).then( (auth: boolean): void => {
           console.log("Authenticated: " + auth);
@@ -98,11 +97,13 @@ export const useUserStore = defineStore('userStore', {
       this.keycloak = keycloak;
       return keycloak;
     },
+
     async login() {
       if(!this.keycloak){
         await this.initKeycloak();
       }else await this.keycloak?.login( {prompt: 'login'} as KeycloakLoginOptions);
     },
+
     async logout() {
       window.location.href= 'http://localhost:' + keycloakPort + '/realms/' + realm + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + frontendPort + '&client_id=' + clientId;
     },
diff --git a/src/utils.ts b/src/utils.ts
index 7457e25..984dc58 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,5 @@
 import { Notify } from "quasar";
+import { ptpUser } from "./models";
 
 export const sendNotification = (message : string, successful : Boolean) => {
   Notify.create({
@@ -53,4 +54,8 @@ export const getRandomHexColor = () => {
   const saturation = 100; // Full saturation
   const lightness = 30; // Adjust this value to set the desired lightness (0-100)
   return hslToHex(hue, saturation, lightness);
+}
+
+export const getFilteredUserList = (searchQuery : string, userList : ptpUser[], ownID : string) => {
+  return userList.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*') && u.id != ownID && searchQuery.replace(/\s/g, '').length);
 }
\ No newline at end of file

From 169662142ab53f8d54136db78ae35615ae755365 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 27 Jun 2024 19:16:00 +0200
Subject: [PATCH 38/38] Fixed two minor bugs and edited the README.md

---
 README.md                                | 71 +++++++++++++++---------
 src/components/ChatSettingsComponent.vue |  2 +-
 src/pages/IndexPage.vue                  |  6 +-
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 2e72611..b8cda73 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,60 @@
-# Praxistransferprojekt II (praxistransfer-frontend)
+# Praxistransferprojekt II (ptpChat) - Frontend
 
-Praxistransferprojekt | Zweites Semester
+Dieses Repository beinhaltet das Frontend für das im zweiten Semester realisierte Projekt "ptpChat"
 
-## Install the dependencies
+> **_Notiz:_** Die folgende Anleitung erlaubt ein Setup des Frontends komplett ohne IDE. Durch die Verwendung einer solchen entfallen manche Schritte gegebenenfalls.
+
+## Voraussetzungen
+Vor der Durchführung der anderen Schritte sollte sichergestellt werden, dass die folgenden Softwarekomponenten installiert sind. Grundsätzlich kann, je nach persönlicher Präferenz, zwischen `npm` und `yarn` ausgewählt werden:
+
+- [Node.js](https://nodejs.org/)
+- [Yarn](https://yarnpkg.com/) oder [npm](https://www.npmjs.com/)
+
+(In der Entwicklung wurde ausschließlich npm verwendet, was aus diesem Grund hier empfohlen wird)
+
+Außerdem wird `git` benötigt:
+
+- [git Donwloads](https://git-scm.com/downloads)
+
+## Clonen des Repositories
+Zum Clonen des Repositories muss folgender Befehl in einer beliebigen Shell ausgeführt werden:
+
+```bash
+git clone https://github.com/joschuatonn/praxistransferFrontend
+```
+
+Für die folgenden Schritte muss zuerst in das Projektverzeichnis navigiert werden:
+
+```bash
+cd praxistransferFrontend
+```
+
+## Installieren der Dependencies
 ```bash
 yarn
-# or
+# oder
 npm install
 ```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+## Starten der Applikation im Development-Modus
+```bash
+yarn dev
+# oder
+npm run dev
+```
+
+Sofern die Quasar-CLI installiert ist, kann auch folgender Befehl verwendet werden:
+
 ```bash
 quasar dev
 ```
 
+### Nutzung der Applikation
 
-### Lint the files
-```bash
-yarn lint
-# or
-npm run lint
-```
+Das Setup des Frontends ist nun abgeschlossen. Standardmäßig ist dieses über `http://localhost:8080` erreichbar. Um die reibungslose Funktionalität der gesamten Applikation zu gewährleisten, wird von einer Änderung der Standardeinstellung abgeraten.
 
+Um die Installation der Applikation vollständig abzuschließen, müssen außerdem die Anleitungen in folgenden Repos befolgt werden:
 
-### Format the files
-```bash
-yarn format
-# or
-npm run format
-```
+[ptpChat-Services](https://github.com/joschuatonn/praxistransferServices) --> Enthält die Installation von Keycloak und Postgres
 
-
-
-### Build the app for production
-```bash
-quasar build
-```
-
-### Customize the configuration
-See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
+[ptpChat-Backend](https://github.com/joschuatonn/praxistransferBackend) --> Enthält das Java-SpringBoot Backend
diff --git a/src/components/ChatSettingsComponent.vue b/src/components/ChatSettingsComponent.vue
index b67a841..24218ec 100644
--- a/src/components/ChatSettingsComponent.vue
+++ b/src/components/ChatSettingsComponent.vue
@@ -57,7 +57,7 @@
           </div>
         </q-card-section>
 
-        <q-card-section>
+        <q-card-section v-if="currentUserIsAdmin">
           <div class="text-h5">Mitglieder hinzufügen</div>
           <q-input 
             filled 
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index fe71a26..d279584 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -8,7 +8,7 @@
 
     <div class="menu">
       <div style="display: flex; align-items: center; justify-content: space-between;" class="navigation">
-        <div title="Nach Nutzern suchen" @click="selectTab('search')" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}">
+        <div title="Nach Nutzern suchen" @click="selectTab('search')" :class="{menuItemActive : activeMenu === 'search', menuItemInactive : activeMenu !== 'search'}" style="border-top-left-radius: 1rem;">
           <q-icon name="search"></q-icon>
         </div>
 
@@ -430,6 +430,10 @@
     transition: .3s;
   }
 
+  .navigation:nth-child(1) {
+    border-radius: 1rem;
+  }
+
   .menuItemActive {
     border-bottom: 2px solid black;
   }