projet-php/js/consultations.js

var notifBar = document.getElementById('NOTIFBAR');
notifBar.children[1].children[2].addEventListener('click', function(e){
	e.preventDefault();
	remClass(notifBar, 'active');
}, false);



/* [1] On récupère les 2 <select> de création de RDV 
===============================================================*/
var newRDVPatient = document.getElementById('newRDVPatient');
var newRDVMedecin = document.getElementById('newRDVMedecin');

/* [2] Si on a récupéré les 2 <select>, 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]");
		
		// 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');

	}, false);
}







/* [1] VERIFICATION DES CHAMPS DE LA CREATION
======================================================*/
var inCk = new inputChecker();
	var inDate  = document.getElementById('inDate');
	var inHeure = document.getElementById('inHeure');
	var sbCreer = document.getElementById('sbCreer');

// format de date simplifié
var dateFormat = new formatChecker(null,
	'Ji/Mi/iiii', { 'J': '[0-3]', 'M': '[0-1]' }
);

// format de temps simplifié
var timeFormat = new formatChecker(null,
	'Hi:Mi', { 'H': '[0-2]', 'M': '[0-6]' }
);


inCk.append( inDate,  dateFormat,  '01/01/2015'       );
inCk.append( inHeure, timeFormat,  '23:59'            );

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);

inDuree.addEventListener('keyup', function(e){
	if( !isNaN(parseInt(inDuree.value)) ){
		inDuree.value = parseInt( inDuree.value ); // on caste en <int>
		addClass(inDuree, 'validated');            // on active la classe si correct
	}else // si incorrect
		remClass(inDuree, 'validated');            // on désactive la classe
}, false);





//////////////////////////////
// VERIFICATION DU SUBMIT() //
//////////////////////////////
sbCreer.addEventListener('click', function(e){
	e.preventDefault(); // on annule le submit()

	var formElements = sbCreer.parentNode.children;
	var checker = true;

	// pour chaque <input type='text'> du formulaire (fils direct uniquement)
	for( var i = 0 ; i < formElements.length ; i++ ){ if( formElements[i] instanceof HTMLInputElement && formElements[i].type == 'text' ){
		// si le champ est requis (required)
		if( formElements[i].required )
			checker = checker && formElements[i].className.indexOf('validated') > -1; // TRUE => validé (niveau interface)
		// si le champ n'est pas requis et pas vide, on le vide
		else if( formElements[i].value != '' && formElements[i].className.indexOf('validated') < 0 ) // si incorrect et pas vide
			formElements[i].value = ''; // on vide
	}}

	var inputCheckerValid = inCk.check(inDate) && inCk.check(inHeure);
	var selectNoDefault = newRDVPatient.value != '*' && newRDVMedecin.value != '*';

	
	if( inputCheckerValid && checker && selectNoDefault ){ // si tout es ok uniquement, on submit()
		var request = {
			id_patient: newRDVPatient.value,
			id_medecin: newRDVMedecin.value,
			date: inDate.value,
			heure: inHeure.value,
			duree: inDuree.value
		};

		API.send('RDV:add', request, function(e){
			notif(e.status, e.title, e.message);
			
			if( e.status == 'success' ) // on vide le formulaire si on a 'success'
				sbCreer.parentNode.reset();
		}, false);


	}else{ // sinon on affiche l'erreur
		notif('error', 'Oups!', 'Certains champs sont requis ou incorrects.');
	}
}, false);








/* [2] Verification des champs de la consultation
======================================================*/
var inCk2 = new inputChecker();
	var csMonth   = document.getElementById('csMonth');
	var csPatient = document.getElementById('csPatient');
	var csMedecin = document.getElementById('csMedecin');


// format de mois simplifié
var monthFormat = new formatChecker(null, 'Mi/iiii', { 'M': '[0-1]' } );
inCk2.append( csMonth, monthFormat, csMonth.placeholder );

csMonth.addEventListener('keyup', function(e){
	if( inCk2.check(csMonth) ) addClass(csMonth, 'validated'); // on active la classe si correct
	else{                             // si incorrect
		remClass(csMonth, 'validated'); // on désactive la classe
		inCk2.correct(csMonth, false);   // on corrige partiellement
		if( inCk2.check(csMonth) ) addClass(csMonth, 'validated'); // mise à jour de la classe après correction
	}
}, false);







/* [3] Affinage du calendrier
======================================================*/
var dayCells = document.querySelectorAll('#calendar rect[class^="day_"]');


// pour chaque jour, on créé l'évènement
for( var i = 0 ; i < dayCells.length ; i++ ){
	dayCells[i].addEventListener('click', function(e){
		console.log( e.target );
	}, false);
}