[vue.channel] container header title [mockup.channel-init] created [init.channels] manage open() to open a room and apply 'active' state only if success

webpack/init/channels.js

@@ -21,7 +21,7 @@ gs.get.channel.dump = function(){};
 /* (6) Initialize accessor for channel data */
 gs.get.channel.get  = function(){};
 
-/* (7) Initialize local channel opener */
+/* (7) Initialize room loader */
 gs.get.channel.open = function(){};
 
 
@@ -155,24 +155,36 @@ gs.get.channel.get = function(channel_id=null){
 
 
 
-/* (5) Open a local channel
+/* (5) Open a room
 *
-* @type<String>				Local channel type (text, voice, video)
+* @type<String>				Room type (text, voice, video)
-* @id<int>					Local channel id
+* @id<int>					Room id
 *
 ---------------------------------------------------------*/
 gs.get.channel.open = function(type=null, id=null){
 
-	let error = function(type){ this.get().local[type].active = null; }.bind(this, type);
+	let error = function(type){ this.get().room[type].active = null; }.bind(this, type);
 
 	/* (1) Get current channel */
 	let channel = this.get();
 
 	/* (2) Manage invalid @type */
-	if( typeof type !== 'string' || !channel.local.hasOwnProperty(type) )
+	if( typeof type !== 'string' || !channel.room.hasOwnProperty(type) )
+		return false;
+
+	/* (3) Exit if invalid @id */
+	let room = channel.room[type].list[id];
+
+	if( !room )
 		return false;
 
 
+	/* (4) Close last room */
+
+	/* (5) Open new room */
+
+	/* (6) Update @active room */
+	channel.room[type].active = id;
 
 	console.log(`open(${type}, ${id})`, channel.id);
 };

webpack/mockup/channel-init.json

@@ -0,0 +1,45 @@
+{
+	"channel_id": 12,
+
+	"users": [
+		{ "uid": 1, "online": true,  "name": "First user YaY!"        },
+		{ "uid": 3, "online": false, "name": "Another channel's user" },
+		{ "uid": 4, "online": true,  "name": "And another one"        },
+		{ "uid": 5, "online": true,  "name": "And another"            }
+	],
+
+	"room": {
+
+		"text": {
+
+			"general": {
+
+				"members": [1,3,5],
+
+				"messages": [
+					{ "mid": 100, "uid": 1, "ts": 23894808320, "msg": "Hey ! How are you ?"               },
+					{ "mid": 101, "uid": 3, "ts": 23894808330, "msg": "Fine n you ?"                      },
+					{ "mid": 102, "uid": 5, "ts": 23894808340, "msg": "fine too, what are you doin' ?"    },
+					{ "mid": 103, "uid": 1, "ts": 23894808350, "msg": "Yay guys i'm ok"                   },
+					{ "mid": 104, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" }
+				]
+
+			},
+
+			"test-text": {
+
+				"members": [1,4],
+
+				"messages": [
+					{ "mid": 110, "uid": 1, "ts": 23894823450, "msg": "user_id: 1, message_id: 110" },
+					{ "mid": 111, "uid": 4, "ts": 23894823460, "msg": "user_id: 4, message_id: 111" },
+					{ "mid": 112, "uid": 1, "ts": 23894823460, "msg": "user_id: 1, message_id: 112" },
+					{ "mid": 113, "uid": 1, "ts": 23894823460, "msg": "user_id: 1, message_id: 113" }
+				]
+
+			}
+
+		}
+	}
+
+}

webpack/mockup/channels.json

@@ -3,7 +3,7 @@
 		"id":    0,
 		"link":  "channel-1",
 		"label": "first channel",
-		"local": {
+		"room": {
 			"text": {
 				"type": "text",
 				"visible": true,
@@ -22,7 +22,7 @@
 		"id":    1,
 		"link":  "common-channel",
 		"label": "Common Channel",
-		"local": {
+		"room": {
 			"text": {
 				"type": "text",
 				"visible": true,

webpack/scss/container.scss

@@ -14,7 +14,7 @@
 
 	/* (1) Container HEADER */
 	& > div.header{
-		display: block;
+		display: flex;
 		position: absolute;
 			top: 0;
 			left: 0;
@@ -26,6 +26,27 @@
 
 		z-index: 200;
 
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: nowrap;
+
+		// {1} Title //
+		& > div.title{
+			display: inline-block;
+			position: relative;
+
+			padding: .2em .5em;
+			padding-left: 1.3em;
+			margin-left: .7em;
+
+			font-weight: bold;
+
+			background: url('../asset/svg/dialog.text.svg') left center no-repeat;
+			background-size: auto 60%;
+
+			align-self: center;
+		}
+
 	}
 
 	/* (2) Container BODY */

webpack/scss/layout.scss

@@ -34,7 +34,7 @@ body{
 		margin: 0;
 		padding: 0;
 
-		background-color: #f00;
+		background-color: #36393e;
 	}
 
 }

webpack/vue/channel.vue

@@ -1,12 +1,13 @@
 <template>
 
+	<div class='container'>
+
 		<div class='header'>
-		<div class='title'>{{ isNaN(gs.channel.get().local.active) ? '' : gs.channel.get().local.list[gs.channel.get().local.active] }}</div>
+			<div class='title'>{{ gs.channel.get().room && gs.channel.get().room.text && gs.channel.get().room.text.list[gs.channel.get().room.text.active] || '?' }}</div>
 		</div>
 
 		<div class='body'>
-
+		</div>
-
 
 	</div>
 

webpack/vue/dialog.vue

@@ -14,7 +14,7 @@
 
 		<div class='body'>
 
-			<div v-for='c in gs.channel.get().local' v-show='c.list.length>0'>
+			<div v-for='c in gs.channel.get().room' v-show='c.list.length>0'>
 				<div class='toggle'
 					:data-toggle='c.visible?1:0'
 					@click='c.visible=!c.visible'>{{ c.type }} channels</div>
@@ -22,7 +22,7 @@
 					<li v-for='(lc, i) in c.list'
 						:class='c.active==i?`active`:``'
 						:data-type='c.type'
-						@click='c.active=i'>{{ lc }}</li>
+						@click='gs.channel.open(c.type, i)'>{{ lc }}</li>
 				</ul>
 			</div>
 		</div>

webpack/vue/wrapper.vue

@@ -11,16 +11,10 @@
 		<dialog-comp></dialog-comp>
 
 		<!-- Container -->
-		<div class='container'>
-
-			<div class='header'></div>
-
 		<router-view></router-view>
 
 	</div>
 
-	</div>
-
 
 </template><script>