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

This commit is contained in:
xdrm-brackets 2018-03-22 00:53:32 +01:00
parent 1ccfebfde5
commit 4bc5e5123f
8 changed files with 97 additions and 24 deletions

View File

@ -21,7 +21,7 @@ gs.get.channel.dump = function(){};
/* (6) Initialize accessor for channel data */ /* (6) Initialize accessor for channel data */
gs.get.channel.get = function(){}; gs.get.channel.get = function(){};
/* (7) Initialize local channel opener */ /* (7) Initialize room loader */
gs.get.channel.open = function(){}; 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){ 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 */ /* (1) Get current channel */
let channel = this.get(); let channel = this.get();
/* (2) Manage invalid @type */ /* (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; 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); console.log(`open(${type}, ${id})`, channel.id);
}; };

View File

@ -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" }
]
}
}
}
}

View File

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

View File

@ -14,7 +14,7 @@
/* (1) Container HEADER */ /* (1) Container HEADER */
& > div.header{ & > div.header{
display: block; display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -26,6 +26,27 @@
z-index: 200; 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 */ /* (2) Container BODY */

View File

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

View File

@ -1,12 +1,13 @@
<template> <template>
<div class='container'>
<div class='header'> <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>
<div class='body'> <div class='body'>
</div>
</div> </div>

View File

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

View File

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