<!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 = 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.setAttribute('disabled','disabled');
chgt.style.color="red";
}
}else{
for(var i=0;i<24;i++){
var chgt = document.getElementById(i);
chgt.removeAttribute('disabled');
chgt.style.color="black";
}
}
}
}
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();
console.log(laDate);
console.log(realDate);
if(laDate==realDate){
var heure = horaire.getHours();
for(var i=0;i<parseInt(heure);i++){
var chgt = document.getElementById(i);
chgt.setAttribute('disabled','disabled');
console.log(chgt.value);
chgt.style.color="red";
}
var chgt = document.getElementById(heure);
chgt.selected=true;
calcul_fin();
}
/* */
}
</script>
</body>
</html>