show internet connection status in navbar
This commit is contained in:
Dev Team
@@ -1,274 +1,274 @@
|
||||
<!-- Search Bar -->
|
||||
<!-- <div class="search-bar">
|
||||
<div class="search-icon">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
<input type="text" placeholder="START TYPING...">
|
||||
<div class="close-search">
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- #END# Search Bar -->
|
||||
<!-- Top Bar -->
|
||||
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
|
||||
<% display_none = (food_court && current_user.role == 'cashier') ? 'd-none' : '' %>
|
||||
<%if !request.path_info.include?('second_display') %>
|
||||
<nav class="navbar">
|
||||
<%# Top Bar - New Design %>
|
||||
<% if !request.path_info.include?('second_display') %>
|
||||
<nav class="navbar new-design-navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<!-- <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a> -->
|
||||
<%if current_login_employee.role !="waiter" %>
|
||||
<a href="javascript:void(0);" class="bars"></a>
|
||||
<a class="navbar-brand mbl_view" href="<%= root_path %>" style="margin-left: 20px;">
|
||||
<% else %>
|
||||
<a class="navbar-brand m-0 mbl_view" href="<%= root_path %>">
|
||||
<%end%>
|
||||
<img src="<%= asset_path('SX-Logo-small.png') %>" width="40" height="40" alt="Logo", class="<%= display_none.present? ? 'm-0' : '' %>" />
|
||||
<span class="navbar-brand-txt">SX Restaurant</span>
|
||||
</a>
|
||||
|
||||
<span class="navbar-brand m-0">
|
||||
<span id="others_payment"></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Start Shop Info -->
|
||||
<div class="navbar-right m-auto">
|
||||
<span class="navbar-brand navbar-brand-txt"><%= current_shop.name %></span>
|
||||
</div>
|
||||
<% if current_login_employee.role == "cashier" %>
|
||||
<div class="mr-4">
|
||||
<a class="pt-2" href="<%= settings_out_of_stock_index_path %>">
|
||||
<i class="material-icons" style="margin:25%; color:white;">phonelink_erase</i>
|
||||
<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>
|
||||
<%end%>
|
||||
<!-- End Shop Info -->
|
||||
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
|
||||
<% if !food_court %>
|
||||
<div class="navbar-right m-auto">
|
||||
<% if order_reservation %>
|
||||
<div class="online_order">
|
||||
<span class="navbar-brand navbar-brand-txt header-default-color">
|
||||
<% if request.user_agent.include? "Mobile" %>
|
||||
<img src="/assets/online_order_icon.png" alt="<%= t :order_reservation %>" />
|
||||
<% else %>
|
||||
<%= t :order_reservation %>
|
||||
<% end %>
|
||||
|
||||
<%# 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>
|
||||
<span class="order_no"></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- Start Quick Access for Cashier -->
|
||||
<!-- <div class="navbar-right m-auto">
|
||||
<a href="#" class="dropdown-toggle waves-block col-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="flase">
|
||||
<span><%= t :cashier %></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-20 m-b-5">
|
||||
<a href="<%= origami_root_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">monetization_on</i>
|
||||
<span class="font-15 shopinfo dinein" ><%= t :dine_in %></span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-20 m-b-5">
|
||||
<a href="<%= origami_quick_service_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">restaurant_menu</i>
|
||||
<span class="font-15 shopinfo quick_service" ><%= t :quick_service %></span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<% if order_reservation %>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-20 m-b-5">
|
||||
<a href="<%= origami_order_reservation_index_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">room_service</i>
|
||||
<span class="font-15 col-black online_order" ><%= t :order_reservation %></span>
|
||||
<span class="order_no"></span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-20 m-b-5">
|
||||
<a href="<%= origami_reservation_index_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">book</i>
|
||||
<span class="font-15 col-black reservation" ><%= t :reservation %></span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-20 m-b-5">
|
||||
<a href="<%= origami_food_court_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">restaurant</i>
|
||||
<span class="font-15 col-black foodcourt" ><%= t :foodcourt %></span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<!-- End Quick Access for Cashier -->
|
||||
|
||||
<!-- Start Delete confirrm text !-->
|
||||
|
||||
<div class="navbar-right toggle_mbl">
|
||||
<a href="javascript:void(0);" class="dropdown-toggle waves-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<% if current_login_employee %>
|
||||
<span>
|
||||
<% if request.user_agent.include? "Mobile" %>
|
||||
<img src="/assets/user_icon.png" alt="<%= current_login_employee.name %>" />
|
||||
<% else %>
|
||||
<%= current_login_employee.name %>
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<%if current_login_employee.role =="administrator" %>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-30 m-b-5">
|
||||
<a href="<%= settings_shops_path %>" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">info</i>
|
||||
<span class="font-15 shopinfo" >Shop Info</span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-30 m-b-5 team_viewer">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">touch_app</i>
|
||||
<span class="font-15 shopinfo" >Team Viewer</span>
|
||||
</p>
|
||||
</li>
|
||||
<%if current_login_employee.role =="cashier"%>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-30 m-b-5">
|
||||
<a href="/origami/second_display" onclick="window.open('/foodcourt/second_display', 'newwindow', 'width=700,height=500'); return false;" style="text-decoration: none;">
|
||||
<i class="material-icons font-7 logout_icon shopinfo">info</i>
|
||||
<span class="font-15 shopinfo" >Second Display</span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
<%food_court = Lookup.find_by_lookup_type_and_value("food_court", "1")%>
|
||||
<% if food_court && ShiftSale.current_open_shift(current_user)%>
|
||||
<li>
|
||||
<p class="waves-effect waves-block p-l-30 m-b-5 close_cashier">
|
||||
<i class="material-icons font-7 logout_icon">close</i>
|
||||
<span class="font-15">Close Cashier</span>
|
||||
</p>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<li>
|
||||
<!-- <p class="delete waves-effect waves-block p-l-30 m-b-5" data-ref="<%=logout_path%>" data-method="delete">
|
||||
<i class="material-icons font-10 logout_icon">exit_to_app</i>
|
||||
<span class="font-18">Logout</span>
|
||||
</p> -->
|
||||
<p class="delete waves-effect waves-block p-l-30 m-b-5 logout" data-ref="<%= logout_path %>" data-method="delete">
|
||||
<i class="material-icons font-7 logout_icon">exit_to_app</i>
|
||||
<span class="font-15">Logout</span>
|
||||
</p>
|
||||
<span class="hidden" id="delete_text">
|
||||
<h6>Are you sure you want to Logout ?</h6>
|
||||
<!-- <h6>This action can't be undo. </h6> -->
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- NO Need for color Change
|
||||
<a href="javascript:void(0);" class="js-right-sidebar" data-close="true">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</a> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<%end%>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('.delete').click(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();
|
||||
//var page = url.substring(url.lastIndexOf('/') + 1);
|
||||
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 ,
|
||||
url: url,
|
||||
headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
|
||||
success: function(data) {
|
||||
location.href = data.url;
|
||||
if (data.url) {
|
||||
location.href = data.url;
|
||||
} else {
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
swal("Error", "Could not process logout.", "error");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.online_order').on('click',function(){
|
||||
window.location.href = '/origami/order_reservation';
|
||||
});
|
||||
|
||||
if(parseInt(getOnlineOrderCount()) > 0){
|
||||
$('.order_no').addClass("order-badge");
|
||||
$('.order_no').html(parseInt(getOnlineOrderCount()));
|
||||
}
|
||||
|
||||
$(".team_viewer").on('click',function(){
|
||||
// /opt/teamviewer/tv_bin/script/teamviewer
|
||||
// TEAM VIEWER
|
||||
$(".team_viewer").on('click',function(e){
|
||||
e.preventDefault();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
data: {},
|
||||
dataType: 'json',
|
||||
url: "/run_teamviewer",
|
||||
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');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
window.open('https://www.teamviewer.com', '_blank');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
$('.close_cashier').on('click',function(e){
|
||||
e.preventDefault(); // Prevent the href from redirecting directly
|
||||
var linkURL = '/foodcourt/shift/cashier/close';
|
||||
var count = ''
|
||||
var text = ''
|
||||
$.ajax({
|
||||
url: '/foodcourt/current_shift_order_count',
|
||||
method: 'get',
|
||||
success: function(data) {
|
||||
count = JSON.stringify(data)
|
||||
console.log(count)
|
||||
if (count > 0) {
|
||||
text = "<h5><span style=\"color: #CC0000\"> We have "+count+" pending orders and sales</span> </h5>.<br>Are you sure you want to close cashier? ";
|
||||
}else{
|
||||
text = "Are you sure you want to close cashier?";
|
||||
// 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");
|
||||
}
|
||||
swal({
|
||||
title: "Alert!",
|
||||
text: text,
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
html: true
|
||||
}, function() {
|
||||
window.location.href = linkURL;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 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 %>
|
||||
|
||||
Reference in New Issue
Block a user