Offline page and offline alert
This commit is contained in:
parent
414f573132
commit
e8d25ea838
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<title>You are offline</title>
|
||||
<link href="/resources/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1">
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<style>
|
||||
body:not(table){
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<script src="resources/dist/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content -->
|
||||
<div id="content"></div>
|
||||
<!-- /Content -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
require_once 'ui.php';
|
||||
loadtemplate('offline.html', ['title' => t("You are offline",false)]);
|
||||
|
|
@ -86,19 +86,33 @@ function fillTable(data){
|
|||
});
|
||||
}
|
||||
|
||||
var offline = false;
|
||||
function loadTable(table_page){
|
||||
$.getJSON( "resources/ajax/ajax_"+table_page+".php", function( data, status, xhr ) {
|
||||
fillTable(data);
|
||||
caches.open('tables-1').then((cache) => { cache.put('/table_'+table_page+'.json', new Response(xhr.responseText)) });
|
||||
var headers = new Headers();
|
||||
headers.append('date', Date.now());
|
||||
caches.open('tables-1').then((cache) => {
|
||||
cache.put('/table_'+table_page+'.json', new Response(xhr.responseText, {headers: headers}))
|
||||
});
|
||||
if(window.offline){ // if xhr request successful, client is online
|
||||
$("#offline_alert").hide(400);
|
||||
window.offline = false;
|
||||
}
|
||||
}).fail(function() {
|
||||
caches.open('tables-1').then(cache => {
|
||||
cache.match("/table_"+table_page+".json").then(response => {
|
||||
response.json().then(data => {
|
||||
fillTable(data);
|
||||
console.log("Table loaded from cache");
|
||||
$("#offline_update").text(new Date(parseInt(response.headers.get("date"))).toLocaleString());
|
||||
});
|
||||
});
|
||||
});
|
||||
if(!window.offline){ // if xhr request fails, client is offline
|
||||
$("#offline_alert").show(400);
|
||||
window.offline = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
window.fillTable = fillTable;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
let cacheVersion = 1
|
||||
let cacheName = "static-"+cacheVersion
|
||||
|
||||
const urls = ['/offline.html', '/resources/dist/main.js', '/resources/dist/maps.js', '/manifest.webmanifest', '/resources/images/favicon.ico', '/resources/dist/marker-icon.png', '/resources/dist/layers.png', '/resources/dist/layers-2x.png', '/resources/images/android-chrome-192x192.png', '/resources/images/android-chrome-384x384.png', '/resources/images/black_helmet.png', '/resources/images/red_helmet.png', '/resources/images/wheel.png', '/resources/images/logo.png', '/resources/images/owner.png'];
|
||||
const urls = ['/offline.php', '/resources/dist/main.js', '/resources/dist/maps.js', '/manifest.webmanifest', '/resources/images/favicon.ico', '/resources/dist/marker-icon.png', '/resources/dist/layers.png', '/resources/dist/layers-2x.png', '/resources/images/android-chrome-192x192.png', '/resources/images/android-chrome-384x384.png', '/resources/images/black_helmet.png', '/resources/images/red_helmet.png', '/resources/images/wheel.png', '/resources/images/logo.png', '/resources/images/owner.png', '/resources/dist/fonts/fontawesome-webfont.ttf', '/resources/dist/fonts/fontawesome-webfont.svg'];
|
||||
|
||||
function fetchHandler(event, content_type, not_found_message){
|
||||
event.respondWith(
|
||||
|
|
@ -31,11 +31,13 @@ self.addEventListener('fetch', function (event) {
|
|||
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;
|
||||
|
||||
if (request.headers.get('Accept').includes('text/html')) {
|
||||
fetchHandler(event, null, "/offline.html");
|
||||
fetchHandler(event, null, "/offline.php");
|
||||
} else if (request.destination == "script") {
|
||||
fetchHandler(event, "application/javascript", "console.error('Script "+event.request.url+" not found');");
|
||||
} else if (request.destination == "image") {
|
||||
fetchHandler(event, null, "/resources/images/logo.png");
|
||||
} else if (request.destination == "font") {
|
||||
fetchHandler(event, null, null);
|
||||
} else if (request.destination == "manifest" || request.url.includes("manifest")) {
|
||||
fetchHandler(event, null, "/manifest.webmanifest");
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -348,6 +348,9 @@
|
|||
</div>
|
||||
<!-- /Menu -->
|
||||
{% endblock %}
|
||||
<div class="alert alert-danger m-3" id="offline_alert" style="display: none" role="alert">
|
||||
<b>{{ 'You are offline'|t }}.</b> {{ 'Last update'|t }}: <p style="display: inline" id="offline_update"></p>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div id="content">{% block content %}{% endblock %}</div>
|
||||
<!-- /Content -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<br>
|
||||
<br>
|
||||
<img alt="VVF" src="./resources/images/owner.png" width="150" style="display: block; margin-left: auto; margin-right: auto;">
|
||||
<br>
|
||||
<br>
|
||||
<style>
|
||||
th, td {
|
||||
border: 1px solid grey;
|
||||
border-collapse: collapse;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table {
|
||||
box-shadow: 2px 2px 25px rgba(0,0,0,0.5);
|
||||
border-radius: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div id="list" style="overflow-x:auto;">
|
||||
<table style="width: 90%; text-align:center;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'Name'|t }}</th>
|
||||
<th>{{ 'Available'|t }}</th>
|
||||
{% if user.full_viewer %}
|
||||
<th>{{ 'Driver'|t }}</th>
|
||||
<th>{{ 'Call'|t }}</th>
|
||||
<th>{{ 'Write'|t }}</th>
|
||||
<th>{{ 'Services'|t }}</th>
|
||||
<th>{{ 'Availability Minutes'|t }}</th>
|
||||
<th>{{ 'Other'|t }}</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table_body">
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
window.loadTable("list");
|
||||
setInterval(function() {
|
||||
window.loadTable("list");
|
||||
if(!window.offline){
|
||||
location.reload();
|
||||
}
|
||||
}, 10000);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
{% endblock %}
|
||||
|
|
@ -72,5 +72,7 @@ return [
|
|||
"Thanks, %s, you have given your availability in case of alert." => "Thanks, %s, you have given your availability in case of alert.",
|
||||
"Thanks, %s, you have removed your availability in case of alert." => "Thanks, %s, you have removed your availability in case of alert.",
|
||||
"Add service" => "Add service",
|
||||
"Add training" => "Add training"
|
||||
"Add training" => "Add training",
|
||||
"You are offline" => "You are offline",
|
||||
"Last update" => "Last update"
|
||||
];
|
||||
|
|
|
|||
|
|
@ -72,5 +72,7 @@ return [
|
|||
"Thanks, %s, you have given your availability in case of alert." => "Grazie, %s, hai dato la tua disponibilità in caso di allerta.",
|
||||
"Thanks, %s, you have removed your availability in case of alert." => "Grazie, %s, hai rimosso la tua disponibilità in caso di allerta.",
|
||||
"Add service" => "Aggiungi intervento",
|
||||
"Add training" => "Aggiungi esercitazione"
|
||||
"Add training" => "Aggiungi esercitazione",
|
||||
"You are offline" => "Sei offline",
|
||||
"Last update" => "Ultimo aggiornamento"
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue