[mockup.channel-init] update [init.rooms] implemented root nav() / get() / dump() + used dump() in [init.channels]

webpack.config.js

@@ -59,7 +59,7 @@ module.exports = {
 		filename: 'bundle.js'
 	},
 	module: mod_common,
-	devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
+	devtool: (process.env.NODE_ENV!=='production') ? '#eval-source-map' : false
 
 }
 

webpack/common.js

@@ -23,5 +23,8 @@ gs.set('router', new VueRouter({
 
 /* (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');

webpack/init/channels.js

@@ -6,10 +6,10 @@ gs.set('channel', {});
 /* (2) Set default active channel */
 gs.get.channel.current = null;
 
-/* (3) Initialize list */
+/* (3) Initialize 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 */
@@ -21,9 +21,6 @@ gs.get.channel.dump = function(){};
 /* (6) Initialize accessor for channel data */
 gs.get.channel.get  = function(){};
 
-/* (7) Initialize room loader */
-gs.get.channel.open = function(){};
-
 
 
 /* (2) Channel navigation
@@ -34,6 +31,7 @@ gs.get.channel.open = function(){};
 *
 ---------------------------------------------------------*/
 gs.get.channel.nav = function(channel_id=null){
+	console.log(`channel.nav(${channel_id})`);
 
 	/* (1) Get channel data */
 	var channel = this.get(channel_id);
@@ -45,10 +43,16 @@ gs.get.channel.nav = function(channel_id=null){
 	/* (3) Navigate vue-router */
 	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;
 
-	/* (5) Log channel */
+	/* (7) Log channel */
 	console.log(`[channel.current] ${channel.link} (${channel.label})`);
 
 	return true;
@@ -63,6 +67,7 @@ gs.get.channel.nav = function(channel_id=null){
 *
 ---------------------------------------------------------*/
 gs.get.channel.dump = function(channels){
+	console.log(`channel.dump([${channels instanceof Array?channels.length:0}])`);
 
 	/* (1) Check @channels type */
 	if( !(channels instanceof Array) )
@@ -95,6 +100,7 @@ gs.get.channel.dump = function(channels){
 *
 ---------------------------------------------------------*/
 gs.get.channel.get = function(channel_id=null){
+	// console.log(`channel.get(${channel_id})`);
 
 	if( channel_id === null ){
 
@@ -150,41 +156,4 @@ gs.get.channel.get = function(channel_id=null){
 	this.current = this.list[0].id;
 	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);
-};

webpack/init/rooms.js

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

webpack/mockup/channel-init.json

@@ -1,4 +1,5 @@
 {
+
 	"channel_id": 12,
 
 	"users": [

webpack/mockup/channels.json

@@ -3,38 +3,26 @@
 		"id":    0,
 		"link":  "channel-1",
 		"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,
 		"link":  "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
-			}
-		}
 	}
 ]

webpack/vue/channel.vue

@@ -3,7 +3,7 @@
 	<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 class='title'>{{ gs.rfunc.get('text') ? gs.rfunc.get('text').name : '?' }}</div>
 		</div>
 
 		<div class='body'>

webpack/vue/dialog.vue

@@ -5,26 +5,23 @@
 	<div class='dialog'>
 
 		<div class='header'>
-			<div class='title'>{{ gs.channel.get().id < 0 ? '' : gs.channel.get().label }}</div>
+			<div class='title'>{{ 'blabla' }}</div>
 		</div>
 
 		<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'
-					: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>
-					<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>
 			</div>
+
 		</div>
 
 	</div>