logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Mise en page des formulaires (1re fois)

This commit is contained in:
xdrm-brackets 2016-02-14 20:37:41 +01:00
parent 89b7846dd0
commit 6a9c6de8a7
13 changed files with 588 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/constants.scss
View File

@ -1,4 +1,8 @@
$theme-color: #2138e6;
$theme-color: #e63321; $theme-color: #e63321;
$sub-menu-color: #5b5e63; $sub-menu-color: #5b5e63;
/* FORMULAIRES */
$form-valid-color: #2193e6;
$form-invalid-color: #e63321;
$form-neutral-color: #7f7f7f;

2
css/container.css
View File

@ -1,2 +1,2 @@
#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#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}#WRAPPER>#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%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default} #WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password]{display:inline-block;margin:1em 0;padding:.3em .5em;border-radius:0;border:none;border-bottom:1px solid transparent;color:#000}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus{border-color:#e63321}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #e63321;background-color:#fff;color:#e63321;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover{background-color:#e63321;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.valid:hover{background-color:#2193e6;color:#fff}
/*# sourceMappingURL=container.css.map */ /*# sourceMappingURL=container.css.map */

145
css/container.scss
View File

@ -2,76 +2,7 @@
#WRAPPER > #CONTAINER{ #WRAPPER > #CONTAINER{
/* [1] Menu interne (sub-menu-side) /* [1] Section (contenu)
=========================================================*/
& > .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;
}
}
/* [2] Section (contenu)
=========================================================*/ =========================================================*/
& > section{ & > section{
display: none; display: none;
@ -97,7 +28,7 @@
/* [3] INLINE-BOX pour afficher les listes de donnees /* [2] INLINE-BOX pour afficher les listes de donnees
=========================================================*/ =========================================================*/
& > section > .inline-box{ & > section > .inline-box{
display: inline-block; display: inline-block;
@ -216,5 +147,77 @@
} }
/* [3] Formulaires
=========================================================*/
& > section > form{
display: inline-block;
position: relative;
// width: calc( 100% - 2*1em - 2*1em );
margin: .3em 0;
padding: 1em;
border-radius: 3px;
box-shadow: 0 0 1px #b7b7b7;
background-color: #fff;
/* (1) Champs de texte */
input[type=text],
input[type=mail],
input[type=password]{
display: inline-block;
margin: 1em 0;
padding: .3em .5em;
border-radius: 0;
border: none;
border-bottom: 1px solid transparent;
color: #000;
&:focus{
border-color: $theme-color;
}
}
/* (2) Boutons */
button, button.invalid{
display: inline-block;
position: relative;
left: 50%;
padding: .5em 1em;
border-radius: 2px;
border: 1px solid $form-invalid-color;
background-color: #fff;
color: $form-invalid-color;
transition: background .2s ease-in-out;
transform: translateX(-50%);
&:hover{
background-color: $form-invalid-color;
color: #fff;
}
}
button.valid{
border-color: $form-valid-color;
color: $form-valid-color;
&:hover{
background-color: $form-valid-color;
color: #fff;
}
}
}
} }

2
css/menu-side.css
View File

@ -1,2 +1,2 @@
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 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:#00A6EB;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,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important} #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:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 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,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
/*# sourceMappingURL=menu-side.css.map */ /*# sourceMappingURL=menu-side.css.map */

2
css/submenu-side.css
View File

@ -1,2 +1,2 @@
#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 */ /*# sourceMappingURL=submenu-side.css.map */

68
css/submenu-side.scss
View File

@ -1 +1,67 @@
@import 'constants'; @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;
}
}

293
js/lib/input-checker.js Normal file
View File

@ -0,0 +1,293 @@
// __ _ _ _
// / _| ___ _ __ _ __ ___ __ _| |_ ___| |__ ___ ___| | _____ _ __
// | |_ / _ \| '__| '_ ` _ \ / _` | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
// | _| (_) | | | | | | | | (_| | ||_____| (__| | | | __/ (__| < __/ |
// |_| \___/|_| |_| |_| |_|\__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
//
function formatChecker(pValue, pPattern, pRules){
this.value = pValue;
this.pattern = pPattern;
this.rules = (arguments.length>2) ? pRules : [];
};
formatChecker.prototype = {
value: this.value, // valeur à formater
pattern: this.pattern, // format global
rules: this.rules, // définition des règles du format global
regexp: null, // contiendra la RegExp de validation
// règles par défaut
default_rules: {
'i': '[0-9]', // i = integer
'a': '[a-z]', // a = lower case
'A': '[A-Z]', // A = upper case
'x': '[a-zA-Z]' // x = letter
},
// créé une RegExp en fonction du format global @pattern et des règles @rules
compile: function(){
var RegExpExpr = '^'; // contiendra les chaines de la regex
var RegExpDecomposition = [];
// on parcours les caractères du pattern
for( var i = 0 ; i < this.pattern.length ; i++ ){
/* [1] Cas où la règle est définie par l'utilisateur
====================================================*/
if( this.rules.hasOwnProperty( this.pattern[i] ) ){
RegExpExpr += this.rules[ this.pattern[i] ];
RegExpDecomposition.push( this.rules[ this.pattern[i] ] );
/* [2] Cas où la règle est définie par défaut
====================================================*/
}else if( this.default_rules.hasOwnProperty( this.pattern[i] ) ){
RegExpExpr += this.default_rules[ this.pattern[i] ];
RegExpDecomposition.push( this.default_rules[ this.pattern[i] ] );
/* [3] Cas où on prends juste le caractère en compte
====================================================*/
}else{
RegExpExpr += this.pattern[i];
RegExpDecomposition.push( this.pattern[i] );
}
}
RegExpExpr += '$';
// on définit la RegExp associée
this.regexp = new RegExp( RegExpExpr );
// on la complète avec la décomposition par caractère du pattern
this.regexp.patternDecomposition = RegExpDecomposition;
},
// vérifie la validité en utilisant la RegExp, si elle n'est pas générée, on la génère
check: function(pPlotPlate){
/* [1] On génère la RegExp si ce n'est pas déjà fait
====================================================*/
if( this.regexp == null ) this.compile();
/* [2] Gestion de la plaque à trous
====================================================*/
if( arguments.length > 0 && pPlotPlate instanceof Array){
// on parcours les caractères du pattern
for( var i = 0 ; i < this.pattern.length ; i++ ){
var RegExpExpr = '^';
/* [1] Cas où la règle est définie par l'utilisateur
====================================================*/
if( this.rules.hasOwnProperty( this.pattern[i] ) )
RegExpExpr += this.rules[ this.pattern[i] ];
/* [2] Cas où la règle est définie par défaut
====================================================*/
else if( this.default_rules.hasOwnProperty( this.pattern[i] ) )
RegExpExpr += this.default_rules[ this.pattern[i] ];
/* [3] Cas où on prends juste le caractère en compte
====================================================*/
else
RegExpExpr += this.pattern[i];
RegExpExpr += '$';
pPlotPlate.push( this.value[i].match( new RegExp(RegExpExpr) ) != null );
}
}
// on retourne TRUE si c'est bon, FALSE sinon
return this.value.match( this.regexp ) != null;
}
};
/***********/
/* USECASE */
/***********/
/* [1] On créé une instance du formatChecker()
==================================================*/
/*HIDDEN*///var instance = new formatChecker(
/*HIDDEN*/// 'te2t 1 2 1/23', // la chaîne à vérifier
/*HIDDEN*/// 'aava i i i/ii', // le schéma à respecter (cf. règles par défaut)
/*HIDDEN*/// {'v': '[0-2]'} // règles spécifiques. Ici, 'v' correspond à un chiffre compris entre 0 et 2
/*HIDDEN*///);
/* [2] On récupère le résultat de la vérification
==================================================*/
// Note. On passe ici en paramètre un tableau qui va être rempli à TRUE pour les caractères
// correspondant au schéma, FALSE pour les erreurs
/*HIDDEN*///var respecteSchema = instance.check( plotPlate=[] );
/*HIDDEN*///console.log( respecteSchema ); // affichera "true"
/* [3] On accède à la plotPlate (afin de vérifier d'où vient l'erreur)
==================================================*/
/*HIDDEN*///console.log( plotPlate ); // affichera "[true, true, true, ..]""
// _ _ _ _
// (_)_ __ _ __ _ _| |_ ___| |__ ___ ___| | _____ _ __
// | | '_ \| '_ \| | | | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
// | | | | | |_) | |_| | ||_____| (__| | | | __/ (__| < __/ |
// |_|_| |_| .__/ \__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
//
function inputChecker(){};
inputChecker.prototype = {
input: [], // contiendra les éléments HTML <input>
defval: [], // contiendra les valeurs par défaut ou NULL si pas défini
checker: [], // contiendra les classes <formatChecker>
/* Ajout d'un champ <input> au vérificateur
*
* @pInputElement<HTMLInputElement> l'élément <input> à vérifier
* @pFormatChecker<formatChecker> l'instance <formatChecker> associée à la valeur voulue du champ
* @pDefaultValue<String> [OPT] Valeur par défaut pour l'input
*
*
* @return ajouté<Boolean> retourne TRUE, si le champ a bien été ajouté
* retourne FALSE, si une erreur occure
*/
append: function(pInputElement, pFormatChecker, optDefaultValue){
/* [1] Vérification des types
====================================================*/
if( !(pInputElement instanceof HTMLInputElement) ) return false; // si c'est pas un <input>, retourne FALSE
if( !(pFormatChecker instanceof formatChecker) ) return false; // si c'est pas un <formatChecker>, retourne FALSE
/* [2] Référencement des nouvelles données
====================================================*/
// insertion du <input>
var index = this.input.push( pInputElement );
// insertion du <formatChecker>, si pb d'insertion, retourne FALSE
if( index != this.checker.push(pFormatChecker) ) return false;
// insertion de la valeur par défaut (si définie), si pb d'insetion, retourne FALSE
if( index != (this.defval.push((arguments.length>2)?optDefaultValue:null)) ) return false;
},
/* Vérifie le format d'un champ <input> de rang spécifié
*
* @pInputElement<HTMLInputElement> L'élement qu'on veut vérifier
*
*
* @return verification<Boolean> retourne TRUE si la vérification s'avère correcte
* retourne FALSE si la vérification est incorrecte
*/
check: function(pInputElement){
// si l'élément n'est pas référencé, retourne FALSE
var index = this.input.indexOf( pInputElement );
if( index < 0 ) return false;
/* [1] On remplace la valeur de vérification du <formatChecker> par la valeur actuelle de l'élément <input>
====================================================*/
this.checker[index].value = this.input[index].value;
/* [2] On renvoie le résultat du checker
====================================================*/
return this.checker[index].check();
},
/* Vérifie le format de tous les champs <input>
*
* @return verifications<Boolean> retourne TRUE si les vérifications s'avèrent correctes
* retourne FALSE si les vérifications sont incorrectes
*/
checkAll: function(){
var checkerCumul = true;
for( var i = 0 ; i < this.input.length ; i++ )
checkerCumul = checkerCumul && this.check(this.input[i]);
return checkerCumul;
},
/* Applique une correction en fonction du schéma
*
* @pInputElement<HTMLInputElement> l'élément <input> concerné
* @pToEnd<Boolean> si on doit corriger jusqu'à la fin ou uniquement jusqu'à l'avancéé actuelle
*
*
* @return correctValue<String> retourne la valeur corrigée
* retourne NULL si erreur
*/
correct: function(pInputElement, pToEnd){
/* GESTION PARAMS */
// on retourne une erreur si l'élément <input> n'est pas référencé
if( (index = this.input.indexOf(pInputElement)) < 0 ) return null;
var pToEnd = (arguments.length>1) ? pToEnd : true;
/* [1] On met à jour la valeur du <formatChecker>
====================================================*/
this.checker[index].value = this.input[index].value;
this.checker[index].compile(); // on génére la RegExp
var RegExpByChar = this.checker[index].regexp.patternDecomposition; // on retire "/^" et "$/" de la RegExp
var tmpValue = this.input[index].value; // on copie la "value" pour la modifier
if( !this.check(pInputElement) ){ // si la chaîne n'est pas correcte
var lastChar = null;
/* [2] Cas 1 : vérification de la chaîne complète
====================================================*/
for( var i = 0 ; i < RegExpByChar.length ; i++ ){ // on parcours le pattern
// si on dépasse de la valeur saisie et qu'on doit pas aller jusqu'à la fin, on quitte le FOR
if( !pToEnd && i >= this.input[index].value.length )
break;
lastChar = tmpValue[i];
// RegExp sur le caractère en question
var tmpRegExp = new RegExp( '^'+RegExpByChar[i]+'$' );
/* (1) Valeur inexistante (string.length < schéma.length)
-----------------------------------------------------------*/
if( tmpValue.length == 0 || tmpValue[i] == null )
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
/* (2) Valeur ne correspond pas au schéma du caractère
-----------------------------------------------------------*/
else if( tmpValue[i].match(tmpRegExp) == null ){
// si le caractère suivant match, on décale d'une position
if( tmpValue[i].match(new RegExp( '^'+RegExpByChar[i+1]+'$' )) != null )
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
// sinon on remplace
else
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i+1) );
}
}
// on tronque ce qui dépasse
tmpValue = tmpValue.slice(0, RegExpByChar.length);
// on met à jour la valeur de l'élément input
this.input[index].value = tmpValue;
}
}
};

4
js/lib/page-manager.js
View File

@ -22,8 +22,8 @@ pageManagerClass.prototype = {
page: null, // l'indice de la page courante dans pagelist page: null, // l'indice de la page courante dans pagelist
vars: [], // les variables suivant le nom de la page dans l'URL vars: [], // les variables suivant le nom de la page dans l'URL
path: '', // le chemin du dossier contenant les pages (.php) path: '', // le chemin du dossier contenant les pages (.php)
jsPath: '/view/jsview', // le chemin du dossier contenant les scripts (.js) jsPath: 'js', // le chemin du dossier contenant les scripts (.js)
cssPath: '/view/cssview', // le chemin du dossier contenant les feuilles de style (.css) cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css)
pagelist: null, // la liste des pages pouvant être chargées pagelist: null, // la liste des pages pouvant être chargées
container: null, // élément DOM qui contiendra le contenu des pages à charger container: null, // élément DOM qui contiendra le contenu des pages à charger
/* ======================================================================= /* =======================================================================

12
js/lib/reset.js
View File

@ -77,4 +77,14 @@ Element.prototype.remClass = function(className){
/* [3] On reformatte tout /* [3] On reformatte tout
====================================================*/ ====================================================*/
this.className = classArray.join(' ').trim(); this.className = classArray.join(' ').trim();
}; };
/* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER
*
*/
var format_code = new formatChecker(null, 'HH-HH-HH-HH', { 'H' : '[0-9A-F]'} )

11
todo.md
View File

@ -1,14 +1,17 @@
########### ###########
# A FAIRE # # A FAIRE #
########### ###########
- [x] [page-manager] Correction de l'inclusion des dépendances de page-manager
- [ ] Dev des managers et de l'API et liste des acces - [ ] Dev des managers et de l'API et liste des acces
- [ ] Creation de la base des managers et de l'API - [ ] Creation de la base des managers et de l'API
- [ ] Conception des managers et de l'API - [ ] Conception des managers et de l'API
- [ ] Definir graphiquement le #CONTAINER - [ ] Definir graphiquement le #CONTAINER
- [ ] Structure - [x] Structure
- [ ] Elements - [x] Elements
- [ ] Affichages - [x] Affichages
- [ ] Styles globaux - [x] Styles globaux
- [ ] Formulaires
- [ ] Buttons
############ ############
# EN COURS # # EN COURS #

3
view.php
View File

@ -22,10 +22,9 @@
<!-- Dépendences Javascript --> <!-- Dépendences Javascript -->
<script type='text/javascript' src='/js/lib/input-checker.js' ></script> <!-- Gestion dynamique des saisies -->
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) --> <script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
<!-- <script type='text/javascript' src='/js/lib/API.js' ></script> Gestion des dialogues client/serveur -->
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL --> <script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
<!-- <script type='text/javascript' src='/js/lib/shortcut-manager.js' ></script> Gestion des raccourcis clavier -->
</head> </head>
<body> <body>

47
view/js/users.js Normal file
View File

@ -0,0 +1,47 @@
// On referencie toutes les sections
var section = {
view: {
text: '#CONTAINER > section[data-sublink="view"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="view"]')
},
create: {
text: '#CONTAINER > section[data-sublink="create"] ',
element: document.querySelector('#CONTAINER > section[data-sublink="create"]')
}
};
/* GESTION DE LA CREATION D'UN 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'),
lasname: document.querySelector(section.create.text + '#create_lasname'),
mail: document.querySelector(section.create.text + '#create_mail'),
password: document.querySelector(section.create.text + '#create_password'),
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);
}

131
view/users.php
View File

@ -53,69 +53,92 @@
$sublink = $post[0]; $sublink = $post[0];
/* PAGE DES STATISTIQUES
*
*/
// if( $sublink == 'view' ){
// On recupere tous les utilisateurs /* [1] VIEW -> Liste des utilisateurs
debug(); =========================================================*/
$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>';
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault' // si erreur, on affiche l'explicitation
$answer = $request->dispatch(); // On recupere la reponse if( $answer->error != ManagerError::Success )
var_dump( ManagerError::explicit($answer->error) );
echo "<section data-sublink='view' class='list'>"; // Si aucune erreur, on affiche les resultats
// echo 'Liste des utilisateurs: <br>'; else{
foreach( $answer->get('users') as $user){
// si erreur, on affiche l'explicitation $clusters = new Repo('user/getClusters', array($user['id_user']));
if( $answer->error != ManagerError::Success ) $clusters = $clusters->answer();
var_dump( ManagerError::explicit($answer->error) );
// Si aucune erreur, on affiche les resultats echo "<article class='inline-box'>";
else{ // Prenom Nom
foreach( $answer->get('users') as $user){ echo "<span class='title'>".$user['username']." <span>(".$user['firstname']." ".$user['lastname'].")</span></span>";
$clusters = new Repo('user/getClusters', array($user['id_user']));
$clusters = $clusters->answer();
echo "<article class='inline-box'>"; // Code RFID
// Prenom Nom echo "<span class='code'>";
echo "<span class='title'>".$user['username']." <span>(".$user['firstname']." ".$user['lastname'].")</span></span>"; echo ResourceDispatcher::getResource('f/svg/card/st/container');
echo "<span>";
echo $user['code'];
echo "</span>";
echo"</span>";
// Code RFID // Adresse email
echo "<span class='code'>"; echo "<span class='mail'>";
echo ResourceDispatcher::getResource('f/svg/card/st/container'); echo ResourceDispatcher::getResource('f/svg/mail/st/container');
echo "<span>"; echo "<a href='mailto:".$user['mail']."'><span>";
echo $user['code']; echo $user['mail'];
echo "</span>"; echo "</span></a>";
echo"</span>"; echo"</span>";
// Adresse email // Groupes de la machine
echo "<span class='mail'>"; echo "<span class='groups'>";
echo ResourceDispatcher::getResource('f/svg/mail/st/container'); echo ResourceDispatcher::getResource('f/svg/group/st/container');
echo "<a href='mailto:".$user['mail']."'><span>"; if( $clusters != false )
echo $user['mail']; foreach($clusters as $cluster)
echo "</span></a>"; echo "<span>".$cluster['name']."</span>";
echo"</span>"; 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 "</article>";
}
var_dump( $answer->get('users') );
} }
var_dump( $answer->get('users') );
echo '</section>'; }
// } echo '</section>';
/* [2] Creation d'utilisateur
=========================================================*/
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
$answer = $request->dispatch(); // On recupere la reponse
echo "<section data-sublink='create'>";
echo "<form>";
echo "<input id='create_code' type='text' placeholder='Code'><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='text' placeholder='Mail'><br>";
echo "<button id='create_submit'>Créer</button>";
echo "</form>";
echo '</section>';