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

View File

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

View File

@ -1,5 +1,24 @@
/* COULEUR DU THEME */
$theme-color: #e63321;
/* [1] COULEURS
=========================================================*/
/* (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 */
$sub-menu-color: #5b5e63;
@ -15,7 +34,7 @@ $form-invalid-color: #d52918;
/* GESTION DES LONGUEURS */
$menu-side-width: 4em;
// $menu-side-width: 4em;
// POUR RESOURCE_DISPATCHER

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 */

View File

@ -1,7 +1,7 @@
{
"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",
"sources": ["header.scss","constants.scss"],
"mappings": "",
"sources": [],
"names": [],
"file": "header.css"
}

View File

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

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 */

View File

@ -1,6 +1,6 @@
{
"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"],
"names": [],
"file": "layout.css"

View File

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

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 */

View File

@ -1,6 +1,6 @@
{
"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"],
"names": [],
"file": "menu-side.css"

View File

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

View File

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

View File

@ -7,25 +7,27 @@
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"
width="32"
height="32"
viewBox="0 0 32 32"
id="svg4167"
version="1.1"
viewBox="0 0 31.999922 32"
width="31.999922"
id="svg3043"
inkscape:version="0.48.4 r9939"
inkscape:version="0.91 r13725"
sodipodi:docname="analytics.svg">
<metadata
id="metadata3054">
id="metadata4177">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4175" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
@ -37,46 +39,26 @@
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview3052"
id="namedview4173"
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-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true" />
<defs
id="defs3047" />
inkscape:snap-page="true"
inkscape:zoom="14.90625"
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
id="Icons new Arranged Names Color"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
transform="translate(945.43808,521.49309)">
<g
id="52 Cloud Sync"
style="fill:#000000;fill-opacity:1">
<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>
transform="matrix(0.03125,0,0,0.03125,0,-1)"
id="g4169">
<path
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="path4171"
inkscape:connector-curvature="0" />
</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>

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

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>

After

Width:  |  Height:  |  Size: 2.4 KiB

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>

After

Width:  |  Height:  |  Size: 2.1 KiB

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>

After

Width:  |  Height:  |  Size: 1.9 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

209
todo.md
View File

@ -1,204 +1,27 @@
###########
# 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 #
############
- [ ] [view/users][container.scss] Gestion des groupes inline
- [ ] [view/machines][container.scss] Gestion des groupes inline
- [ ] Design de base (refactor)
- [ ] 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 #
########
- [x] [index] Gestion avec tableau des redirections
- [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
- [x] Copie du projet stefproject (2.0) pour extraction du framework

View File

@ -2,15 +2,16 @@
<!DOCTYPE html>
<html>
<head>
<title>Gestion du parc</title>
<title>SOCIOVIEW - Tableau de bord</title>
<!-- Informations de la page -->
<meta name='Content-Type' content='text/html; charset=utf-8'>
<meta charset='utf-8'>
<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 -->
<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/font/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 -->
<div id='HEADER'>
<div class='icon'></div>
</div>
<!-- MENU DE LA PAGE -->
<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' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side/777777'); ?></span>
<span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side/777777' ); ?></span>
<span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side/777777' ); ?></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>
<span data-link='dashboard' ><?= ResourceDispatcher::getResource('f/svg/home/st/menu-side'); ?>Tableau de bord</span>
<span data-link='input' ><?= ResourceDispatcher::getResource('f/svg/input/st/menu-side'); ?>Acquisition</span>
<span data-link='analytics' ><?= ResourceDispatcher::getResource('f/svg/analytics/st/menu-side'); ?>blababla</span>
<span data-link='settings' ><?= ResourceDispatcher::getResource('f/svg/settings/st/menu-side' ); ?>Paramètres</span>
</nav>