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

public_html/index.html

@@ -18,7 +18,7 @@
 			<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
 
 		<!-- 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 -->

webpack/common.js

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

webpack/lib/popup-controller.js

@@ -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(); }
+		}
+
+
+	}
+
+}

webpack/lib/room-controller.js

@@ -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;
+
+	}
+
+
 
 }

webpack/vue/dialog.vue

@@ -17,7 +17,7 @@
 					@click='rooms.visible=!rooms.visible'>
 						{{ type }} <span>rooms</span>
 					</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>
 					<li v-for='r in rooms.list'
 						:class='rooms.current==r.id?`active`:``'

webpack/vue/wrapper.vue

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