create contact setting form

This commit is contained in:
Juthatip McDevitt 2024-06-14 14:46:22 -05:00
parent db44e6a24c
commit 12f7c8d213
4 changed files with 209 additions and 18 deletions

View file

@ -31,4 +31,15 @@
echo $res;
}
if(isset($_POST['get_contact'])){
$q = "SELECT * FROM `contact_detail` WHERE `sr_no`=?";
$values = [1];
$res = select($q, $values, "i");
$data = mysqli_fetch_assoc($res);
$json_data = json_encode($data);
echo $json_data;
}
?>

View file

@ -6,14 +6,16 @@
echo"<script>
window.location.href='index.php';
</script>";
exit;
}
session_regenerate_id(true);
//session_regenerate_id(true);
}
function redirect($url){
echo"<script>
window.location.href='$url';
</script>";
exit;
}
function alert($type, $msg){

View file

@ -31,7 +31,7 @@
<!--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>
<form id="general_setting_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">General Settings</h5>
@ -39,19 +39,19 @@
<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"/>
<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-cancle" data-bs-dismiss="modal">Cancle</button>
<button type="button" onclick="upd_general(site_title.value)" class="btn-third">Submit</button>
<button type="submit" class="btn-third">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!--Shutdown mode-->
<div class="card">
<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>
@ -64,6 +64,152 @@
<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="" class="btn-cancle" data-bs-dismiss="modal">Cancle</button>
<button type="submit" class="btn-third">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@ -73,13 +219,13 @@
<?php require('components/script.php') ?>
<script>
let general_data;
let general_data, contact_data;
let general_setting_form = document.getElementById('general_setting_form');
let site_title_input = document.getElementById('site_title_input');
function get_general(){
let site_title = document.getElementById('site_title');
let site_title_input = document.getElementById('site_title_input');
let shutdown_toggle = document.getElementById('shutdown_toggle');
let xhr = new XMLHttpRequest();
@ -103,6 +249,11 @@
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);
@ -140,8 +291,31 @@
}
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');
}
window.onload = function(){
get_general();
get_contact();
}
</script>
</body>

View file

@ -204,7 +204,7 @@
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7891</p>
<p>+1 (123) 456-7891</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
@ -229,7 +229,7 @@
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7892</p>
<p>+1 (123) 456-7892</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
@ -254,7 +254,7 @@
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7890</p>
<p>+1 (123) 456-7890</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
@ -266,8 +266,8 @@
<div class="accordion accordin_">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Management</span>
<p style="font-size: 14px;">(Hotel management and HR)</p>
<span>Office Manager</span>
<p style="font-size: 14px;">(Contact hotel manager)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
@ -278,12 +278,16 @@
<p>9:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Jane Doe <span style="font-size: 12px">(Office manager)</span></p>
<p>(123) 456-7899 || jdoe@midtownhotel.com</p>
<p style="font-weight: 500; font-size: 18px">Hotel Manager</p>
<p style="text-align: center;">Fakey McFaker</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p style="text-align: center;">+1 (123) 456-7899</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Fakey McFaker <span style="font-size: 12px">(General manager)</span></p>
<p>(123) 456-7898 || fmcfaker@midtownhotel.com</p>
<p style="font-weight: 500; font-size: 18px">Email</p>
<p style="text-align: center;">officmanager@midtownhotel.com</p>
</div>
</div>
</div>