Merge remote-tracking branch 'origin/feature/chatSettingsComponent' into feature/chatSettingsComponent

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>

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>
@@ -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,14 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
+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();
+  const chatStore = useChatStore();
 
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
@@ -61,6 +90,23 @@ import { useUserStore } from 'src/stores/user-store';
   const closeDialog = () => {
     emit('showModal', true);
   }
+
+  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>
@@ -80,4 +126,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>

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)"/>
@@ -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({
+      sendNotification("Du hast keine Mitglieder ausgewählt", false);
-        message: 'Du hast keine Mitglieder ausgewählt',
-        position: 'top',
-        timeout: 2000,
-        color: "red",
-        icon: 'warning'
-      });
       errorOccured = true;
     }
 
     if(chatName.value == "") {
-      $q.notify({
+      sendNotification("Du hast keinen Namen festgelegt", false);
-        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 = "";
@@ -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));
+    chatStore.createChat(chatName, usersForChat.value.map((user) => user.id), userStore.user!.id).then((response : responseModel) => {
-    reloadChats();
+      sendNotification(response.message, response.success);
+      reloadChats();
+    });
+    
   }
 
   const reloadChats = async() => {

src/components/EssentialLink.vue

@@ -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>

src/components/ExampleComponent.vue

@@ -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>

src/components/MessageComponent.vue

@@ -1,21 +1,26 @@
 <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));
-  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>
   <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>

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>

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>

src/components/models.ts

@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}

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'

src/models.ts

@@ -3,17 +3,8 @@ export interface ptpUser {
   firstName: string;
   lastName: string;
   username: string;
-  status?: string;
+  status: string;
-  profilePictureUrl?: string;
+  profilepicture: string;
-}
-
-export interface ptpTestUser {
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  status?: string;
-  profilePictureUrl?: string;
 }
 
 export interface responseModel {
@@ -27,20 +18,14 @@ export interface chat{
   members: ptpUser[];
   messages: message[];
   displayName: string;
-}
+  profilepicture: string;
-
+  profilepictureAsString: string;
-export interface user{
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  chats: chat[];
 }
 
 export interface message {
   id: number;
   chat: chat;
-  sender:user;
+  sender:ptpUser;
   content: string;
   timestamp: string;
   isOwn: boolean;

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">
@@ -55,63 +55,26 @@
               @click="selectChat(chat as chat)"
             ></ChatCardComponent>
 
-
+            <ProfileCardComponent
-            <div v-else>
+              v-else-if="chat.members.length == 2"
-              <h5>Ist ein Chat für zwei</h5>
-            </div>
-
-            <!--<p v-for="member in chat.members">
-              {{ member.id }}
-            </p>-->
-            <!----<ProfileCardComponent
-              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"
+              :selected="chat.id == selectedChat.id"
-              @click="selectUser(chat.members[0] as ptpTestUser)"
+              @click="selectChat(chat as chat)"
-            ></ProfileCardComponent>-->
+              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 
         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"
@@ -124,15 +87,15 @@
     <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" 
+          v-if="selectedChat.members.length == 2" 
-          :displayName="selectedUser.firstName + ' ' + selectedUser.lastName"
+          :displayName="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.firstName + ' ' + selectedChat.members.find((member) => member.id !== userStore.user!.id)?.lastName"
-          :image="selectedUser.profilePictureUrl"
+          :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture"
         ></HeaderInfoContainerComponent>
 
-        <div v-if="selectedChat.id != null" style="display: flex;">
+        <div v-else-if="selectedChat.members.length > 2" style="display: flex;">
           <HeaderInfoContainerComponent
             :displayName="selectedChat.displayName"
-            image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
+            :image="selectedChat.profilepictureAsString"
           ></HeaderInfoContainerComponent>
 
           <div>
@@ -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-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].sort((a, b) =>  {return (Number(b.timestamp)-Number(a.timestamp))}))" :key="index">
+        <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>
@@ -259,8 +224,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 {message} from 'src/models';
-  import type {chat} 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';
@@ -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) {
@@ -381,6 +329,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 +347,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[];

src/stores/chat-store.ts

@@ -1,14 +1,15 @@
 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';
+import { useQuasar } from 'quasar';
 
 export const useChatStore = defineStore('chatStore',{
   state:() => ({
     chats: [] as chat[],
     chatsLoaded: false,
     chatExistsReponse: false,
-    profilePictures : [] as string[],
+    profilePictures : [] as profilePicture[],
     profilePicturesLoaded: false
   }),
   actions: {
@@ -24,10 +25,12 @@ 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[]){
+    async createChat(chatName: string, members: string[], keycloakID: string){
       const userStore = useUserStore();
       if(userStore.id) {
         if (!members.includes(userStore.id)) {
@@ -39,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;
     }
   }
 });

src/stores/example-store.ts

@@ -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++;
-    },
-  },
-});

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,16 +60,6 @@ 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;
@@ -88,6 +69,21 @@ export const useUserStore = defineStore('userStore', {
       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;
+        }
+      });
+
+
+      return (await api.post("/users/update", updatedUser)).data;
+    },
+
     async initKeycloak() : Promise<Keycloak>{
 
       try {

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"
+  });
+}