From 64d04d83b9b9c03ce6240a51c68100717705a382 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Mon, 4 Dec 2017 19:13:49 +0100
Subject: [PATCH] ADD: container/message message viewer according to
 wss://...../chat

---
 public_html/css/container.css  | 58 ++++++++++++++++++++++++++++++++++
 public_html/css/layout.css     | 21 ++++++++++++
 view/home.php                  |  1 +
 view/vue-config.js             |  8 ++---
 view/vue/container/message.vue | 20 ++++++++++++
 view/vue/wrapper.vue           | 14 ++++----
 6 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 public_html/css/container.css
 create mode 100644 view/vue/container/message.vue

diff --git a/public_html/css/container.css b/public_html/css/container.css
new file mode 100644
index 0000000..4790a49
--- /dev/null
+++ b/public_html/css/container.css
@@ -0,0 +1,58 @@
+/* Card container */
+#CONTAINER.message{
+	flex-direction: column;
+	justify-content: flex-start;
+	flex-wrap: nowrap;
+
+}
+
+	#CONTAINER.message div{ /* Message item */
+		display: inline-block;
+		position: relative;
+			top: 0;
+			left: 0;
+			height: auto;
+
+		margin: 1em;
+		padding: 1em;
+
+		flex: 1 1 1;
+		align-self: flex-start;
+
+		border-radius: 3px;
+
+		background-color: #fff;
+
+		color: #222;
+	}
+
+	#CONTAINER.message div.me{ /* Message Item (self) */
+		background: #13d89d;
+		align-self: flex-end;
+	}
+
+		#CONTAINER.message div span.author{ /* Message author */
+			display: inline-block;
+			position: relative;
+
+			padding: .2em .4em;
+			margin-right: 1em;
+
+			border: 1px solid #ddd;
+
+			border-radius: 3px;
+
+			background: #eee;
+
+			color: #666;
+		}
+
+		#CONTAINER.message div span.author:after{ /* Add 'dit' */
+			content: ' dit';
+
+			color: #333;
+		}
+
+		#CONTAINER.message div.me span.author{ /* Hide message author if self */
+			display: none;
+		}
\ No newline at end of file
diff --git a/public_html/css/layout.css b/public_html/css/layout.css
index 9260a01..8e21df4 100644
--- a/public_html/css/layout.css
+++ b/public_html/css/layout.css
@@ -70,4 +70,25 @@ body{
 	flex-wrap: nowrap;
 
 	transition: width .2s ease-in-out;
+}
+
+/* Page container */
+#CONTAINER{
+	display: flex;
+	position: absolute;
+		top: 3.5em;
+		left: 15em;
+		width:  calc( 100% - 15em );
+		height: calc( 100% - 3.5em );
+
+	overflow: hidden;
+	overflow-y: auto;
+
+	transition: left .2s ease-in-out,
+			   width .2s ease-in-out;
+}
+
+#WRAPPER.min #CONTAINER{
+	left: 3.5em;
+	width: calc( 100% - 3.5em );
 }
\ No newline at end of file
diff --git a/view/home.php b/view/home.php
index 1b534cd..0565d56 100755
--- a/view/home.php
+++ b/view/home.php
@@ -17,6 +17,7 @@
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
+		<link rel='stylesheet' type='text/css' href='/css/container.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>
diff --git a/view/vue-config.js b/view/vue-config.js
index 44ac5bd..3bb1534 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -10,10 +10,10 @@ window.gstore.add('info', {
 	message: 'Warning! blabla'
 });
 window.gstore.add('notif', [
-	{ class: 'bell',    data: [] },
-	{ class: 'message', data: [] },
-	{ class: 'search',  data: [] },
-	{ class: 'menu',    data: [] }
+	{ class: 'bell',    link: 'notifications', data: [] },
+	{ class: 'message', link: 'inbox',         data: [] },
+	{ class: 'search',  link: 'search',        data: [] },
+	{ class: 'menu',    link: 'menu',          data: [] }
 ])
 
 // Menu
diff --git a/view/vue/container/message.vue b/view/vue/container/message.vue
new file mode 100644
index 0000000..9dab11f
--- /dev/null
+++ b/view/vue/container/message.vue
@@ -0,0 +1,20 @@
+<template>
+
+	<div id='CONTAINER' class='message'>
+
+		<div v-for='msg in gstore.notif[1].data' :class="msg[0] == gstore.server.session.name ? 'me' : ''">
+			<span class='author'>{{ msg[0] }}</span>
+			<span class='content'>{{ msg[1] }}</span>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'CONTAINER_MSG',
+	data(){ return { gstore: window.gstore.data }; },
+}
+</script>
\ No newline at end of file
diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue
index 93b98c8..6988fc8 100755
--- a/view/vue/wrapper.vue
+++ b/view/vue/wrapper.vue
@@ -7,7 +7,8 @@
 		<!-- Menu -->
 		<menu-comp></menu-comp>
 
-		<span>message: {{ msg }}</span>
+		<!-- Container -->
+		<message-container></message-container>
 
 	</div>
 </template>
@@ -18,19 +19,20 @@
 
 <script>
 
-import header_vue from './header.vue';
-import menu_vue   from './menu.vue';
+import header_vue           from './header.vue';
+import menu_vue             from './menu.vue';
+import messageContainer_vue from './container/message.vue';
 
 
 export default {
 	name: 'wrapper',
 	data(){ return {
-		msg: 'Main vue component',
 		gstore: window.gstore.data
 	}; },
 	components: {
-		'HeaderComp': header_vue,
-		'MenuComp': menu_vue
+		'HeaderComp':       header_vue,
+		'MenuComp':         menu_vue,
+		'MessageContainer': messageContainer_vue
 	}
 }
 </script>
\ No newline at end of file