updated admin dashboard-rooms functionality
This commit is contained in:
parent
05f8611f8a
commit
e60c80b41a
5 changed files with 286 additions and 22 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue