424 lines
15 KiB
Plaintext
Executable File
424 lines
15 KiB
Plaintext
Executable File
<style>
|
|
.new-design-navbar {
|
|
background-color: #5856D6;
|
|
color: white;
|
|
padding: 0 15px;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
height: 50px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
position: relative;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.new-design-navbar .container-fluid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.new-design-navbar .navbar-left-section,
|
|
.new-design-navbar .navbar-right-section {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.new-design-navbar .bars-toggle {
|
|
color: white;
|
|
text-decoration: none;
|
|
margin-right: 15px;
|
|
padding: 0 10px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.new-design-navbar .bars-toggle:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
.new-design-navbar .bars-toggle .material-icons {
|
|
font-size: 24px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.new-design-navbar .navbar-brand {
|
|
color: white !important;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.1rem; /* Adjust size */
|
|
font-weight: 500;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
}
|
|
.new-design-navbar .navbar-brand:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.new-design-navbar .navbar-brand .material-icons {
|
|
margin-right: 8px;
|
|
font-size: 22px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.new-design-navbar .navbar-right-section .nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 15px;
|
|
padding: 0 8px;
|
|
height: 100%;
|
|
cursor: default;
|
|
font-size: 0.9rem;
|
|
}
|
|
.new-design-navbar .navbar-right-section .nav-item .material-icons {
|
|
margin-right: 5px;
|
|
font-size: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle {
|
|
color: white;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 8px;
|
|
}
|
|
.new-design-navbar .navbar-right-section .nav-item.dropdown > a.dropdown-toggle:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.new-design-navbar .navbar-right-section .nav-item.dropdown > a .material-icons:last-child { /* Dropdown arrow */
|
|
margin-left: 2px;
|
|
margin-right: 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
/* Dropdown Menu Styling */
|
|
.new-design-navbar .dropdown-menu {
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
margin-top: 2px !important;
|
|
}
|
|
.new-design-navbar .dropdown-menu > li > a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
color: #333;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
clear: both;
|
|
font-weight: normal;
|
|
line-height: 1.42857143;
|
|
white-space: nowrap;
|
|
}
|
|
.new-design-navbar .dropdown-menu > li > a:hover,
|
|
.new-design-navbar .dropdown-menu > li > a:focus {
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
.new-design-navbar .dropdown-menu > li > a .material-icons {
|
|
margin-right: 12px;
|
|
color: #777;
|
|
font-size: 18px;
|
|
vertical-align: middle;
|
|
}
|
|
.new-design-navbar .dropdown-menu .hidden {
|
|
display: none;
|
|
}
|
|
|
|
.material-icons {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: 'liga';
|
|
}
|
|
|
|
</style>
|
|
|
|
<%# Top Bar - New Design %>
|
|
<% if !request.path_info.include?('second_display') %>
|
|
<nav class="navbar new-design-navbar" style="position: sticky;">
|
|
<div class="container-fluid">
|
|
<div class="navbar-left-section">
|
|
<% if current_login_employee.role != "waiter" %>
|
|
<a href="javascript:void(0);" class="bars bars-toggle">
|
|
<!-- <i class="material-icons">menu</i> -->
|
|
</a>
|
|
<% end %>
|
|
<%# Brand Name and Icon %>
|
|
<a class="navbar-brand" href="<%= root_path %>">
|
|
<img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo" />
|
|
<span>SX Restaurant</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-right-section">
|
|
<%# Connection Status %>
|
|
<div class="nav-item" id="connection-status-item">
|
|
<i class="material-icons">wifi</i>
|
|
<span class="connection-status-text">Connecting...</span>
|
|
</div>
|
|
|
|
<%# User Dropdown %>
|
|
<div class="nav-item dropdown">
|
|
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
<i class="material-icons">person</i>
|
|
<span><%= current_login_employee.name %></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<% if current_login_employee.role == "administrator" %>
|
|
<li>
|
|
<a href="<%= settings_shops_path %>" class="waves-effect waves-block">
|
|
<i class="material-icons">store</i>
|
|
<span>Shop Info</span>
|
|
</a>
|
|
</li>
|
|
<% end %>
|
|
<li>
|
|
<a href="javascript:void(0);" class="team_viewer waves-effect waves-block">
|
|
<i class="material-icons">touch_app</i>
|
|
<span>Team Viewer</span>
|
|
</a>
|
|
</li>
|
|
<% if current_login_employee.role == "cashier" %>
|
|
<li>
|
|
<a href="/origami/second_display" class="waves-effect waves-block" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;">
|
|
<i class="material-icons">desktop_windows</i>
|
|
<span>Second Display</span>
|
|
</a>
|
|
</li>
|
|
<% food_court = Lookup.find_by_lookup_type_and_value("food_court", "1") %>
|
|
<% if food_court && ShiftSale.current_open_shift(current_user) %>
|
|
<li>
|
|
<a href="javascript:void(0);" class="close_cashier waves-effect waves-block">
|
|
<i class="material-icons">highlight_off</i>
|
|
<span>Close Cashier</span>
|
|
</a>
|
|
</li>
|
|
<% end %>
|
|
<% end %>
|
|
<li>
|
|
<a href="javascript:void(0);" class="delete logout waves-effect waves-block" data-ref="<%= logout_path %>" data-method="delete">
|
|
<i class="material-icons">exit_to_app</i>
|
|
<span>Logout</span>
|
|
</a>
|
|
<span class="hidden" id="delete_text">
|
|
<h6>Are you sure you want to Logout ?</h6>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
$('.delete.logout').click(function(e){
|
|
e.preventDefault();
|
|
var method = $(this).attr('data-method');
|
|
var url = $(this).attr('data-ref');
|
|
var html_text = $(this).siblings("#delete_text").html();
|
|
swal({
|
|
title: "Confirmation",
|
|
text: html_text,
|
|
type: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#DD6B55",
|
|
confirmButtonText: "Yes, logout!",
|
|
html: true
|
|
}, function (isConfirm) {
|
|
if (isConfirm) {
|
|
$.ajax({
|
|
type: method,
|
|
url: url,
|
|
headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
|
|
success: function(data) {
|
|
if (data.url) {
|
|
location.href = data.url;
|
|
} else {
|
|
location.reload();
|
|
}
|
|
},
|
|
error: function() {
|
|
swal("Error", "Could not process logout.", "error");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// TEAM VIEWER
|
|
$(".team_viewer").on('click',function(e){
|
|
e.preventDefault();
|
|
$.ajax({
|
|
type: "POST",
|
|
data: {},
|
|
dataType: 'json',
|
|
url: "<%= 's' %>",
|
|
headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
|
|
success: function(data){
|
|
if(!data.status){
|
|
window.open('https://www.teamviewer.com', '_blank');
|
|
}
|
|
},
|
|
error: function() {
|
|
window.open('https://www.teamviewer.com', '_blank');
|
|
}
|
|
});
|
|
});
|
|
|
|
// CLOSE CASHIER
|
|
$('.close_cashier').on('click',function(e){
|
|
e.preventDefault();
|
|
var linkURL = '/foodcourt/shift/cashier/close';
|
|
var countText = '';
|
|
var alertText = '';
|
|
|
|
$.ajax({
|
|
url: '/foodcourt/current_shift_order_count', // Ensure this path is correct
|
|
method: 'GET',
|
|
success: function(data) {
|
|
// Assuming data is a number or an object like { count: X }
|
|
var pendingOrders = 0;
|
|
if (typeof data === 'number') {
|
|
pendingOrders = data;
|
|
} else if (data && typeof data.count === 'number') {
|
|
pendingOrders = data.count;
|
|
} else {
|
|
// Try to parse if it's a stringified number, as in original code
|
|
pendingOrders = parseInt(data) || 0;
|
|
}
|
|
|
|
if (pendingOrders > 0) {
|
|
alertText = "<h5><span style=\"color: #CC0000\">We have " + pendingOrders + " pending orders and sales.</span></h5><br>Are you sure you want to close cashier?";
|
|
} else {
|
|
alertText = "Are you sure you want to close cashier?";
|
|
}
|
|
|
|
swal({
|
|
title: "Alert!",
|
|
text: alertText,
|
|
type: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Yes, close it!",
|
|
html: true
|
|
}, function(isConfirm) {
|
|
if (isConfirm) {
|
|
window.location.href = linkURL; // If this needs to be a POST/DELETE, use AJAX
|
|
}
|
|
});
|
|
},
|
|
error: function() {
|
|
swal("Error", "Could not check pending orders. Please try again.", "error");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Check Internet Connection status
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function updateConnectionStatus() {
|
|
const statusTextEl = document.querySelector('.connection-status-text');
|
|
console.log('checking internet connection');
|
|
if (!statusTextEl) {
|
|
return;
|
|
}
|
|
|
|
statusTextEl.innerText = "Connecting";
|
|
statusTextEl.style.color = "white";
|
|
document.querySelector('#connection-status-item i').style.color = "white";
|
|
|
|
|
|
|
|
fetch("https://www.google.com/generate_204?_=" + new Date().getTime(), {
|
|
method: 'GET',
|
|
mode: 'no-cors',
|
|
cache: 'no-store'
|
|
})
|
|
.then(function(res) {
|
|
console.log(res);
|
|
statusTextEl.innerText = "Online";
|
|
statusTextEl.style.color = "lightgreen";
|
|
document.querySelector('#connection-status-item i').style.color = "lightgreen";
|
|
})
|
|
.catch(function(e) {
|
|
console.log("error", e);
|
|
statusTextEl.innerText = "Offline";
|
|
statusTextEl.style.color = "#ffcdd2";
|
|
document.querySelector('#connection-status-item i').style.color = "#ffcdd2";
|
|
});
|
|
}
|
|
|
|
updateConnectionStatus();
|
|
setInterval(updateConnectionStatus, 10000);
|
|
});
|
|
|
|
// navbar dropdown menu handler
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const dropdownToggles = document.querySelectorAll('.new-design-navbar .dropdown-toggle');
|
|
|
|
dropdownToggles.forEach(function (toggle) {
|
|
const menu = toggle.nextElementSibling;
|
|
|
|
if (!menu || !menu.classList.contains('dropdown-menu')) {
|
|
// console.warn('Dropdown menu not found or incorrectly structured for toggle:', toggle);
|
|
return;
|
|
}
|
|
|
|
toggle.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const isCurrentlyOpen = menu.classList.contains('show');
|
|
const allMenusInNavbar = toggle.closest('.new-design-navbar').querySelectorAll('.dropdown-menu');
|
|
|
|
allMenusInNavbar.forEach(function(otherMenu) {
|
|
if (otherMenu !== menu && otherMenu.classList.contains('show')) {
|
|
otherMenu.classList.remove('show');
|
|
const otherToggle = otherMenu.previousElementSibling;
|
|
if (otherToggle && otherToggle.classList.contains('dropdown-toggle')) {
|
|
otherToggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
});
|
|
|
|
if (isCurrentlyOpen) {
|
|
menu.classList.remove('show');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
} else {
|
|
menu.classList.add('show');
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// close dropdown menu when click away
|
|
document.addEventListener('click', function (event) {
|
|
const openMenus = document.querySelectorAll('.new-design-navbar .dropdown-menu.show');
|
|
openMenus.forEach(function(menu) {
|
|
const toggle = menu.previousElementSibling;
|
|
if (!menu.contains(event.target) && toggle && !toggle.contains(event.target)) {
|
|
menu.classList.remove('show');
|
|
if (toggle.classList.contains('dropdown-toggle')) {
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<% end %>
|