html/reservation.php

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Réserver un banc</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
		      rel="stylesheet"
		      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
		      crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//E1J19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
			crossorigin="anonymous">
		</script>
	</head>
	<body>
		<?php
			session_start();
			if(isset($_SESSION['identifiant'])){
				$identifiant = $_SESSION['identifiant'];
			}else{
				echo "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
			}
			include("connexion.php");
			$requete = "SELECT * FROM banc ORDER BY numero";
			$exec_requete = mysqli_query($db,$requete);
			$reponse = mysqli_fetch_all($exec_requete);
			mysqli_close($db);
		?>
		<form method="POST" action="menu.php"> 
			<button class="btn-lg btn-secondary" type="submit">Retour au menu</button>
		</form>
		<?php
			if(isset($_GET['erreur'])){
				$erreur = $_GET['erreur'];
				if($erreur==1){
					echo "<div class='text-center' style='color:red'>";
					echo "Un problème est apparu lors de la réservation. Veuillez réessayer. <br>";
					echo "</div>";
				}
			}		
		?>
		<form method="POST" action="ajoutReservation.php">
			<div class="text-center">
				<input type="date" name="txtDate" id="txtDate" onclick="minimum();" onchange="dispo_creneau();" required>
			</div>
			<div class="text-center" style="padding-left: 40rem!important; padding-right: 40rem!important;">
				Banc choisi : 
				<select class="form-select" name="banc" id="banc" onchange="dispo_creneau();" required>
				<?php
					foreach($reponse as $value){
						echo '<option value="'.$value[0].'">'.$value[0].'</option>';
					}	
				?>
				</select>
			</div>
			<div class="text-center" style="padding-left: 40rem!important; padding-right: 40rem!important;">
				Heure de début du créneau :
				<select class="form-select" name="heure" id="heure" onchange='calcul_fin();' required>
					<option value="0" id="0" selected> 00h00 </option>
					<option value="1" id="1"> 01h00 </option>
					<option value="2" id="2"> 02h00 </option>
					<option value="3" id="3"> 03h00 </option>
					<option value="4" id="4"> 04h00 </option>
					<option value="5" id="5"> 05h00 </option>
					<option value="6" id="6"> 06h00 </option>
					<option value="7" id="7"> 07h00 </option>
					<option value="8" id="8"> 08h00 </option>
					<option value="9" id="9"> 09h00 </option>
					<option value="10" id="10"> 10h00 </option>
					<option value="11" id="11"> 11h00 </option>
					<option value="12" id="12"> 12h00 </option>
					<option value="13" id="13"> 13h00 </option>
					<option value="14" id="14"> 14h00 </option>
					<option value="15" id="15"> 15h00 </option>
					<option value="16" id="16"> 16h00 </option>
					<option value="17" id="17"> 17h00 </option>
					<option value="18" id="18"> 18h00 </option>
					<option value="19" id="19"> 19h00 </option>
					<option value="20" id="20"> 20h00 </option>
					<option value="21" id="21"> 21h00 </option>
					<option value="22" id="22"> 22h00 </option>
					<option value="23" id="23"> 23h00 </option>
				</select>
			</div>
			<div class="text-center">
				Heure de fin du créneau : <div id="fin">01h00</div>
			</div>
			<div class="text-center">
				<button class="btn-lg btn-success" type="submit">Reserver</button>
			</div>
		</form>
		<script type="text/javascript">
			function minimum(){
				var dtToday=new Date();
				var month=dtToday.getMonth()+1;
				var day=dtToday.getDate();
				var year=dtToday.getFullYear();
				if(month<10)
					month='0'+month.toString();
				if(day<10)
					day='0'+day.toString();
				var minDate=year.toString()+'-'+month+'-'+day;
				var txtdate=document.getElementById('txtDate');
				txtdate.min=minDate;	
			}
			function calcul_fin(){
				var test = document.getElementById('heure');
				var lafin = document.getElementById('fin');
				var valeur=parseInt(test.value)+1;
				if(valeur==24)
					valeur=0;
				if(valeur<10)
					var h='0'+valeur.toString();
				else
					var h=valeur.toString();
				lafin.textContent=h+"h00";
			}
			function dispo_creneau(){
				var txtDate = document.getElementById('txtDate');
				var newBanc = document.getElementById('banc');
				var realBanc = newBanc.value;
				var valDate = txtDate.value.split("-");
				var year = valDate[0];
				var month = valDate[1];
				var day = valDate[2];
				var realDate = year+"/"+month+"/"+day;
				var xhttp = new XMLHttpRequest();
				var params = "date="+realDate+"&banc="+realBanc;
				console.log(params);
				xhttp.onreadystatechange=function(){
					if(xhttp.readyState==4){
						// Si requete faite, on modifie les horaires non dispo
						var elemId;	
						var texte=xhttp.responseText.split("-");
						console.log(texte);
						console.log(texte.length);
						if(texte.length>1){
							for(var i=0;i<texte.length-1;i++){
								if(texte[i][0]==0){
									elemId=texte[i][1];
								}else{
									elemId=texte[i][0]+texte[i][1];
								}
								var chgt = document.getElementById(elemId);
								chgt.disabled=true;
								console.log(chgt.disabled);
								chgt.style.color="red";
							}
						}else if(laDate!=theDate){
							for(var i=0;i<24;i++){
								var chgt = document.getElementById(i);
								chgt.disabled=false;
								chgt.style.color="black";
							}
						}
						console.log("Fin = "+chgt.disabled);
					}
				}
				xhttp.open('POST','dispoCreneau.php',true);
				xhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				xhttp.send(params);
				/* Enleve les creneaux deja passes dans la journee pour ne plus pouvoir les reserver */ 
				var horaire = new Date();
				var mois = parseInt(horaire.getMonth())+1;
				if(mois<10){
					var nouvMois = "0"+mois;
				}else{
					var nouvMois = mois;
				}
				var jour = horaire.getDate();
				if(jour<10){
					var nouvJour = "0"+jour;
				}else{
					var nouvJour = jour;
				}
				var laDate = nouvJour+"/"+nouvMois+"/"+horaire.getFullYear();
				var theDate = day+"/"+month+"/"+year;
				console.log(laDate);
				console.log(theDate);
				if(laDate==theDate){
					var heure = horaire.getHours();
					for(var i=0;i<parseInt(heure);i++){
						var nouvo = document.getElementById(i);
						nouvo.disabled=true;
						nouvo.style.color="red";
					}
					var truc = document.getElementById(heure);
					truc.selected=true;
					calcul_fin();
				}
				/* */
			}
		</script>
	</body>	
</html>