add loading indicator to nav
This commit is contained in:
Daniel Friesel
parent
2ddab75644
commit
18df44cc71
7 changed files with 40 additions and 22 deletions
|
|
@ -1,14 +1,14 @@
|
||||||
const CACHE_NAME = 'static-cache-v13';
|
const CACHE_NAME = 'static-cache-v14';
|
||||||
const FILES_TO_CACHE = [
|
const FILES_TO_CACHE = [
|
||||||
'/offline.html',
|
'/offline.html',
|
||||||
'/static/v13/css/materialize.min.css',
|
'/static/v14/css/materialize.min.css',
|
||||||
'/static/v13/css/material-icons.css',
|
'/static/v14/css/material-icons.css',
|
||||||
'/static/v13/css/local.css',
|
'/static/v14/css/local.css',
|
||||||
'/static/v13/js/jquery-3.4.1.min.js',
|
'/static/v14/js/jquery-3.4.1.min.js',
|
||||||
'/static/v13/js/materialize.min.js',
|
'/static/v14/js/materialize.min.js',
|
||||||
'/static/v13/js/travelynx-actions.min.js',
|
'/static/v14/js/travelynx-actions.min.js',
|
||||||
'/static/v13/js/autocomplete.min.js',
|
'/static/v14/js/autocomplete.min.js',
|
||||||
'/static/v13/js/geolocation.min.js',
|
'/static/v14/js/geolocation.min.js',
|
||||||
];
|
];
|
||||||
|
|
||||||
self.addEventListener('install', (evt) => {
|
self.addEventListener('install', (evt) => {
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Icons';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url(/static/v13/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
|
src: url(/static/v14/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||||
src: local('Material Icons'),
|
src: local('Material Icons'),
|
||||||
local('MaterialIcons-Regular'),
|
local('MaterialIcons-Regular'),
|
||||||
url(/static/v13/fonts/MaterialIcons-Regular.woff2) format('woff2'),
|
url(/static/v14/fonts/MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
url(/static/v13/fonts/MaterialIcons-Regular.woff) format('woff'),
|
url(/static/v14/fonts/MaterialIcons-Regular.woff) format('woff'),
|
||||||
url(/static/v13/fonts/MaterialIcons-Regular.ttf) format('truetype');
|
url(/static/v14/fonts/MaterialIcons-Regular.ttf) format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-icons {
|
.material-icons {
|
||||||
|
|
|
||||||
|
|
@ -110,4 +110,7 @@ $(document).ready(function() {
|
||||||
if ($('.publicstatuscol .autorefresh').length) {
|
if ($('.publicstatuscol .autorefresh').length) {
|
||||||
setTimeout(tvly_update_public, 20000);
|
setTimeout(tvly_update_public, 20000);
|
||||||
}
|
}
|
||||||
|
$(window).on('beforeunload', function () {
|
||||||
|
$('nav .preloader-wrapper').addClass('active');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
2
public/static/js/travelynx-actions.min.js
vendored
2
public/static/js/travelynx-actions.min.js
vendored
|
|
@ -1 +1 @@
|
||||||
function tvly_run(t,a,e){var n='<i class="material-icons">error</i>',c=$('<div class="progress"><div class="indeterminate"></div></div>');t.hide(),t.after(c),$.post("/action",a,function(a){a.success?$(location).attr("href",a.redirect_to):(M.toast({html:n+" "+a.error}),c.remove(),e&&e(),t.append(" "+n),t.show())})}function tvly_update(){$.get("/ajax/status_card.html",function(t){$(".statuscol").html(t),tvly_reg_handlers(),setTimeout(tvly_update,2e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),setTimeout(tvly_update,2e4)})}function tvly_update_public(){var t;$(".publicstatuscol").each(function(){t=$(this).data("user")}),$.get("/ajax/status/"+t+".html",function(t){$(".publicstatuscol").html(t),setTimeout(tvly_update_public,2e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),setTimeout(tvly_update_public,2e4)})}function tvly_reg_handlers(){$(".action-checkin").click(function(){var t=$(this);tvly_run(t,{action:"checkin",station:t.data("station"),train:t.data("train")})}),$(".action-checkout").click(function(){var t=$(this),a={action:"checkout",station:t.data("station"),force:t.data("force")};tvly_run(t,a,function(){t.append(" – Ohne Echtzeitdaten auschecken?"),t.data("force",!0)})}),$(".action-undo").click(function(){var t=$(this);tvly_run(t,{action:"undo",undo_id:t.data("id")})}),$(".action-cancelled-from").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_from",station:t.data("station"),train:t.data("train")})}),$(".action-cancelled-to").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_to",station:t.data("station"),force:!0})}),$(".action-delete").click(function(){var t=$(this),a={action:"delete",id:t.data("id"),checkin:t.data("checkin"),checkout:t.data("checkout")};really_delete=confirm("Diese Zugfahrt wirklich löschen? Der Eintrag wird sofort aus der Datenbank entfernt und kann nicht wiederhergestellt werden."),really_delete&&tvly_run(t,a)})}$(document).ready(function(){tvly_reg_handlers(),$(".statuscol .autorefresh").length&&setTimeout(tvly_update,2e4),$(".publicstatuscol .autorefresh").length&&setTimeout(tvly_update_public,2e4)});
|
function tvly_run(t,a,e){var n='<i class="material-icons">error</i>',c=$('<div class="progress"><div class="indeterminate"></div></div>');t.hide(),t.after(c),$.post("/action",a,function(a){a.success?$(location).attr("href",a.redirect_to):(M.toast({html:n+" "+a.error}),c.remove(),e&&e(),t.append(" "+n),t.show())})}function tvly_update(){$.get("/ajax/status_card.html",function(t){$(".statuscol").html(t),tvly_reg_handlers(),setTimeout(tvly_update,2e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),setTimeout(tvly_update,2e4)})}function tvly_update_public(){var t;$(".publicstatuscol").each(function(){t=$(this).data("user")}),$.get("/ajax/status/"+t+".html",function(t){$(".publicstatuscol").html(t),setTimeout(tvly_update_public,2e4)}).fail(function(){$(".sync-failed-marker").css("display","block"),setTimeout(tvly_update_public,2e4)})}function tvly_reg_handlers(){$(".action-checkin").click(function(){var t=$(this);tvly_run(t,{action:"checkin",station:t.data("station"),train:t.data("train")})}),$(".action-checkout").click(function(){var t=$(this),a={action:"checkout",station:t.data("station"),force:t.data("force")};tvly_run(t,a,function(){t.append(" – Ohne Echtzeitdaten auschecken?"),t.data("force",!0)})}),$(".action-undo").click(function(){var t=$(this);tvly_run(t,{action:"undo",undo_id:t.data("id")})}),$(".action-cancelled-from").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_from",station:t.data("station"),train:t.data("train")})}),$(".action-cancelled-to").click(function(){var t=$(this);tvly_run(t,{action:"cancelled_to",station:t.data("station"),force:!0})}),$(".action-delete").click(function(){var t=$(this),a={action:"delete",id:t.data("id"),checkin:t.data("checkin"),checkout:t.data("checkout")};really_delete=confirm("Diese Zugfahrt wirklich löschen? Der Eintrag wird sofort aus der Datenbank entfernt und kann nicht wiederhergestellt werden."),really_delete&&tvly_run(t,a)})}$(document).ready(function(){tvly_reg_handlers(),$(".statuscol .autorefresh").length&&setTimeout(tvly_update,2e4),$(".publicstatuscol .autorefresh").length&&setTimeout(tvly_update_public,2e4),$(window).on("beforeunload",function(){$("nav .preloader-wrapper").addClass("active")})});
|
||||||
|
|
|
||||||
|
|
@ -3,27 +3,27 @@
|
||||||
"short_name": "Travelynx",
|
"short_name": "Travelynx",
|
||||||
"scope": "/",
|
"scope": "/",
|
||||||
"icons": [{
|
"icons": [{
|
||||||
"src": "/static/v13/icons/icon-128x128.png",
|
"src": "/static/v14/icons/icon-128x128.png",
|
||||||
"sizes": "128x128",
|
"sizes": "128x128",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}, {
|
}, {
|
||||||
"src": "/static/v13/icons/icon-144x144.png",
|
"src": "/static/v14/icons/icon-144x144.png",
|
||||||
"sizes": "144x144",
|
"sizes": "144x144",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}, {
|
}, {
|
||||||
"src": "/static/v13/icons/icon-152x152.png",
|
"src": "/static/v14/icons/icon-152x152.png",
|
||||||
"sizes": "152x152",
|
"sizes": "152x152",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}, {
|
}, {
|
||||||
"src": "/static/v13/icons/icon-192x192.png",
|
"src": "/static/v14/icons/icon-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}, {
|
}, {
|
||||||
"src": "/static/v13/icons/icon-256x256.png",
|
"src": "/static/v14/icons/icon-256x256.png",
|
||||||
"sizes": "256x256",
|
"sizes": "256x256",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}, {
|
}, {
|
||||||
"src": "/static/v13/icons/icon-512x512.png",
|
"src": "/static/v14/icons/icon-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}],
|
}],
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
<meta name="apple-mobile-web-app-title" content="Weather PWA">
|
<meta name="apple-mobile-web-app-title" content="Weather PWA">
|
||||||
% my $av = 'v13'; # asset version
|
% my $av = 'v14'; # asset version
|
||||||
<link rel="apple-touch-icon" href="/static/<%= $av %>/icons/icon-152x152.png">
|
<link rel="apple-touch-icon" href="/static/<%= $av %>/icons/icon-152x152.png">
|
||||||
<link rel="manifest" href="/static/<%= $av %>/manifest.json">
|
<link rel="manifest" href="/static/<%= $av %>/manifest.json">
|
||||||
%= stylesheet "/static/${av}/css/materialize.min.css"
|
%= stylesheet "/static/${av}/css/materialize.min.css"
|
||||||
|
|
@ -31,11 +31,26 @@
|
||||||
<div class="nav-wrapper container">
|
<div class="nav-wrapper container">
|
||||||
<a href="/" class="brand-logo left">travelynx</a>
|
<a href="/" class="brand-logo left">travelynx</a>
|
||||||
<ul id="nav-mobile" class="right">
|
<ul id="nav-mobile" class="right">
|
||||||
|
<li class="loading">
|
||||||
|
<div class="preloader-wrapper small" style="margin-top: 0.5em; margin-bottom: -1em;">
|
||||||
|
<div class="spinner-layer spinner-blue-only">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
% if (is_user_authenticated()) {
|
% if (is_user_authenticated()) {
|
||||||
<li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li>
|
<li class="<%= navbar_class('/history') %>"><a href='/history' title="History"><i class="material-icons">history</i></a></li>
|
||||||
<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li>
|
<li class="<%= navbar_class('/account') %>"><a href="/account" title="Account"><i class="material-icons">account_circle</i></a></li>
|
||||||
% }
|
% }
|
||||||
<li class="<%= navbar_class('/about') %>"><a href='/about' title="About"><i class="material-icons">info_outline</i></a></li>
|
% else {
|
||||||
|
<li class="<%= navbar_class('/about') %>"><a href='/about' title="About"><i class="material-icons">info_outline</i></a></li>
|
||||||
|
% }
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue