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/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 = () => {