Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add ongoing sync indicator to dashboard

Browse source 
This means I can remove the "loading" state of the dashboard.
This commit is contained in:
Eli Ribble 2026-01-06 15:32:26 +00:00
parent 53ee020fe0
commit 05b3caaa73
4 changed files with 37 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

26
templates/dashboard-loading.html
View file

@ -1,26 +0,0 @@
{{template "authenticated.html" .}}
{{define "title"}}Dash{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script>
function onLoad() {
console.log("Map init done.");
}
window.addEventListener("load", onLoad);
</script>
<style>
body {
background-color: #f8f9fa;
}
.dashboard-container {
padding: 20px 0;
}
</style>
{{end}}
{{define "content"}}
<div class="container dashboard-container">
<p>We're downloading the data we need, hold on. This page will refresh every 10 seconds automatically until we've got it.</p>
</div>
{{end}}

18
templates/dashboard.html
View file

@ -163,6 +163,10 @@ body {
font-size: 2rem;
font-weight: bold;
}
.syncing {
color: #28a745;
animation: fa-spin 2s linear infinite;
}
</style>
{{end}}
{{define "content"}}
@ -174,10 +178,16 @@ body {
<p class="text-muted">Overview of mosquito control activities in your district</p>
</div>
<div class="col-md-6 text-md-end d-flex align-items-center justify-content-md-end">
<p class="last-refreshed mb-0">
<i class="fas fa-sync-alt me-2"></i>Last updated: <span id="last-refreshed-time">{{ .LastSync | timeSince }}</span>
<button class="btn btn-sm btn-outline-primary ms-3">Refresh Data</button>
</p>
{{ if .IsSyncOngoing }}
<p class="last-refreshed mb-0">
<i class="fas fa-sync-alt me-2 syncing"></i>Syncing now...
</p>
{{ else }}
<p class="last-refreshed mb-0">
<i class="fas fa-sync-alt me-2"></i>Last updated: <span id="last-refreshed-time">{{ .LastSync | timeSince }}</span>
<button class="btn btn-sm btn-outline-primary ms-3">Refresh Data</button>
</p>
{{ end }}
</div>
</div>