Discussion :

[pc75]

Bonjour,

J'aurai besoin de conseils pour mettre en place un contr�le dans la saisie de plages horaires pour des r�servations.

J'ai une page qui affiche la liste des salles. Dans cette liste, j'ai un lien sur chaque ligne qui permet d'acc�der � la liste des plages horaires des salles.

Dans ma page qui affiche la liste des plages horaires, j'ai un bouton cr�er qui ouvre une page de saisie.
Dans cette derni�re page, l'utilisateur saisit une date, une heure de d�but et une heure de fin.

Ma question : Je souhaite v�rifier (en js) que la plage horaire saisie ne chevauche pas une autre plage pour la m�me date.

J'ai pens� lire les r�servations de la salle et les mettre dans une balise select que je mettrai en hidden, puis faire mes contr�les.

Je ne suis pas sur d'�tre sur la bonne voie.

Des id�es ?

Merci.

[Kaamo]

Je pense que ce sujet peut t'int�resser (en particulier ce post)

[pc75]

Merci, mais est-ce que c'est une bonne fa�on de faire que d'utiliser un select cach� ?

[Kaamo]

Ha, je croyais que tu cherchais un algo.
Si tu veux faire le contr�le en Javascript, il faut donc que tu ram�nes les plages horaires d�j� utilis�es pour la salle et les stocker dans une variable JS. (soit � la constructions de la page, soit via AJAX).

Une fois les plages horaires dans une variable JS, il sera simple d'appliquer l'algo qui check si le cr�neau horaire est d�j� utilis� ou non.

Je vois pas pourquoi tu devrais stocker les plages horaires d�j� utilis�es dans un select ?

[pc75]

Re,

Je vois pas pourquoi tu devrais stocker les plages horaires d�j� utilis�es dans un select ?

Je r�cup�re ces donn�es dans une BDD.

[Kaamo]

Ces donn�es ... la nouvelle plage horaire � r�server donc ?
Peu importe que tu utilises un select, deux select, un input ... au final, c'est une date que tu devras ins�rer ne BDD.

Il faut penser : Quel sera le meilleur moyen pour l'utilisateur de s�lectionner une date au format date/heure ?

En effet, soit un select pour les heures, un pour les minutes .. ou alors utiliser une librairie qui s'occupe d�j� de �a. Je pense � datepicker par exemple (jQuery) et du timepicker

[pc75]

Non, j'ai du mal m'expliquer.

J'ai un �cran de saisie dans lequel l'utilisateur saisit une date (via un datepicker), une heure de d�but et une heure de fin (via des balises select au format hh:mm).

Quand l'utilisateur valide sa saisie, je veux v�rifier que la plage horaire saisie ne chevauche pas une autre plage horaire de la m�me date.

Voil� o� j'en suis :

J'ai fait une requ�te sql pour r�cup�rer tous les enregistrements (date + heure de d�but + heure de fin) de la salle pour alimenter un select avec une virgule comme s�parateur.
J'obtiens donc �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
<select name="lstPlages" style="visibility:hidden">
<option value="23/09/2013,10:00:00,11:30:00"></option>
<option value="23/09/2013,14:00:00,15:30:00"></option>
<option value="24/09/2013,10:30:00,12:00:00"></option>
</select>

Pour la v�rification, j'ai fais �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
function Chevauchement()
{
	var ddd = document.frmSaisie.txtDate.value;
	var Hdeb = document.frmSaisie.txtHdeb.value;
	var Hfin = document.frmSaisie.txtHfin.value;
	if (document.frmSaisie.lstPlages.length)
		{	
		for(i = 0; i < document.frmSaisie.lstPlages.length; i++)
			{
			var LaPlage = document.frmSaisie.lstPlages(i).value;
			var Detail = LaPlage.split(",");
			LaDate = Detail[0];
			HeureDeb = Detail[1].substring(0, 5);
			HeureFin = Detail[2].substring(0, 5);
			// Vérifier si même date
			if (LaDate == ddd)
				{
				if ( (Hdeb > HeureDeb && Hdeb < HeureFin) || (Hfin > HeureDeb && Hfin < HeureFin) || (Hdeb < HeureDeb && Hfin > HeureFin) )
					{
					return(false);
					}
				}
			}
		}
	else
		{
	    return(true);
		}
}

Est-ce que ma d�marche est correcte ?

[Kaamo]

il faut donc que tu ram�nes les plages horaires d�j� utilis�es pour la salle et les stocker dans une variable JS

C'est mieux que de les mettre dans un select, je pense.

A la construction du HTML, au lieu de faire un select avec les donn�es de la salle, tu stockes les donn�es dans un JSON. Exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var donnees_salle = ["23/09/2013,10:00:00,11:30:00", "23/09/2013,14:00:00,15:30:00", "24/09/2013,10:30:00,12:00:00"];

Ou si tu souhaites un niveau plus fin :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var donnees_salle = [
    {
        "date": "23/09/2013",
        "plages": [
            {
                "debut": "10:00:00",
                "fin": "11:30:00"
            },
            {
                "debut": "14:00:00",
                "fin": "15:30:00"
            }
        ]
    },
    {
        "date": "24/09/2013",
        "plages": [
            {
                "debut": "10:30:00",
                "fin": "12:00:00"
            }
        ]
    }
]

Ensuite, une fonction qui permet de checker si la nouvelle date saisie chevauche celles-ci.

Enfin, si tout est ok, tu ne soumets que la date saisie. Les autres �tant d�j� dans la BDD, �a ne sert � rien de les reposter

[pc75]

C'est mieux que de les mettre dans un select, je pense.

Et comment je fais pour stocker les plages horaires de ma base de donn�es dans une variable JS ?

[Kaamo]

De la m�me fa�on que tu cr�es le select ?
Sinon tu peux aussi passer par Ajax pour contr�ler la saisie et donc r�cup�rer les plages horaires d�j� utilis�es � la vol�e.

[pc75]

OK, Merci.

[pc75]

Re,

Je remonte mon sujet, car j'ai un autre souci.

J'ai une liste de dates avec des plages horaires dans une balise select

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<select name="lstPlages" style="visibility:hidden">
	<option value="23/09/2013,09:00:00,11:30:00"></option>
	<option value="23/09/2013,14:00:00,14:30:00"></option>
	<option value="23/09/2013,15:00:00,16:30:00"></option>
	<option value="24/09/2013,10:30:00,12:00:00"></option>
</select>

J'ai dans la m�me page des zones de saisie :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<input type="text" name="txtDate">
<input type="text" name="txtHdeb">
<input type="text" name="txtHfin">

Je cherche � v�rifier que la plage saisie ne chevauche pas une plage d�j� cr��e.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function Chevauchement()
{
	var ddd = document.frmSaisie.txtDate.value;
	var Hdeb = document.frmSaisie.txtHdeb.value;
	var Hfin = document.frmSaisie.txtHfin.value;
	if (document.frmSaisie.lstPlages.length)
		{
		for(i = 0; i < document.frmSaisie.lstPlages.length; i++)
			{
			var LaPlage = document.frmSaisie.lstPlages(i).value;
			var Detail = LaPlage.split(",");
			LaDate = Detail[0];
			HeureDeb = Detail[1].substring(0, 5);
			HeureFin = Detail[2].substring(0, 5);
			// Vérifier si même date
			if (LaDate == ddd)
				{
				if (Hdeb < HeureFin && Hfin > HeureDeb)
					{
					return (alert('Cette plage chevauche celle de ' + HeureDeb + ' à ' + HeureFin + ' du ' + LaDate));
					}
 
				}
			}
		}
	else
		{
	    return(true);
		}
}

Le probl�me est que il y a des cas o� ma fonction ne retourne rien.
Par exemple, si je saisi le 24/09/2013 de 14:00 � 16:00, ma saisie n'est pas prise en compte et je n'ai aucun message.

Quelqu'un pour me mettre sur la piste ?

Merci.

[Kaamo]

Ce ne sont pas des parenth�ses mais des chevrons qu'il faut mettre

document.frmSaisie.lstPlages(i).value => document.frmSaisie.lstPlages[i].value.

Je pr�sume que tu te sers de cette fonction dans le onsubmit du formulaire ? (parenth�se : d'ailleurs, par convention, il est d�conseill� de mettre une majuscule en premier pour ce genre de fonction. Les fonctions commen�ant par une Majuscule sont, par convention, des constructeurs d'objet).

Pourquoi retourner une alert ??
return alert('ok'), par exemple, est �quivalent de return undefined. Or, undefined est interpr�t� � false. Je ne sais pas si c'est un coup de chance ou si c'est fait expr�s mais vaut mieux retourner false directement.

Pourquoi retourner true si aucune valeur n'est renseign�e ? Cela va soumettre le formulaire. Or ce n'est pas la peine.

�vite d'acc�der � tes �l�ments ainsi : document.frmSaisie.txtDate.
Dote tes input d'un id <input type="text" name="txtDate" id="txtDate"> et acc�des-y directement : document.getElementById('txtDate').

[pc75]

Re,

Merci de tes conseils.

En fait, cette fonction est appel�e depuis une autre fonction qui v�rifie que toutes les valeurs sont bien renseign�es et que l'heure de fin est sup�rieure � l'heure de d�but..

J'ai ajout� un return(true); apr�s la ligne 24 et le comportement de la v�rif semble OK.