template: add live reload on status information
This commit is contained in:
parent
5078039128
commit
250433e63b
GPG Key ID:
D126FA196DA0F362
|
|
@ -26,6 +26,8 @@ main
|
|||
.table-header
|
||||
th, td
|
||||
border-color: $blueLight
|
||||
#refresh-indicator
|
||||
color: $blue
|
||||
.syncing-badge
|
||||
color: white
|
||||
background-color: $blue
|
||||
|
|
|
|||
|
|
@ -182,6 +182,9 @@ main
|
|||
border-top: 0
|
||||
border-bottom: 2px solid
|
||||
border-collapse: collapse
|
||||
// #refresh-indicator
|
||||
#refresh-indicator
|
||||
transition: all .2s
|
||||
.summary
|
||||
font-weight: 500
|
||||
.project-size
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
# This is only a placeholder file to force Hugo to render projects_table.html
|
||||
# Don't remove me
|
||||
type = "page"
|
||||
layout = "project_table"
|
||||
+++
|
||||
|
|
@ -14,5 +14,6 @@ hugo > /dev/null
|
|||
|
||||
# Copy to mirror root
|
||||
cp public/index.html /mirror/root/index-new.html
|
||||
cp public/project_table/index.html /mirror/root/include/project_table.html
|
||||
cp public/include/* /mirror/root/include/
|
||||
cp -r public/news /mirror/root/
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
<header id="nav">
|
||||
<img class="logo" src="/include/logo-icon.svg">
|
||||
<div class="title">
|
||||
<h1 class="club-name">University of Waterloo <br> Computer Science Club</h1>
|
||||
<h1 class="club-name">University of Waterloo</h1>
|
||||
<br>
|
||||
<h1 class="club-name">Computer Science Club</h1>
|
||||
<h2 class="site-name">Open Source Software Mirror</h2>
|
||||
<br>
|
||||
<h2 class="mef">
|
||||
|
|
@ -28,54 +30,7 @@
|
|||
|
||||
<main>
|
||||
<div id="left">
|
||||
<table class="projects">
|
||||
<tr class="table-header">
|
||||
<th>Name</th>
|
||||
<th>Project Site</th>
|
||||
<th style="min-width: 8em">Last Sync</th>
|
||||
<th style="min-width: 3em">Status</th>
|
||||
<th class="project-size">Size</th>
|
||||
</tr>
|
||||
|
||||
{{ $list := slice }}
|
||||
{{ range $name, $status := $.Site.Data.sync.projects }}
|
||||
{{ $nameLower := lower $name }}
|
||||
{{ $list = $list | append (dict "nameLower" $nameLower "name" $name "status" $status) }}
|
||||
{{ end }}
|
||||
|
||||
{{ range sort $list ".nameLower" }}
|
||||
<tr>
|
||||
<td><a href="/{{ .name }}" style="white-space: nowrap">{{ .name }}</a></td>
|
||||
<td><a href="{{ .status.url }}">{{ .status.url_short }}</a></td>
|
||||
<td>
|
||||
{{ if .status.upstream }}
|
||||
N/A
|
||||
{{ else if .status.last_successful_sync_time }}
|
||||
{{ time.Format "2006-01-02 15:04:05" (int .status.last_successful_sync_time)}}
|
||||
{{ else }}
|
||||
Never
|
||||
{{ end }}
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{{ if .status.is_running }}
|
||||
<span class="syncing-badge">syncing</span>
|
||||
{{ else if (and (not .status.last_sync_success) (not .status.upstream)) }}
|
||||
<span class="error-badge">error</span>
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="project-size">{{ .status.size_human }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
|
||||
<tr class="summary">
|
||||
<td>Total</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="project-size">{{ .Site.Data.sync.total_size_human }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
{{ partial "project_table" . }}
|
||||
</div>
|
||||
|
||||
<div id="right" class="news">
|
||||
|
|
@ -106,4 +61,18 @@
|
|||
|
||||
{{ partial "footer" }}
|
||||
</div>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
|
||||
<script>
|
||||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
||||
|
||||
const update_project_table = setInterval(async function() {
|
||||
await htmx.ajax('GET', '/include/project_table.html',
|
||||
{target:'#project-table', swap:'outerHTML swap:2s settle:2s'});
|
||||
|
||||
refresh_indicator = document.getElementById('refresh-indicator');
|
||||
refresh_indicator.style = "opacity: 1"
|
||||
await sleep(2*1000);
|
||||
refresh_indicator.style = "opacity: 0"
|
||||
}, 60*1000);
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{{ partial "project_table" . }}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<table class="projects" id="project-table">
|
||||
<tr class="table-header">
|
||||
<th>Name</th>
|
||||
<th>Project Site</th>
|
||||
<th style="min-width: 8em">
|
||||
Last Sync
|
||||
<span id="refresh-indicator" style="opacity: 0">Refreshed!</span>
|
||||
</th>
|
||||
<th style="min-width: 3em">Status</th>
|
||||
<th class="project-size">Size</th>
|
||||
</tr>
|
||||
|
||||
{{ $list := slice }}
|
||||
{{ range $name, $status := $.Site.Data.sync.projects }}
|
||||
{{ $nameLower := lower $name }}
|
||||
{{ $list = $list | append (dict "nameLower" $nameLower "name" $name "status" $status) }}
|
||||
{{ end }}
|
||||
|
||||
{{ range sort $list ".nameLower" }}
|
||||
<tr>
|
||||
<td><a href="/{{ .name }}" style="white-space: nowrap">{{ .name }}</a></td>
|
||||
<td><a href="{{ .status.url }}">{{ .status.url_short }}</a></td>
|
||||
<td id="last-successful-sync-time-{{ .name }}">
|
||||
{{ if .status.upstream }}
|
||||
N/A
|
||||
{{ else if .status.last_successful_sync_time }}
|
||||
{{ time.Format "2006-01-02 15:04:05" (int .status.last_successful_sync_time)}}
|
||||
{{ else }}
|
||||
Never
|
||||
{{ end }}
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{{ if .status.is_running }}
|
||||
<span class="syncing-badge" id="syncing-badge-{{ .name }}">syncing</span>
|
||||
{{ else if (and (not .status.last_sync_success) (not .status.upstream)) }}
|
||||
<span class="error-badge" id="error-badge-{{ .name }}">error</span>
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="project-size">{{ .status.size_human }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
|
||||
<tr class="summary">
|
||||
<td>Total</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="project-size">{{ .Site.Data.sync.total_size_human }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
Loading…
Reference in New Issue