Discussion :

[DiabolO]

Bonjour à tous !

Et si l'utilisateur a désactivé js sur son navigateur ?

Lol apparemment ce n'est pas un truc à dire sur un forum JS

bon, c'est clair que tu n'as pas besoin d'un appel dynamique à la db pour déterminer si un créneau est libre;

Je ne souhaite pas déterminer si un créneau est libre mais plutôt savoir si un créneau qui est libre peut-être utilisé ou pas !! (Oui je sais ça paraît un peu débile ce que je viens de dire mais ça ne l'est pas...)

Exemple :

Mon application permet de reserver un court de tennis au début de chaque heure à partir de 8h jusqu'à 22h mais aussi au milieu de chaque heure (On peut très bien reserver un court de 8h à 9h mais aussi de 8h30 à 9h30 par exemple).
Admettons maintenant qu'un joueur reserve un court de 13h30 à 15h30. Un autre pourrait très bien reserver un court de 12h à 13h. Or entre 13h et 13h30 il n'est pas possible de reserver un court. Donc on perd 30 min de jeu dans la journée. Et si tout le monde procède ainsi on peut facilement perdre 3h de jeu dans une journée. Et ça c'est un problème pour moi !
Ce problème n'existerait pas si toutes les reservations se faisaient seulement au début de chaque heure. Mais ce n'est pas le cas ici ..
Donc pour régler ce problème j'ai décidé d'interdire aux utilisateurs de reserver sur un créneau susceptible de laisser des trous dans le planning (En fait ce n'est pas très efficace comme solution si on regarde de près..enfin bref!!)

Il n'est pas possible de determiner à l'avance les zones vertes puisque le planning peut être découpé de plusieurs façon différentes. En effet un joueur peut reserver un court pour 1h 1h30 ou 2h ! c'est pourquoi j'ai eu l'idée des curseurs. En fait n'importe quel moyen de sélection sur le plannning ferait l'affaire !

Bref la meilleure solution pour le moment et selon moi est celle proposée par Nasky au début de ce topic .

QQn a une idée pour faire ce genre de curseur ?

Merci encore bonne soirée

[javatwister]

ben pourtant, ça me paraît jouable de proposer le tableau des créneaux directement !

mettons un planning vierge:
1) le premier client peut s'inscrire 1h , 1h30 ou 2h;
2) on lui interdit seulement les créneaux qui font perdre 30mn en début ou fin de journée;
3) le second client et tous les autres s'inscrirent également pour 1h , 1h30 ou 2h;
4) On leur interdit les créneaux qui font perdre 30mn en début de journée, fin de journée, et entre chaque réservation;
5) qu'est-ce qui ne va pas dans cette logique?
6) une option possible: au chargement, le tableau présente les créneaux utilisés (rouge); le client sélectionne dans un menu quelconque 1h, 1h30 ou 2h et valide: la page se recharge en lui présentant les seuls créneaux disponibles (autrement dit, il y a plus de zones rouges, voire, que du rouge);
enfin, le client clique zur l'une des zones possibles _ peut-être après avoir changé son voeu initial _ et son inscription est validée.
Pour les 2 échanges client / serveur (vérification des créneaux pour une durée et inscription) tu as le choix entre une soumission de formulaire classique (rechargement de page = communication html/php) et un envoi des données en arrière-plan (pas de rechargement = communication js/php);

[javatwister]

tiens, tout bien réfléchi, c'est rigolo de goupiller le script en js et de ne servir de MySQL que pour les validations

[DiabolO]

mettons un planning vierge:
1) le premier client peut s'inscrire 1h , 1h30 ou 2h;
2) on lui interdit seulement les créneaux qui font perdre 30mn en début ou fin de journée;
3) le second client et tous les autres s'inscrirent également pour 1h , 1h30 ou 2h;
4) On leur interdit les créneaux qui font perdre 30mn en début de journée, fin de journée, et entre chaque réservation;
5) qu'est-ce qui ne va pas dans cette logique?

Jusqu'ici on est d'accord !!

au chargement, le tableau présente les créneaux utilisés (rouge); le client sélectionne dans un menu quelconque 1h, 1h30 ou 2h et valide: la page se recharge en lui présentant les seuls créneaux disponibles (autrement dit, il y a plus de zones rouges, voire, que du rouge);
enfin, le client clique zur l'une des zones possibles _ peut-être après avoir changé son voeu initial _ et son inscription est validée.

En gros: si le client veut jouer 1h, le tableau affichera tous les créneaux d'1h disponibles. S'il choisit 2h, le tableau affichera tous les créneaux de 2h disponibles ?

[javatwister]

oui!

par contre, si tu peux reproduire ici la routine qui vérifie les créneaux côté serveur, ça m'intéresse

[javatwister]

voici un brouillon très réduit (une demi-journée complètement fictive, hors calendrier);

en fait, j'affiche en rouge les créneaux déjà pris et la réponse (oui / non) dépend de la durée choisie;
j'ai remplacé la phase de validation par une simple alerte mais c'est tout comme;

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#liste {
cursor:pointer;
height:100px;
list-style-type:none;
margin:50px;
padding:0px;
}
 
#liste li {
float:left;
width:50px;
background-color:#ffffff;
border:1px solid #000000;
}
 
#op {
margin-left:50px;
width:320px;
padding-left:20px;
border:2px ridge #ff0000;
}
 
</style>
 
 
</head>
 
<body>
 
 
<ul id="liste">
<li>8h</li>
<li>8h30</li>
<li>9h</li>
<li>9h30</li>
<li>10h</li>
<li>10h30</li>
<li>11h</li>
<li>11h30</li>
<li>12h</li>
<li>12h30</li>
</ul>
 
 
<p id="op">
<strong>Choisissez le temps de réservation souhaitée puis cliquez sur un horaire de début de séance.</strong><br />
<input type="radio" checked="checked" name="r" value="2" />1h<br />
<input type="radio" name="r" value="3" />1h30<br />
<input type="radio" name="r" value="4" />2h
</p>
 
<script type="text/javascript">
 
var ra=document.getElementsByName("r");
var ul=document.getElementById("liste").getElementsByTagName("li");
var n=2;
var t=[];
var q=[-2,-1,ul.length,ul.length+1];
 
for(i=0;i!=ra.length;i++){
	ra[i].onclick=function(){
		n=parseInt(this.value)
	}
}
 
for(i in q){
	t[q[i]]=true
}
 
 
for(i=0;i!=ul.length;i++){
	ul[i].ind=i;
	ul[i].onclick=function(){
		if(t[this.ind-2] && !t[this.ind-1] || !t[this.ind+n] && t[this.ind+n+1]){
			alert("Créneau indisponible.\n\nChoisissez éventuellement une durée de jeu différente.");
			return
		}
 
		for(j=0;j<n;j++){
			if(t[this.ind+j]){
				alert("Créneau indisponible.\n\nChoisissez éventuellement une durée de jeu différente.");
				return
			}
		} 
 
		for(j=0;j<n;j++){
			t[this.ind+j]=true;
			ul[this.ind+j].style.backgroundColor="#00ff00";
		}
		alert("Votre réservation est prise en compte de " + this.firstChild.data + " à " + ul[this.ind+n-1].firstChild.data)
		for(j=0;j<n;j++){
			ul[this.ind+j].style.backgroundColor="#ff0000";
		}
	}
}
 
 
</script>
 
 
 
 
</body>
</html>

[DiabolO]

Salut merci pour tes reponses, en ce moment j'suis en norvège donc j'verrais ça à mon retour lundi !

à bientôt et merci encore