Removed unused code, two-person-chats are now displayed correctly

src/pages/IndexPage.vue

@@ -55,56 +55,19 @@
               @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 ptpUser)"
+              @click="selectChat(chat as chat)"
-            ></ProfileCardComponent>-->
+              slim
-          </div>
+            ></ProfileCardComponent> 
-        </div>
             
-
+            <p v-else>
-        <!--<br>
+              <span v-for="member in chat.members">{{ member.id }}<br></span>
-        <q-input
+            </p>
-          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,12 +87,12 @@
     <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.profilepicture"
+          :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="selectedChat.profilepictureAsString"
@@ -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>
@@ -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) {