+created base html/css/js (added gstore + default templates)

public_html/page/home.php

@@ -13,6 +13,7 @@
 	<link rel='shortcut icon' href='/favicon.ico'>
 
 	<!-- CSS dependencies -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 	<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>

webpack/data/common.js

@@ -0,0 +1,41 @@
+import {GlobalStore} from '../lib/gstore'
+
+window.gstore = new GlobalStore();
+
+
+/* (1) Main components
+---------------------------------------------------------*/
+/* (1) Header */
+gstore.add('header_title', 'ndli1718');
+
+/* (2) Menu */
+gstore.add('menu_item', {
+	dashboard: {
+		label: 'Accueil',
+		theme: 'dashboard'
+	}, emergency:      {
+		label: 'Urgences',
+		theme: 'emergency'
+	}, event:     {
+		label: 'Signalements',
+		theme: 'event'
+	}, inbox:     {
+		label: 'Messagerie',
+		theme: 'inbox'
+	}
+});
+
+gstore.add('URI', document.URL.replace(/^(?:\/\/|[^\/]+)*/, ''));
+gstore.add('is_local', document.URL.replace(/^http:\/\/([^\/]+)(?::\d+)?\/?.*$/, '$1') == 'ptut.com');
+gstore.add('min_menu', false);
+
+// // Proccess current page from url
+// if( /^\/(\w+)(?:\/?.*)$/.test(gstore.data.URI) ){
+// 	var mi_keys = Object.keys( gstore.data.menu_item );
+
+// 	// if current page exists
+// 	if( !!~mi_keys.indexOf(RegExp.$1) ) gstore.add('menu_item_active', RegExp.$1);
+// 	else                                gstore.add('menu_item_active', 'dashboard');
+
+// }else
+// 	gstore.add('menu_item_active', 'dashboard');

webpack/data/home.js

@@ -0,0 +1 @@
+gstore.add('blo', 12);

webpack/lib/gstore.js

@@ -0,0 +1,14 @@
+/* classe GlobalStore */
+export class GlobalStore{
+
+	constructor(){
+
+		this.get = {};
+
+	}
+
+	add(field, value){
+		this.get[field] = value;
+	}
+
+}

webpack/page/home.js

@@ -9,13 +9,17 @@ import {APIClient}       from '../lib/api-client'
 /* (3) Vues */
 import wrapper_vue from '../vue/wrapper.vue'
 
+/* (4) Data */
+require('../data/common');
+require('../data/home');
+
+
 
 
 /* (2) Initialisation
 ---------------------------------------------------------*/
 /* (1) API */
-window.api = new APIClient(gstore.data.is_local ? 'http://ptut.com:8080/api/v/1.0/' : 'https://ptut.xdrm.io/api/v/1.0/');
-
+window.api = new APIClient(gstore.get.is_local ? 'http://ptut.com:8080/api/v/1.0/' : 'https://ptut.xdrm.io/api/v/1.0/');
 
 /* (2) Render view */
 new Vue({

webpack/scss/layout.scss

@@ -0,0 +1,20 @@
+* {
+	margin: none;
+	padding: none;
+}
+
+body{
+	position: fixed;
+	display: block;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	background: #ccc;
+
+	font-size: 16px;
+	font-family: 'Open Sans';
+
+	color: #333;
+}

webpack/vue/header.vue

@@ -0,0 +1,25 @@
+<template>
+
+	<div id='HEADER'>
+
+		<!-- Header Icon+Title -->
+		<div id='header-icon'>
+			<div class='header-title'>{{ gstore.header_title }}</div>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'HEADER',
+	data(){
+	    return {
+	        gstore:			gstore.get,
+			is_connected:	_SERVER.session.connected
+	    };
+	}
+}
+</script>

webpack/vue/menu.vue

@@ -0,0 +1,28 @@
+<template>
+
+	<div id='MENU'>
+
+		<div v-for='(item, index) in gstore.menu_item' class='menu-item-wrapper'>
+
+			<div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate(index)' :data-theme='item.theme'>
+			<span>{{ item.label }}</span>
+			</div>
+
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'MENU',
+	data(){ return { gstore: gstore.get }; },
+	methods: {
+		navigate(uri){
+			console.log("Navigate to "+uri);
+		}
+	}
+}
+</script>

webpack/vue/wrapper.vue

@@ -0,0 +1,28 @@
+<template>
+	<div id="WRAPPER">
+
+		<!-- Header -->
+		<header-comp></header-comp>
+
+		<!-- Menu -->
+		<menu-comp></menu-comp>
+
+	</div>
+</template>
+
+
+<script>
+
+	import header_vue		from './header.vue'
+	import menu_vue			from './menu.vue'
+
+	export default {
+		name: 'wrapper',
+		data(){ return { gstore: gstore.get }; },
+		components: {
+			'HeaderComp':     header_vue,
+			'MenuComp':       menu_vue
+		}
+	}
+
+</script>