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

This commit is contained in:
xdrm-brackets 2018-02-20 15:53:31 +01:00
parent 6669ff7d8b
commit a493db2bf2
9 changed files with 164 additions and 2 deletions

View File

@ -13,6 +13,7 @@
<link rel='shortcut icon' href='/favicon.ico'> <link rel='shortcut icon' href='/favicon.ico'>
<!-- CSS dependencies --> <!-- 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/font-loader.css'>
<link rel='stylesheet' type='text/css' href='/css/layout.css'> <link rel='stylesheet' type='text/css' href='/css/layout.css'>
<link rel='stylesheet' type='text/css' href='/css/menu.css'> <link rel='stylesheet' type='text/css' href='/css/menu.css'>

41
webpack/data/common.js Normal file
View File

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

1
webpack/data/home.js Normal file
View File

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

14
webpack/lib/gstore.js Normal file
View File

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

View File

@ -9,13 +9,17 @@ import {APIClient} from '../lib/api-client'
/* (3) Vues */ /* (3) Vues */
import wrapper_vue from '../vue/wrapper.vue' import wrapper_vue from '../vue/wrapper.vue'
/* (4) Data */
require('../data/common');
require('../data/home');
/* (2) Initialisation /* (2) Initialisation
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) API */ /* (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 */ /* (2) Render view */
new Vue({ new Vue({

View File

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

25
webpack/vue/header.vue Normal file
View File

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

28
webpack/vue/menu.vue Normal file
View File

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

View File

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