diff --git a/webpack/common.js b/webpack/common.js index f0526e0..44908ee 100644 --- a/webpack/common.js +++ b/webpack/common.js @@ -1,6 +1,9 @@ -import {GlobalStore} from './lib/gstore' -import VueRouter from 'vue-router' -import routes from './routes' +import {GlobalStore} from './lib/gstore' +import VueRouter from 'vue-router' +import routes from './routes' +import {ContentController} from './lib/content-controller' +import {RoomController} from './lib/room-controller' +import {ChannelController} from './lib/channel-controller' window.gs = new GlobalStore(); @@ -23,8 +26,11 @@ gs.set('router', new VueRouter({ /* (2) Main components ---------------------------------------------------------*/ -/* (1) Initialize rooms & room menu */ -require('./init/rooms.js'); +/* (1) Initialize content management */ +gs.set('content', new ContentController()); -/* (2) Initialize channels & channel menu */ -require('./init/channels.js'); \ No newline at end of file +/* (2) Initialize rooms & room menu */ +gs.set('room', new RoomController()); + +/* (3) Initialize channels & channel menu */ +gs.set('channel', new ChannelController()); \ No newline at end of file diff --git a/webpack/init/channels.js b/webpack/init/channels.js deleted file mode 100644 index c68b459..0000000 --- a/webpack/init/channels.js +++ /dev/null @@ -1,159 +0,0 @@ -/* (1) Initialisation ----------------------------------------------------------*/ -/* (1) Init @channel object */ -gs.set('channel', {}); - -/* (2) Set default active channel */ -gs.get.channel.current = null; - -/* (3) Initialize channel list */ -gs.get.channel.list = [ - { id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group', room: [] }, - { id: -2, link: null, label: 'add', sub: null, icon: 'add', room: [], add: 1 } -]; - -/* (4) Initialize vue-router channel navigation */ -gs.get.channel.nav = function(){}; - -/* (5) Initialize adding fetched channel */ -gs.get.channel.dump = function(){}; - -/* (6) Initialize accessor for channel data */ -gs.get.channel.get = function(){}; - - - -/* (2) Channel navigation -* -* @channel_id Channel id (NULL uses get()) -* -* @return status Whether the navigation has been successful -* ----------------------------------------------------------*/ -gs.get.channel.nav = function(channel_id=null){ - console.log(`channel.nav(${channel_id})`); - - /* (1) Get channel data */ - var channel = this.get(channel_id); - - /* (2) Abort if same channel */ - // if( gs.get.router.history.current.params.link === channel.link ) - // return false; - - /* (3) Navigate vue-router */ - gs.get.router.push(`/channel/${channel.link}`); - - /* (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; - - /* (7) Log channel */ - console.log(`[channel.current] ${channel.link} (${channel.label})`); - - return true; -}; - - -/* (3) Dump/Update channel data -* -* @channels Channels data -* -* @return udpated Whether channels have been updated -* ----------------------------------------------------------*/ -gs.get.channel.dump = function(channels){ - console.log(`channel.dump([${channels instanceof Array?channels.length:0}])`); - - /* (1) Check @channels type */ - if( !(channels instanceof Array) ) - return false; - - /* (2) Store LAST item */ - let last_item = this.list.pop(); - - /* (3) Clear list (except FIRST) */ - this.list.splice(1); - - /* (4) Apply new channels */ - for(let c of channels) - this.list.push(c); - - /* (5) Restore LAST */ - this.list.push(last_item); - - return true; - -}; - - -/* (4) Get channel data -* -* @channel_id Channel ID -* NULL: current channel || from URL (and set current) -* -* @return channel Channel data -* ----------------------------------------------------------*/ -gs.get.channel.get = function(channel_id=null){ - // console.log(`channel.get(${channel_id})`); - - if( channel_id === null ){ - - /* (1) Get @current channel - ---------------------------------------------------------*/ - /* (1) If @current is set */ - if( !isNaN(this.current) ){ - - /* (2) Return matching id in list */ - for( let c of this.list ){ - - if( c.id === this.current ) - return c; // exit point - - } - - } - - - /* (2) Get from URL - ---------------------------------------------------------*/ - /* (1) If vue-router has @link param */ - if( gs.get.router.history.current.params.link ){ - - /* (2) Extract @link */ - let link = gs.get.router.history.current.params.link; - - /* (3) Return matching link in list */ - for( let c of this.list ){ - - if( c.link === link ){ - - this.current = c.id; // set @current - return c; // exit point - - } - - } - - } - - } - - - /* (3) Get channel data - ---------------------------------------------------------*/ - /* (1) Return channel matching id */ - for( let c of this.list ) - if( c.id === channel_id ) - return c; // exit point - - /* (2) Return default: if ID not found */ - this.current = this.list[0].id; - return this.list[0]; - -} \ No newline at end of file diff --git a/webpack/init/rooms.js b/webpack/init/rooms.js deleted file mode 100644 index f841612..0000000 --- a/webpack/init/rooms.js +++ /dev/null @@ -1,154 +0,0 @@ -/* (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 room type -* @id room ID (NULL uses get()) -* -* @return status 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 rooms data (raw format) -* -* {raw_format} -* [ -* { rid: , type: 'text', name: } -* { rid: , type: 'voice', name: } -* { rid: , type: 'video', name: } -* ] -* -* @return udpated 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 room type -* @id room ID -* NULL: current room || from URL (and set current) -* -* @return room 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); \ No newline at end of file diff --git a/webpack/lib/channel-controller.js b/webpack/lib/channel-controller.js new file mode 100644 index 0000000..da5fce5 --- /dev/null +++ b/webpack/lib/channel-controller.js @@ -0,0 +1,182 @@ +export class ChannelController{ + + /* (1) Construct default attributes + * + ---------------------------------------------------------*/ + constructor(){ + + /* (1) Set default active channel */ + this.current = null; + + /* (2) Initialize channel list */ + this.list = [ + { id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group', room: [] }, + { id: -2, link: null, label: 'add', sub: null, icon: 'add', room: [], add: 1 } + ]; + + } + + + /* (2) Channel navigation + * + * @channel_id Channel id (NULL uses get()) + * + * @return status Whether the navigation has been successful + * + ---------------------------------------------------------*/ + nav(channel_id=null){ + console.log(`channel.nav(${channel_id})`); + + /* (1) Get channel data */ + var channel = this.get(channel_id); + + /* (2) Try to load channel data */ + if( !this.load(channel.id) ) + return false; + + /* (3) Navigate vue-router */ + gs.get.router.push(`/channel/${channel.link}`); + + /* (4) Load rooms */ + gs.get.room.dump(channel.room); + + /* (5) Default open first 'text' room */ + gs.get.room.nav('text', gs.get.room.text.list[0].id); + + /* (6) Update active element */ + this.current = channel.id; + + /* (7) Log channel */ + console.log(`[channel.current] ${channel.link} (${channel.label})`); + + return true; + } + + + /* (3) Dump/Update channel data + * + * @channels Channels data + * + * @return udpated Whether channels have been updated + * + ---------------------------------------------------------*/ + dump(channels){ + console.log(`channel.dump([${channels instanceof Array?channels.length:0}])`); + + /* (1) Check @channels type */ + if( !(channels instanceof Array) ) + return false; + + /* (2) Store LAST item */ + let last_item = this.list.pop(); + + /* (3) Clear list (except FIRST) */ + this.list.splice(1); + + /* (4) Apply new channels */ + for(let c of channels) + this.list.push(c); + + /* (5) Restore LAST */ + this.list.push(last_item); + + return true; + + } + + + /* (4) Get channel data + * + * @channel_id Channel ID + * NULL: current channel || from URL (and set current) + * + * @return channel Channel data + * + ---------------------------------------------------------*/ + get(channel_id=null){ + // console.log(`channel.get(${channel_id})`); + + if( channel_id === null ){ + + /* (1) Get @current channel + ---------------------------------------------------------*/ + /* (1) If @current is set */ + if( !isNaN(this.current) ){ + + /* (2) Return matching id in list */ + for( let c of this.list ){ + + if( c.id === this.current ) + return c; // exit point + + } + + } + + + /* (2) Get from URL + ---------------------------------------------------------*/ + /* (1) If vue-router has @link param */ + if( gs.get.router.history.current.params.link ){ + + /* (2) Extract @link */ + let link = gs.get.router.history.current.params.link; + + /* (3) Return matching link in list */ + for( let c of this.list ){ + + if( c.link === link ){ + + this.current = c.id; // set @current + return c; // exit point + + } + + } + + } + + } + + + /* (3) Get channel data + ---------------------------------------------------------*/ + /* (1) Return channel matching id */ + for( let c of this.list ) + if( c.id === channel_id ) + return c; // exit point + + /* (2) Return default: if ID not found */ + this.current = this.list[0].id; + return this.list[0]; + + } + + + /* (5) Fetch channel data + * + * @channel_id Channel ID + * + * @return fetched Whether channel data have been fetched + * + ---------------------------------------------------------*/ + load(channel_id=null){ + console.log(`channel.load(${channel_id})`); + + /* (1) Exit if invalid @channel_id */ + if( isNaN(channel_id) ) + return false; + + /* (2) Call API to get data */ + setTimeout(() => { + + let fetched = require('../mockup/api-channel-init.json'); + gs.get.main = fetched; + + }, 500); + + return true; + + } + +} \ No newline at end of file diff --git a/webpack/lib/content-controller.js b/webpack/lib/content-controller.js new file mode 100644 index 0000000..7ac0f45 --- /dev/null +++ b/webpack/lib/content-controller.js @@ -0,0 +1,22 @@ +export class ContentController{ + + /* (1) Construct default attributes + * + ---------------------------------------------------------*/ + constructor(){ + + /* (1) Initialize content data */ + this.messages = []; + this.users = []; + + } + + + /* (2) Getters + * + ---------------------------------------------------------*/ + get cid(){ return gs.get.channel.current; } + get rid(){ return gs.get.room.text.current; } + + +} \ No newline at end of file diff --git a/webpack/lib/room-controller.js b/webpack/lib/room-controller.js new file mode 100644 index 0000000..3ebdb05 --- /dev/null +++ b/webpack/lib/room-controller.js @@ -0,0 +1,150 @@ +export class RoomController{ + + + /* (1) Construct default attributes + * + ---------------------------------------------------------*/ + constructor(){ + + /* (1) Init available @room sets */ + this.text = { list: [], current: 0, visible: true }; + this.voice = { list: [], current: null, visible: true }; + + } + + + /* (2) room navigation + * + * @type room type + * @id room ID (NULL uses get()) + * + * @return status Whether the navigation has been successful + * + ---------------------------------------------------------*/ + nav(type=null, id=null){ + console.log(`room.nav(${type}, ${id})`); + + /* (1) Try to get current room from id */ + let room = this.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; + + } + + + /* (3) Dump/Update room data (raw format -> tree structure) + * + * @rooms rooms data (raw format) + * + * {raw_format} + * [ + * { rid: , type: 'text', name: } + * { rid: , type: 'voice', name: } + * { rid: , type: 'video', name: } + * ] + * + * @return udpated Whether rooms have been updated + * + ---------------------------------------------------------*/ + dump(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; + + } + + + /* (4) Get room data + * + * @type room type + * @id room ID + * NULL: current room || from URL (and set current) + * + * @return room room data + * + ---------------------------------------------------------*/ + get(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; + + } + + +} \ No newline at end of file diff --git a/webpack/main.js b/webpack/main.js index f93c67e..004597e 100644 --- a/webpack/main.js +++ b/webpack/main.js @@ -34,7 +34,7 @@ console.log(`[channel.URL] ${initial_link}`); setTimeout(() => { /* (2) Fetch data */ - gs.get.channel.dump( require('./mockup/channels.json') ); + gs.get.channel.dump( require('./mockup/api-channels.json') ); /* (3) Find if @link matches */ var redirect_id = null; diff --git a/webpack/vue/channel.vue b/webpack/vue/channel.vue index 9aed328..8e65a97 100644 --- a/webpack/vue/channel.vue +++ b/webpack/vue/channel.vue @@ -3,7 +3,7 @@
-
{{ gs.rfunc.get('text') ? gs.rfunc.get('text').name : '?' }}
+
{{ gs.room.get('text') ? gs.room.get('text').name : '?' }}
diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue index 0b98e72..4722bd3 100644 --- a/webpack/vue/dialog.vue +++ b/webpack/vue/dialog.vue @@ -18,7 +18,7 @@
  • {{ r.name }}
  • + @click='gs.room.nav(r.type, r.id)'>{{ r.name }}