updated admin dashboard-rooms functionality

This commit is contained in:
Juthatip McDevitt 2024-06-20 18:06:29 -05:00
parent 05f8611f8a
commit e60c80b41a
5 changed files with 286 additions and 22 deletions

View file

@ -52,8 +52,8 @@
}
if(isset($_POST['get_all_rooms'])){
$res = selectAll('rooms');
$i = 0;
$res = select("SELECT * FROM `rooms` WHERE `removed`=?", [0], 'i');
$i = 1;
$data = "";
while($row = mysqli_fetch_assoc($res)){
@ -80,7 +80,9 @@
<td>$row[quantity]</td>
<td>$status</td>
<td>
<button type='button' onclick='edit_room($row[id])' class='btn-third' data-bs-toggle='modal' data-bs-target='#edit-room'>Edit</button>
<button type='button' onclick='edit_room($row[id])' class='btn-third' data-bs-toggle='modal' data-bs-target='#edit-room'><i class='bx bxs-edit'></i></button>
<button type='button' onclick=\"room_images($row[id], '$row[name]')\" class='btn-fourth' data-bs-toggle='modal' data-bs-target='#room-image'><i class='bx bx-image-add' ></i></button>
<button type='button' onclick='remove_room($row[id])' class='btn-cancel'><i class='bx bx-trash' ></i></button>
</td>
</tr>
";
@ -88,7 +90,7 @@
}
echo $data;
}
//edit
if(isset($_POST['get_room'])){
$frm_data = filteration($_POST);
$res1 = select("SELECT * FROM `rooms` WHERE `id`=?", [$frm_data['get_room']], 'i');
@ -182,4 +184,99 @@
echo 0;
}
}
//upload image
if(isset($_POST['add_image'])){
$frm_data = filteration($_POST);
$img_r = uploadImage($_FILES['image'], ROOMS_FOLDER);
if($img_r == 'inv_img'){
echo $img_r;
}
else if($img_r == 'inv_size'){
echo $img_r;
}
else if($img_r == 'upd_failed'){
echo $img_r;
}
else{
$q = "INSERT INTO `room_images`(`room_id`, `image`) VALUES (?, ?)";
$values = [$frm_data['room_id'], $img_r];
$res = insert($q, $values, 'is');
echo $res;
}
}
if(isset($_POST['get_room_images'])){
$frm_data = filteration($_POST);
$res = select("SELECT * FROM `room_images` WHERE `room_id`=?", [$frm_data['get_room_images']], 'i');
$path = ROOM_IMG_PATH;
while($row = mysqli_fetch_assoc($res)){
if($row['upload']==1){
$upload_btn = "<i class='bx bx-check-double' style='color: green; font-size: 30px;'></i>";
} else{
$upload_btn = "<i onclick='upload_image($row[sr_no], $row[room_id])' class='bx bx-check' style='font-size: 30px;'></i>";
}
echo <<< data
<tr>
<td><img src='$path$row[image]' class="img-fluid"/></td>
<td class="text-center">$upload_btn</td>
<td class="text-center">
<button onclick='remove_image($row[sr_no], $row[room_id])' class='btn-cancel'><i class='bx bx-trash' ></i></button>
</td>
</tr>
data;
}
}
if(isset($_POST['remove_image'])){
$frm_data = filteration($_POST);
$values = [$frm_data['image_id'], $frm_data['room_id']];
$pre_q = "SELECT * FROM `room_images` WHERE `sr_no`=? AND `room_id`=?";
$res = select($pre_q, $values, 'ii');
$img = mysqli_fetch_assoc($res);
if(deleteImage($img['image'], ROOMS_FOLDER)){
$q = "DELETE FROM `room_images` WHERE `sr_no`=? AND `room_id`=?";
$res = delete($q, $values, 'ii');
echo $res;
} else{
echo 0;
}
}
if(isset($_POST['upload_image'])){
$frm_data = filteration($_POST);
$pre_q = "UPDATE `room_images` SET `upload`=? WHERE `room_id`=?";
$pre_values = [0, $frm_data['room_id']];
$pre_res = update($pre_q, $pre_values, 'ii');
$q = "UPDATE `room_images` SET `upload`=? WHERE `sr_no`=? AND `room_id`=?";
$values = [1, $frm_data['image_id'], $frm_data['room_id']];
$res = update($q, $values, 'iii');
echo $res;
}
//remove rooms
if(isset($_POST['remove_room'])){
$frm_data = filteration($_POST);
$res1 = select("SELECT * FROM `room_images` WHERE `room_id`=?", [$frm_data['room_id']], 'i');
while($row = mysqli_fetch_assoc($res1)){
deleteImage($row['image'], ROOMS_FOLDER);
}
$res2 = delete("DELETE FROM `room_images` WHERE `room_id`=?", [$frm_data['room_id']], 'i');
$res3 = delete("DELETE FROM `room_accommodation` WHERE `room_id`=?", [$frm_data['room_id']], 'i');
$res4 = delete("DELETE FROM `room_additionalAccom` WHERE `room_id`=?", [$frm_data['room_id']], 'i');
$res5 = update("UPDATE `rooms` SET `removed`=? WHERE `id`=?", [1, $frm_data['room_id']], 'ii');
if($res2 || $res3 || $res4 || $res5){
echo 1;
} else{
echo 0;
}
}
?>

View file

@ -25,6 +25,22 @@
border-radius: 3px;
text-decoration: none;
}
.btn-fourth{
background-color: #4B70F5;
border: none;
color: white;
padding: 5px 12px;
text-align: center;
font-size: 16px;
font-weight: 500;
border-radius: 3px;
text-decoration: none;
}
.btn-fourth:hover{
background-color: #83B4FF;
color: white;
transition: all 0.5s ease;
}
.btn-cancel{
background-color: #EE4E4E;
border: none;

View file

@ -1,17 +1,25 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
function alert(type, msg){
function alert(type, msg, position='body'){
let bs_class = (type == 'success') ? 'alert-success' : 'alert-danger';
let element = document.createElement('div');
element.innerHTML =
`<div class="d-flex justify-content-end align-items-start">
<div class="alert ${bs_class} alert-dismissible fade show custom-alert-t" role="alert">
<div class="alert ${bs_class} alert-dismissible fade show" role="alert">
<strong class="me-3">${msg}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>`;
document.body.append(element);
if(position == 'body'){
document.body.append(element);
element.classList.add('custom-alert-t');
} else{
document.getElementById(position).appendChild(element);
}
setTimeout(removeAlert, 2000)
}
function removeAlert(){

View file

@ -5,10 +5,12 @@
//frontend data
define('SITE_URL', 'http://127.0.0.1:3000/');
define('MANAGMENT_IMG_PATH', SITE_URL.'images/admin/management/');
define('ROOM_IMG_PATH', SITE_URL.'images/admin/rooms/');
//uploaded data
define('UPLOAD_IMAGE_PATH', $_SERVER['DOCUMENT_ROOT'].'/images/admin/');
define('MANAGEMENT_FOLDER', 'management/');
define('ROOMS_FOLDER', 'rooms/');
function adminLogin(){
session_start();

View file

@ -35,14 +35,14 @@
<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>
<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">
@ -225,15 +225,47 @@
</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();
@ -299,9 +331,7 @@
}
xhr.send('get_all_rooms');
}
let edit_room_form = document.getElementById('edit_room_form');
//edit room
function edit_room(id){
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/room.php", true);
@ -404,6 +434,117 @@
}
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();