555 lines
No EOL
26 KiB
PHP
555 lines
No EOL
26 KiB
PHP
<?php
|
|
require('components/utils.php');
|
|
require('components/db_config.php');
|
|
adminLogin();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Dashboard-rooms | Midtown Hotel</title>
|
|
<?php require('components/link.php') ?>
|
|
<style>
|
|
.custom-alert-t{
|
|
position:fixed;
|
|
top: 100px;
|
|
right: 25px;
|
|
z-index: 10000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<?php require('components/sidebar.php')?>
|
|
<div class="container-fluid" id="dashboard-body">
|
|
<div class="row">
|
|
<div class="col-lg-10 ms-auto p-4 overflow-hidden">
|
|
<h4 class="mb-4">Rooms</h4>
|
|
<!--add room-->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="mb-4 text-end">
|
|
<button type="button" class="btn-third" data-bs-toggle="modal" data-bs-target="#add-room">Add</button>
|
|
</div>
|
|
<div class="table-responsive-lg" style="height: 400px; overflow-y: scroll;">
|
|
<table class="table table-hover border">
|
|
<thead>
|
|
<tr style="background-color: #D3D3D3;">
|
|
<th scope="col">#</th>
|
|
<th scope="col">Room</th>
|
|
<th scope="col">Area</th>
|
|
<th scope="col">Guest</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Quantity</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Modify</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="room_data">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--add room modal-->
|
|
<div class="modal fade" id="add-room" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" style="height: 650px; overflow-y: scroll;">
|
|
<form id="add_room_form" autocomplete="off">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Room</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Room Type</label>
|
|
<input type="text" name="name" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Area</label>
|
|
<input type="number" min="1" name="area" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Price</label>
|
|
<input type="number" min="1" name="price" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Quantity</label>
|
|
<input type="number" min="1" name="quantity" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Adult(maximum)</label>
|
|
<input type="number" min="1" name="adult" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Children(Maximum)</label>
|
|
<input type="number" min="1" name="children" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Accommodation</label>
|
|
<div class="row">
|
|
<?php
|
|
$res = selectAll('accommodation');
|
|
while($opt = mysqli_fetch_assoc($res)){
|
|
echo"
|
|
<div class='col-md-12 mb-1'>
|
|
<label>
|
|
<input type='checkbox' name='accommodation' value='$opt[id]' class='form-check-input'>
|
|
$opt[name]
|
|
</label>
|
|
</div>
|
|
";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Additional Accommodation</label>
|
|
<div class="row">
|
|
<?php
|
|
$res = selectAll('additional_accomm');
|
|
while($opt = mysqli_fetch_assoc($res)){
|
|
echo"
|
|
<div class='col-md-6 mb-1'>
|
|
<label>
|
|
<input type='checkbox' name='additional_accomm' value='$opt[id]' class='form-check-input'>
|
|
$opt[name]
|
|
</label>
|
|
</div>
|
|
";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Detail</label>
|
|
<textarea class="form-control" name="detail" rows="3" style="resize: none;" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="reset" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn-third">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!--edit room modal-->
|
|
<div class="modal fade" id="edit-room" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" style="height: 650px; overflow-y: scroll;">
|
|
<form id="edit_room_form" autocomplete="off">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Room</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Room Type</label>
|
|
<input type="text" name="name" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Area</label>
|
|
<input type="number" min="1" name="area" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Price</label>
|
|
<input type="number" min="1" name="price" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Quantity</label>
|
|
<input type="number" min="1" name="quantity" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Adult(maximum)</label>
|
|
<input type="number" min="1" name="adult" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Children(Maximum)</label>
|
|
<input type="number" min="1" name="children" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Accommodation</label>
|
|
<div class="row">
|
|
<?php
|
|
$res = selectAll('accommodation');
|
|
while($opt = mysqli_fetch_assoc($res)){
|
|
echo"
|
|
<div class='col-md-12 mb-1'>
|
|
<label>
|
|
<input type='checkbox' name='accommodation' value='$opt[id]' class='form-check-input'>
|
|
$opt[name]
|
|
</label>
|
|
</div>
|
|
";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Additional Accommodation</label>
|
|
<div class="row">
|
|
<?php
|
|
$res = selectAll('additional_accomm');
|
|
while($opt = mysqli_fetch_assoc($res)){
|
|
echo"
|
|
<div class='col-md-6 mb-1'>
|
|
<label>
|
|
<input type='checkbox' name='additional_accomm' value='$opt[id]' class='form-check-input'>
|
|
$opt[name]
|
|
</label>
|
|
</div>
|
|
";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Detail</label>
|
|
<textarea class="form-control" name="detail" rows="3" style="resize: none;" required></textarea>
|
|
</div>
|
|
<input type="hidden" name="room_id">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="reset" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn-third">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!--room images modal-->
|
|
<div class="modal fade" id="room-image" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Room Name</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="image-alert"></div>
|
|
<div class="border-bottom border-1 pb-3 mb-3">
|
|
<form id="add_image_form">
|
|
<label class="form-label fw-bold">Add images</label>
|
|
<input type="file" name="image" accept=".jpg, .png, .webp, .jpeg" class="form-control mb-3" required>
|
|
<button class="btn-third">Add</button>
|
|
<input type="hidden" name="room_id">
|
|
</form>
|
|
</div>
|
|
<div class="table-responsive-lg" style="height: 400px; overflow-y: scroll;">
|
|
<table class="table table-hover border">
|
|
<thead>
|
|
<tr class="sticky-top text-center" style="background-color: #D3D3D3;">
|
|
<th scope="col" width="80%">Image</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="room_image_data"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<?php require('components/script.php') ?>
|
|
<script>
|
|
let add_room_form = document.getElementById('add_room_form');
|
|
let edit_room_form = document.getElementById('edit_room_form');
|
|
let add_image_form = document.getElementById('add_image_form');
|
|
|
|
add_room_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
add_room();
|
|
});
|
|
|
|
function add_room(){
|
|
let data = new FormData();
|
|
data.append('add_room', '');
|
|
data.append('name', add_room_form.elements['name'].value);
|
|
data.append('area', add_room_form.elements['area'].value);
|
|
data.append('price', add_room_form.elements['price'].value);
|
|
data.append('quantity', add_room_form.elements['quantity'].value);
|
|
data.append('adult', add_room_form.elements['adult'].value);
|
|
data.append('children', add_room_form.elements['children'].value);
|
|
data.append('detail', add_room_form.elements['detail'].value);
|
|
|
|
let accommodation = [];
|
|
add_room_form.elements['accommodation'].forEach(el => {
|
|
if(el.checked){
|
|
accommodation.push(el.value);
|
|
}
|
|
});
|
|
|
|
let additional_accomm = [];
|
|
add_room_form.elements['additional_accomm'].forEach(el => {
|
|
if(el.checked){
|
|
additional_accomm.push(el.value);
|
|
}
|
|
});
|
|
|
|
data.append('accommodation', JSON.stringify(accommodation));
|
|
data.append('additional_accomm', JSON.stringify(additional_accomm));
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
|
|
xhr.onload = function(){
|
|
console.log(this.responseText);
|
|
var myModal = document.getElementById('add-room');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide()
|
|
|
|
if(this.responseText == 1){
|
|
alert('success', 'New room is added');
|
|
add_room_form.reset();
|
|
get_all_rooms();
|
|
|
|
} else{
|
|
alert('error', 'Fail to update new accommodation')
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
|
|
function get_all_rooms(){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
document.getElementById('room_data').innerHTML = this.responseText;
|
|
}
|
|
xhr.send('get_all_rooms');
|
|
}
|
|
//edit room
|
|
function edit_room(id){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
let data = JSON.parse(this.responseText);
|
|
|
|
edit_room_form.elements['name'].value = data.roomdata.name;
|
|
edit_room_form.elements['area'].value = data.roomdata.area;
|
|
edit_room_form.elements['price'].value = data.roomdata.price;
|
|
edit_room_form.elements['quantity'].value = data.roomdata.quantity;
|
|
edit_room_form.elements['adult'].value = data.roomdata.adult;
|
|
edit_room_form.elements['children'].value = data.roomdata.children;
|
|
edit_room_form.elements['detail'].value = data.roomdata.detail;
|
|
edit_room_form.elements['room_id'].value = data.roomdata.id;
|
|
|
|
edit_room_form.elements['accommodation'].forEach(el => {
|
|
if(data.accommodation.includes(Number(el.value))){
|
|
el.checked = true;
|
|
}
|
|
});
|
|
|
|
edit_room_form.elements['additional_accomm'].forEach(el => {
|
|
if(data.additional_accomm.includes(Number(el.value))){
|
|
el.checked = true;
|
|
}
|
|
});
|
|
}
|
|
xhr.send('get_room='+id);
|
|
}
|
|
|
|
edit_room_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
submit_edit_room();
|
|
});
|
|
|
|
function submit_edit_room(){
|
|
let data = new FormData();
|
|
data.append('edit_room', '');
|
|
data.append('room_id', edit_room_form.elements['room_id'].value);
|
|
data.append('name', edit_room_form.elements['name'].value);
|
|
data.append('area', edit_room_form.elements['area'].value);
|
|
data.append('price', edit_room_form.elements['price'].value);
|
|
data.append('quantity', edit_room_form.elements['quantity'].value);
|
|
data.append('adult', edit_room_form.elements['adult'].value);
|
|
data.append('children', edit_room_form.elements['children'].value);
|
|
data.append('detail', edit_room_form.elements['detail'].value);
|
|
|
|
let accommodation = [];
|
|
edit_room_form.elements['accommodation'].forEach(el => {
|
|
if(el.checked){
|
|
accommodation.push(el.value);
|
|
}
|
|
});
|
|
|
|
let additional_accomm = [];
|
|
edit_room_form.elements['additional_accomm'].forEach(el => {
|
|
if(el.checked){
|
|
additional_accomm.push(el.value);
|
|
}
|
|
});
|
|
|
|
data.append('accommodation', JSON.stringify(accommodation));
|
|
data.append('additional_accomm', JSON.stringify(additional_accomm));
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
|
|
xhr.onload = function(){
|
|
console.log(this.responseText);
|
|
var myModal = document.getElementById('edit-room');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide()
|
|
|
|
if(this.responseText == 1){
|
|
alert('success', 'Edit');
|
|
submit_edit_room.reset();
|
|
get_all_rooms();
|
|
|
|
} else{
|
|
alert('error', 'Fail to edit, try again later');
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
|
|
function toggleStatus(id, val){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
alert('success', 'Active');
|
|
get_all_rooms();
|
|
} else{
|
|
alert('success', 'Inactive');
|
|
}
|
|
}
|
|
xhr.send('toggleStatus='+id+'&value='+val);
|
|
}
|
|
//upload image
|
|
add_image_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
add_image();
|
|
});
|
|
|
|
function add_image(){
|
|
let data = new FormData();
|
|
data.append('image', add_image_form.elements['image'].files[0]);
|
|
data.append('room_id', add_image_form.elements['room_id'].value);
|
|
data.append('add_image', '');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true)
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 'inv_img'){
|
|
alert('error', 'Fail to added image (only jpg, jpeg, png, and webp are allowed)', 'image-alert')
|
|
}
|
|
else if(this.responseText == 'inv_size'){
|
|
alert('error', 'Fail to added image (image size should be less than 2MB)', 'image-alert')
|
|
}
|
|
else if(this.responseText == 'upd_failed'){
|
|
alert('error', 'Fail to added image', 'image-alert');
|
|
}
|
|
else{
|
|
alert('success', 'Your image(s) is added', 'image-alert');
|
|
room_images(add_image_form.elements['room_id'].value, document.querySelector("#room-image .modal-title").innerText);
|
|
add_image_form.reset();
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
|
|
function room_images(id, rname){
|
|
document.querySelector("#room-image .modal-title").innerText = rname;
|
|
add_image_form.elements['room_id'].value = id;
|
|
add_image_form.elements['image'].value = '';
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
document.getElementById('room_image_data').innerHTML = this.responseText;
|
|
}
|
|
xhr.send('get_room_images='+id);
|
|
|
|
}
|
|
|
|
function remove_image(img_id, room_id){
|
|
let data = new FormData();
|
|
data.append('image_id', img_id);
|
|
data.append('room_id', room_id);
|
|
data.append('remove_image', '');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true)
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
alert('success', 'Your image is deleted', 'image-alert');
|
|
room_images(room_id, document.querySelector("#room-image .modal-title").innerText);
|
|
} else{
|
|
alert('error', 'Fail to delete image', 'image-alert');
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
|
|
function upload_image(img_id, room_id){
|
|
let data = new FormData();
|
|
data.append('image_id', img_id);
|
|
data.append('room_id', room_id);
|
|
data.append('upload_image', '');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true)
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
alert('success', 'Your cover image is changed', 'image-alert');
|
|
room_images(room_id, document.querySelector("#room-image .modal-title").innerText);
|
|
} else{
|
|
alert('error', 'Fail to change your cover image', 'image-alert');
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
//remove rooms
|
|
|
|
function remove_room(room_id){
|
|
if(confirm("Are you sure you want to delete this room?")){
|
|
let data = new FormData();
|
|
data.append('room_id', room_id);
|
|
data.append('remove_room', '');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/room.php", true)
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
alert('success', 'Delete');
|
|
get_all_rooms();
|
|
} else{
|
|
alert('error', 'Fail to delete');
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
}
|
|
|
|
window.onload = function(){
|
|
get_all_rooms();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|