From 6a9c6de8a7e1eeb703dff6ffd01b0c1e2dc293db Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 14 Feb 2016 20:37:41 +0100 Subject: [PATCH] Mise en page des formulaires (1re fois) --- css/constants.scss | 8 +- css/container.css | 2 +- css/container.scss | 145 ++++++++++---------- css/menu-side.css | 2 +- css/submenu-side.css | 2 +- css/submenu-side.scss | 68 +++++++++- js/lib/input-checker.js | 293 ++++++++++++++++++++++++++++++++++++++++ js/lib/page-manager.js | 4 +- js/lib/reset.js | 12 +- todo.md | 11 +- view.php | 3 +- view/js/users.js | 47 +++++++ view/users.php | 131 ++++++++++-------- 13 files changed, 588 insertions(+), 140 deletions(-) create mode 100644 js/lib/input-checker.js create mode 100644 view/js/users.js diff --git a/css/constants.scss b/css/constants.scss index ea5e11a..d34c4fe 100755 --- a/css/constants.scss +++ b/css/constants.scss @@ -1,4 +1,8 @@ -$theme-color: #2138e6; $theme-color: #e63321; -$sub-menu-color: #5b5e63; \ No newline at end of file +$sub-menu-color: #5b5e63; + +/* FORMULAIRES */ +$form-valid-color: #2193e6; +$form-invalid-color: #e63321; +$form-neutral-color: #7f7f7f; diff --git a/css/container.css b/css/container.css index 5a4daba..7e8dc8c 100755 --- a/css/container.css +++ b/css/container.css @@ -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 */ diff --git a/css/container.scss b/css/container.scss index 08ec517..918aa8d 100755 --- a/css/container.scss +++ b/css/container.scss @@ -2,76 +2,7 @@ #WRAPPER > #CONTAINER{ - /* [1] Menu interne (sub-menu-side) - =========================================================*/ - - & > .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) + /* [1] Section (contenu) =========================================================*/ & > section{ 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{ 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; + } + } + } } \ No newline at end of file diff --git a/css/menu-side.css b/css/menu-side.css index 38a3057..6f7528c 100755 --- a/css/menu-side.css +++ b/css/menu-side.css @@ -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 */ diff --git a/css/submenu-side.css b/css/submenu-side.css index 0149c70..669cf55 100755 --- a/css/submenu-side.css +++ b/css/submenu-side.css @@ -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 */ diff --git a/css/submenu-side.scss b/css/submenu-side.scss index 8f81aa8..3363508 100755 --- a/css/submenu-side.scss +++ b/css/submenu-side.scss @@ -1 +1,67 @@ -@import 'constants'; \ No newline at end of file +@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; + } + +} \ No newline at end of file diff --git a/js/lib/input-checker.js b/js/lib/input-checker.js new file mode 100644 index 0000000..f025c3e --- /dev/null +++ b/js/lib/input-checker.js @@ -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 + defval: [], // contiendra les valeurs par défaut ou NULL si pas défini + checker: [], // contiendra les classes + + + /* Ajout d'un champ au vérificateur + * + * @pInputElement l'élément à vérifier + * @pFormatChecker l'instance associée à la valeur voulue du champ + * @pDefaultValue [OPT] Valeur par défaut pour l'input + * + * + * @return ajouté 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 , retourne FALSE + if( !(pFormatChecker instanceof formatChecker) ) return false; // si c'est pas un , retourne FALSE + + + /* [2] Référencement des nouvelles données + ====================================================*/ + // insertion du + var index = this.input.push( pInputElement ); + + // insertion du , 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 de rang spécifié + * + * @pInputElement L'élement qu'on veut vérifier + * + * + * @return verification 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 par la valeur actuelle de l'élément + ====================================================*/ + 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 + * + * @return verifications 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 l'élément concerné + * @pToEnd si on doit corriger jusqu'à la fin ou uniquement jusqu'à l'avancéé actuelle + * + * + * @return correctValue retourne la valeur corrigée + * retourne NULL si erreur + */ + correct: function(pInputElement, pToEnd){ + /* GESTION PARAMS */ + + // on retourne une erreur si l'élément 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 + ====================================================*/ + 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; + } + + + } + + +}; \ No newline at end of file diff --git a/js/lib/page-manager.js b/js/lib/page-manager.js index 967dda0..a7f2bb1 100755 --- a/js/lib/page-manager.js +++ b/js/lib/page-manager.js @@ -22,8 +22,8 @@ pageManagerClass.prototype = { page: null, // l'indice de la page courante dans pagelist vars: [], // les variables suivant le nom de la page dans l'URL path: '', // le chemin du dossier contenant les pages (.php) - jsPath: '/view/jsview', // le chemin du dossier contenant les scripts (.js) - cssPath: '/view/cssview', // le chemin du dossier contenant les feuilles de style (.css) + jsPath: 'js', // le chemin du dossier contenant les scripts (.js) + cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css) pagelist: null, // la liste des pages pouvant être chargées container: null, // élément DOM qui contiendra le contenu des pages à charger /* ======================================================================= diff --git a/js/lib/reset.js b/js/lib/reset.js index 75be58a..5c65fbf 100755 --- a/js/lib/reset.js +++ b/js/lib/reset.js @@ -77,4 +77,14 @@ Element.prototype.remClass = function(className){ /* [3] On reformatte tout ====================================================*/ this.className = classArray.join(' ').trim(); -}; \ No newline at end of file +}; + + + + + + +/* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER +* +*/ +var format_code = new formatChecker(null, 'HH-HH-HH-HH', { 'H' : '[0-9A-F]'} ) \ No newline at end of file diff --git a/todo.md b/todo.md index c49b826..85526c0 100755 --- a/todo.md +++ b/todo.md @@ -1,14 +1,17 @@ ########### # 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 - [ ] Creation de la base des managers et de l'API - [ ] Conception des managers et de l'API - [ ] Definir graphiquement le #CONTAINER - - [ ] Structure - - [ ] Elements - - [ ] Affichages - - [ ] Styles globaux + - [x] Structure + - [x] Elements + - [x] Affichages + - [x] Styles globaux + - [ ] Formulaires + - [ ] Buttons ############ # EN COURS # diff --git a/view.php b/view.php index 71fdb45..9a62152 100755 --- a/view.php +++ b/view.php @@ -22,10 +22,9 @@ + - - diff --git a/view/js/users.js b/view/js/users.js new file mode 100644 index 0000000..0f7b102 --- /dev/null +++ b/view/js/users.js @@ -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); + +} \ No newline at end of file diff --git a/view/users.php b/view/users.php index 65cf32f..e3d57a8 100755 --- a/view/users.php +++ b/view/users.php @@ -53,69 +53,92 @@ $sublink = $post[0]; - /* PAGE DES STATISTIQUES - * - */ - // if( $sublink == 'view' ){ - // On recupere tous les utilisateurs - debug(); + /* [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 "
"; + // echo 'Liste des utilisateurs:
'; - $request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault' - $answer = $request->dispatch(); // On recupere la reponse + // si erreur, on affiche l'explicitation + if( $answer->error != ManagerError::Success ) + var_dump( ManagerError::explicit($answer->error) ); - echo "
"; - // echo 'Liste des utilisateurs:
'; - - // si erreur, on affiche l'explicitation - if( $answer->error != ManagerError::Success ) - var_dump( ManagerError::explicit($answer->error) ); + // Si aucune erreur, on affiche les resultats + else{ + foreach( $answer->get('users') as $user){ + $clusters = new Repo('user/getClusters', array($user['id_user'])); + $clusters = $clusters->answer(); - // Si aucune erreur, on affiche les resultats - else{ - foreach( $answer->get('users') as $user){ - $clusters = new Repo('user/getClusters', array($user['id_user'])); - $clusters = $clusters->answer(); + echo "
"; + // Prenom Nom + echo "".$user['username']." (".$user['firstname']." ".$user['lastname'].")"; - echo "
"; - // Prenom Nom - echo "".$user['username']." (".$user['firstname']." ".$user['lastname'].")"; + // Code RFID + echo ""; + echo ResourceDispatcher::getResource('f/svg/card/st/container'); + + echo ""; + echo $user['code']; + echo ""; + echo""; - // Code RFID - echo ""; - echo ResourceDispatcher::getResource('f/svg/card/st/container'); - - echo ""; - echo $user['code']; - echo ""; - echo""; + // Adresse email + echo ""; + echo ResourceDispatcher::getResource('f/svg/mail/st/container'); + + echo ""; + echo $user['mail']; + echo ""; + echo""; - // Adresse email - echo ""; - echo ResourceDispatcher::getResource('f/svg/mail/st/container'); - - echo ""; - echo $user['mail']; - echo ""; - echo""; - - // Groupes de la machine - echo ""; - echo ResourceDispatcher::getResource('f/svg/group/st/container'); - - if( $clusters != false ) - foreach($clusters as $cluster) - echo "".$cluster['name'].""; - echo""; - + // Groupes de la machine + echo ""; + echo ResourceDispatcher::getResource('f/svg/group/st/container'); + + if( $clusters != false ) + foreach($clusters as $cluster) + echo "".$cluster['name'].""; + echo""; + - echo "
"; - } - var_dump( $answer->get('users') ); - + echo "
"; } + var_dump( $answer->get('users') ); - echo '
'; + } - // } + echo '
'; + + + + + + + + + + + + + /* [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 "
"; + + echo "
"; + echo "
"; + echo "
"; + echo "
"; + echo "
"; + echo "
"; + echo "
"; + echo ""; + echo "
"; + + echo '
'; \ No newline at end of file