html/reservation.php

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Page principale</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>
		<form method="POST" action="ajoutReservation.php">
			<div>
				<input type="date" name="txtDate" id="txtDate" onclick="minimum();" onchange="dispo_creneau();" required>
			</div>
			<div>
				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>
				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>
				Heure de fin du créneau : <div id="fin">01h00</div>
			</div>
			<div>
				<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 = day+"/"+month+"/"+year;
				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("-");
						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;
								chgt.style.color="red";
							}
						}else{
							for(var i=0;i<24;i++){
								var chgt = document.getElementById(i);
								chgt.disabled=false;	
								chgt.style.color="black";
							}
						}
					}
				}
				xhttp.open('POST','dispoCreneau.php',true);
				xhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				xhttp.send(params);
			}
		</script>
	</body>	
</html>