xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initialisation du todo.md + debut refactor CSS

This commit is contained in:
xdrm-brackets 2016-04-05 15:08:42 +02:00
parent 28b8444700
commit 3a6ac797f7
19 changed files with 479 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
config/views.json
View File

@ -1,9 +1,6 @@
[ [
"dashboard", "dashboard",
"profile", "input",
"machines",
"users",
"groups",
"analytics", "analytics",
"settings" "settings"
] ]

25
css/constants.scss
View File

@ -1,5 +1,24 @@
/* COULEUR DU THEME */ /* [1] COULEURS
$theme-color: #e63321; =========================================================*/
/* (1) COULEURS DU THEME $DEFAULT */
$theme-bg: #e8e8e8;
$theme-bg-primary: #ffffff;
$theme-fg: #515151;
$theme-fg-primary: #53d192;
/* (2) COULEURS DE THEME $DARK */
$dark-bg: #32323a;
$dark-bg-primary: #29282e;
$dark-fg: #dddddd;
$dark-fg-primary: #ffffff;
/* [2] DIMENSIONS
=========================================================*/
/* (1) Layout de base */
$menu-side-width: 15em;
$header-height: 4.5em;
/* COULEUR DU SOUS-MENU */ /* COULEUR DU SOUS-MENU */
$sub-menu-color: #5b5e63; $sub-menu-color: #5b5e63;
@ -15,7 +34,7 @@ $form-invalid-color: #d52918;
/* GESTION DES LONGUEURS */ /* GESTION DES LONGUEURS */
$menu-side-width: 4em; // $menu-side-width: 4em;
// POUR RESOURCE_DISPATCHER // POUR RESOURCE_DISPATCHER

2
css/header.css
View File

@ -1,2 +1,2 @@
#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#bf2515;background-image:url("/f/svg/icon/st");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#a82013}#WRAPPER>#HEADER.loading>.icon{background-image:url("/f/svg/loader/st");background-size:70% 70%}
/*# sourceMappingURL=header.css.map */ /*# sourceMappingURL=header.css.map */

4
css/header.css.map
View File

@ -1,7 +1,7 @@
{ {
"version": 3, "version": 3,
"mappings": "AAKC,sBAAS,CACR,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CCOU,GAAG,CDNlB,MAAM,CCMS,GAAG,CDJnB,gBAAgB,CAAE,OAAwB,CAC1C,gBAAgB,CAAE,qBAAqB,CACvC,mBAAmB,CAAE,aAAa,CAClC,iBAAiB,CAAE,SAAS,CAC5B,eAAe,CAAE,OAAO,CAExB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,OAAO,CAGnB,4BAAO,CACN,gBAAgB,CAAE,OAAwB,CAM5C,8BAAiB,CAChB,gBAAgB,CAAE,uBAAuB,CACzC,eAAe,CAAE,OAAO", "mappings": "",
"sources": ["header.scss","constants.scss"], "sources": [],
"names": [], "names": [],
"file": "header.css" "file": "header.css"
} }

50
css/header.scss
View File

@ -2,36 +2,36 @@
#WRAPPER > #HEADER{ #WRAPPER > #HEADER{
// Icone du site // // Icone du site
& > .icon{ // & > .icon{
display: block; // display: block;
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
width: $menu-side-width; // width: $menu-side-width;
height: $menu-side-width; // height: $menu-side-width;
background-color: darken($theme-color, 10); // background-color: darken($theme-fg-primary, 10);
background-image: url('/f/svg/icon/st'); // background-image: url('/f/svg/icon/st');
background-position: center center; // background-position: center center;
background-repeat: no-repeat; // background-repeat: no-repeat;
background-size: 50% 50%; // background-size: 50% 50%;
cursor: pointer; // cursor: pointer;
transition: all .3s; // transition: all .3s;
// @hover // // @hover
&:hover{ // &:hover{
background-color: darken($theme-color, 15); // background-color: darken($theme-fg-primary, 15);
} // }
} // }
/* Animation de chargement qudnd chargement ajax */ // /* Animation de chargement qudnd chargement ajax */
&.loading > .icon{ // &.loading > .icon{
background-image: url('/f/svg/loader/st'); // background-image: url('/f/svg/loader/st');
background-size: 70% 70%; // background-size: 70% 70%;
} // }
} }

2
css/layout.css
View File

@ -1,2 +1,2 @@
#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #bf2515;background-color:#e63321;z-index:10}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#CONTAINER{display:flex;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;flex-direction:row;justify-content:space-between;overflow-x:none;overflow-y:auto} #WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#e8e8e8;font-family:'Open Sans'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:15em;width:100%;height:calc( 4.5em - 1px );border-bottom:1px solid #e5e5e5;background-color:#fff;z-index:10}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:0;left:0;width:15em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#32323a;transition:all .3s;z-index:9}#WRAPPER>#CONTAINER{display:flex;position:absolute;top:4.5em;left:15em;width:calc( 100% - 15em - 2*1em );height:calc( 100% - 15em - 2*1em );padding:1em;flex-direction:row;justify-content:space-between;overflow-x:none;overflow-y:auto}
/*# sourceMappingURL=layout.css.map */ /*# sourceMappingURL=layout.css.map */

2
css/layout.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAEA,QAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAEb,gBAAgB,CAAE,OAAO,CAEzB,WAAW,CAAE,QAAQ,CAKrB,gBAAW,CACV,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,iBAAiC,CAE1C,aAAa,CAAE,iBAAkC,CAEjD,gBAAgB,CC1BJ,OAAO,CD4BnB,OAAO,CAAE,EAAE,CAQZ,mBAAc,CACb,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CCvBY,GAAG,CDwBlB,IAAI,CAAE,CAAC,CACP,KAAK,CCzBU,GAAG,CD0BlB,MAAM,CAAE,IAAI,CAEb,UAAU,CAAE,gBAAgB,CAE5B,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,OAAO,CAEnB,OAAO,CAAE,CAAC,CAMX,mBAAc,CACb,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,QAAQ,CACjB,GAAG,CC3CY,GAAG,CD4ClB,IAAI,CC5CW,GAAG,CD6ClB,KAAK,CAAE,0BAA0C,CACjD,MAAM,CAAE,0BAA0C,CACnD,OAAO,CAAE,GAAG,CAGZ,cAAc,CAAE,GAAG,CACnB,eAAe,CAAE,aAAa,CAE9B,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI", "mappings": "AAEA,QAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,KAAK,CACd,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CAEb,gBAAgB,CCPE,OAAO,CDSzB,WAAW,CAAE,WAAW,CAKxB,gBAAW,CACV,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,IAAI,CCHW,IAAI,CDInB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,mBAA+B,CAExC,aAAa,CAAE,iBAA8B,CAE7C,gBAAgB,CCvBC,IAAO,CDyBxB,OAAO,CAAE,EAAE,CAQZ,mBAAc,CACb,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,KAAK,CCxBU,IAAI,CDyBnB,MAAM,CAAE,IAAI,CAEb,UAAU,CAAE,gBAAgB,CAE5B,gBAAgB,CCtCA,OAAO,CDwCvB,UAAU,CAAE,OAAO,CAEnB,OAAO,CAAE,CAAC,CAMX,mBAAc,CACb,OAAO,CAAE,IAAI,CACb,QAAQ,CAAE,QAAQ,CACjB,GAAG,CCzCY,KAAK,CD0CpB,IAAI,CC3CW,IAAI,CD4CnB,KAAK,CAAE,2BAA0C,CACjD,MAAM,CAAE,2BAA0C,CACnD,OAAO,CAAE,GAAG,CAGZ,cAAc,CAAE,GAAG,CACnB,eAAe,CAAE,aAAa,CAE9B,UAAU,CAAE,IAAI,CAChB,UAAU,CAAE,IAAI",
"sources": ["layout.scss","constants.scss"], "sources": ["layout.scss","constants.scss"],
"names": [], "names": [],
"file": "layout.css" "file": "layout.css"

18
css/layout.scss
View File

@ -8,9 +8,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #edf0f5; background-color: $theme-bg;
font-family: 'Ubuntu'; font-family: 'Open Sans';
/* [1] Header de la page /* [1] Header de la page
@ -19,13 +19,13 @@
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: $menu-side-width;
width: 100%; width: 100%;
height: calc( #{$menu-side-width} - 1px ); height: calc( #{$header-height} - 1px );
border-bottom: 1px solid darken($theme-color, 10); border-bottom: 1px solid darken($theme-bg, 1);
background-color: $theme-color; background-color: $theme-bg-primary;
z-index: 10; z-index: 10;
@ -38,14 +38,14 @@
& > #MENU-SIDE{ & > #MENU-SIDE{
display: block; display: block;
position: absolute; position: absolute;
top: $menu-side-width; top: 0;
left: 0; left: 0;
width: $menu-side-width; width: $menu-side-width;
height: 100%; height: 100%;
box-shadow: 2px 1px 3px #ddd; box-shadow: 2px 1px 3px #ddd;
background-color: #fff; background-color: $dark-bg;
transition: all .3s; transition: all .3s;
@ -58,7 +58,7 @@
& > #CONTAINER{ & > #CONTAINER{
display: flex; display: flex;
position: absolute; position: absolute;
top: $menu-side-width; top: $header-height;
left: $menu-side-width; left: $menu-side-width;
width: calc( 100% - #{$menu-side-width} - 2*1em ); width: calc( 100% - #{$menu-side-width} - 2*1em );
height: calc( 100% - #{$menu-side-width} - 2*1em ); height: calc( 100% - #{$menu-side-width} - 2*1em );

2
css/menu-side.css
View File

@ -1,2 +1,2 @@
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:calc( 4em / 2.5 );height:calc( 4em / 2.5 );transition:fill .3s;pointer-events:none}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( 4em / 4 - 2*.3em );left:calc( 4em * 1.15 - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg #stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stylisable{fill:#000 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg #stroke-stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stroke-stylisable{stroke:#000 !important} #WRAPPER>#MENU-SIDE>span{display:block;position:relative;width:calc( 100% - 2*1em - 2*1.5em );padding:1.3em 1.5em;padding-left:calc( 1.5em + 2*1em );border-radius:2px;background:#32323a;color:#ddd;text-shadow:1px 1px 0 #26262c;transition:color .3s, background .3s, box-shadow .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span>svg,#WRAPPER>#MENU-SIDE>span>svg *{position:absolute;top:calc( 50% - 1em/2 );left:1.5em;width:1em;height:1em;fill:#ddd !important;transition:fill .3s ease-in-out}#WRAPPER>#MENU-SIDE>span:hover{box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:hover>svg,#WRAPPER>#MENU-SIDE>span:hover>svg *{fill:#53d192 !important}#WRAPPER>#MENU-SIDE>span:first-child{width:100%;height:4.5em;padding:0}
/*# sourceMappingURL=menu-side.css.map */ /*# sourceMappingURL=menu-side.css.map */

2
css/menu-side.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAIC,mCAAmB,CAClB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,wCAAwD,CAC/D,MAAM,CAAE,wCAAwD,CAGjE,MAAM,CAAE,QAAQ,CAChB,OAAO,CAAE,KAAK,CAEd,MAAM,CAAE,uBAAuB,CAC/B,aAAa,CAAE,GAAG,CAWlB,KAAK,CAAE,OAAO,CACd,WAAW,CAAE,wCAAwD,CAErE,UAAU,CAAE,qBAAqB,CAEjC,MAAM,CAAE,OAAO,CAZf,sCAAI,CACH,UAAU,CAAE,GAAG,CAEhB,sCAAI,CACH,aAAa,CAAE,GAAG,CAUnB,iFAAU,CACT,KAAK,CAAE,iBAAiC,CACxC,MAAM,CAAE,iBAAiC,CAKzC,UAAU,CAAE,QAAQ,CAEpB,cAAc,CAAE,IAAI,CAIrB,oDAAkB,CACjB,OAAO,CAAE,eAAe,CACxB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,wBAAwC,CAC7C,IAAI,CAAE,2BAA2C,CAClD,OAAO,CAAE,IAAI,CAEb,aAAa,CAAE,GAAG,CAElB,gBAAgB,CAAE,OAAO,CAEzB,KAAK,CAAE,OAAO,CACd,WAAW,CAAE,MAAM,CAEnB,UAAU,CAAE,aAAa,CAEzB,gBAAgB,CAAE,GAAG,CACrB,SAAS,CAAE,SAAS,CAKrB,oFACQ,CACP,KAAK,CCtEM,OAAO,CDuElB,YAAY,CAAE,OAAO,CACrB,UAAU,CAAE,mBAAmB,CAE/B,4GAAa,CACZ,SAAS,CAAE,SAAS,CACpB,KAAK,CAAE,IAAI,CAGZ,oHAAe,CACd,IAAI,CAAE,eAAe,CAGtB,kIAAsB,CACrB,MAAM,CAAE,eAAe", "mappings": "AAMC,wBAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,WAAW,CACpB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,GAAG,CAElB,UAAU,CCPM,OAAO,CDQvB,KAAK,CCNW,IAAO,CDOvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,yCAAyC,CAErD,MAAM,CAAE,OAAO,CAGf,2DAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,eAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,8BAAO,CACN,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC/BD,OAAO,CDgCtB,KAAK,CC9BU,IAAO,CD+BtB,WAAW,CAAE,iBAAqC,CAElD,uEAAkB,CACjB,IAAI,CAAE,kBAA4B,CASrC,oCAAoB,CACnB,KAAK,CAAE,IAAI,CACX,MAAM,CCtCU,KAAK,CDuCrB,OAAO,CAAE,CAAC",
"sources": ["menu-side.scss","constants.scss"], "sources": ["menu-side.scss","constants.scss"],
"names": [], "names": [],
"file": "menu-side.css" "file": "menu-side.css"

100
css/menu-side.scss
View File

@ -2,91 +2,61 @@
#WRAPPER > #MENU-SIDE{ #WRAPPER > #MENU-SIDE{
& > span[data-link]{ /* [1] Elements du menu
=========================================================*/
& > span{
display: block; display: block;
position: relative; position: relative;
width: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em ); width: calc( 100% - 2*1em - 2*1.5em );
height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
// padding: 1em; padding: 1.3em 1.5em;
margin: 2em .7em; padding-left: calc( 1.5em + 2*1em );
padding: .55em;
border: .01em solid transparent;
border-radius: 2px; border-radius: 2px;
background: $dark-bg;
color: $dark-fg;
text-shadow: 1px 1px 0 darken($dark-bg, 5);
// Decalage des elements du menu transition: color .3s, background .3s, box-shadow .3s;
&.mt{ // Margin Top
margin-top: 3em;
}
&.mb{ // Margin Bottom
margin-bottom: 3em;
}
color: #a2a2a2;
line-height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
transition: color .3s, border .3s;
cursor: pointer; cursor: pointer;
svg, svg *{ /* (1) Icone svg */
width: calc( #{$menu-side-width} / 2.5 ); & > svg, & > svg *{
height: calc( #{$menu-side-width} / 2.5 );
// stroke: none !important;
// fill: #777 !important;
transition: fill .3s;
pointer-events: none;
}
&[data-desc]:after{
content: attr(data-desc);
display: block;
position: absolute; position: absolute;
top: calc( #{$menu-side-width} / 4 - 2*.3em ); top: calc( 50% - 1em/2 );
left: calc( #{$menu-side-width} * 1.15 - 2*.3em ); left: 1.5em;
padding: .3em; width: 1em;
height: 1em;
border-radius: 3px;
background-color: #2a2a2a;
color: #e2e2e2;
white-space: nowrap;
transition: transform .1s;
transform-origin: 0 0;
transform: scaleX(0);
fill: $dark-fg !important;
transition: fill .3s ease-in-out;
} }
&:hover, /* (2) @hover -> survol souris */
&.active{ &:hover{
color: $theme-color; box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);
border-color: #e6e6e6;
box-shadow: inset 0 0 .5em #eee;
&:hover:after{ background-color: $dark-bg-primary;
transform: scaleX(1); color: $dark-fg-primary;
color: #fff; text-shadow: 1px 1px 0 darken($dark-bg-primary, 5);
}
svg #stylisable{ // pour les elements sauf le profil & > svg, & > svg *{
fill: #000 !important; fill: $theme-fg-primary !important;
}
svg #stroke-stylisable{ // pour le profil
stroke: #000 !important;
} }
} }
}
/* [2] Specification pour le logo
=========================================================*/
& > span:first-child{
width: 100%;
height: $header-height;
padding: 0;
} }

262
js/action-script.js
View File

@ -1,160 +1,167 @@
DOM = { /* [-1] On attend le chargement du document
WRAPPER: $('WRAPPER'), =========================================================*/
HEADER: $('HEADER'), // document.onload = function(){
MENUSIDE: $('MENU-SIDE'),
CONTAINER: $('CONTAINER')
};
/* [0] Instanciation
===========================================*/
var pageManager = new pageManagerClass();
pageManager.setPage(null, '/view', DOM.CONTAINER, ['profile', 'dashboard', 'machines', 'users', 'groups', 'analytics', 'settings'] );
var api = new APIClass('/api/'); DOM = {
WRAPPER: $('WRAPPER'),
HEADER: $('HEADER'),
MENUSIDE: $('MENU-SIDE'),
CONTAINER: $('CONTAINER')
};
/* [1] Toggle du sub-menu-side <-> navigation
===========================================*/
function navSubMenu(subsection){
/* [1] Format du param
------------------------------------------------*/
// Contient l'element courant
var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]');
// Contiendra l'element cible /* [0] Instanciation
var target = null; ===========================================*/
var pageManager = new pageManagerClass();
pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'input', 'analytics', 'settings'] );
// si @subsection est un element, on le prends var api = new APIClass('/api/');
target = (subsection instanceof Element) ? subsection : null;
// Si string, on trouve l'element correspondant
target = (typeof subsection == 'string') ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target;
// Si rien trouve, on prend le premier element correspondant a la premiere page /* [1] Toggle du sub-menu-side <-> navigation
target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target; ===========================================*/
function navSubMenu(subsection){
/* [1] Format du param
------------------------------------------------*/
// Contient l'element courant
var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]');
// Si le param n'est toujours pas bon, on retourne une erreur // Contiendra l'element cible
if( target == null ) return false; var target = null;
/* [2] Gestion de l'affichage de l'element // si @subsection est un element, on le prends
------------------------------------------------*/ target = (subsection instanceof Element) ? subsection : null;
// On desactive l'element courant
if( current != null )
current.remClass('active');
// On cache les sections visibles // Si string, on trouve l'element correspondant
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active'); target = (typeof subsection == 'string') ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target;
for( var i = 0 ; i < visibleSections.length ; i++ )
visibleSections[i].remClass('active');
// On active le nouveau // Si rien trouve, on prend le premier element correspondant a la premiere page
if( target != null ){ target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target;
target.addClass('active');
// On affiche la section associee // Si le param n'est toujours pas bon, on retourne une erreur
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]'); if( target == null ) return false;
if( targetSection != null )
targetSection.addClass('active'); /* [2] Gestion de l'affichage de l'element
------------------------------------------------*/
// On desactive l'element courant
if( current != null )
current.remClass('active');
// On cache les sections visibles
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
for( var i = 0 ; i < visibleSections.length ; i++ )
visibleSections[i].remClass('active');
// On active le nouveau
if( target != null ){
target.addClass('active');
// On affiche la section associee
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
if( targetSection != null )
targetSection.addClass('active');
}
/* [3] Gestion de pageManager
------------------------------------------------*/
// Si element, on recupere le data-link
var page = null;
// Si erreur, on retourne FALSE
if( !target.getData('sublink') ) return false
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
// On met a jour la variable page-manager si data-link trouve
pageManager.vars[0] = target.getData('sublink');
if( mustRefresh )
// navMenu(pageManager.page);
pageManager.updateURL();
} }
/* [3] Gestion de pageManager
------------------------------------------------*/
// Si element, on recupere le data-link
var page = null;
// Si erreur, on retourne FALSE
if( !target.getData('sublink') ) return false
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
// On met a jour la variable page-manager si data-link trouve
pageManager.vars[0] = target.getData('sublink');
if( mustRefresh )
// navMenu(pageManager.page);
pageManager.updateURL();
}
/* [2] Toggle du side-menu <-> navigation
===========================================*/
function navMenu(section){
/* [2] Toggle du side-menu <-> navigation /* [1] Format du param
===========================================*/ ------------------------------------------------*/
function navMenu(section){ // Contient l'element courant
var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');
/* [1] Format du param // Contiendra l'element cible
------------------------------------------------*/ var target = null;
// Contient l'element courant
var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');
// Contiendra l'element cible // si @section est un element, on le prends
var target = null; target = (section instanceof Element) ? section : null;
// si @section est un element, on le prends // Si string, on trouve l'element correspondant
target = (section instanceof Element) ? section : null; target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
// Si string, on trouve l'element correspondant // Si rien trouve, on prend le premier element correspondant a la premiere page
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target; target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;
// Si rien trouve, on prend le premier element correspondant a la premiere page // Si le param n'est toujours pas bon, on retourne une erreur
target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target; if( target == null ) return false;
// Si le param n'est toujours pas bon, on retourne une erreur /* [2] Gestion de l'affichage de l'element
if( target == null ) return false; ------------------------------------------------*/
// On desactive l'element courant
if( current != null )
current.remClass('active');
// On active le nouveau
if( target != null )
target.addClass('active');
/* [2] Gestion de l'affichage de l'element /* [3] Gestion de pageManager
------------------------------------------------*/ ------------------------------------------------*/
// On desactive l'element courant // Si element, on recupere le data-link
if( current != null ) var page = null;
current.remClass('active');
// On active le nouveau
if( target != null )
target.addClass('active');
/* [3] Gestion de pageManager // On charge la page si data-link trouve
------------------------------------------------*/ if( target.getData('link') ){
// Si element, on recupere le data-link DOM.HEADER.addClass('loading'); // Animation de chargement
var page = null;
// On charge la page si data-link trouve pageManager.setPage( target.getData('link') );
if( target.getData('link') ){
DOM.HEADER.addClass('loading'); // Animation de chargement
pageManager.setPage( target.getData('link') ); pageManager.activeXHR.addEventListener('loadend', function(){
pageManager.activeXHR.addEventListener('loadend', function(){ // On retire l'icone de chargement
DOM.HEADER.remClass('loading');
// On retire l'icone de chargement // On gere la navigation du sous-menu (si defini, utilise)
DOM.HEADER.remClass('loading'); var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null;
if( subSectionExists ) // Si le lien du menu associe existe
// On gere la navigation du sous-menu (si defini, utilise) navSubMenu(pageManager.vars[0]); // on charge la page associee
var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null; else // sinon
if( subSectionExists ) // Si le lien du menu associe existe navSubMenu(null); // on charge le lien par defaut
navSubMenu(pageManager.vars[0]); // on charge la page associee
else // sinon
navSubMenu(null); // on charge le lien par defaut
// GESTION DE LA NAVIGATION DU SOUS-MENU // GESTION DE LA NAVIGATION DU SOUS-MENU
document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){ document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){
var target = e.target; var target = e.target;
while( target != document.body && !target.getData('sublink') ) while( target != document.body && !target.getData('sublink') )
target = target.parentNode; target = target.parentNode;
if( target.getData('sublink') )
navSubMenu(target);
}, false);
if( target.getData('sublink') )
navSubMenu(target);
}, false); }, false);
}
}, false); }navMenu(pageManager.page);
}
}navMenu(pageManager.page);
@ -175,19 +182,20 @@ function navMenu(section){
/* [4] Gestion de la navigation (physique) /* [4] Gestion de la navigation (physique)
===========================================*/ ===========================================*/
DOM.MENUSIDE.addEventListener('click', function(e){ DOM.MENUSIDE.addEventListener('click', function(e){
var target = e.target; var target = e.target;
// On remonte dans les parents au bon niveau // On remonte dans les parents au bon niveau
while( target != document.body && !target.getData('link') ) while( target != document.body && !target.getData('link') )
target = target.parentNode; target = target.parentNode;
// Si on a trouve l'element, on l'utilise pour la page // Si on a trouve l'element, on l'utilise pour la page
if( target.getData('link') ) if( target.getData('link') )
navMenu(target.getData('link')); navMenu(target.getData('link'));
}, false); }, false);
// }

64
src/static/menu-side/analytics.svg
View File

@ -7,25 +7,27 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
height="32" height="32"
viewBox="0 0 32 32"
id="svg4167"
version="1.1" version="1.1"
viewBox="0 0 31.999922 32" inkscape:version="0.91 r13725"
width="31.999922"
id="svg3043"
inkscape:version="0.48.4 r9939"
sodipodi:docname="analytics.svg"> sodipodi:docname="analytics.svg">
<metadata <metadata
id="metadata3054"> id="metadata4177">
<rdf:RDF> <rdf:RDF>
<cc:Work <cc:Work
rdf:about=""> rdf:about="">
<dc:format>image/svg+xml</dc:format> <dc:format>image/svg+xml</dc:format>
<dc:type <dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title /> <dc:title></dc:title>
</cc:Work> </cc:Work>
</rdf:RDF> </rdf:RDF>
</metadata> </metadata>
<defs
id="defs4175" />
<sodipodi:namedview <sodipodi:namedview
pagecolor="#ffffff" pagecolor="#ffffff"
bordercolor="#666666" bordercolor="#666666"
@ -37,46 +39,26 @@
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1056" inkscape:window-height="1056"
id="namedview3052" id="namedview4173"
showgrid="false" showgrid="false"
inkscape:zoom="17.236742"
inkscape:cx="24.22397"
inkscape:cy="11.627592"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg3043"
fit-margin-top="0" fit-margin-top="0"
fit-margin-left="0" fit-margin-left="0"
fit-margin-right="0" fit-margin-right="0"
fit-margin-bottom="0" fit-margin-bottom="0"
inkscape:snap-page="true" /> inkscape:snap-page="true"
<defs inkscape:zoom="14.90625"
id="defs3047" /> inkscape:cx="13.970499"
inkscape:cy="20.087544"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg4167" />
<g <g
id="Icons new Arranged Names Color" transform="matrix(0.03125,0,0,0.03125,0,-1)"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" id="g4169">
transform="translate(945.43808,521.49309)"> <path
<g d="m 0,832 1024,0 0,128 -1024,0 z m 128,-256 128,0 0,192 -128,0 z m 192,-256 128,0 0,448 -128,0 z m 192,192 128,0 0,256 -128,0 z m 192,-384 128,0 0,640 -128,0 z"
id="52 Cloud Sync" id="path4171"
style="fill:#000000;fill-opacity:1"> inkscape:connector-curvature="0" />
<path
d="m 16,26 c 2.418953,0 4.436703,-1.717753 4.899982,-4 l 2.029129,0 C 22.443885,25.392291 19.526474,28 16,28 13.555527,28 11.403706,26.747009 10.151757,24.848243 L 9,26 9,25 9,23 9,22 9.0708888,22 11.100018,22 13,22 11.608137,23.391863 C 12.456236,24.945806 14.105008,26 16,26 z M 20.899982,20 20,20 19,20 20.391875,18.608159 C 19.543801,17.054217 17.895013,16 16,16 c -2.418953,0 -4.436703,1.717753 -4.899982,4 L 9.0708888,20 C 9.5561148,16.607709 12.473526,14 16,14 c 2.444487,0 4.59632,1.253007 5.848271,3.151799 L 23,16.000098 23,20 22.929111,20 z M 0,19 C 0,16.782838 1.2075399,14.841641 3.0021135,13.802995 3.1069062,8.9234028 7.0952729,5 12,5 15.233498,5 18.068721,6.7052116 19.65547,9.2654333 20.240206,9.092705 20.859277,9 21.5,9 c 2.784553,0 5.16015,1.750949 6.085843,4.211897 C 30.129704,13.907454 32,16.235367 32,19 c 0,3.306966 -2.68637,6 -6.000176,6 l -1.935344,0 c 0.312341,-0.628505 0.553371,-1.298702 0.712504,-2 l 1.226177,0 C 28.210554,23 30,21.204644 30,19 30,16.790861 28.20588,15 26.003161,15 l -0.03062,0 C 25.723803,12.750016 23.816271,11 21.5,11 20.442753,11 19.470664,11.364599 18.702606,11.974922 17.834068,9.0963276 15.161846,7 12,7 8.1340066,7 5,10.134007 5,14 5,14.375791 5.029612,14.744666 5.086631,15.104418 3.3177882,15.517576 2,17.108083 2,19 c 0,2.209139 1.7941203,4 3.9968389,4 L 7,23 7,25 6.0001757,25 C 2.686978,25 0,22.313708 0,19 z m 0,0"
id="stylisable"
style="fill:#000000;fill-opacity:1"
inkscape:connector-curvature="0" />
</g>
</g> </g>
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="M 0 19.375 L 0 31.59375 L 8 31.59375 L 8 19.375 L 0 19.375 z M 1.8125 21.28125 L 6.1875 21.28125 L 6.1875 29.6875 L 1.8125 29.6875 L 1.8125 21.28125 z "
id="stylisable" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="M 12 10.59375 L 12 31.59375 L 20 31.59375 L 20 10.59375 L 12 10.59375 z M 13.8125 12.5625 L 18.1875 12.5625 L 18.1875 29.625 L 13.8125 29.625 L 13.8125 12.5625 z "
id="stylisable" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="M 24 0.40625 L 24 31.59375 L 32 31.59375 L 32 0.40625 L 24 0.40625 z M 25.75 2.5625 L 30.25 2.5625 L 30.25 29.4375 L 25.75 29.4375 L 25.75 2.5625 z "
id="stylisable" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

62
src/static/menu-side/expand.svg Normal file
View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 32 32"
height="32"
id="Слой_1"
version="1.1"
viewBox="0 0 32 32"
width="32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="expand.svg"><metadata
id="metadata20"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs18" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview16"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="20.85965"
inkscape:cx="6.8546489"
inkscape:cy="14.489576"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Слой_1" /><path
d="M 7.6630867,2.7536587 20.911025,15.998402 7.6614887,29.243144 c -0.631464,0.631463 -0.631464,1.652995 0,2.284458 0.6314633,0.629865 1.6545933,0.629865 2.2860563,0 l 14.390967,-14.386171 0,0 0,0 c 0.631463,-0.629865 0.631463,-1.652995 0,-2.28286 L 9.947545,0.47239772 c -0.631463,-0.629864 -1.656192,-0.629864 -2.2876553,0 -0.628266,0.62826598 -0.628266,1.65139698 0.0032,2.28126098 z"
id="stylisable"
inkscape:connector-curvature="0"
style="fill:#121313" /><g
id="g4"
transform="translate(-5.9905,9.9887495)" /><g
id="g6"
transform="translate(-5.9905,9.9887495)" /><g
id="g8"
transform="translate(-5.9905,9.9887495)" /><g
id="g10"
transform="translate(-5.9905,9.9887495)" /><g
id="g12"
transform="translate(-5.9905,9.9887495)" /><g
id="g14"
transform="translate(-5.9905,9.9887495)" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

49
src/static/menu-side/home.svg Normal file
View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 24 24"
height="32"
id="Layer_1"
version="1.1"
viewBox="0 0 32.000031 32"
width="32.000031"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="home.svg"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview5"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="9.8333333"
inkscape:cx="12.000239"
inkscape:cy="11.61"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="M 31.761451,16.349998 16.766879,0.84742845 c -0.213332,-0.217332 -0.48933,-0.3266646 -0.766662,-0.3266646 -0.277331,0 -0.55333,0.1093326 -0.766662,0.3266646 L 0.23898338,16.349998 c -0.42133068,0.43733 -0.27066496,0.795995 0.33466456,0.795995 l 4.41063886,0 0.00267,14.333243 c 3.2226464,0 8.2546142,0 8.2546142,0 l 0,-8.819944 5.514632,0 -0.01867,8.819944 c 0,0 6.750624,0 8.301281,0 l -0.0013,-14.333243 4.387972,0 c 0.60533,0 0.757329,-0.358665 0.335998,-0.795995 z"
id="stylisable"
inkscape:connector-curvature="0" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

48
src/static/menu-side/input.svg Normal file
View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 24 24"
id="Layer_1"
version="1.0"
viewBox="0 0 32 32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="input.svg"
width="32"
height="32"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview5"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="9.8333333"
inkscape:cx="10"
inkscape:cy="10"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="M 31.2,4.64 27.84,0.32 C 27.68,0.16 27.36,0 27.04,0 L 4.96,0 C 4.64,0 4.32,0.16 4.16,0.32 L 0.8,4.64 C 0.32,5.12 0,5.6 0,6.24 L 0,28.8 C 0,30.56 1.44,32 3.2,32 l 25.6,0 C 30.56,32 32,30.56 32,28.8 L 32,22.4 32,6.24 C 32,5.6 31.68,5.12 31.2,4.64 Z M 16,25.6 l -8,-8 4.8,0 0,-6.4 6.4,0 0,6.4 4.8,0 -8,8 z M 27.2,4.8 4.8,4.8 5.6,3.2 l 20.8,0 0.8,1.6 z"
id="path3"
inkscape:connector-curvature="0" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

92
src/static/menu-side/settings.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

207
todo.md
View File

@ -1,204 +1,27 @@
########### ###########
# A FAIRE # # A FAIRE #
########### ###########
- [ ] Prendre en compte au lieu de SERVER['HTTP_HOST'] l'hote et son dossier source
- [ ] Gestion de l'erreur de chargement ou erreur de nav (page-manager) - [ ] Conception BDD apres le travail de Romain
- [ ] Tables
- [ ] Relations
-
- [ ] Refactor des modules
- [ ] Gestion des repositories
- [ ] Gestion des modules
############ ############
# EN COURS # # EN COURS #
############ ############
- [ ] [view/users][container.scss] Gestion des groupes inline - [ ] Design de base (refactor)
- [ ] [view/machines][container.scss] Gestion des groupes inline - [ ] Charte graphique (couleurs, dimensions)
- [ ] Layout de base (positions)
- [ ] Components
- [ ] [view/clusters] Interface de gestion des groupes
- [x] [src/static/menu-side][view] Ajout de l'icone des groupes
- [x] [action-script] Ajout de la page a page-manager
- [x] [view/groups] Ajout de la page physique
- [ ] [view/users] Gestion des filtres
- [ ] [view/machines] Gestion des filtres
- [ ] [?] Plusieurs pages pour listes
- [ ] [?] Gestion de la mise a jour de la liste d'utilisateurs lors de l'ajout/modif/suppr
######## ########
# FAIT # # FAIT #
######## ########
- [x] [index] Gestion avec tableau des redirections - [x] Copie du projet stefproject (2.0) pour extraction du framework
- [x] [menu-side.scss] Icone + svg pour icone du profile
- [x] [container.scss] Alignement sur les listes des icones de modif+suppr
- [x] [view/js/*] animation pour les recherches (modif/suppr)
- [x] [view/js/*] Correction des liens avec element.id_ (hidden)
- [x] [view/users][view/js/users.js] Suppression avec recherche comme pour la modification
- [x] [view/machines][view/js/machines.js] Suppression avec recherche comme pour la modification
- [x] [container.scss] Icone dans bouton quand succes sur l'operation
- [x] [reset.js] Gestion des animations en js
- [x] [view/js/users.js] Gestion de l'icone avec timeout
- [x] [view/js/machines.js] Gestion de l'icone avec timeout
- [x] [view/js/users][view/users][container.scss] Afficher l'indice du resultat pour recherche (pour suppr/modif)
- [x] [view/js/machines][view/machines][container.scss] Afficher l'indice du resultat pour recherche (pour suppr/modif)
- [x] [view/js/users] Implementer la recherche pour la suppression
- [x] [view/js/machines] Implementer la recherche pour la suppression
- [x] Nettoyage git
- [x] [ResourceDispatcher] Gestion de la coloration de svg
- [x] [src/*.svg] Modification des svg (attribution des ID)
- [x] Correctifs
- [x] [container.scss] Gestion des boutons "enabled"/"disabled" lorsqu'on doit faire une recherche
- [x] [view/users+machines] Suppression du sous-menu "Recherche"
- [x] [view/js/machines] Recherche instantanee
- [x] [container.scss] Gestion de l'affichage responsive
- [x] [container.scss] Gestion de l'affichage retour a la ligne
- [x] [container.scss] Gestion de l'affichage info ne depassent plus
- [x] [view/js/users] Recherche instantanee
- [x] [machineDefaut][machineRepo] Gestion des parametres optionnels pour la modification
- [x] [userDefault][userRepo] Gestion des parametres optionnels pour la modification
- [x] [machines.js][machineDefault][machineRepo] Gestion de la nouvelle modification (avec recherche)
- [x] [machineDefault] Implementer la modification
- [x] [users.js][userDefault][userRepo] Gestion de la nouvelle modification (avec recherche)
- [x] [view/js/machines] Modification de machine
- [x] [userDefault] Implementer la modification
- [x] [userRepo] Gestion des parametres optionnels
- [x] [view/users] Gestion des parametres optionnels physiques -> separer la selection et modification
- [x] [machineDefault] Implementation de la recherche
- [x] [userDefault] Implementation de la recherche
- [x] [view/js/users] Modification d'utilisateur
- [x] [userDefault] Implementer la modification
- [x] [view/js/users+machines] Modification @value plutot que @placeholder
- [x] [view/js/users] Suppression d'utilisateur
- [x] [view/js/machines] Suppression de machine
- [x] Correction erreur
- [x] [view/users][view/machines] Affichage des erreurs pour la liste des utilisateurs et des machines
- [x] [view/users][container.scss] Barre de recherche instantannee (physiques)
- [x] [view/machines+view/js/machines] Prise en compte de pageManager.vars[1] pour le suppression de machine
- [x] [repo+css+view] Split les listes en 2 colonnes -> Finalisation
- [x] [repo+css+view] Split les listes en 2 colonnes
- [x] [container.scss] Ajout de padding-top/bottom pour les input/button
- [x] [container.scss] Inversion des etats pour boutons
- [x] [container.scss] Modification du temps de transition (.2s -> .4s)
- [x] [container.scss] Centrage horizontal des formulaires
- [x] [view/user] Prise en compte de pageManager.vars[1] pour la modification
- [x] [view/user] Prise en compte de pageManager.vars[1] pour la suppression
- [x] [view/machine] Prise en compte de pageManager.vars[1] pour la modification
- [x] [view/machine] Prise en compte de pageManager.vars[1] pour la suppression
- [x] [container.scss][view/users+machines] Charte avancee
- [x] [container.scss] Refonte mineure formulaires, charte graphique en cours
- [x] Creation de la base des managers et de l'API
- [x] Conception des managers et de l'API
- [x] Definir graphiquement le #CONTAINER
- [x] Structure
- [x] Elements
- [x] Affichages
- [x] Styles globaux
- [x] Formulaires
- [x] Buttons
- [x] [page-manager] Correction de l'inclusion des dépendances de page-manager
- [x] [src/static/container] Choix de meilleures icones
- [x] [view/users][container.css] Liens vers la modification/suppression depuis visu utilisateur
- [x] [view/users] Lien physque
- [x] [view/js/users] Lien dynamique (evt)
- [x] [view/machines][container.css] Liens vers la modification/suppression depuis visu machine
- [x] [view/machines] Lien physque
- [x] [view/js/machines] Lien dynamique (evt)
- [x] Creation de machine
- [x] Creation d'utilisateur
- [x] Developpement de l'api cote client
- [x] Dev des managers et de l'API et liste des acces
- [x] [repo/cluster] getMembers
- [x] Conception BDD + ameliorations
- [x] Liste des tables
- [x] Liste de attributs
- [x] Attributs statiques
- [x] utilisateur
- [x] machine
- [x] cluster
- [x] journal
- [x] Attributs dynamiques
- [x] les options
- [x] les addons des attributs statiques
- [x] Ameliorations et genericite possibles
- [x] [modules/+repo/]Conflit des id_user et id_machine dans les cluster a regler
- [x] [view/user] Lien "mailto" pour les mail des utilisateurs
- [x] [modules/] Extension des modules aux repos
- [x] Gestion des groupes (utilisateurs/machines)
- [x] bdd
- [x] Creation d'un groupe individuel pour utilisateurs + association
- [x] Creation d'un groupe individuel pour machines
- [x] Creation d'une liaison entre 2 groupes (groupeUtilisateur, groupeMachine)
- [x] [view/machines] Affichage des groupes des machines
- [x] [view/users] Affichage des groupes des utilisateurs
- [x] [cluster::link/unlink] Ajout/Suppression d'association des utilisateurs/machines a des groupes
- [x] [user::getClusters] Recuperation des groupes d'un utilisateur
- [x] [manager/repo/]Creation des repos
- [x] [user] utilisateur
- [x] [machine] machines
- [x] [cluster] groupes
- [x] [view/][view] Ajout de "use CLASS;"
- [x] Ajout de "use CLASS;" dans les fichiers pour simplifier la lisibilite
- [x] [phpunit/sessionManager] test unitaires du manager de session php
- [x] [ModuleAnswer] Gestion des erreurs au niveau interne des Modules
- [x] [autoloader][phpunit/bootstrap.php] Correction des bugs de $_SERVER avec PHPUnit -> autoloader + bootstrap personnalise
- [x] [sessionManager] Import de sessionManager
- [x] [phpunit/tests/Database_*] Tests unitaire de delNumeric()
- [x] [Database] Mise a jour des methodes de Database
- [x] [Database::check] Suite de l'implementation ajout de "user.status"
- [x] [phpunit/tests/Database_check] Tests associes
- [x] [Database::construct] Gestion du singleton et de la config
- [x] [Database::check] Suite de l'implementation (couverture des types de la BDD actuelle: 100%)
- [x] [Database::delNumeric] Prevention si oubli @oneDimension + ne supprime plus les indices numeriques associees a aucun indice textuel
- [x] [phpunit/tests/Database_check] Tests unitaire du checker
- [x] [phpunit/] Install+Config phpunit
- [x] [Database] Checker de type (types utilises dans la BDD)
- [x] [manager/Repo] Gestion des Repo
- [x] [ManagerError] Correction/ajout des codes erreurs
- [x] [ModuleRequest] Modification des erreurs
- [x] [ResourceDispatcher] Modification du gestionnaire de ressource car ne marche pas en ligne
- [x] [css/container.css + js/action-script.js] Gestion de l'affichage de la page associee au sous-menu (.active)
- [x] [view/*.php] Modification des views
- [x] Mise a jour / Modification / Correction des images du menu-side
- [x] [ModuleRequest->dispatch] Passage de l'erreur a la reponse
- [x] [ModuleAnswer->serialize] Integration de l'erreur dans la serialisation
- [x] [ModuleAnswer->get+getAll] Accesseurs aux donnees de la reponse
- [x] Gestion des erreurs
- [x] [ModuleError::explicit] Explicitation
- [x] Conception du systeme de delegation des managers
- [x] [[ModuleRequest] ModuleRequest] Module Request
- [x] [ModuleRequest->__construct] Inline (en php)
- [x] [ModuleRequest::fromString] Serialise (en json <String>)
- [x] [ModuleRequest::FromURL] Par url (POST)
- [x] [ModuleAnswer] Module Answer
- [x] [ModuleAnswer->serialize] Serialisation pour renvoi
- [x] [index.php] Gestion de url/api avec donnees POST
- [x] [ModuleRequest->getFunctionCaller] Correction semantique du chemin d'amorcage, utilisation de tableau
- [x] Gestion des erreurs
- [x] [ModuleError] Gestionnaire des erreurs
- [x] [ResourceDispatcher] ResourceDispatcher
- [x] [ModuleRequest] ModuleRequest
- [x] Gestion JS/PHP de la navigation
- [x] Gestion de l'affichage des pages en fonction du sous-menu
- [x] Correction de la navigation
- [x] Mise a jour du sous-menu et des POST a la page
- [x] Gestion JS de la navigation
- [x] Gestion de liens+URL du menu
- [x] Gestion des liens+URL du submenu
- [x] onload du xhr, on lance le script sur le DOM
- [x] Refactor page-manager pour recuperer instance XHR active
- [x] Gestion de la navigation du sub-menu-side
- [x] Configuration JSON du dispatcher
- [x] Simplification de 2 tableaux lies par indice en 1
- [x] Configuration JSON du dispatcher
- [x] Gestion des extensions/headers
- [x] Gestion de l'arbre virtuel des fichiers
- [x] Design de structure (layout navigation)
- [x] Header
- [x] Menu-side
- [x] Submenu-side
- [x] Dispatcher+Route pour les images (image/svg)
- [x] Inclusions maintenant par URL (forcer l'utilisation du Dispatcher)
- [x] Routage modifie
- [x] Gestion complete de la navigation de niveau 0
- [x] Ajout d'un loader pour page-manager.js
- [x] Autoloader avec namespace
- [x] Adaptation de page-manger.js
- [x] Conception et dev routeur
- [x] Initialiser le github.com/git
- [x] Structure HTML de base

20
view.php
View File

@ -2,15 +2,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Gestion du parc</title> <title>SOCIOVIEW - Tableau de bord</title>
<!-- Informations de la page --> <!-- Informations de la page -->
<meta name='Content-Type' content='text/html; charset=utf-8'> <meta name='Content-Type' content='text/html; charset=utf-8'>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='author' content='Adrien MARQUÈS alias {xdrm};'> <meta name='author' content='Adrien MARQUÈS alias {xdrm};'>
<meta name='desctiption' content="Système de gestion des véhicules pour STEF."> <meta name='description' content="Tableau de bord pour une enquete sociologique sur les liens sociaux entre les reseaux sociaux et la vie hors-ligne">
<!-- Dépendences CSS --> <!-- Dépendences CSS -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300' rel='stylesheet' type='text/css'>
<link type='text/css' rel='stylesheet' href='/f/css/reset/css' /> <!-- Reset du css natif des browsers --> <link type='text/css' rel='stylesheet' href='/f/css/reset/css' /> <!-- Reset du css natif des browsers -->
<link type='text/css' rel='stylesheet' href='/f/css/font/css' /> <!-- Positionnement global des pages --> <link type='text/css' rel='stylesheet' href='/f/css/font/css' /> <!-- Positionnement global des pages -->
<link type='text/css' rel='stylesheet' href='/f/css/layout/css' /> <!-- Positionnement global des pages --> <link type='text/css' rel='stylesheet' href='/f/css/layout/css' /> <!-- Positionnement global des pages -->
@ -37,22 +38,17 @@
<!-- HEADER DE LA PAGE --> <!-- HEADER DE LA PAGE -->
<div id='HEADER'> <div id='HEADER'>
<div class='icon'></div>
</div> </div>
<!-- MENU DE LA PAGE --> <!-- MENU DE LA PAGE -->
<nav id='MENU-SIDE'> <nav id='MENU-SIDE'>
<span data-link='profile' data-desc='Profil' class='mb' ><?php echo ResourceDispatcher::getResource('f/svg/profile/st/menu-side'); ?></span> <span>LOGO</span>
<span data-link='dashboard' ><?= ResourceDispatcher::getResource('f/svg/home/st/menu-side'); ?>Tableau de bord</span>
<span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side/777777'); ?></span> <span data-link='input' ><?= ResourceDispatcher::getResource('f/svg/input/st/menu-side'); ?>Acquisition</span>
<span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side/777777' ); ?></span> <span data-link='analytics' ><?= ResourceDispatcher::getResource('f/svg/analytics/st/menu-side'); ?>blababla</span>
<span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side/777777' ); ?></span> <span data-link='settings' ><?= ResourceDispatcher::getResource('f/svg/settings/st/menu-side' ); ?>Paramètres</span>
<span data-link='groups' data-desc='Gestion des groupes' ><?php echo ResourceDispatcher::getResource('f/svg/groups/st/menu-side/777777'); ?></span>
<span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo ResourceDispatcher::getResource('f/svg/analytics/st/menu-side/777777'); ?></span>
<span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo ResourceDispatcher::getResource('f/svg/settings/st/menu-side/777777' ); ?></span>
</nav> </nav>