Started to design the general chat-page

src/App.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import ProtectedData from './components/ProtectedData.vue';
+import IndexPage from 'pages/IndexPage.vue';
 defineOptions({
   name: 'App'
 });
 </script>
 
 <template>
-  <header>
-    <img alt="Quasar logo" src="./assets/quasar-logo-vertical.svg" width="200vw"/>
-
-    <ProtectedData />
-  </header>
+  <IndexPage></IndexPage>
   <router-view />
 </template>
 

src/components/MessageComponent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  const props =  defineProps({
+    ownMessage: Boolean,
+    timestamp: String,
+    message: String,
+  })
+</script>
+
+<template>
+  <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
+    <p style="margin-bottom: 0;">{{props.message}}</p>
+    <div style="text-align: right;">
+      <small style="margin-top: 0;">{{props.timestamp}}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .message {
+    border-radius: 10px;
+    max-width: 15rem;
+    padding: 5px;
+  }
+
+  .sent {
+    background: blue;
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  .received {
+    background: red;
+  }
+</style>

src/layouts/MainLayout.vue

@@ -1,47 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
-    <q-header elevated>
-      <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
 
-        <q-toolbar-title>
-          Quasar App
-        </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer
-      v-model="leftDrawerOpen"
-      bordered
-    >
-      <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
-
-        <EssentialLink
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
-    </q-drawer>
-
-    <q-page-container>
-      <router-view />
-    </q-page-container>
-  </q-layout>
 </template>
 
 <script setup lang="ts">
@@ -51,55 +9,4 @@ import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue'
 defineOptions({
   name: 'MainLayout'
 });
-
-const linksList: EssentialLinkProps[] = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
-
-const leftDrawerOpen = ref(false);
-
-function toggleLeftDrawer () {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
-}
 </script>

src/main.ts

@@ -30,7 +30,7 @@ console.log("ICH WAR HIER");
 try {
   const authenticated = await keycloak.init({
     onLoad: 'login-required',
-    redirectUri: 'http://localhost:8080/test/'
+    redirectUri: 'http://localhost:8080/'
   }).then( (auth) => {
     console.log("Authenticated :" + authenticated);
   });

src/pages/IndexPage.vue

@@ -1,47 +1,38 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
-  </q-page>
+  <div style="width:100%;display: flex; align-items: center; justify-content: space-between;height:100vh;">
+    <div style="background: gray; width: 30%;height:100%;padding: 20px;">
+      <div>
+        <q-input filled v-model="searchQuery">
+          <template v-slot:prepend>
+            <q-icon name="search"></q-icon>
+          </template>
+        </q-input>
+        <p>{{searchQuery}}</p>
+      </div>
+    </div>
+    <div style="background: white; width: 70%;height: 100%;">
+
+      <div id="messageContainer">
+        <MessageComponent message="Halo" timestamp="13:03" own-message></MessageComponent>
+        <MessageComponent message="Hallo na" timestamp="13:04"></MessageComponent>
+        <MessageComponent message="Blubber" timestamp="13:06"></MessageComponent>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Todo, Meta } from '../components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
+import MessageComponent from 'components/MessageComponent.vue';
 
 defineOptions({
   name: 'IndexPage'
 });
 
-const todos = ref<Todo[]>([
-  {
-    id: 1,
-    content: 'ct1'
-  },
-  {
-    id: 2,
-    content: 'ct2'
-  },
-  {
-    id: 3,
-    content: 'ct3'
-  },
-  {
-    id: 4,
-    content: 'ct4'
-  },
-  {
-    id: 5,
-    content: 'ct5'
-  }
-]);
+const searchQuery = ref("")
 
-const meta = ref<Meta>({
-  totalCount: 1200
-});
 </script>
+
+<style scoped>
+
+</style>

src/pages/TestPage.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <h1>Hallloooooooooo</h1>
-</template>
-
-<style scoped>
-
-</style>

src/router/routes.ts

@@ -6,10 +6,6 @@ const routes: RouteRecordRaw[] = [
     component: () => import('layouts/MainLayout.vue'),
     children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
   },
-  {
-    path: '/test',
-    component: () => import('pages/TestPage.vue')
-  },
 
   // Always leave this as last one,
   // but you can also remove it