Close #3 -> Wireframe + design des composants et navigation adaptee au site (idee actuelle)

This commit is contained in:
xdrm-brackets 2016-04-06 16:24:45 +02:00
parent 8c683923a4
commit c39b3a3344
23 changed files with 211 additions and 1867 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
sftp-config.json

View File

@ -2,5 +2,6 @@
"dashboard",
"input",
"analytics",
"charts",
"settings"
]

View File

@ -1,2 +1,2 @@
#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-bottom:1px solid transparent;border-radius:2px;background:#32323a;color:#ddd;text-shadow:1px 1px 0 #26262c;transition:color .3s, background .3s, box-shadow .3s, border .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{border-bottom-color:#242329;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{height:calc( 4.5em - 2*1.3em - 1px )}
#WRAPPER>#MENU-SIDE>span:not(.icon){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-bottom:1px solid transparent;background:#32323a url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat;background-size:2em 2em;color:#ddd;text-shadow:1px 1px 0 #26262c;transition:color .3s ease-in-out, background .3s ease-in-out, box-shadow .3s ease-in-out, border .3s ease-in-out;cursor:pointer}#WRAPPER>#MENU-SIDE>span:not(.icon)>svg,#WRAPPER>#MENU-SIDE>span:not(.icon)>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:not(.icon):hover{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:not(.icon):hover>svg,#WRAPPER>#MENU-SIDE>span:not(.icon):hover>svg *{fill:#53d192 !important}#WRAPPER>#MENU-SIDE>span.icon{display:block;position:relative;width:calc( 100% - 3em - 2*1.5em );height:calc( 4.5em - 1px );padding:0 1.5em;padding-left:calc( 1.5em + 3em );border-bottom:1px solid transparent;background:#32323a;color:#fff;text-shadow:1px 1px 0 #26262c;font-weight:bold;line-height:4.5em}#WRAPPER>#MENU-SIDE>span.icon>svg,#WRAPPER>#MENU-SIDE>span.icon>svg *{position:absolute;top:calc( 50% - 5em/2 );left:1.5em;height:5em}#WRAPPER>#MENU-SIDE>span.icon:hover{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span.sep{border-bottom:1px solid #4a4a55}
/*# sourceMappingURL=menu-side.css.map */

View File

@ -1,6 +1,6 @@
{
"version": 3,
"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,qBAAqB,CACpC,aAAa,CAAE,GAAG,CAElB,UAAU,CCRM,OAAO,CDSvB,KAAK,CCPW,IAAO,CDQvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qDAAqD,CAEjE,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,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CCjCD,OAAO,CDkCtB,KAAK,CChCU,IAAO,CDiCtB,WAAW,CAAE,iBAAqC,CAElD,uEAAkB,CACjB,IAAI,CAAE,kBAA4B,CASrC,oCAAoB,CACnB,MAAM,CAAE,6BAAyC",
"mappings": "AAMC,mCAAmB,CAClB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,WAAW,CACpB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,qEAAsE,CAClF,eAAe,CAAE,OAAO,CACxB,KAAK,CCPW,IAAO,CDQvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAGf,iFAAkB,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,yCAAO,CACN,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CCjCD,OAAO,CDkCtB,KAAK,CChCU,IAAO,CDiCtB,WAAW,CAAE,iBAAqC,CAElD,6FAAkB,CACjB,IAAI,CAAE,kBAA4B,CASrC,6BAAa,CACZ,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,4BAA4B,CACnC,MAAM,CAAE,mBAA+B,CAExC,OAAO,CAAE,OAAO,CAChB,YAAY,CAAE,mBAAmB,CAEjC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CC3DM,OAAO,CD6DvB,KAAK,CC1DW,IAAO,CD2DvB,WAAW,CAAE,iBAA6B,CAC1C,WAAW,CAAE,IAAI,CACjB,WAAW,CCtDK,KAAK,CDwDrB,qEAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,MAAM,CAAE,GAAG,CAIb,mCAAO,CACN,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC7ED,OAAO,CD8EtB,KAAK,CC5EU,IAAO,CD6EtB,WAAW,CAAE,iBAAqC,CASpD,4BAAY,CACX,aAAa,CAAE,iBAA+B",
"sources": ["menu-side.scss","constants.scss"],
"names": [],
"file": "menu-side.css"

View File

@ -4,7 +4,7 @@
/* [1] Elements du menu
=========================================================*/
& > span{
& > span:not(.icon){
display: block;
position: relative;
width: calc( 100% - 2*1em - 2*1.5em );
@ -13,13 +13,13 @@
padding-left: calc( 1.5em + 2*1em );
border-bottom: 1px solid transparent;
border-radius: 2px;
background: $dark-bg;
background: $dark-bg url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat;
background-size: 2em 2em;
color: $dark-fg;
text-shadow: 1px 1px 0 darken($dark-bg, 5);
transition: color .3s, background .3s, box-shadow .3s, border .3s;
transition: color .3s ease-in-out, background .3s ease-in-out, box-shadow .3s ease-in-out, border .3s ease-in-out;
cursor: pointer;
@ -55,8 +55,49 @@
/* [2] Specification pour le logo
=========================================================*/
& > span:first-child{
height: calc( #{$header-height} - 2*1.3em - 1px );
& > span.icon{
display: block;
position: relative;
width: calc( 100% - 3em - 2*1.5em );
height: calc( #{$header-height} - 1px );
padding: 0 1.5em;
padding-left: calc( 1.5em + 3em );
border-bottom: 1px solid transparent;
background: $dark-bg;
color: $dark-fg-primary;
text-shadow: 1px 1px 0 darken($dark-bg, 5);
font-weight: bold;
line-height: $header-height;
& > svg, & > svg *{
position: absolute;
top: calc( 50% - 5em/2 );
left: 1.5em;
height: 5em;
}
&:hover{
border-bottom-color: darken($dark-bg-primary, 2);
box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);
background-color: $dark-bg-primary;
color: $dark-fg-primary;
text-shadow: 1px 1px 0 darken($dark-bg-primary, 5);
}
}
/* [3] Elements du menu avec separateur en dessous
=========================================================*/
& > span.sep{
border-bottom: 1px solid lighten($dark-bg, 10);
}

View File

@ -1,2 +0,0 @@
#CONTAINER>.sub-menu-side{display:block;position:relative}#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}
/*# sourceMappingURL=submenu-side.css.map */

View File

@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAGA,yBAA2B,CAC1B,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CAGlB,4CAAsB,CACrB,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,KAAK,CAEb,OAAO,CAAE,iBAAiB,CAC1B,MAAM,CAAE,GAAG,CAEX,aAAa,CAAE,GAAG,CAElB,KAAK,CChBU,OAAO,CDiBtB,WAAW,CAAE,aAAa,CAC1B,WAAW,CAAE,MAAM,CAEnB,UAAU,CAAE,OAAO,CAEnB,MAAM,CAAE,OAAO,CAEf,QAAQ,CAAE,MAAM,CAGhB,qDAAc,CACb,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,IAAI,CAAE,IAAI,CAEV,GAAG,CAAE,GAAG,CACR,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,SAAS,CAAE,gBAAgB,CAG3B,0DAAM,CACL,IAAI,CAAE,kBAA0B,CAIlC,sGACQ,CACP,KAAK,CAAE,OAA2B,CAClC,gBAAgB,CAAE,OAAO,CACzB,UAAU,CAAE,qBAAqB,CAEjC,kIAAmB,CAClB,IAAI,CAAE,kBAAsC,CAS/C,yDAAmC,CAClC,UAAU,CAAE,GAAG",
"sources": ["submenu-side.scss","constants.scss"],
"names": [],
"file": "submenu-side.css"
}

View File

@ -1,67 +0,0 @@
@import 'constants';
#CONTAINER > .sub-menu-side{
display: block;
position: relative;
// Les liens du menu
& > span[data-sublink]{
display: block;
position: relative;
width: 7.5em;
padding: .3em 1em .3em 2em;
margin: 1em;
border-radius: 3px;
color: $sub-menu-color;
text-shadow: 1px 1px white;
white-space: nowrap;
transition: all .2s;
cursor: pointer;
overflow: hidden;
// Dimension/Position des svg (icones)
& > .svg > svg{
display: inline-block;
position: absolute;
left: .5em;
// left: 100%;
top: 50%;
width: 1em;
height: 1em;
transform: translateY(-50%);
// Coloration pour tous les elements du svg
& path{
fill: $sub-menu-color !important;
}
}
&:hover,
&.active{
color: darken($sub-menu-color, 30);
background-color: #d8deea;
box-shadow: inset 0 0 4px #c8ced9;
& > .svg > svg path{
fill: darken($sub-menu-color, 30) !important;
}
}
}
// On decale le premier
& > span[data-sublink]:nth-child(1){
margin-top: 1em;
}
}

View File

@ -16,81 +16,14 @@
/* [0] Instanciation
===========================================*/
var pageManager = new pageManagerClass();
pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'input', 'analytics', 'settings'] );
pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'input', 'analytics', 'charts', 'settings'] );
var api = new APIClass('/api/');
/* [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
var target = null;
// 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;
// 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;
// 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();
}
/* [2] Toggle du side-menu <-> navigation
/* [1] Toggle du side-menu <-> navigation
===========================================*/
function navMenu(section){
@ -138,26 +71,6 @@
// 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
// 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;
if( target.getData('sublink') )
navSubMenu(target);
}, false);
}, false);
}
@ -180,9 +93,7 @@
/* [4] Gestion de la navigation (physique)
/* [2] Gestion de la navigation (physique)
===========================================*/
DOM.MENUSIDE.addEventListener('click', function(e){
var target = e.target;

View File

@ -0,0 +1,54 @@
<?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 64 64"
height="32"
id="Layer_1"
version="1.1"
viewBox="0 0 32 32"
width="32"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="charts.svg"><metadata
id="metadata4207"><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="defs4205" /><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="namedview4203"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-page="true"
inkscape:zoom="14.90625"
inkscape:cx="25.031"
inkscape:cy="24.948"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><g
id="g4197"
transform="matrix(0.63920738,0,0,0.63920738,-4.4546362,-4.4015826)"><path
d="M 29.568,11.75 C 17.086,11.749 6.968,21.867 6.969,34.349 6.968,46.831 17.086,56.949 29.568,56.948 42.05,56.949 52.168,46.831 52.167,34.349 l -22.599,-10e-4 0,-22.598 z"
id="path4199"
inkscape:connector-curvature="0" /><path
d="m 34.432,7.052 0,22.6 22.599,0 C 57.032,17.169 46.915,7.05 34.432,7.052 Z"
id="path4201"
inkscape:connector-curvature="0" /></g></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,37 @@
<?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"
version="1.1"
id="svg2"
viewBox="0 0 31.999999 31.999999"
height="31.999998"
width="31.999998">
<defs
id="defs4" />
<metadata
id="metadata7">
<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>
<g
transform="translate(257.14285,-1051.7908)"
id="layer1">
<circle
r="16"
cy="1067.7908"
cx="-241.14285"
id="stylisable"
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.69999981;stroke-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -7,19 +7,28 @@
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"
viewBox="0 0 32 32"
width="32"
id="svg2"
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
sodipodi:docname="home.svg">
<metadata
id="metadata12">
<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="defs10" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
@ -30,20 +39,21 @@
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview5"
id="namedview8"
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:zoom="4.9166667"
inkscape:cx="18"
inkscape:cy="18"
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>
inkscape:current-layer="svg2" />
<path
d="m 0,17.777778 14.222222,0 L 14.222222,0 0,0 0,17.777778 Z M 0,32 l 14.222222,0 0,-10.666667 L 0,21.333333 0,32 Z M 17.777778,32 32,32 l 0,-17.777778 -14.222222,0 0,17.777778 z m 0,-32 0,10.666667 14.222222,0 L 32,0 17.777778,0 Z"
id="path6"
inkscape:connector-curvature="0" />
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -27,4 +27,9 @@
########
# FAIT #
########
- [x] Modification du modele de navigation
- [x] Suppression du sub-side-menu
- [x] Creation des bonnes pages
- [x] Suppression de l'utilisation de la BDD
- [x] Correction des bugs de navigation
- [x] Copie du projet stefproject (2.0) pour extraction du framework

View File

@ -17,7 +17,6 @@
<link type='text/css' rel='stylesheet' href='/f/css/layout/css' /> <!-- Positionnement global des pages -->
<link type='text/css' rel='stylesheet' href='/f/css/header/css' /> <!-- Gestion du header -->
<link type='text/css' rel='stylesheet' href='/f/css/menu-side/css' /> <!-- Gestion du menu -->
<link type='text/css' rel='stylesheet' href='/f/css/submenu-side/css'/> <!-- Gestion du sous-menu -->
<link type='text/css' rel='stylesheet' href='/f/css/container/css' /> <!-- Gestion du container -->
<link type='text/css' rel='stylesheet' href='/f/css/global/css' /> <!-- Style global -->
@ -43,12 +42,13 @@
<!-- MENU DE LA PAGE -->
<nav id='MENU-SIDE'>
<span><?= ResourceDispatcher::getResource('f/svg/icon/st' ); ?>CALL LOG</span>
<span class='icon sep' ><?= ResourceDispatcher::getResource('f/svg/icon/st' ); ?>CALL LOG</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>
<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'); ?>Statistiques</span>
<span data-link='charts' class='sep'><?= ResourceDispatcher::getResource('f/svg/charts/st/menu-side'); ?>Visualisation</span>
<span data-link='settings' ><?= ResourceDispatcher::getResource('f/svg/settings/st/menu-side' ); ?>Paramètres</span>
</nav>

View File

@ -6,130 +6,4 @@
?>
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='sub-menu-side'>
<span data-sublink='analytics'>
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/analytics/st/sub-menu-side' ); ?></span>
<span>Statistiques</span>
</span>
<span data-sublink='view' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/view/st/sub-menu-side' ); ?></span>
<span>Consulter le suivi</span>
</span>
<span data-sublink='start' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/sync/st/sub-menu-side' ); ?></span>
<span>Demarrer un suivi</span>
</span>
<span data-sublink='search' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/search/st/sub-menu-side' ); ?></span>
<span>Recherche</span>
</span>
</nav>
<?php
$post = array();
foreach($_POST as $k=>$v)
array_push($post, $k);
$sublink = $post[0];
/* PAGE DES STATISTIQUES
*
*/
// if( $sublink == 'analytics' ){
echo "<section data-sublink='analytics'>";
echo 'Statistiques';
var_dump( manager\Database::getPDO()->query('SELECT * from user')->fetchAll() );
echo '</section>';
// }
/* CONSULTATION DU SUIVI
*
*/
// if( $sublink == 'view' ){
echo "<section data-sublink='view'>";
echo 'Consultation du suivi';
echo '</section>';
// }
/* DEMARRER UN SUIVI
*
*/
// if( $sublink == 'start' ){
echo "<section data-sublink='start'>";
echo 'Demarrer un suivi';
echo '</section>';
// }
/* RECHERCHE
*
*/
// if( $sublink == 'search' ){
echo "<section data-sublink='search'>";
echo 'Recherche';
echo '</section>';
// }
?>
Statistiques

18
view/charts.php Executable file
View File

@ -0,0 +1,18 @@
<?php define('__ROOT__', dirname(dirname(__FILE__)) );
require_once __ROOT__.'/manager/autoloader.php';
use \manager\ModuleRequest;
use \manager\ManagerError;
use \manager\ResourceDispatcher;
?>
<!-- [1] Gestion du sous-menu de gauche -->
<?php
echo "charts";
?>

View File

@ -6,33 +6,6 @@
use \manager\Repo;
?>
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='sub-menu-side'>
<span data-sublink='view'>
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/view/st/sub-menu-side' ); ?></span>
<span>Tout afficher</span>
</span>
<span data-sublink='filter' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/filter/st/sub-menu-side' ); ?></span>
<span>Filtrer</span>
</span>
<span data-sublink='search' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/search/st/sub-menu-side' ); ?></span>
<span>Recherche</span>
</span>
<span data-sublink='remove' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/remove/st/sub-menu-side' ); ?></span>
<span>Vider l'historique</span>
</span>
</nav>
<?php
@ -44,19 +17,6 @@
/* [1] VIEW -> Liste des utilisateurs
=========================================================*/
$getusers = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
$nbusers = count( $getusers->dispatch()->get('users') ); // On recupere la reponse
$getmachines = new ModuleRequest('machineDefault/getAll'); // On utilise la methode 'getAll' du module 'machineDefault'
$nbmachines = count( $getmachines->dispatch()->get('machines') ); // On recupere la reponse
echo "<section data-sublink='view' class='list'>";
// Barre de recherche
echo "<input type='text' class='searchbar' placeholder='Recherche'>";
echo '</section>';
echo "dashboard";
?>

View File

@ -1,249 +0,0 @@
<?php define('__ROOT__', dirname(dirname(__FILE__)) );
require_once __ROOT__.'/manager/autoloader.php';
use \manager\ModuleRequest;
use \manager\ManagerError;
use \manager\ResourceDispatcher;
use \manager\Repo;
?>
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='sub-menu-side'>
<span data-sublink='view'>
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/view/st/sub-menu-side' ); ?></span>
<span>Tout afficher</span>
</span>
<span data-sublink='create' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/create/st/sub-menu-side' ); ?></span>
<span>Creation</span>
</span>
<span data-sublink='remove' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/remove/st/sub-menu-side' ); ?></span>
<span>Suppression</span>
</span>
<span data-sublink='edit' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/edit/st/sub-menu-side' ); ?></span>
<span>Modification</span>
</span>
<span data-sublink='filter' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/filter/st/sub-menu-side' ); ?></span>
<span>Filtrer</span>
</span>
</nav>
<?php
$post = array();
foreach($_POST as $k=>$v)
array_push($post, $k);
$sublink = $post[0];
/* [1] VIEW -> Liste des utilisateurs
=========================================================*/
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
$answer = $request->dispatch(); // On recupere la reponse
echo "<section data-sublink='view' class='list'>";
// echo 'Liste des utilisateurs: <br>';
// si erreur, on affiche l'explicitation
if( $answer->error != ManagerError::Success ){
// var_dump( ManagerError::explicit($answer->error) );
echo "<span class='error'>Une erreur est survenue, veuilez contacter le webmaster si cette erreur persiste.</span>";
}
// Si aucune erreur, on affiche les resultats
else{
// Barre de recherche
echo "<input type='text' class='searchbar' placeholder='Recherche'>";
// Liste des utilisateurs
foreach( $answer->get('users') as $user){
$clusters = new Repo('user/getClusters', array($user['id_user']));
$clusters = $clusters->answer();
echo "<article class='inline-box' id='".$user['id_user']."'>";
// Prenom Nom
echo "<span class='title'>".$user['firstname']." ".$user['lastname']." <span>#".$user['username']."</span></span>";
// Icone vers la suppression
echo "<span class='link_remove' data-user='".$user['id_user']."'>";
echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
echo "</span>";
// Icone vers la modification
echo "<span class='link_edit' data-user='".$user['id_user']."'>";
echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
echo "</span>";
// Code RFID
echo "<span class='code'>";
echo ResourceDispatcher::getResource('f/svg/card/st/container');
echo "<span>";
echo $user['code'];
echo "</span>";
echo"</span>";
// Adresse email
echo "<span class='mail'>";
echo ResourceDispatcher::getResource('f/svg/mail/st/container');
echo "<a href='mailto:".$user['mail']."'><span>";
echo $user['mail'];
echo "</span></a>";
echo"</span>";
// Groupes de la machine
echo "<span class='groups'>";
echo ResourceDispatcher::getResource('f/svg/group/st/container');
if( $clusters != false )
foreach($clusters as $cluster)
echo "<span>".$cluster['name']."</span>";
echo"</span>";
echo "</article>";
}
}
echo '</section>';
/* [2] Creation d'utilisateur
=========================================================*/
echo "<section data-sublink='create'>";
echo "<form class='valid'>";
echo "<input id='create_code' type='text' placeholder='CO-DE-RF-ID'><br>";
echo "<input id='create_username' type='text' placeholder='Username'><br>";
echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>";
echo "<input id='create_lastname' type='text' placeholder='Lastname'><br>";
echo "<input id='create_mail' type='text' placeholder='Mail'><br>";
echo "<input id='create_password' type='password' placeholder='Password'><br>";
echo "<input id='create_status' type='text' placeholder='Status'><br>";
echo "<button id='create_submit'>Créer</button>";
echo "</form>";
echo '</section>';
/* [3] Suppression d'utilisateur
=========================================================*/
echo "<section data-sublink='remove'>";
echo "<form class='invalid'>";
// Recherche d'utilisateur
echo "<input id='remove_search_keyword' type='text' class='search' placeholder='Recherche...'><br>";
echo "<input id='remove_search_id' type='hidden' value=''>";
// Indice du resultat
echo "<span class='remove_search_view'>utilisateur <span class='remove_search_num'>0</span> sur <span class='remove_search_sum'>0</span></span><br><br>";
echo "<button id='remove_search_submit' class='search'>Trouver</button><br>";
echo "<br><br><hr class='OR' data-label='PUIS' /><br><br>";
// Suppression d'utilisateur
echo "<input id='remove_code' type='text' placeholder='Code'><br>";
echo "<input id='remove_username' type='text' placeholder='Username'><br>";
echo "<button id='remove_submit' disabled>Supprimer</button>";
echo "</form>";
echo '</section>';
/* [4] Modification d'utilisateur
=========================================================*/
echo "<section data-sublink='edit'>";
echo "<form class='neutral'>";
echo "<input id='edit_search_keyword' type='text' class='search' placeholder='Recherche...'><br>";
echo "<input id='edit_search_id' type='hidden' value=''>";
// Indice du resultat
echo "<span class='edit_search_view'>utilisateur <span class='edit_search_num'>0</span> sur <span class='edit_search_sum'>0</span></span><br><br>";
echo "<button id='edit_search_submit' class='search'>Trouver</button><br>";
echo "<br><br><hr class='OR' data-label='PUIS' /><br><br>";
echo "<input id='edit_code' type='text' placeholder='CO-DE-RF-ID'><br>";
echo "<input id='edit_username' type='text' placeholder='Username'><br>";
echo "<input id='edit_firstname' type='text' placeholder='Firstname'><br>";
echo "<input id='edit_lastname' type='text' placeholder='Lastname'><br>";
echo "<input id='edit_mail' type='text' placeholder='Mail'><br>";
echo "<input id='edit_password' type='password' placeholder='Password'><br>";
echo "<input id='edit_status' type='text' placeholder='Status'><br>";
echo "<button id='edit_submit' disabled>Modifier</button>";
echo "</form>";
echo '</section>';
/* [4] Gestion de filtrage
=========================================================*/
echo "<section data-sublink='filter'>";
echo "<form class='neutral'>";
echo "</form>";
echo '</section>';

View File

@ -6,38 +6,6 @@
use \manager\Repo;
?>
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='sub-menu-side'>
<span data-sublink='view'>
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/view/st/sub-menu-side' ); ?></span>
<span>Tout afficher</span>
</span>
<span data-sublink='create' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/create/st/sub-menu-side' ); ?></span>
<span>Creation</span>
</span>
<span data-sublink='remove' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/remove/st/sub-menu-side' ); ?></span>
<span>Suppression</span>
</span>
<span data-sublink='edit' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/edit/st/sub-menu-side' ); ?></span>
<span>Modification</span>
</span>
<span data-sublink='filter' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/filter/st/sub-menu-side' ); ?></span>
<span>Filtrer</span>
</span>
</nav>
<?php
@ -45,206 +13,10 @@
foreach($_POST as $k=>$v)
array_push($post, $k);
$sublink = $post[0];
$data = $post[0];
/* [1] VIEW -> Liste des utilisateurs
/* [1] TYPE -> Choix du type de donnees
=========================================================*/
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
$answer = $request->dispatch(); // On recupere la reponse
echo "Acquisition de donnees";
echo "<section data-sublink='view' class='list'>";
// echo 'Liste des utilisateurs: <br>';
// si erreur, on affiche l'explicitation
if( $answer->error != ManagerError::Success ){
// var_dump( ManagerError::explicit($answer->error) );
echo "<span class='error'>Une erreur est survenue, veuilez contacter le webmaster si cette erreur persiste.</span>";
}
// Si aucune erreur, on affiche les resultats
else{
// Barre de recherche
echo "<input type='text' class='searchbar' placeholder='Recherche'>";
// Liste des utilisateurs
foreach( $answer->get('users') as $user){
$clusters = new Repo('user/getClusters', array($user['id_user']));
$clusters = $clusters->answer();
echo "<article class='inline-box' id='".$user['id_user']."'>";
// Prenom Nom
echo "<span class='title'>".$user['firstname']." ".$user['lastname']." <span>#".$user['username']."</span></span>";
// Icone vers la suppression
echo "<span class='link_remove' data-user='".$user['id_user']."'>";
echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
echo "</span>";
// Icone vers la modification
echo "<span class='link_edit' data-user='".$user['id_user']."'>";
echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
echo "</span>";
// Code RFID
echo "<span class='code'>";
echo ResourceDispatcher::getResource('f/svg/card/st/container');
echo "<span>";
echo $user['code'];
echo "</span>";
echo"</span>";
// Adresse email
echo "<span class='mail'>";
echo ResourceDispatcher::getResource('f/svg/mail/st/container');
echo "<a href='mailto:".$user['mail']."'><span>";
echo $user['mail'];
echo "</span></a>";
echo"</span>";
// Groupes de la machine
echo "<span class='groups'>";
echo ResourceDispatcher::getResource('f/svg/group/st/container');
if( $clusters != false )
foreach($clusters as $cluster)
echo "<span>".$cluster['name']."</span>";
echo "<span class='add-group' data-user='".$user['id_user']."'>+</span>";
echo"</span>";
echo "</article>";
}
}
echo '</section>';
/* [2] Creation d'utilisateur
=========================================================*/
echo "<section data-sublink='create'>";
echo "<form class='valid'>";
echo "<input id='create_code' type='text' placeholder='CO-DE-RF-ID'><br>";
echo "<input id='create_username' type='text' placeholder='Username'><br>";
echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>";
echo "<input id='create_lastname' type='text' placeholder='Lastname'><br>";
echo "<input id='create_mail' type='text' placeholder='Mail'><br>";
echo "<input id='create_password' type='password' placeholder='Password'><br>";
echo "<input id='create_status' type='text' placeholder='Status'><br>";
echo "<button id='create_submit'>Créer</button>";
echo "</form>";
echo '</section>';
/* [3] Suppression d'utilisateur
=========================================================*/
echo "<section data-sublink='remove'>";
echo "<form class='invalid'>";
// Recherche d'utilisateur
echo "<input id='remove_search_keyword' type='text' class='search' placeholder='Recherche...'><br>";
echo "<input id='remove_search_id' type='hidden' value=''>";
// Indice du resultat
echo "<span class='remove_search_view'>utilisateur <span class='remove_search_num'>0</span> sur <span class='remove_search_sum'>0</span></span><br><br>";
echo "<button id='remove_search_submit' class='search'>Trouver</button><br>";
echo "<br><br><hr class='OR' data-label='PUIS' /><br><br>";
// Suppression d'utilisateur
echo "<input id='remove_code' type='text' placeholder='Code'><br>";
echo "<input id='remove_username' type='text' placeholder='Username'><br>";
echo "<button id='remove_submit' disabled>Supprimer</button>";
echo "</form>";
echo '</section>';
/* [4] Modification d'utilisateur
=========================================================*/
echo "<section data-sublink='edit'>";
echo "<form class='neutral'>";
echo "<input id='edit_search_keyword' type='text' class='search' placeholder='Recherche...'><br>";
echo "<input id='edit_search_id' type='hidden' value=''>";
// Indice du resultat
echo "<span class='edit_search_view'>utilisateur <span class='edit_search_num'>0</span> sur <span class='edit_search_sum'>0</span></span><br><br>";
echo "<button id='edit_search_submit' class='search'>Trouver</button><br>";
echo "<br><br><hr class='OR' data-label='PUIS' /><br><br>";
echo "<input id='edit_code' type='text' placeholder='CO-DE-RF-ID'><br>";
echo "<input id='edit_username' type='text' placeholder='Username'><br>";
echo "<input id='edit_firstname' type='text' placeholder='Firstname'><br>";
echo "<input id='edit_lastname' type='text' placeholder='Lastname'><br>";
echo "<input id='edit_mail' type='text' placeholder='Mail'><br>";
echo "<input id='edit_password' type='password' placeholder='Password'><br>";
echo "<input id='edit_status' type='text' placeholder='Status'><br>";
echo "<button id='edit_submit' disabled>Modifier</button>";
echo "</form>";
echo '</section>';
/* [4] Gestion de filtrage
=========================================================*/
echo "<section data-sublink='filter'>";
echo "<form class='neutral'>";
echo "</form>";
echo '</section>';
?>

View File

View File

@ -1,471 +0,0 @@
// On referencie toutes les sections
var section = {
view: {
text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar')
},
create: {
text: '#CONTAINER > section[data-sublink="create"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="create"]')
},
remove: {
text: '#CONTAINER > section[data-sublink="remove"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="remove"]')
},
edit: {
text: '#CONTAINER > section[data-sublink="edit"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="edit"]')
}
};
/* GESTION DE L'AFFICHAGE DES MACHINES
*
*/
if( section.view.element != null ){
/* (1) On recupere tous les liens */
section.view.link = {
edit: document.querySelectorAll(section.view.text + '.link_edit[data-machine]'),
remove: document.querySelectorAll(section.view.text + '.link_remove[data-machine]')
};
/* (2) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){
var search = {
path: 'machineDefault/search',
data: [section.view.searchbar.value]
};
// On envoie la requete
api.send(search, function(result){
if( result.ModuleError == 0 ){ // si aucune erreur
// On enregistre tous les UID dans un tableau
var uid_list = [];
for( var i = 0 ; i < result.machines.length ; i++ )
uid_list.push( result.machines[i].id_machine);
// On recupere la liste des elements correspondants aux utilisateurs
var machine_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
// Pour chaque machine
for( var i = 0 ; i < machine_list.length ; i++ ){
// Si doit etre visible
if( uid_list.indexOf(machine_list[i].id) > -1 )
machine_list[i].remClass('hidden');
// Si ne doit pas etre visible
else
machine_list[i].addClass('hidden');
}
}
});
}, false);
/* (3) On gere la "redirection" vers la modification */
for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
section.view.link.edit[i].addEventListener('click', function(e){
pageManager.vars[1] = e.target.getData('machine');
autofill_edit(pageManager.vars[1]);
navSubMenu('edit');
}, false);
}
/* (4) On gere la "redirection" vers la suppression */
for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
section.view.link.remove[i].addEventListener('click', function(e){
pageManager.vars[1] = e.target.getData('machine');
autofill_remove(pageManager.vars[1]);
navSubMenu('remove');
}, false);
}
}
/* GESTION DE LA CREATION D'UNE MACHINE
*
*/
if( section.create.element != null ){
// On recupere tous les champs
section.create.input = {
code: document.querySelector(section.create.text + '#create_code'),
name: document.querySelector(section.create.text + '#create_name'),
submit: document.querySelector(section.create.text + '#create_submit')
}
// On initialise le gestionnaire des saisies
var createChecker = new inputChecker();
/* (1) Gestion du code RFID */
createChecker.append( section.create.input.code, format_code, '01-AB-CD-23');
section.create.input.code.addEventListener('keyup', function(e){
e.target.value = e.target.value.toUpperCase();
if( !createChecker.check(e.target) )
createChecker.correct(e.target, false);
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.create.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
var request = {
path: 'machineDefault/create', // On veut creer un utilisateur
data: [
section.create.input.code.value,
section.create.input.name.value
]
};
api.send(request, function(answer){
if( answer.ModuleError == 0 ){ // Tout s'est bien deroule
console.log('Machine cree!');
section.create.input.submit.anim('active', 1500);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}, false);
}
/* [3] remove -> Suppression de machine
=========================================================*/
if( section.remove.element != null ){
/* (1) Definition des champs */
section.remove.input = {
search: {
view: document.querySelector(section.remove.text + '.remove_search_view'),
num: document.querySelector(section.remove.text + '.remove_search_num'),
sum: document.querySelector(section.remove.text + '.remove_search_sum'),
keyword: document.querySelector(section.remove.text + '#remove_search_keyword'),
id: document.querySelector(section.remove.text + '#remove_search_id'),
submit: document.querySelector(section.remove.text + '#remove_search_submit')
},
code: document.querySelector(section.remove.text + '#remove_code'),
name: document.querySelector(section.remove.text + '#remove_name'),
submit: document.querySelector(section.remove.text + '#remove_submit')
};
var lastsearch_remove = null;
var searchindex_remove = 0;
/* (2) Gestion de l'auto-remplissage par lien */
function autofill_remove(id_machine){
// On recupere le code + name de la machine selectionnee
var machine_data = machine_data = {
id_machine: '',
code: '',
name: '',
disable_input: true
};
api.send({path:'machineDefault/getById', data: [id_machine]}, function(answer){
if( answer.ModuleError == 0 ){ // Aucune erreur
machine_data = answer.machine;
machine_data.diable_input = false;
}
// On enregistre l'UID de la machine
section.remove.input.search.id.value = machine_data.id_machine;
// Auto-remplissage du formulaire
section.remove.input.code.value = machine_data.code;
section.remove.input.name.value = machine_data.name;
// On gere le caractere "inactif" du submit
section.remove.input.submit.disabled = machine_data.disable_input;
// Muse a jour des indices des resultats
section.remove.input.search.num.innerHTML = searchindex_remove+1;
});
}if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ) autofill_remove(pageManager.vars[1]);
/* (3) Gestion de la recherche */
section.remove.input.search.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si le champ n'est pas vide, on lance la recherche
if( section.remove.input.search.keyword.value != '' ){
// Redaction de la requete
var getuid = {
path: 'machineDefault/search',
data: [section.remove.input.search.keyword.value]
};
// On envoie la requete
api.send(getuid, function(uidanswer){
if( uidanswer.ModuleError == 0 && uidanswer.machines.length > 0){ // si on a trouve qqch
section.remove.input.search.submit.anim('active', 1000);
// Si on trouve la meme machine que lors de la derniere recherche
if( lastsearch_remove == uidanswer.machines[searchindex_remove].id_machine )
searchindex_remove = (searchindex_remove+1) % uidanswer.machines.length; // on affiche le prochain (decalage cyclique)
lastsearch_remove = uidanswer.machines[searchindex_remove].id_machine;
section.remove.input.search.id.value = lastsearch_remove;
// Mise a jour des indices des resultats
section.remove.input.search.sum.innerHTML = uidanswer.machines.length;
// on auto-remplit le formulaire
autofill_remove(lastsearch_remove);
}else{
section.remove.input.search.sum.innerHTML = 0;
autofill_remove(null);
}
});
}
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.remove.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si l'id est defini
if( section.remove.input.search.id.value != '' ){
/* (2) On supprime la machine */
var request = {
path: 'machineDefault/delete', // On veut supprimer cet utilisateur
data: [section.remove.input.search.id.value]
};
api.send(request, function(answer){
if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Machine supprimee!');
section.remove.input.submit.anim('active', 1500);
// On vide le formulaire
autofill_remove(null);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}
}, false);
}
/* [4] edit -> Modification de machine
=========================================================*/
if( section.edit.element != null ){
// Definition des champs
section.edit.input = {
search: {
view: document.querySelector(section.edit.text + '.edit_search_view'),
num: document.querySelector(section.edit.text + '.edit_search_num'),
sum: document.querySelector(section.edit.text + '.edit_search_sum'),
keyword: document.querySelector(section.edit.text + '#edit_search_keyword'),
id: document.querySelector(section.edit.text + '#edit_search_id'),
submit: document.querySelector(section.edit.text + '#edit_search_submit')
},
code: document.querySelector(section.edit.text + '#edit_code'),
name: document.querySelector(section.edit.text + '#edit_name'),
submit: document.querySelector(section.edit.text + '#edit_submit')
};
var lastsearch_edit = null;
var searchindex_edit = 0;
// Gestion de l'auto-remplissage par lien
function autofill_edit(id_machine){
// On recupere le code + name de la machine selectionnee
var machine_data = {
id_machine: '',
code: '',
name: '',
disable_input: true
};
// Si @id_machine est un entier
if( !isNaN(id_machine) ){
api.send({path:'machineDefault/getById', data: [id_machine]}, function(answer){
if( answer.ModuleError == 0 ){ // Aucune erreur
machine_data = answer.machine;
machine_data.disable_input = false;
}
// On enregistre l'UID de la machine
section.edit.input.search.id.value = machine_data.id_machine;
// Auto-remplissage du formulaire
section.edit.input.code.value = machine_data.code;
section.edit.input.name.value = machine_data.name;
// On active ou pas le bouton "Modifier"
section.edit.input.submit.disabled = machine_data.disable_input;
// Mise a jour des indices des resultats
section.edit.input.search.num.innerHTML = searchindex_edit+1;
});
}else
section.edit.input.search.num.innerHTML = 0;
}if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ) autofill_edit(pageManager.vars[1]);
/* (2) Gestion de la recherche de la machine */
section.edit.input.search.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si le champ n'est pas vide, on lance la recherche
if( section.edit.input.search.keyword.value != '' ){
// Redaction de la requete
var getuid = {
path: 'machineDefault/search',
data: [section.edit.input.search.keyword.value]
};
// On envoie la requete
api.send(getuid, function(uidanswer){
if( uidanswer.ModuleError == 0 && uidanswer.machines.length > 0 ){ // si on a trouve qqch
section.edit.input.search.submit.anim('active', 1000);
// Si on trouve la meme machine que lors de la derniere recherche
if( lastsearch_edit == uidanswer.machines[searchindex_edit].id_machine )
searchindex_edit = (searchindex_edit+1) % uidanswer.machines.length; // on affiche le prochain (decalage cyclique)
else // si nouveau resultat, on remet l'indice a 0
searchindex_edit = 0;
lastsearch_edit = uidanswer.machines[searchindex_edit].id_machine;
section.edit.input.search.id.value = lastsearch_edit;
// Mise a jour des indices des resultats
section.edit.input.search.sum.innerHTML = uidanswer.machines.length;
// on auto-remplit le formulaire
autofill_edit(lastsearch_edit);
}else{
section.edit.input.search.sum.innerHTML = 0;
autofill_edit(null);
}
});
}
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.edit.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si l'id est defini
if( section.edit.input.search.id.value != '' ){
var request = {
path: 'machineDefault/edit', // On veut creer une machine
data: [
section.edit.input.search.id.value,
section.edit.input.code.value,
section.edit.input.name.value
]
};
api.send(request, function(answer){
if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Machine modifiee!');
section.edit.input.submit.anim('active', 1500);
// On met a jour la machine
autofill_edit(section.edit.input.search.id.value);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}
}, false);
}

View File

@ -1,504 +0,0 @@
// On referencie toutes les sections
var section = {
view: {
text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]'),
searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar')
},
create: {
text: '#CONTAINER > section[data-sublink="create"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="create"]')
},
remove: {
text: '#CONTAINER > section[data-sublink="remove"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="remove"]')
},
edit: {
text: '#CONTAINER > section[data-sublink="edit"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="edit"]')
}
};
/* [1] view -> AFFICHAGE DES UTILISATEURS
=========================================================*/
if( section.view.element != null ){
/* (1) On recupere tous les liens */
section.view.link = {
edit: document.querySelectorAll(section.view.text + '.link_edit[data-user]'),
remove: document.querySelectorAll(section.view.text + '.link_remove[data-user]')
};
/* (2) Gestion de la recherche instantannee */
section.view.searchbar.addEventListener('keyup', function(e){
var search = {
path: 'userDefault/search',
data: [section.view.searchbar.value]
};
// On envoie la requete
api.send(search, function(result){
console.log(result.users.length);
if( result.ModuleError == 0 ){ // si aucune erreur
// On enregistre tous les UID dans un tableau
var uid_list = [];
for( var i = 0 ; i < result.users.length ; i++ )
uid_list.push( result.users[i].id_user);
// On recupere la liste des elements correspondants aux utilisateurs
var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
// Pour chaque utilisateur
for( var i = 0 ; i < user_list.length ; i++ ){
// Si doit etre visible
if( uid_list.indexOf(user_list[i].id) > -1 )
user_list[i].remClass('hidden');
// Si ne doit pas etre visible
else
user_list[i].addClass('hidden');
}
}
});
}, false);
/* (3) On gere la "redirection" vers la modification */
for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
section.view.link.edit[i].addEventListener('click', function(e){
pageManager.vars[1] = e.target.getData('user');
autofill_edit(pageManager.vars[1]);
navSubMenu('edit');
}, false);
}
/* (4) On gere la "redirection" vers la suppression */
for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
section.view.link.remove[i].addEventListener('click', function(e){
pageManager.vars[1] = e.target.getData('user');
autofill_remove(pageManager.vars[1]);
navSubMenu('remove');
}, false);
}
}
/* [2] create -> Creation d'utilisateur
=========================================================*/
if( section.create.element != null ){
// On recupere tous les champs
section.create.input = {
code: document.querySelector(section.create.text + '#create_code'),
username: document.querySelector(section.create.text + '#create_username'),
firstname: document.querySelector(section.create.text + '#create_firstname'),
lastname: document.querySelector(section.create.text + '#create_lastname'),
mail: document.querySelector(section.create.text + '#create_mail'),
password: document.querySelector(section.create.text + '#create_password'),
status: document.querySelector(section.create.text + '#create_status'),
submit: document.querySelector(section.create.text + '#create_submit')
}
// On initialise le gestionnaire des saisies
var createChecker = new inputChecker();
/* (1) Gestion du code RFID */
createChecker.append( section.create.input.code, format_code, '01-AB-CD-23');
section.create.input.code.addEventListener('keyup', function(e){
e.target.value = e.target.value.toUpperCase();
if( !createChecker.check(e.target) )
createChecker.correct(e.target, false);
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.create.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
var request = {
path: 'userDefault/create', // On veut creer un utilisateur
data: [
section.create.input.code.value,
section.create.input.username.value,
section.create.input.firstname.value,
section.create.input.lastname.value,
section.create.input.mail.value,
section.create.input.password.value,
section.create.input.status.value
]
};
api.send(request, function(answer){
if( answer.ModuleError == 0 ){ // Tout s'est bien deroule
console.log('Utilisateur cree!');
section.create.input.submit.anim('active', 1500);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}, false);
}
/* [3] remove -> Suppression d'utilisateur
=========================================================*/
if( section.remove.element != null ){
/* (1) Definition des champs */
section.remove.input = {
search: {
view: document.querySelector(section.remove.text + '.remove_search_view'),
num: document.querySelector(section.remove.text + '.remove_search_num'),
sum: document.querySelector(section.remove.text + '.remove_search_sum'),
keyword: document.querySelector(section.remove.text + '#remove_search_keyword'),
id: document.querySelector(section.remove.text + '#remove_search_id'),
submit: document.querySelector(section.remove.text + '#remove_search_submit')
},
code: document.querySelector(section.remove.text + '#remove_code'),
username: document.querySelector(section.remove.text + '#remove_username'),
submit: document.querySelector(section.remove.text + '#remove_submit')
};
var lastsearch_remove = null;
var searchindex_remove = 0;
/* (2) Gestion de l'auto-remplissage par url */
function autofill_remove(id_user){
// On recupere le code + username de l'utilisateur selectionne
var user_data = {
id_user: '',
code: '',
username: '',
firstname: '',
lastname: '',
mail: '',
status: '',
disable_input: true
};
api.send({path:'userDefault/getById', data: [id_user]}, function(answer){
if( answer.ModuleError == 0 ){ // Si un resultat
user_data = answer.user;
user_data.disable_input = false;
}
// On enregistre l'UID de l'utilisateur
section.remove.input.search.id.value = user_data.id_user;
// Auto-remplissage du formulaire
section.remove.input.code.value = user_data.code;
section.remove.input.username.value = user_data.username;
// On affiche le bouton de suppression
section.remove.input.submit.disabled = user_data.disable_input;
// Muse a jour des indices des resultats
section.remove.input.search.num.innerHTML = searchindex_remove+1;
});
}if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ) autofill_remove(pageManager.vars[1]);
/* (3) Gestion de la recherche */
section.remove.input.search.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si le champ n'est pas vide, on lance la recherche
if( section.remove.input.search.keyword.value != '' ){
// Redaction de la requete
var getuid = {
path: 'userDefault/search',
data: [section.remove.input.search.keyword.value]
};
// On envoie la requete
api.send(getuid, function(uidanswer){
if( uidanswer.ModuleError == 0 && uidanswer.users.length > 0){ // si on a trouve qqch
section.remove.input.search.submit.anim('active', 1000);
// Si on trouve la meme machine que lors de la derniere recherche
if( lastsearch_remove == uidanswer.users[searchindex_remove].id_user )
searchindex_remove = (searchindex_remove+1) % uidanswer.users.length; // on affiche le prochain (decalage cyclique)
else // si nouveau resultat, on remet l'indice a 0
searchindex_remove = 0;
lastsearch_remove = uidanswer.users[searchindex_remove].id_user;
section.remove.input.search.id.value = lastsearch_remove;
// Mise a jour des indices des resultats
section.remove.input.search.sum.innerHTML = uidanswer.users.length;
// on auto-remplit le formulaire
autofill_remove(lastsearch_remove);
}else{
section.remove.input.search.sum.innerHTML = 0;
autofill_remove(null);
}
});
}
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.remove.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si l'id est defini
if( section.remove.input.search.id.value != '' ){
/* (2) On supprime l'utilisateur */
var request = {
path: 'userDefault/delete', // On veut supprimer cet utilisateur
data: [section.remove.input.search.id.value]
};
api.send(request, function(answer){
if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Utilisateur supprime!');
section.remove.input.submit.anim('active', 1500);
// On vide le formulaire
autofill_remove(null);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}
}, false);
}
/* [4] edit -> Modification d'utilisateur
=========================================================*/
if( section.edit.element != null ){
// Definition des champs
section.edit.input = {
search: {
view: document.querySelector(section.edit.text + '.edit_search_view'),
num: document.querySelector(section.edit.text + '.edit_search_num'),
sum: document.querySelector(section.edit.text + '.edit_search_sum'),
keyword: document.querySelector(section.edit.text + '#edit_search_keyword'),
id: document.querySelector(section.edit.text + '#edit_search_id'),
submit: document.querySelector(section.edit.text + '#edit_search_submit')
},
code: document.querySelector(section.edit.text + '#edit_code'),
username: document.querySelector(section.edit.text + '#edit_username'),
firstname: document.querySelector(section.edit.text + '#edit_firstname'),
lastname: document.querySelector(section.edit.text + '#edit_lastname'),
mail: document.querySelector(section.edit.text + '#edit_mail'),
password: document.querySelector(section.edit.text + '#edit_password'),
status: document.querySelector(section.edit.text + '#edit_status'),
submit: document.querySelector(section.edit.text + '#edit_submit')
};
var lastsearch_edit = null;
var searchindex_edit = 0;
/* (1) Gestion de l'auto-remplissage par url */
function autofill_edit(id_user){
// On definit les valeurs par defaut
var user_data = {
id_user: '',
code: '',
username: '',
firstname: '',
lastname: '',
mail: '',
status: '',
disable_input: true
};
// Si @id_user est un entier
if( !isNaN(id_user) ){
// On recupere le code + username de l'utilisateur selectionne
api.send({path:'userDefault/getById', data: [id_user]}, function(answer){
if( answer.ModuleError == 0 ){ // Si aucune erreur
user_data = answer.user;
user_data.disable_input = false;
}
// On enregistre l'UID de l'utilisateur
section.edit.input.search.id.value = user_data.id_user;
// Auto-remplissage du formulaire
section.edit.input.code.value = user_data.code;
section.edit.input.username.value = user_data.username;
section.edit.input.firstname.value = user_data.firstname;
section.edit.input.lastname.value = user_data.lastname;
section.edit.input.mail.value = user_data.mail;
section.edit.input.password.value = '';
section.edit.input.status.value = user_data.status;
// On active ou pas le bouton "Modifier"
section.edit.input.submit.disabled = user_data.disable_input;
// Mise a jour des indices des resultats
section.edit.input.search.num.innerHTML = searchindex_edit+1;
});
}else
section.edit.input.search.num.innerHTML = 0;
}if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ) autofill_edit(pageManager.vars[1]);
/* (2) Gestion de la recherche de l'utilisateur */
section.edit.input.search.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si le champ n'est pas vide, on lance la recherche
if( section.edit.input.search.keyword.value != '' ){
// Redaction de la requete
var getuid = {
path: 'userDefault/search',
data: [section.edit.input.search.keyword.value]
};
// On envoie la requete
api.send(getuid, function(uidanswer){
if( uidanswer.ModuleError == 0 && uidanswer.users.length > 0 ){ // si on a trouve qqch
section.edit.input.search.submit.anim('active', 1000);
// Si on trouve le meme utilisateur que lors de la derniere recherche
if( lastsearch_edit == uidanswer.users[searchindex_edit].id_user )
searchindex_edit = (searchindex_edit+1) % uidanswer.users.length; // on affiche le prochain (decalage cyclique)
else // si nouveau resultat, on remet l'indice a 0
searchindex_edit = 0;
lastsearch_edit = uidanswer.users[searchindex_edit].id_user;
section.edit.input.search.id.value = lastsearch_edit;
// Mise a jour des indices des resultats
section.edit.input.search.sum.innerHTML = uidanswer.users.length;
// on auto-remplit le formulaire
autofill_edit(lastsearch_edit);
}else{
section.edit.input.search.sum.innerHTML = 0;
autofill_edit(null);
}
});
}
}, false);
/* (n) Gestion de l'envoi du formulaire */
section.edit.input.submit.addEventListener('click', function(e){
// On annule l'envoi de base (PHP)
e.preventDefault();
// Si l'id est defini
if( section.edit.input.search.id.value != '' ){
var request = {
path: 'userDefault/edit', // On veut creer un utilisateur
data: [
section.edit.input.search.id.value,
section.edit.input.code.value,
section.edit.input.username.value,
section.edit.input.firstname.value,
section.edit.input.lastname.value,
section.edit.input.mail.value,
section.edit.input.password.value,
section.edit.input.status.value
]
};
api.send(request, function(answer){
console.log( answer );
if( answer.ModuleError == 0 && answer.status == true ){ // Tout s'est bien deroule
console.log('Utilisateur modifie!');
section.edit.input.submit.anim('active', 1500);
// On met a jour l'utilisateur
autofill_edit(section.edit.input.search.id.value);
}else // Erreur
console.error('ModuleError::'+answer.ModuleError);
});
}
}, false);
}

View File

@ -5,45 +5,5 @@
use \manager\ResourceDispatcher;
?>
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='sub-menu-side'>
<span data-sublink='displayall'>
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/view/st/sub-menu-side' ); ?></span>
<span>Tout afficher</span>
</span>
<span data-sublink='create' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/create/st/sub-menu-side' ); ?></span>
<span>Creation</span>
</span>
<span data-sublink='remove' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/remove/st/sub-menu-side' ); ?></span>
<span>Suppression</span>
</span>
<span data-sublink='edit' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/edit/st/sub-menu-side' ); ?></span>
<span>Modification</span>
</span>
<span data-sublink='filter' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/filter/st/sub-menu-side' ); ?></span>
<span>Filtrer</span>
</span>
<span data-sublink='search' >
<span class='svg'><?php echo ResourceDispatcher::getResource( 'f/svg/search/st/sub-menu-side' ); ?></span>
<span>Recherche</span>
</span>
</nav>
<section>
Bienvenue sur la page des PARAMETRES
</section>
Parametres