show internet connection status in navbar
This commit is contained in:
Dev Team
@@ -289,3 +289,149 @@ i.logout_icon{
|
||||
.blue{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.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';
|
||||
}
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
188
public/500.html
188
public/500.html
@@ -1,66 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>We're sorry, but something went wrong (500)</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
background-color: #EFEFEF;
|
||||
color: #2E2F30;
|
||||
text-align: center;
|
||||
font-family: arial, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Server Error - 500</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
div.dialog {
|
||||
width: 95%;
|
||||
max-width: 33em;
|
||||
margin: 4em auto 0;
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
div.dialog > div {
|
||||
border: 1px solid #CCC;
|
||||
border-right-color: #999;
|
||||
border-left-color: #999;
|
||||
border-bottom-color: #BBB;
|
||||
border-top: #B00100 solid 4px;
|
||||
border-top-left-radius: 9px;
|
||||
border-top-right-radius: 9px;
|
||||
background-color: white;
|
||||
padding: 7px 12% 0;
|
||||
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
|
||||
}
|
||||
.error-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 100%;
|
||||
color: #730E15;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.error-container:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
div.dialog > p {
|
||||
margin: 0 0 1em;
|
||||
padding: 1em;
|
||||
background-color: #F7F7F7;
|
||||
border: 1px solid #CCC;
|
||||
border-right-color: #999;
|
||||
border-left-color: #999;
|
||||
border-bottom-color: #999;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-color: #DADADA;
|
||||
color: #666;
|
||||
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
.error-icon {
|
||||
font-size: 80px;
|
||||
color: #ef4444;
|
||||
margin-bottom: 20px;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
<body>
|
||||
<!-- This file lives in public/500.html -->
|
||||
<div class="dialog">
|
||||
<div>
|
||||
<h1>We're sorry, but something went wrong.</h1>
|
||||
</div>
|
||||
<p>If you are the application owner check the logs for more information.</p>
|
||||
</div>
|
||||
</body>
|
||||
h1 {
|
||||
color: #1a1a1a;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4a5568;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.home-button {
|
||||
display: inline-block;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
padding: 12px 30px;
|
||||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.home-button:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.error-container {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<div class="error-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ef4444"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12" y2="16" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Internal Server Error</h1>
|
||||
<p>Something went wrong.</p>
|
||||
<p>
|
||||
Please try again later or contact support if the problem
|
||||
persists.
|
||||
</p>
|
||||
<a href="/" class="home-button">Return to Homepage</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user