477 lines
No EOL
25 KiB
PHP
477 lines
No EOL
25 KiB
PHP
<?php
|
|
require('components/utils.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-settings | Midtown Hotel</title>
|
|
<?php require('components/link.php')?>
|
|
</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">Settings</h4>
|
|
<!--General setting-->
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="d-flex mb-3 align-items-center justify-content-between">
|
|
<h5 class="card-title m-0">General Settings</h5>
|
|
<button type="button" class="btn-third" data-bs-toggle="modal" data-bs-target="#general-setting">Edit</button>
|
|
</div>
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Site Title</h6>
|
|
<p class="card-text" id="site_title"></p>
|
|
</div>
|
|
</div>
|
|
<!--General setting modal-->
|
|
<div class="modal fade" id="general-setting" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form id="general_setting_form">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">General Settings</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Site Title</label>
|
|
<input type="text" name="site_title" id="site_title_input" class="form-control shadow-none" required/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" onclick="site_title.value = general_data.site_title" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn-third">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!--Shutdown mode-->
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="d-flex mb-3 align-items-center justify-content-between">
|
|
<h5 class="card-title m-0">Shutdown Mode</h5>
|
|
<div class="form-check form-switch">
|
|
<form>
|
|
<input onchange="upd_shutdown(this.value)" class="form-check-input" type="checkbox" id="shutdown_toggle">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<p class="card-text">Customers will not be allowed to book rooms when the shutdown mode is on.</p>
|
|
</div>
|
|
</div>
|
|
<!--Contact setting-->
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="d-flex mb-3 align-items-center justify-content-between">
|
|
<h5 class="card-title m-0">Contact Settings</h5>
|
|
<button type="button" class="btn-third" data-bs-toggle="modal" data-bs-target="#contact-setting">Edit</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="mb-3">
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Address</h6>
|
|
<p class="card-text" id="address"></p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Booking and Information</h6>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bxs-phone'></i>
|
|
<span id="booking_phone"></span>
|
|
</p>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bx-envelope' ></i>
|
|
<span id="booking_email"></span>
|
|
</p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Reservations and events</h6>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bxs-phone'></i>
|
|
<span id="reserve_phone"></span>
|
|
</p>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bx-envelope' ></i>
|
|
<span id="reserve_email"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="mb-3">
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Reception</h6>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bxs-phone'></i>
|
|
<span id="recep_phone"></span>
|
|
</p>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bx-envelope' ></i>
|
|
<span id="recep_email"></span>
|
|
</p>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="card-subtitle mb-1" style="font-weight: 600;">Office Manager</h6>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bx-user-circle'></i>
|
|
<span id="offi_name"></span>
|
|
</p>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bxs-phone'></i>
|
|
<span id="offi_phone"></span>
|
|
</p>
|
|
<p class="card-text mb-1">
|
|
<i class='bx bx-envelope' ></i>
|
|
<span id="offi_email"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Contact setting modal-->
|
|
<div class="modal fade" id="contact-setting" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<form id="contact_setting_form">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Contact Settings</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container-fluid p-0">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<label class="form-label" style="font-weight: 600;">Address</label>
|
|
<input type="text" name="address" id="address_input" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" style="font-weight: 600;">Booking and Infomation</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bxs-phone'></i></span>
|
|
<input type="text" name="booking_phone" id="booking_phone_input" class="form-control shadow-none" required>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bx-envelope'></i></span>
|
|
<input type="text" name="booking_email" id="booking_email_input" class="form-control shadow-none" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" style="font-weight: 600;">Reservations and events</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bxs-phone'></i></span>
|
|
<input type="text" name="reserve_phone" id="reserve_phone_input" class="form-control shadow-none" required>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bx-envelope'></i></span>
|
|
<input type="text" name="reserve_email" id="reserve_email_input" class="form-control shadow-none" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<label class="form-label" style="font-weight: 600;">Reception</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bxs-phone'></i></span>
|
|
<input type="text" name="recep_phone" id="recep_phone_input" class="form-control shadow-none" required>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bx-envelope'></i></span>
|
|
<input type="text" name="recep_email" id="recep_email_input" class="form-control shadow-none" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" style="font-weight: 600;">Office Manager</label>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bx-user-circle'></i></span>
|
|
<input type="text" name="offi_name" id="offi_name_input" class="form-control shadow-none" required>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bxs-phone'></i></span>
|
|
<input type="text" name="offi_phone" id="offi_phone_input" class="form-control shadow-none" required>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text"><i class='bx bx-envelope'></i></span>
|
|
<input type="text" name="offi_email" id="offi_email_input" class="form-control shadow-none" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" onclick="contact_input(contact_data)" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn-third">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!--Management team setting-->
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<div class="d-flex mb-3 align-items-center justify-content-between">
|
|
<h5 class="card-title m-0">Management Team Settings</h5>
|
|
<button type="button" class="btn-third" data-bs-toggle="modal" data-bs-target="#team-setting">Add</button>
|
|
</div>
|
|
<div class="row" id="team-data"></div>
|
|
</div>
|
|
</div>
|
|
<!--Management team setting modal-->
|
|
<div class="modal fade" id="team-setting" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form id="team_setting_form">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Management Team Settings</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Name</label>
|
|
<input type="text" name="member_name" id="member_name_input" class="form-control shadow-none" required/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" style="font-weight: 600;">Image</label>
|
|
<input type="file" name="member_img" id="member_img_input" accept="[.jpg, .png, .webp, .jpeg]" class="form-control shadow-none" required/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" onclick="member_name.value='', member_img.value=''" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn-third">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<?php require('components/script.php') ?>
|
|
<script>
|
|
let general_data, contact_data;
|
|
|
|
let general_setting_form = document.getElementById('general_setting_form');
|
|
let site_title_input = document.getElementById('site_title_input');
|
|
|
|
let contact_setting_form = document.getElementById('contact_setting_form');
|
|
|
|
let team_setting_form = document.getElementById('team_setting_form');
|
|
let member_name_input = document.getElementById('member_name_input');
|
|
let member_img_input = document.getElementById('member_img_input');
|
|
|
|
function get_general(){
|
|
let site_title = document.getElementById('site_title');
|
|
let shutdown_toggle = document.getElementById('shutdown_toggle');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
general_data = JSON.parse(this.responseText);
|
|
site_title.innerText = general_data.site_title;
|
|
site_title_input.value = general_data.site_title;
|
|
|
|
if(general_data.shutdown == 0){
|
|
shutdown_toggle.checked = false;
|
|
shutdown_toggle.value = 0;
|
|
} else{
|
|
shutdown_toggle.checked = true;
|
|
shutdown_toggle.value = 1;
|
|
}
|
|
}
|
|
|
|
xhr.send('get_general');
|
|
}
|
|
|
|
general_setting_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
upd_general(site_title_input.value);
|
|
})
|
|
|
|
function upd_general(site_title_val){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
var myModal = document.getElementById('general-setting');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide()
|
|
|
|
if(this.responseText == 1){
|
|
alert('success', 'Your data is updated');
|
|
get_general();
|
|
} else{
|
|
alert('error', 'Fail to update your data');
|
|
}
|
|
}
|
|
|
|
xhr.send('site_title='+site_title_val+'&upd_general');
|
|
}
|
|
|
|
function upd_shutdown(val){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1 && general_data.shutdown == 0){
|
|
alert('success', 'Website is on a shutdown mode');
|
|
|
|
} else{
|
|
alert('success', 'Website is running');
|
|
}
|
|
get_general();
|
|
}
|
|
xhr.send('upd_shutdown='+val);
|
|
}
|
|
|
|
function get_contact(){
|
|
let contact_p_id = ['address', 'booking_phone', 'booking_email', 'reserve_phone', 'reserve_email', 'recep_phone', 'recep_email', 'offi_name', 'offi_phone', 'offi_email'];
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
contact_data = JSON.parse(this.responseText);
|
|
contact_data = Object.values(contact_data);
|
|
|
|
for(i = 0; i < contact_p_id.length; i++){
|
|
document.getElementById(contact_p_id[i]).innerText = contact_data[i+1];
|
|
}
|
|
contact_input(contact_data);
|
|
|
|
}
|
|
xhr.send('get_contact');
|
|
}
|
|
|
|
function contact_input(data){
|
|
let contact_input_id = ['address_input', 'booking_phone_input', 'booking_email_input', 'reserve_phone_input', 'reserve_email_input', 'recep_phone_input', 'recep_email_input', 'offi_name_input', 'offi_phone_input', 'offi_email_input'];
|
|
|
|
for(i = 0; i < contact_input_id.length; i++){
|
|
document.getElementById(contact_input_id[i]).value = data[i+1];
|
|
}
|
|
}
|
|
|
|
contact_setting_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
upd_contact();
|
|
})
|
|
|
|
function upd_contact(){
|
|
let index = ['address', 'booking_phone', 'booking_email', 'reserve_phone', 'reserve_email', 'recep_phone', 'recep_email', 'offi_name', 'offi_phone', 'offi_email'];
|
|
let contact_input_id = ['address_input', 'booking_phone_input', 'booking_email_input', 'reserve_phone_input', 'reserve_email_input', 'recep_phone_input', 'recep_email_input', 'offi_name_input', 'offi_phone_input', 'offi_email_input'];
|
|
let data_str = "";
|
|
|
|
for(i = 0; i < index.length; i++){
|
|
data_str += index[i] + "=" + document.getElementById(contact_input_id[i]).value + '&';
|
|
}
|
|
data_str += "upd_contact";
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
var myModal = document.getElementById('contact-setting');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide();
|
|
|
|
if(this.responseText == 1){
|
|
alert('success', 'Your information is updated');
|
|
get_contact();
|
|
} else{
|
|
alert('error', 'Fail to update your information');
|
|
}
|
|
}
|
|
|
|
xhr.send(data_str);
|
|
}
|
|
|
|
team_setting_form.addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
add_member();
|
|
})
|
|
|
|
function add_member(){
|
|
let data = new FormData();
|
|
data.append('name',member_name_input.value);
|
|
data.append('image',member_img_input.files[0]);
|
|
data.append('add_member', '');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
|
|
xhr.onload = function(){
|
|
console.log(this.responseText);
|
|
var myModal = document.getElementById('team-setting');
|
|
var modal = bootstrap.Modal.getInstance(myModal);
|
|
modal.hide()
|
|
|
|
if(this.responseText == 'inv_img'){
|
|
alert('error', 'Fail to updated image (only jpg, jpeg, png, and webp are allowed)');
|
|
}
|
|
else if(this.responseText == 'inv_size'){
|
|
alert('error', 'Fail to updated image (image size should be less than 2MB)');
|
|
}
|
|
else if(this.responseText == 'upd_failed'){
|
|
alert('error', 'Fail to upload image');
|
|
}
|
|
else{
|
|
alert('success', 'Your data is uploaded');
|
|
member_name_input.value ='';
|
|
member_img_input.value = '';
|
|
get_member();
|
|
}
|
|
}
|
|
xhr.send(data);
|
|
}
|
|
|
|
function get_member(){
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
document.getElementById('team-data').innerHTML = this.responseText;
|
|
}
|
|
|
|
xhr.send('get_member');
|
|
}
|
|
|
|
function remove_member(val){
|
|
let site_title = document.getElementById('site_title');
|
|
let shutdown_toggle = document.getElementById('shutdown_toggle');
|
|
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "ajax/settings_crud.php", true);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
|
|
xhr.onload = function(){
|
|
if(this.responseText == 1){
|
|
alert('success', 'Deleted');
|
|
get_member();
|
|
} else{
|
|
alert('error', 'Fail to delete data')
|
|
}
|
|
}
|
|
|
|
xhr.send('remove_member='+val);
|
|
}
|
|
|
|
|
|
window.onload = function(){
|
|
get_general();
|
|
get_contact();
|
|
get_member();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|