I have this page in php where the user can click on the time slot and book a room. Now the issue I have found is Suppose an user1 books room from 4 to 6. Then another user2 comes & request the room from 3.30 to 5. It takes the request which should not be allowed. The request is sent to admin and saved in the database i.e MySQL.
The worry is if the admin rejects the request of user1 then user2 should be allowed. But if admin accepts user1 request then user2 should be given an error message or something to stop the booking of same time slot. Really confused how to stop this.
<?php session_start(); if(isset($_GET[ 'selecteddate'])) { $selecteddate=$_GET[ 'selecteddate']; } else { $selecteddate=date( "Y-m-d"); } ?>
<html>
<head>
<title>MRA</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<style>
#heading {
text-align: right;
font-size: 25px;
float: right;
margin: 50px 20px;
}
a:hover {
color: #BEBEBC;
}
a {
color: black;
}
#img {
margin: 10px 10px;
}
#td {
border-radius: 15px;
border-style: dotted solid;
}
.name-error,
.meeting-error {
color: red;
margin: 0 10px;
}
#plan {
position: fixed;
left: 50%;
margin-left: -239px;
top: 50%;
margin-top: -150px;
z-index: 10;
background-color: #fff;
padding: 10px;
}
#plan-bg {
width: 100%;
height: 100%;
position: fixed;
background: #000;
opacity: 0.8;
top: 0;
display: none;
z-index: 5;
}
.close {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
.close:hover {
text-decoration: underline;
}
#datepicker {
width: 40%;
float: left;
}
.calender-date {
padding: 0 10px;
}
#time-slot-msg,
#alert-msg {
position: fixed;
top: 50%;
left: 50%;
background: #fff;
font-size: 25px;
padding: 10px 20px;
margin: -50px 0 0 -184.5px;
display: none;
z-index: 10;
border-radius: 5px;
}
#time-slot-msg p,
#alert-msg p {
font-weight: bold;
}
#time-slot-msg .close,
#alert-msg .close {
font-size: 15px;
right: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var $index;
var systemdate = new Date();
$('.meeting-error').hide();
$(".meeting-timetable tr > td + td").click(function(e) {
if ($(this).hasClass('active')) {
e.preventDefault();
alert('The selected time slot has already been assigned');
} else {
var $thisVal = $(this).prevAll('td:first-child').text();
var hour = $thisVal.substr(0, 2);
var min = $thisVal.substr(3, 3);
var d = new Date("<?php print $selecteddate; ?>");
var n = d.getFullYear();
var m = d.getDate();
var k = d.getMonth();
var userdate = new Date(n, k, m, hour, min, 0);
if (systemdate > userdate) {
alert("Select Time Slot greater than the Current Time");
return;
}
$index = $(this).index();
// Start time.
$(".start-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).attr('selected', 'selected');
$(this).prevAll().attr('disabled', 'disabled');
}
});
// Change end time.
$(".end-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).next().attr('selected', 'selected');
$(this).attr('disabled', 'disabled');
$(this).prevAll().attr('disabled', 'disabled');
}
});
// Date input select.
var $date = $('.meeting-timetable tr:first-child th').text();
var dateFormat = $.datepicker.formatDate('yy-mm-dd', new Date($date));
$('.date').val(dateFormat);
$('#meeting').val('');
$('.meeting-error').hide();
// Show dialog box.
var _cellIndex = $(this)[0].cellIndex;
var _rowIndex = $(this).closest('tr')[0].sectionRowIndex;
var total_row = $('.meeting-timetable tr').length - 1;
if (_rowIndex == total_row && _cellIndex == 1) {
alert('You cannot select this time slot');
} else $('#plan, #plan-bg').fadeIn();
}
});
// On submit click change background color.
$('.submit-button').click(function(e) {
e.preventDefault();
var selectedValue = $(".start-time option:selected").text(),
selectedEndValue = $(".end-time option:selected").text(),
$name = $('input[name=txtname]').val();
if ($('#meeting').val()) {
$(".meeting-timetable tr > td").each(function() {
if ($(this).text() === selectedValue) {
$(this).parent('tr').addClass('active');
}
if ($(this).text() === selectedEndValue) {
var $parent = $(this).parent('tr').prevUntil('tr.active').addClass('active');
}
// Prev all td selected.
$($parent).each(function() {});
});
}
// Form validation.
if ($('#meeting').val() === '') {
$('.meeting-error').fadeIn();
}
// Grab form values
var formData = {
'txtrname': $('input[name=txtrname]').val(),
'txtname': $('input[name=txtname]').val(),
'txtpurpose': $('input[name=txtpurpose]').val(),
'attendee': $('select[name=attendee]').val(),
'txtdate': $('input[name=txtdate]').val(),
'btime': $('select[name=btime]').val(),
'etime': $('select[name=etime]').val()
};
if ($('#meeting').val().trim()) {
// Ajax form submit.
$.ajax({
type: "POST",
url: "insertkarma.php",
data: formData,
success: function() {
$('#alert-msg').fadeIn();
$('#plan').fadeOut();
}
});
} else {
alert('Please enter the purpose of meeting');
}
});
// on focus function
$('#meeting').focus(function() {
$('.meeting-error').fadeOut();
}).blur(function() {
if (!$(this).val()) {
$('.meeting-error').fadeIn();
}
});
$(".close").click(function() {
$('.pop-up').fadeOut();
});
// Adding calender.
$("#datepicker").datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
onSelect: function(date) {
var url = "karma.php?selecteddate=" + date;
window.location.assign(url);
}
});
});
</script>
</head>
<body background="a6.jpg">
<a href="homepage.php"><img id="img" src="HITECHLOGO.jpg" width="150px" height="100px"></a>
<h1 align="center" style="position:absolute;top:30px; left:600px;">KARMA<br> (3-SEATER)</h1>
<div id="heading"><a href="homepage.php" style="text-decoration:none;">Home</a>
<?php echo ucwords($_SESSION[ 'usr_name']); ?>
</font> <a href="logout.php" style="text-decoration:none;">Logout</a> <a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a>
</div>
<hr width="100%">
<?php $host="localhost" ; $username="root" ; $password="" ; $db_name="testing" ; $conn=mysqli_connect($host,$username,$password) or die( "cannot connect"); mysqli_select_db($conn,$db_name); $i=0 ; $dateEntry="SELECT `starttime` , `status_id` , `name` , floor(( time_to_sec(`endtime`)-time_to_sec(`starttime`) )/1800) as testing FROM `details` WHERE `date` = '$selecteddate' order by starttime" ; if ($result=mysqli_query($conn,$dateEntry)) { while ($obj=mysqli_fetch_object($result)) { $starttime[$i]=$ obj->starttime; $status[$i] = $obj->status_id; $name[$i] = $obj->name; $testing[$i] = $obj->testing; $i++; } } mysqli_close($conn); ?>
<table border="1" align="right" width="60%" style="border:black;">
<tr>
<td id="td" colspan="3" align="center">
<h1>Click to Book a Time Slot</h1></td>
</tr>
<tr>
<td bgcolor="red" align="center" id="td">Booked</td>
<td id="td" align="center" bgcolor="orange">Requested</td>
<td align="center" id="td">Available</td>
</td>
</tr>
<tr>
<td id="td" colspan="3">| <a href="karma.php"> Today </a> |</td>
</tr>
</table>
<table class="meeting-timetable" border="1" align="right" width="60%" style="border:black;">
<tr>
<th id="td" colspan="2" class="calender-date" align="center">
<?php print $selecteddate; ?>
</th>
</tr>
<tr>
<td id="08:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; " width="10%">08:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="08:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">08:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="09:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">09:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="09:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">09:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="10:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">10:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="10:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">10:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="11:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">11:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="11:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">11:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="12:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">12:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="12:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">12:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="13:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">13:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="13:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">13:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="14:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">14:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="14:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">14:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="15:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">15:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="15:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">15:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="16:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">16:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="16:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">16:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="17:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">17:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="17:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">17:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="18:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">18:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="18:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">18:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="19:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">19:00</td>
<td id="td"></td>
</tr>
<tr>
<td id="19:30:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">19:30</td>
<td id="td"></td>
</tr>
<tr>
<td id="20:00:00" align="center" style="border-radius: 15px;border-style: dotted solid; ">20:00</td>
<td id="td" class="showAlert"></td>
</tr>
</table>
<div id="plan" class="pop-up" style="display :none ">
<span class="close">Close</span>
<form align="center" method="post" id="inform">
<h1 align="center">Meeting Details</h1>
<table>
<tr>
<td><b>Room : </td><td><input type="text" name="txtrname" value="Karma" readonly></td></tr>
<tr><td><b>Name :</td><td><input type="text" name="txtname" readonly value="<?php echo ucwords($_SESSION['usr_name']); ?>" ></td></tr>
<tr><td><b>Purpose of Meeting :</td><td> <input id="meeting" type="text" name="txtpurpose"><span class="meeting-error">Enter the purpose of meeting</span></td></tr>
<tr><td><b>No. of Attendee :</td><td><select name="attendee"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td></tr>
<tr><td><b>Date :</td><td> <input class="date" type="text" name="txtdate" readonly value="yyyy/mm/dd"></td></tr>
<tr><td><b>Time : </td><td>Start Time <select class="start-time" name="btime">
<option value="08:00:00">08:00</option>
<option value="08:30:00">08:30</option>
<option value="09:00:00">09:00</option>
<option value="09:30:00">09:30</option>
<option value="10:00:00">10:00</option>
<option value="10:30:00">10:30</option>
<option value="11:00:00">11:00</option>
<option value="11:30:00">11:30</option>
<option value="12:00:00">12:00</option>
<option value="12:30:00">12:30</option>
<option value="13:00:00">13:00</option>
<option value="13:30:00">13:30</option>
<option value="14:00:00">14:00</option>
<option value="14:30:00">14:30</option>
<option value="15:00:00">15:00</option>
<option value="15:30:00">15:30</option>
<option value="16:00:00">16:00</option>
<option value="16:30:00">16:30</option>
<option value="17:00:00">17:00</option>
<option value="17:30:00">17:30</option>
<option value="18:00:00">18:00</option>
<option value="18:30:00">18:30</option>
<option value="19:00:00">19:00</option>
<option value="19:30:00">19:30</option>
<option value="20:00:00" disabled>20:00</option>
</select>
- End Time <select class="end-time" name="etime">
<option value="08:00:00">08:00</option>
<option value="08:30:00">08:30</option>
<option value="09:00:00">09:00</option>
<option value="09:30:00">09:30</option>
<option value="10:00:00">10:00</option>
<option value="10:30:00">10:30</option>
<option value="11:00:00">11:00</option>
<option value="11:30:00">11:30</option>
<option value="12:00:00">12:00</option>
<option value="12:30:00">12:30</option>
<option value="13:00:00">13:00</option>
<option value="13:30:00">13:30</option>
<option value="14:00:00">14:00</option>
<option value="14:30:00">14:30</option>
<option value="15:00:00">15:00</option>
<option value="15:30:00">15:30</option>
<option value="16:00:00">16:00</option>
<option value="16:30:00">16:30</option>
<option value="17:00:00">17:00</option>
<option value="17:30:00">17:30</option>
<option value="18:00:00">18:00</option>
<option value="18:30:00">18:30</option>
<option value="19:00:00">19:00</option>
<option value="19:30:00">19:30</option>
<option value="20:00:00">20:00</option>
</select>
</td></tr>
<tr></tr>
<tr><td></td><td><input class="submit-button" type="submit" value="Submit" </td></tr></table></form></div>
<div id="plan-bg" class="pop-up"></div>
<div id="alert-msg" class="pop-up"><span class="close" onclick="window.location.reload();">Close</span><p>Your request has been sent to admin.</p></div>
<div id="time-slot-msg" class="pop-up"><span class="close">Close</span><p>This time slot is already booked.</p></div>
<div id="datepicker"></div>
<script type="text/javascript">
var jqueryarray = [];
jqueryarray = <?php echo json_encode($starttime); ?>;
var statusarray=[];
statusarray = <?php echo json_encode($status); ?>;
var namearray=[];
namearray = <?php echo json_encode($name); ?>;
var countarray = [];
countarray = <?php echo json_encode($testing); ?>;
var arr = [];
for(i = 0; i < <?php echo $i; ?>; i++)
{
arr[i] = jqueryarray[i];
}
var brr = [];
for(i = 0; i < <?php echo $i; ?>; i++)
{
brr[i] = statusarray[i];
}
var crr=[];
for(i=0; i< <?php echo $i; ?>; i++)
{
crr[i] = namearray[i];
}
var drr=[];
for(i=0; i< <?php echo $i; ?>; i++)
{
drr[i] = countarray[i];
}
var j = 0;
var k=1;
var currentrow;
$('.meeting-timetable tr').each(function() {
if(arr[j] == $(this).find('td').attr('id'))
{
if(brr[j]==1)
{
currentrow=$(this);
for(k=1;k<=parseInt(countarray[j]);k++)
{
currentrow.find('td').next().css('background-color','orange').addClass('active').attr("title",namearray[j]);
currentrow=currentrow.next('tr');
}
}
if(brr[j]==2)
{
currentrow=$(this);
for(k=1;k<=parseInt(countarray[j]);k++)
{
currentrow.find('td').next().css('background-color','red').addClass('active').attr("title",namearray[j]);
currentrow=currentrow.next('tr');
}
}
if(brr[j]==3)
{
$(this).find('td').next().css('background-color', '');
}
if(brr[j]==4)
{
$(this).find('td').next().css('background-color', '');
}
j++;
}
});
</script>
</body>
</html>
