Restructured Project Rep

2024-04-07 22:25:16 +02:00
parent 895f508c29
commit d51ad2c4eb
150 changed files with 19358 additions and 7318 deletions
--- a/pages/chat.vue
+++ b/pages/chat.vue
@@ -0,0 +1,107 @@
+<script setup>
+definePageMeta({
+  layout: "default"
+})
+
+
+import dayjs from "dayjs";
+
+
+const supabase = useSupabaseClient()
+const user = useSupabaseUser()
+
+const dataStore = useDataStore()
+const selectedChat = ref({})
+const messageText = ref("")
+
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="w-1/5 mr-2 scrollList">
+      <a
+          v-for="chat in dataStore.chats"
+          @click="selectedChat = chat"
+      >
+        <UAlert
+            :title="chat.title ? chat.title : chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')"
+            :avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
+            :color="selectedChat.id === chat.id ? 'primary' : 'white'"
+            variant="outline"
+        >
+          <template #title="{title}">
+            {{title}} <!-- TODO: Add Unread Counter  <UBadge class="ml-1">{{dataStore.getMessagesByChatId(chat.id).filter(i => !i.read ).length}}</UBadge>-->
+          </template>
+        </UAlert>
+
+      </a>
+    </div>
+    <div class="w-full  h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
+      <div class="flex flex-col mt-5 scrollList">
+
+        <div
+            v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
+        >
+          <div class="flex justify-end mb-4" v-if="message.origin === user.id">
+            <div
+                class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
+            >
+              {{message.text}}
+            </div>
+            <UAvatar
+                :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
+                size="md"
+            />
+          </div>
+          <div class="flex justify-start mb-4" v-else>
+            <UAvatar
+                :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
+                size="md"
+            />
+            <div
+                class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
+            >
+              {{message.text}}
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+
+      <div class="py-5">
+        <UButtonGroup class="w-full">
+          <UInput
+              variant="outline"
+              color="primary"
+              placeholder="Neue Nachricht"
+              v-model="messageText"
+              @keyup.enter="dataStore.createNewItem('messages',{
+                  text: messageText,
+                  origin: user.id,
+                  destination: selectedChat.id
+                })"
+              class="flex-auto"
+          />
+          <UButton
+              @click="dataStore.createNewItem('messages',{
+                  text: messageText,
+                  origin: user.id,
+                  destination: selectedChat.id
+                })"
+          >
+            Senden
+          </UButton>
+        </UButtonGroup>
+
+
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+</style>