[mockup.channel-init] update [init.rooms] implemented root nav() / get() / dump() + used dump() in [init.channels]
This commit is contained in:
parent
517a0d017f
commit
914b4c056e
|
@ -59,7 +59,7 @@ module.exports = {
|
||||||
filename: 'bundle.js'
|
filename: 'bundle.js'
|
||||||
},
|
},
|
||||||
module: mod_common,
|
module: mod_common,
|
||||||
devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
|
devtool: (process.env.NODE_ENV!=='production') ? '#eval-source-map' : false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,5 +23,8 @@ gs.set('router', new VueRouter({
|
||||||
|
|
||||||
/* (2) Main components
|
/* (2) Main components
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Initialize channels & channel menu */
|
/* (1) Initialize rooms & room menu */
|
||||||
|
require('./init/rooms.js');
|
||||||
|
|
||||||
|
/* (2) Initialize channels & channel menu */
|
||||||
require('./init/channels.js');
|
require('./init/channels.js');
|
|
@ -6,10 +6,10 @@ gs.set('channel', {});
|
||||||
/* (2) Set default active channel */
|
/* (2) Set default active channel */
|
||||||
gs.get.channel.current = null;
|
gs.get.channel.current = null;
|
||||||
|
|
||||||
/* (3) Initialize list */
|
/* (3) Initialize channel list */
|
||||||
gs.get.channel.list = [
|
gs.get.channel.list = [
|
||||||
{ id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group', local: [] },
|
{ id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group', room: [] },
|
||||||
{ id: -2, link: null, label: 'add', sub: null, icon: 'add', local: [], add: 1 }
|
{ id: -2, link: null, label: 'add', sub: null, icon: 'add', room: [], add: 1 }
|
||||||
];
|
];
|
||||||
|
|
||||||
/* (4) Initialize vue-router channel navigation */
|
/* (4) Initialize vue-router channel navigation */
|
||||||
|
@ -21,9 +21,6 @@ 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 room loader */
|
|
||||||
gs.get.channel.open = function(){};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) Channel navigation
|
/* (2) Channel navigation
|
||||||
|
@ -34,6 +31,7 @@ gs.get.channel.open = function(){};
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
gs.get.channel.nav = function(channel_id=null){
|
gs.get.channel.nav = function(channel_id=null){
|
||||||
|
console.log(`channel.nav(${channel_id})`);
|
||||||
|
|
||||||
/* (1) Get channel data */
|
/* (1) Get channel data */
|
||||||
var channel = this.get(channel_id);
|
var channel = this.get(channel_id);
|
||||||
|
@ -45,10 +43,16 @@ gs.get.channel.nav = function(channel_id=null){
|
||||||
/* (3) Navigate vue-router */
|
/* (3) Navigate vue-router */
|
||||||
gs.get.router.push(`/channel/${channel.link}`);
|
gs.get.router.push(`/channel/${channel.link}`);
|
||||||
|
|
||||||
/* (4) Update active element */
|
/* (4) Load rooms */
|
||||||
|
gs.get.rfunc.dump(channel.room);
|
||||||
|
|
||||||
|
/* (5) Default open first 'text' room */
|
||||||
|
gs.get.rfunc.nav('text', gs.get.room.text.list[0].id);
|
||||||
|
|
||||||
|
/* (6) Update active element */
|
||||||
this.current = channel.id;
|
this.current = channel.id;
|
||||||
|
|
||||||
/* (5) Log channel */
|
/* (7) Log channel */
|
||||||
console.log(`[channel.current] ${channel.link} (${channel.label})`);
|
console.log(`[channel.current] ${channel.link} (${channel.label})`);
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
|
@ -63,6 +67,7 @@ gs.get.channel.nav = function(channel_id=null){
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
gs.get.channel.dump = function(channels){
|
gs.get.channel.dump = function(channels){
|
||||||
|
console.log(`channel.dump([${channels instanceof Array?channels.length:0}])`);
|
||||||
|
|
||||||
/* (1) Check @channels type */
|
/* (1) Check @channels type */
|
||||||
if( !(channels instanceof Array) )
|
if( !(channels instanceof Array) )
|
||||||
|
@ -95,6 +100,7 @@ gs.get.channel.dump = function(channels){
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
gs.get.channel.get = function(channel_id=null){
|
gs.get.channel.get = function(channel_id=null){
|
||||||
|
// console.log(`channel.get(${channel_id})`);
|
||||||
|
|
||||||
if( channel_id === null ){
|
if( channel_id === null ){
|
||||||
|
|
||||||
|
@ -151,40 +157,3 @@ gs.get.channel.get = function(channel_id=null){
|
||||||
return this.list[0];
|
return this.list[0];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (5) Open a room
|
|
||||||
*
|
|
||||||
* @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().room[type].active = null; }.bind(this, type);
|
|
||||||
|
|
||||||
/* (1) Get current channel */
|
|
||||||
let channel = this.get();
|
|
||||||
|
|
||||||
/* (2) Manage invalid @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);
|
|
||||||
};
|
|
|
@ -0,0 +1,154 @@
|
||||||
|
/* (1) Initialisation
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Init @room AVAILABLE types */
|
||||||
|
gs.set('room', {
|
||||||
|
text: { list: [], current: 0, visible: true },
|
||||||
|
voice: { list: [], current: null, visible: true }
|
||||||
|
});
|
||||||
|
|
||||||
|
/* (2) Init room functions */
|
||||||
|
gs.set('rfunc', {});
|
||||||
|
|
||||||
|
/* (3) Initialize room navigation */
|
||||||
|
gs.get.rfunc.open = function(){};
|
||||||
|
|
||||||
|
/* (4) Initialize adding fetched room */
|
||||||
|
gs.get.rfunc.dump = function(){};
|
||||||
|
|
||||||
|
/* (5) Initialize accessor for room data */
|
||||||
|
gs.get.rfunc.get = function(){};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) room navigation
|
||||||
|
*
|
||||||
|
* @type<int> room type
|
||||||
|
* @id<int> room ID (NULL uses get())
|
||||||
|
*
|
||||||
|
* @return status<boolean> Whether the navigation has been successful
|
||||||
|
*
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
gs.get.rfunc.nav = function(type=null, id=null){
|
||||||
|
console.log(`room.nav(${type}, ${id})`);
|
||||||
|
|
||||||
|
/* (1) Try to get current room from id */
|
||||||
|
let room = gs.get.rfunc.get(type, id);
|
||||||
|
|
||||||
|
/* (2) Manage invalid room */
|
||||||
|
if( room == null )
|
||||||
|
return false;
|
||||||
|
|
||||||
|
/* (3) Close last room */
|
||||||
|
|
||||||
|
/* (4) Open new room */
|
||||||
|
|
||||||
|
/* (5) Update @active room */
|
||||||
|
this[type].current = room.id;
|
||||||
|
|
||||||
|
console.log(`[room.${type}.opened] ${room.name} (${room.id})`, room.id);
|
||||||
|
|
||||||
|
return true;
|
||||||
|
|
||||||
|
}.bind(gs.get.room);
|
||||||
|
|
||||||
|
|
||||||
|
/* (3) Dump/Update room data (raw format -> tree structure)
|
||||||
|
*
|
||||||
|
* @rooms<array> rooms data (raw format)
|
||||||
|
*
|
||||||
|
* {raw_format}
|
||||||
|
* [
|
||||||
|
* { rid: <int>, type: 'text', name: <string> }
|
||||||
|
* { rid: <int>, type: 'voice', name: <string> }
|
||||||
|
* { rid: <int>, type: 'video', name: <string> }
|
||||||
|
* ]
|
||||||
|
*
|
||||||
|
* @return udpated<boolean> Whether rooms have been updated
|
||||||
|
*
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
gs.get.rfunc.dump = function(rooms){
|
||||||
|
|
||||||
|
console.log(`room.dump([${rooms instanceof Array?rooms.length:0}])`);
|
||||||
|
|
||||||
|
/* (1) Check @rooms type */
|
||||||
|
if( !(rooms instanceof Array) )
|
||||||
|
return false;
|
||||||
|
|
||||||
|
/* (2) Clear data */
|
||||||
|
for( let type in this ){
|
||||||
|
this[type].list = [];
|
||||||
|
this[type].current = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (3) Browse each room */
|
||||||
|
for(let r of rooms){
|
||||||
|
|
||||||
|
// {1} Ignore: if not object //
|
||||||
|
if( typeof r !== 'object' )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
// {2} Ignore: if missing field //
|
||||||
|
if( isNaN(r.rid) || typeof r.type !== 'string' || typeof r.name !== 'string' )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
// {3} Ignore: not available type //
|
||||||
|
if( this[r.type] == null )
|
||||||
|
continue;
|
||||||
|
|
||||||
|
|
||||||
|
this[r.type].list.push({ id: r.rid, name: r.name, type: r.type });
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
|
||||||
|
}.bind(gs.get.room);
|
||||||
|
|
||||||
|
|
||||||
|
/* (4) Get room data
|
||||||
|
*
|
||||||
|
* @type<int> room type
|
||||||
|
* @id<int> room ID
|
||||||
|
* NULL: current room || from URL (and set current)
|
||||||
|
*
|
||||||
|
* @return room<array> room data
|
||||||
|
*
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
gs.get.rfunc.get = function(type=null, id=null){
|
||||||
|
console.log(`room.get(${type}, ${id})`);
|
||||||
|
|
||||||
|
/* (1) Manage invalid @type */
|
||||||
|
if( typeof type !== 'string' || this[type] == null )
|
||||||
|
return null;
|
||||||
|
|
||||||
|
/* (1) Get @current room: if id is null
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
if( id === null ){
|
||||||
|
|
||||||
|
/* (1) If @current is set */
|
||||||
|
if( !isNaN(this[type].current) ){
|
||||||
|
|
||||||
|
/* (2) Return matching id in list */
|
||||||
|
for( let r of this[type].list ){
|
||||||
|
|
||||||
|
if( r.id === this[type].current )
|
||||||
|
return r; // exit point
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) Get room data
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Return room matching id */
|
||||||
|
for( let r of this[type].list )
|
||||||
|
if( r.id === id )
|
||||||
|
return r; // exit point
|
||||||
|
|
||||||
|
/* (2) Return default: if ID not found */
|
||||||
|
this[type].current = null;
|
||||||
|
return null;
|
||||||
|
|
||||||
|
}.bind(gs.get.room);
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
|
||||||
"channel_id": 12,
|
"channel_id": 12,
|
||||||
|
|
||||||
"users": [
|
"users": [
|
||||||
|
|
|
@ -3,38 +3,26 @@
|
||||||
"id": 0,
|
"id": 0,
|
||||||
"link": "channel-1",
|
"link": "channel-1",
|
||||||
"label": "first channel",
|
"label": "first channel",
|
||||||
"room": {
|
"room": [
|
||||||
"text": {
|
|
||||||
"type": "text",
|
{ "rid": 0, "type": "text", "name": "general" },
|
||||||
"visible": true,
|
{ "rid": 1, "type": "text", "name": "test-text" },
|
||||||
"list": [ "general", "test-text" ],
|
{ "rid": 2, "type": "voice", "name": "general" },
|
||||||
"active": 0
|
{ "rid": 3, "type": "voice", "name": "test-voice" }
|
||||||
},
|
|
||||||
"voice": {
|
]
|
||||||
"type": "voice",
|
|
||||||
"visible": true,
|
|
||||||
"list": [ "general" , "test-voice" ],
|
|
||||||
"active": null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
"link": "common-channel",
|
"link": "common-channel",
|
||||||
"label": "Common Channel",
|
"label": "Common Channel",
|
||||||
"room": {
|
"room": [
|
||||||
"text": {
|
|
||||||
"type": "text",
|
{ "rid": 11, "type": "text", "name": "general common" },
|
||||||
"visible": true,
|
{ "rid": 12, "type": "text", "name": "common" },
|
||||||
"list": [ "general2", "test-text-common" ],
|
{ "rid": 13, "type": "voice", "name": "general common" },
|
||||||
"active": 0
|
{ "rid": 14, "type": "voice", "name": "common" }
|
||||||
},
|
|
||||||
"voice": {
|
]
|
||||||
"type": "voice",
|
|
||||||
"visible": true,
|
|
||||||
"list": [ "general2" , "test-voice-common" ],
|
|
||||||
"active": null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
|
@ -3,7 +3,7 @@
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
|
|
||||||
<div class='header'>
|
<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 class='title'>{{ gs.rfunc.get('text') ? gs.rfunc.get('text').name : '?' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='body'>
|
<div class='body'>
|
||||||
|
|
|
@ -5,26 +5,23 @@
|
||||||
<div class='dialog'>
|
<div class='dialog'>
|
||||||
|
|
||||||
<div class='header'>
|
<div class='header'>
|
||||||
<div class='title'>{{ gs.channel.get().id < 0 ? '' : gs.channel.get().label }}</div>
|
<div class='title'>{{ 'blabla' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='body'>
|
<div class='body'>
|
||||||
|
|
||||||
</div>
|
<div v-for='(rooms, type) in gs.room'>
|
||||||
|
|
||||||
<div class='body'>
|
|
||||||
|
|
||||||
<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='rooms.visible?1:0'
|
||||||
@click='c.visible=!c.visible'>{{ c.type }} channels</div>
|
@click='rooms.visible=!rooms.visible'>{{ type }} rooms</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for='(lc, i) in c.list'
|
<li v-for='r in rooms.list'
|
||||||
:class='c.active==i?`active`:``'
|
:class='rooms.current==r.id?`active`:``'
|
||||||
:data-type='c.type'
|
:data-type='r.type'
|
||||||
@click='gs.channel.open(c.type, i)'>{{ lc }}</li>
|
@click='gs.rfunc.nav(r.type, r.id)'>{{ r.name }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue