From 250433e63b8b785c68ad3df175b262996d9d1599 Mon Sep 17 00:00:00 2001
From: Leo Shen <i@szclsya.me>
Date: Sat, 6 May 2023 02:37:28 -0400
Subject: [PATCH] template: add live reload on status information

---
 assets/partials/color.sass          |  2 +
 assets/partials/main.sass           |  3 ++
 content/project_table.md            |  6 +++
 deploy.sh                           |  1 +
 layouts/index.html                  | 67 ++++++++---------------------
 layouts/page/project_table.html     |  1 +
 layouts/partials/project_table.html | 51 ++++++++++++++++++++++
 7 files changed, 82 insertions(+), 49 deletions(-)
 create mode 100644 content/project_table.md
 create mode 100644 layouts/page/project_table.html
 create mode 100644 layouts/partials/project_table.html

diff --git a/assets/partials/color.sass b/assets/partials/color.sass
index 6a265fe..8ec930e 100644
--- a/assets/partials/color.sass
+++ b/assets/partials/color.sass
@@ -26,6 +26,8 @@ main
     .table-header
       th, td
         border-color: $blueLight
+      #refresh-indicator
+        color: $blue
     .syncing-badge
       color: white
       background-color: $blue
diff --git a/assets/partials/main.sass b/assets/partials/main.sass
index 4bbb85c..81ec6b9 100644
--- a/assets/partials/main.sass
+++ b/assets/partials/main.sass
@@ -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
diff --git a/content/project_table.md b/content/project_table.md
new file mode 100644
index 0000000..ad3c699
--- /dev/null
+++ b/content/project_table.md
@@ -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"
++++
diff --git a/deploy.sh b/deploy.sh
index 0d38d11..e41ef67 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -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/
diff --git a/layouts/index.html b/layouts/index.html
index 30fec74..09461b9 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -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 }}
diff --git a/layouts/page/project_table.html b/layouts/page/project_table.html
new file mode 100644
index 0000000..fb08813
--- /dev/null
+++ b/layouts/page/project_table.html
@@ -0,0 +1 @@
+{{ partial "project_table" . }}
diff --git a/layouts/partials/project_table.html b/layouts/partials/project_table.html
new file mode 100644
index 0000000..4eb6631
--- /dev/null
+++ b/layouts/partials/project_table.html
@@ -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>