From 9d1adfe748fa88e1ba6088ced826ae8bd12b8dac Mon Sep 17 00:00:00 2001
From: hippoz <anastasiudavid@gmail.com>
Date: Fri, 20 Nov 2020 11:59:48 +0200
Subject: [PATCH] attempt (and fail) to put message div before the textobx

---
 app/app.html            | 32 +++++++++++++++++++++++++++-----
 app/resources/js/app.js |  7 +++++++
 2 files changed, 34 insertions(+), 5 deletions(-)
diff --git a/app/app.html b/app/app.html
index cfbf90f..ed4ce31 100755
--- a/app/app.html
+++ b/app/app.html
@@ -25,11 +25,28 @@
         .cursor {
             cursor: pointer;
         }
+
+        .chat-bar {
+            position: fixed !important;
+            left: 0 !important;
+            bottom: 0 !important;
+            width: 98% !important;
+            margin-left: 1% !important;
+        }
+
+        .as-console-wrapper {
+            display: none !important;
+        }
+
+        .posts-container {
+            overflow-y: auto;
+            height: calc(90vh - 100px);
+        }
     </style>
 </head>
 <body>
     <div id="app">
-        <div v-if="showApp">
+        <div id="appContainer" v-if="showApp">
             <md-dialog id="create-category-dialog" :md-active.sync="dialog.show.createCategory">
                 <md-dialog-title>Create category</md-dialog-title>
 
@@ -78,7 +95,7 @@
                     </md-dialog-actions>
                 </md-dialog-content>
             </md-dialog>
-
+            
             <md-toolbar class="md-accent" md-elevation="5">
                 <h3 class="md-title" style="flex: 1">Brainlet</h3>
                 <md-menu md-size="small">
@@ -96,7 +113,7 @@
                 <md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
             </md-toolbar>
 
-            <div id="posts-container" v-if="selection.category.browsing">
+            <div id="posts-container" class="posts-container" v-if="selection.category.browsing">
                 <md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
                     <md-card-header>
                         <div class="md-title" v-html="post.title"></div>
@@ -115,13 +132,13 @@
                             <a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)"><span>{{ post.author.username }}</span></a>
                         </md-card-header>
     
-                        <md-card-content v-html="post.content"></md-card-content>
+                        <md-card-content>{{ post.content }}</md-card-content>
                     </md-card>
                     <br>
                 </div>
             </div>
 
-            <md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">
+            <md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;" v-show="!selection.category.isChatContext">
                 <md-speed-dial-target>
                     <md-icon class="md-morph-initial">add</md-icon>
                     <md-icon class="md-morph-final">edit</md-icon>
@@ -139,6 +156,11 @@
                     </md-button>
                 </md-speed-dial-content>
             </md-speed-dial>
+
+            <md-field md-inline class="chat-bar" v-show="selection.category.isChatContext">
+                <label>Send message</label>
+                <md-input v-model="message.typed" v-on:keyup.enter="sendCurrentMessage()"></md-input>
+            </md-field>
         </div>
         <md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
             <span>{{ snackbarNotification }}</span>
diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index e5acd6f..9c5e912 100755
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -171,6 +171,9 @@ const app = new Vue({
         gateway: new GatewayConnection(),
         messages: {
             'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
+        },
+        message: {
+            typed: ''
         }
     },
     mounted: async function() {
@@ -234,6 +237,10 @@ const app = new Vue({
             this.selection.category.title = 'Chat';
             this.selection.category._id = categoryId;
         },
+        sendCurrentMessage: async function() {
+            this.gateway.sendMessage(this.selection.category._id, this.message.typed);
+            this.message.typed = '';
+        },
 
         // Category and post browsing
         browseCategories: async function() {
