[lib.popup-controller] added [lib.room-controller] create() method [vue.wrapper] popup now works

This commit is contained in:
xdrm-brackets 2018-03-22 19:13:52 +01:00
parent 1dd2db9d79
commit e7ffcfc152
6 changed files with 66 additions and 15 deletions

View File

@ -18,7 +18,7 @@
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'> <link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
<!-- FONT --> <!-- FONT -->
<!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Arvo|Exo+2" rel="stylesheet"> --> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- BODY --> <!-- BODY -->

View File

@ -1,6 +1,7 @@
import {GlobalStore} from './lib/gstore' import {GlobalStore} from './lib/gstore'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import routes from './routes' import routes from './routes'
import {PopupController} from './lib/popup-controller'
import {ContentController} from './lib/content-controller' import {ContentController} from './lib/content-controller'
import {RoomController} from './lib/room-controller' import {RoomController} from './lib/room-controller'
import {ChannelController} from './lib/channel-controller' import {ChannelController} from './lib/channel-controller'
@ -26,11 +27,14 @@ gs.set('router', new VueRouter({
/* (2) Main components /* (2) Main components
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize content management */ /* (1) Initialize popup management */
gs.set('popup', new PopupController());
/* (2) Initialize content management */
gs.set('content', new ContentController()); gs.set('content', new ContentController());
/* (2) Initialize rooms & room menu */ /* (3) Initialize rooms & room menu */
gs.set('room', new RoomController()); gs.set('room', new RoomController());
/* (3) Initialize channels & channel menu */ /* (4) Initialize channels & channel menu */
gs.set('channel', new ChannelController()); gs.set('channel', new ChannelController());

View File

@ -0,0 +1,20 @@
export class PopupController{
/* (1) Construct default attributes
*
---------------------------------------------------------*/
constructor(){
/* (1) Popups */
this.croom = {
active: false,
type: 'text',
name: '',
reset(){ this.active = false; this.type = 'text'; this.name = ''; },
submit(){ gs.get.room.create(this.type, this.name) && this.reset(); }
}
}
}

View File

@ -147,5 +147,34 @@ export class RoomController{
} }
/* (5) Create a new room
*
* @type<int> room type
* @name<String> room name
*
* @return created<bool> Whether the room has been created
*
---------------------------------------------------------*/
create(type=null, name=null){
/* (1) Manage invalid @type */
if( typeof type !== 'string' || this[type] == null )
return false;
/* (2) Manage invalid @name */
if( typeof name !== 'string' )
return false;
/* (3) Try to create room in API */
console.log(`POST /channel/${gs.get.content.cid}/room/${type}`);
/* (4) Add room -> update VueJS */
return true;
}
} }

View File

@ -17,7 +17,7 @@
@click='rooms.visible=!rooms.visible'> @click='rooms.visible=!rooms.visible'>
{{ type }} <span>rooms</span> {{ type }} <span>rooms</span>
</div> </div>
<div class='add' data-title='Create channel' @click='gs.room.create()'></div> <div class='add' @click='gs.popup.croom.active=true' data-title='Create channel'></div>
<ul> <ul>
<li v-for='r in rooms.list' <li v-for='r in rooms.list'
:class='rooms.current==r.id?`active`:``' :class='rooms.current==r.id?`active`:``'

View File

@ -14,23 +14,21 @@
<router-view></router-view> <router-view></router-view>
<!-- Pop-up --> <!-- Pop-up -->
<div class='popup'> <div class='popup' v-show='gs.popup.croom.active'>
<span class='header'>Create text channel</span> <span class='header'>Create {{ gs.popup.croom.type }} channel</span>
<span class='body'> <span class='body'>
<label for='channel_name'>Channel Name</label> <label for='channel_name'>Channel Name</label>
<input type='text' name='channel_name'> <input type='text' name='channel_name' v-model='gs.popup.croom.name'>
<label for='channel_name'>Channel Type</label> <label for='channel_name'>Channel Type</label>
<div class='select'> <span class='select-box' @click='gs.popup.croom.type=`text`' :data-selected='gs.popup.croom.type==`text`?1:0' data-type='text'>Text Channel</span>
<span class='select-box' @click='selected=0' :data-selected='selected==0?1:0' data-type='text'>Text Channel</span> <span class='select-box' @click='gs.popup.croom.type=`voice`' :data-selected='gs.popup.croom.type==`voice`?1:0' data-type='voice'>Voice Channel</span>
<span class='select-box' @click='selected=1' :data-selected='selected==1?1:0' data-type='voice'>Voice Channel</span>
</div>
</span> </span>
<span class='footer'> <span class='footer'>
<button>Cancel</button> <button @click='gs.popup.croom.reset()'>Cancel</button>
<button>Create Channel</button> <button @click='gs.popup.croom.submit()'>Create Channel</button>
</span> </span>
</div> </div>
@ -46,7 +44,7 @@
name: 'wrapper-', name: 'wrapper-',
data(){ return { gs: gs.get, selected: 1}; }, data(){ return { gs: gs.get }; },
components: { components: {
'MenuComp': menu_vue, 'MenuComp': menu_vue,