add sync component to footer (#182)

* add sync component to footer * style Age.svelte * lint
pi-base · Oct 22, 2024 · 7c3939f · 7c3939f
1 parent 6510ca8
commit 7c3939f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/viewer/src/components/Footer.svelte b/packages/viewer/src/components/Footer.svelte
@@ -1,6 +1,10 @@
+<script lang="ts">
+  import Sync from './Dev/Sync.svelte'
+</script>
+
 <!-- Footer -->
 <footer class="text-center bg-light text-muted">
-  <div class="p-4">
+  <div class="pt-4">
     Data © {new Date().getFullYear()} Steven Clontz and James Dabbs (<a
       class="text-dark"
       href="https://github.com/pi-base/data/blob/main/LICENSE.md">CC-BY</a
@@ -10,4 +14,7 @@
     >) |
     <a class="text-dark" href="https://github.com/pi-base">GitHub</a>
   </div>
+  <div class="p-2">
+    Data last synchonized: <Sync />
+  </div>
 </footer>
diff --git a/packages/viewer/src/components/Shared/Age.svelte b/packages/viewer/src/components/Shared/Age.svelte
@@ -14,6 +14,18 @@
 
     return () => clearInterval(interval)
   })
+
+  let klass: string = ''
+  const DAY = 1000 * 60 * 60 * 24
+  const WEEK = DAY * 7
+
+  $: if (Date.now() > new Date(date).getTime() + WEEK) {
+    klass = 'text-danger'
+  } else if (Date.now() > new Date(date).getTime() + DAY) {
+    klass = 'text-warning'
+  } else {
+    klass = 'text-info'
+  }
 </script>
 
-{$age}
+<span class={klass}>{$age}</span>