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.