mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
webpack/init/channels.js
View File

@ -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)
* @id<int> Local channel id
* @type<String> Room type (text, voice, video)
* @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);
};

45
webpack/mockup/channel-init.json Normal file
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" }
]
}
}
}
}

4
webpack/mockup/channels.json
View File

@ -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,

23
webpack/scss/container.scss
View File

@ -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 */

2
webpack/scss/layout.scss
View File

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

11
webpack/vue/channel.vue
View File

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

4
webpack/vue/dialog.vue
View File

@ -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>

8
webpack/vue/wrapper.vue
View File

@ -11,13 +11,7 @@
<dialog-comp></dialog-comp>
<!-- Container -->
<div class='container'>
<div class='header'></div>
<router-view></router-view>
</div>
<router-view></router-view>
</div>