diff --git a/Consultations.php b/Consultations.php index 71eb667..e3c0c66 100755 --- a/Consultations.php +++ b/Consultations.php @@ -16,8 +16,10 @@ if(!Authentification::checkUser(0)){ + + @@ -42,27 +44,38 @@ if(!Authentification::checkUser(0)){
-
- Choix du patient -
- - Selection du médecin pour la consultation. - Médecin traitant du patient. -

- -

coucou +
+
+ Choix du patient +
+ Selection du médecin pour la consultation.Médecin traitant du patient. +
+ +
Date: + + +
Heure: + + +
Durée: + + +
+ +
+
diff --git a/css/global.css b/css/global.css index 2dbd5f2..6f114f6 100755 --- a/css/global.css +++ b/css/global.css @@ -165,11 +165,11 @@ body{ #WRAPPER > #CONTAINER{ /* position */ display: block; - position: absolute; + position: relative; top: 0; left: 225px; width: calc( 100% - 225px ); - height: 100%; + min-height: 100%; } @@ -307,7 +307,7 @@ body{ /* */ -#CONTAINER > article span{ +#CONTAINER > article > form > span{ margin-left: 1em; } @@ -326,7 +326,7 @@ body{ /* */ #CONTAINER > article input{ /* position */ - display: block; + display: inline-block; position: relative; margin: 1em; padding: .7em; @@ -345,4 +345,39 @@ body{ /* @focus */ #CONTAINER > article input:focus{ border-color: #999; -} \ No newline at end of file +} + +/* .validated */ +#CONTAINER > article input.validated{ + border-color: #1cc952; +} + + +/* [type=submit] */ +#CONTAINER > article input[type=submit]{ + /* position */ + padding-left: 3em; + + /* border */ + border-color: #f09108; + + /* background */ + background: #f6f4f2 url(../src/save.svg) center left 1em no-repeat; + background-size: 1em auto; + + /* foreground */ + color: #777; + + /* extra */ + cursor: pointer; +} + +/* @hover */ +#CONTAINER > article input[type=submit]:hover{ + /* background */ + background-color: #f09108; + background-image: url(../src/save@hover.svg); + + /* foreground */ + color: #fff; +} diff --git a/css/responsive.css b/css/responsive.css new file mode 100755 index 0000000..8b771cc --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,8 @@ +@media (max-width: 1024px){ + + #WRAPPER{ + left: calc( 50% - 50% - 1em ); + width: calc( 100% - 2em ); + } + +} \ No newline at end of file diff --git a/index.php b/index.php index 7feb6de..35bd17d 100755 --- a/index.php +++ b/index.php @@ -22,7 +22,7 @@ if(Authentification::checkUser(0)){ - Tests php + Connexion diff --git a/js/adjust.js b/js/adjust.js index ce85847..b3c7421 100755 --- a/js/adjust.js +++ b/js/adjust.js @@ -9,6 +9,10 @@ NodeList.prototype.indexOf = HTMLCollection.prototype.indexOf = function(searche }; + + + + function addClass(el, pClass){ if( el.className.length > 0 && el.className != pClass ) el.className = el.className + ' ' + pClass; else el.className = pClass; diff --git a/js/consultations.js b/js/consultations.js index ae43762..c914f5f 100755 --- a/js/consultations.js +++ b/js/consultations.js @@ -1,58 +1,218 @@ -/* [1] On récupère les 2 de création de RDV +// ===============================================================*/ +// var newRDVPatient = document.getElementById('newRDVPatient'); +// var newRDVMedecin = document.getElementById('newRDVMedecin'); -/* [2] Si on a récupéré les 2 , on créé l'évènement de selection dynamique +// ===============================================================*/ +// if( newRDVPatient != null && newRDVMedecin != null ){ - /* [1] On selectionne dynamiquement le médecin traitant associé - =======================================================================*/ - newRDVPatient.addEventListener('change', function(e){ - var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); +// /* [1] On selectionne dynamiquement le médecin traitant associé +// =======================================================================*/ +// newRDVPatient.addEventListener('change', function(e){ +// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); - // on selectionne le medecin associé - newRDVMedecin.value = child.dataset.medecin; - addClass(newRDVMedecin, 'associated'); - }, false); +// // on selectionne le medecin associé +// newRDVMedecin.value = child.dataset.medecin; +// addClass(newRDVMedecin, 'associated'); +// }, false); - // [1] On met en valeur le médecin traitant associé (class=associated) - // ======================================================================= - newRDVMedecin.addEventListener('change', function(e){ - var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); - if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association - addClass(newRDVMedecin, 'associated'); - else - remClass(newRDVMedecin, 'associated'); +// // [1] On met en valeur le médecin traitant associé (class=associated) +// // ======================================================================= +// newRDVMedecin.addEventListener('change', function(e){ +// var child = document.querySelector("#newRDVPatient > option[value='"+newRDVPatient.value+"'][data-medecin]"); +// if( newRDVMedecin.value == child.dataset.medecin ) // si c'est le medecin traitant, on met en valeur l'association +// addClass(newRDVMedecin, 'associated'); +// else +// remClass(newRDVMedecin, 'associated'); - }, false); -} +// }, false); +// } -/* GESTION DU NUMÉRO DE SÉCU */ -var inSecu = document.getElementById('inSecu'); // input du numéro de sécu -var ftSecu = 'x xx xx xx xxx xxx xx'; // format du numéro de sécu +// /* GESTION DU NUMÉRO DE SÉCU */ +// var inSecu = document.getElementById('inSecu'); // input du numéro de sécu +// var ftSecu = 'x xx xx xx xxx xxx xx'; // format du numéro de sécu + +// inSecu.addEventListener('keyup', function(e){ + +// // pour chaque caractère +// for( var i = 0 ; i < inSecu.value.length ; i++ ){ + +// // [1] si le caractère n'est pas un nombre, on le supprime +// if( isNaN(inSecu.value[i]) ) +// inSecu.value = inSecu.value.slice(0, i).concat( inSecu.value.slice(i+1) ); + +// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme +// if( inSecu.value[i] != ' ' && ftSecu[i] == ' ' ) +// inSecu.value = inSecu.value.slice(0, i).concat(' ').concat( inSecu.value.slice(i) ); + +// // [4] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours +// inSecu.value = inSecu.value.slice(0, ftSecu.length).trim(); +// } + +// // si input complet +// if( inSecu.value.length == ftSecu.length ) +// addClass(inSecu, 'validated'); +// else +// remClass(inSecu, 'validated'); + +// }, false); + + + + +// /* GESTION DE LA DATE */ +// var inDate = document.getElementById('inDate'); // input de la date +// var ftDate = 'dd/dd/dddd'; // format de la date + +// inDate.addEventListener('keyup', function(e){ + +// // pour chaque caractère +// for( var i = 0 ; i < inDate.value.length ; i++ ){ + +// // [1] si le caractère n'est pas un nombre, on le supprime +// if( isNaN(inDate.value[i]) ) +// inDate.value = inDate.value.slice(0, i).concat( inDate.value.slice(i+1) ); + +// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme +// if( inDate.value[i] != '/' && ftDate[i] == '/' ) +// inDate.value = inDate.value.slice(0, i).concat('/').concat( inDate.value.slice(i) ); + +// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours +// inDate.value = inDate.value.slice(0, ftDate.length).trim(); +// } + +// // [4] vérification de cohérence +// var pJour = inDate.value.slice(0,2); +// var pMois = inDate.value.slice(3,5); +// var pAnnee = inDate.value.slice(6,11); + +// // test de la validité +// var pDate = new Date(pJour+'/'+pMois+'/'+pAnnee); +// // if( pDate.toString() != 'Invalid Date' ){ +// // var pDateObj = { +// // jour: (''+(pDate.getDate()-1)).length != 2 ? '0'+(pDate.getDate()-1) : ''+(pDate.getDate()-1), +// // mois: (''+(pDate.getMonth()+1)).length != 2 ? '0'+(pDate.getMonth()+1) : ''+(pDate.getMonth()+1), +// // annee: (''+(pDate.getFullYear())).length != 4 ? '0'+(pDate.getFullYear()) : ''+(pDate.getFullYear()), +// // } +// // inDate.value = pDateObj.jour +'/'+ pDateObj.mois +'/'+ pDateObj.annee; +// // } + +// }, false); + + + +// /* GESTION DE L'HEURE */ +// var inHeure = document.getElementById('inHeure'); // input de la date +// var ftHeure = 'dd:dd'; // format de la date + +// inHeure.addEventListener('keyup', function(e){ + +// // pour chaque caractère +// for( var i = 0 ; i < inHeure.value.length ; i++ ){ + +// // [1] si le caractère n'est pas un nombre, on le supprime +// if( isNaN(inHeure.value[i]) ) +// inHeure.value = inHeure.value.slice(0, i).concat( inHeure.value.slice(i+1) ); + +// // [2] si c'est pas un espace mais qu'il en faut un, on met en forme +// if( inHeure.value[i] != ':' && ftHeure[i] == ':' ) +// inHeure.value = inHeure.value.slice(0, i).concat(':').concat( inHeure.value.slice(i) ); + +// // [3] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours +// inHeure.value = inHeure.value.slice(0, ftHeure.length).trim(); +// } + +// // [4] vérification de cohérence +// var pHeures = inHeure.value.slice(0,2); +// var pMinuts = inHeure.value.slice(3,5); + +// // on borne les valeurs +// if( pHeures.length == 2 ) pHeures = (pHeures>=24) ? '23' : pHeures; +// if( pMinuts.length == 2 ) pMinuts = (pMinuts>=60) ? '59' : pMinuts; + +// // on met au bon format dans tous les cas +// if( pHeures.length == 2 && pMinuts.length == 2 ){ +// addClass(inHeure, 'validated'); +// inHeure.value = pHeures+':'+pMinuts; +// }else +// remClass(inHeure, 'validated'); + +// }, false); + + + +/* VERIFICATION DES CHAMPS */ +var inCk = new inputChecker(); + var inDate = document.getElementById('inDate'); + var inHeure = document.getElementById('inHeure'); + var inSecu = document.getElementById('inSecu'); + + +// format de date simplifié +var dateFormat = new formatChecker( null, + 'Ji/Mi/2iii', + { 'J': '[0-3]', 'M': '[0-1]' } +); + +// format de temps simplifié +var timeFormat = new formatChecker( null, + 'Hi:Mi', + { 'H': '[0-2]', 'M': '[0-6]' } +); + +// format numéro SECU simplifié +var secuFormat = new formatChecker( null, + 'S ii ii ii iii iii ii', + { 'S': '[0-1]' } +); + + + + +var now = new Date(); +inCk.append( inDate, dateFormat, now.toLocaleFormat('%d/%m/%Y') ); +inCk.append( inHeure, timeFormat, now.toLocaleFormat('%H:%M') ); +inCk.append( inSecu, secuFormat, '1 23 45 67 890 123 45' ); + + +inDate.addEventListener('keyup', function(e){ + if( inCk.check(inDate) ) addClass(inDate, 'validated'); // on active la classe si correct + else{ // si incorrect + + remClass(inDate, 'validated'); // on désactive la classe + inCk.correct(inDate, false); // on corrige partiellement + if( inCk.check(inDate) ) addClass(inDate, 'validated'); // mise à jour de la classe après correction + } +}, false); + + +inHeure.addEventListener('keyup', function(e){ + if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // on active la classe + else{ // si incorrect + + remClass(inHeure, 'validated'); // on désactive la classe + inCk.correct(inHeure, false); // on corrige partiellement + if( inCk.check(inHeure) ) addClass(inHeure, 'validated'); // mise à jour de la classe après correction + } +}, false); inSecu.addEventListener('keyup', function(e){ + if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // on active la classe + else{ // si incorrect - // pour chaque caractère - for( var i = 0 ; i < inSecu.value.length ; i++ ){ - - // [1] si le caractère n'est pas un nombre, on le supprime - if( isNaN(inSecu.value[i]) ) - inSecu.value = inSecu.value.slice(0, i).concat( inSecu.value.slice(i+1) ); - - // [2] si c'est pas un espace mais qu'il en faut un, on met en forme - if( inSecu.value[i] != ' ' && ftSecu[i] == ' ' ) - inSecu.value = inSecu.value.slice(0, i).concat(' ').concat( inSecu.value.slice(i) ); - - // [4] Le numéro saisi est trop long, on le coupe + enlève les espaces alentours - inSecu.value = inSecu.value.slice(0, ftSecu.length).trim(); + remClass(inSecu, 'validated'); // on désactive la classe + inCk.correct(inSecu, false); // on corrige partiellement + if( inCk.check(inSecu) ) addClass(inSecu, 'validated'); // mise à jour de la classe après correction } +}, false); -}, false); \ No newline at end of file + +// inDate.value = 'x3 F3/a8'; +// inHeure.value = 'x3 F3/a8'; +// inSecu.value = 'x3 F3/a8'; \ No newline at end of file diff --git a/js/input-checker.js b/js/input-checker.js new file mode 100755 index 0000000..9e0293d --- /dev/null +++ b/js/input-checker.js @@ -0,0 +1,286 @@ +// __ _ _ _ +// / _| ___ _ __ _ __ ___ __ _| |_ ___| |__ ___ ___| | _____ _ __ +// | |_ / _ \| '__| '_ ` _ \ / _` | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__| +// | _| (_) | | | | | | | | (_| | ||_____| (__| | | | __/ (__| < __/ | +// |_| \___/|_| |_| |_| |_|\__,_|\__| \___|_| |_|\___|\___|_|\_\___|_| +// +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 + + /* [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; + + // 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) ); + i++; // on incrémente car on décale la valeur + + + /* (2) Valeur ne correspond pas au schéma du caractère + -----------------------------------------------------------*/ + }else if( tmpValue[i].match(tmpRegExp) == null ) + tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) ); + // Remarque. Ici on ne décale pas (i++) car le décalage fait correspondre au schéma + } + + + // 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/src/patient.svg b/src/patient.svg old mode 100644 new mode 100755 diff --git a/src/save.svg b/src/save.svg new file mode 100755 index 0000000..684127c --- /dev/null +++ b/src/save.svg @@ -0,0 +1,121 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/save@hover.svg b/src/save@hover.svg new file mode 100755 index 0000000..116425b --- /dev/null +++ b/src/save@hover.svg @@ -0,0 +1,121 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/toBDD.php b/toBDD.php old mode 100644 new mode 100755