From aaab53da708d93a35e5eefa8aa3c754598b4d928 Mon Sep 17 00:00:00 2001
From: Selwyn <talk@selwyn.cc>
Date: Tue, 5 Sep 2023 10:47:45 +0200
Subject: [PATCH 1/2] Show when data was last updated

---
 src/components/FilterMenu/FilterMenu.vue | 43 ++++++++++++++++++++++--
 src/data/en/messages.json                |  3 +-
 src/data/nl/messages.json                |  3 +-
 src/stores/spaces.ts                     |  3 ++
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/components/FilterMenu/FilterMenu.vue b/src/components/FilterMenu/FilterMenu.vue
index 49a6d389..fbfd4a30 100644
--- a/src/components/FilterMenu/FilterMenu.vue
+++ b/src/components/FilterMenu/FilterMenu.vue
@@ -12,6 +12,13 @@
         <fieldset class="filter-menu__filter-group">
           <legend class="h3">
             {{ $t("occupancy") }}
+            <span
+              v-if="updatedAt"
+              class="filter-menu__legend-meta"
+            >
+              {{ $t('updated') }}:
+              {{ updatedAt }}
+            </span>
           </legend>
           <FilterMenuItem
             v-for="occupancy in OCCUPANCY_RATES"
@@ -133,7 +140,9 @@
 </template>
 
 <script setup lang="ts">
+const { $locale } = useNuxtApp();
 import { storeToRefs } from "pinia";
+import { useIntervalFn } from "@vueuse/core"
 import { useSpacesStore } from "~/stores/spaces";
 import { OCCUPANCY_RATES } from "~/types/Filters";
 
@@ -149,11 +158,35 @@ const { filters, buildings } = storeToRefs(spacesStore);
 const spaceCount = computed(() =>
   spacesStore.currentSelection?.level == "building"
     ? spacesStore.filteredSpaces.filter(
-        (space) => space.buildingNumber === spacesStore.currentBuilding!.number
-      ).length
+      (space) => space.buildingNumber === spacesStore.currentBuilding!.number
+    ).length
     : spacesStore.filteredSpaces.length
 );
 
+function getRelativeTimeString(date: Date): string {
+  const deltaSeconds = Math.round((date.getTime() - Date.now()) / 1000);
+
+  const cutoffs = [60, 3600, 86400, Infinity];
+  // Array equivalent to the above but in the string representation of the units
+  const units: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour"];
+
+  const unitIndex = cutoffs.findIndex(cutoff => cutoff > Math.abs(deltaSeconds));
+  // Get the divisor to divide from the seconds. E.g. if our unit is "day" our divisor
+  // is one day in seconds, so we can divide our seconds by this to get the # of days
+  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+
+  const rtf = new Intl.RelativeTimeFormat($locale.value, { numeric: "auto" });
+  return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex]);
+}
+
+const updatedAt = ref();
+const { resume, pause } = useIntervalFn(() => {
+  updatedAt.value = getRelativeTimeString(spacesStore.updatedAt)
+}, 5000);
+
+onMounted(() => { resume(); })
+onUnmounted(() => { pause(); })
+
 function clearFilters() {
   spacesStore.clearFilters();
 }
@@ -262,4 +295,10 @@ function clearFilters() {
 .filter-menu__buttons .button--primary {
   margin: 0 0 0 var(--spacing-half);
 }
+
+.filter-menu__legend-meta {
+  display: block;
+  font-family: var(--font-body);
+  margin-bottom: var(--spacing-quarter);
+}
 </style>
diff --git a/src/data/en/messages.json b/src/data/en/messages.json
index f5932673..5d698b6f 100644
--- a/src/data/en/messages.json
+++ b/src/data/en/messages.json
@@ -102,5 +102,6 @@
   "occupancy.quiet": "quiet",
   "occupancy.busy": "busy",
   "occupancy.crowded": "crowded",
-  "occupancy.unknown": "unknown"
+  "occupancy.unknown": "unknown",
+  "updated": "Updated"
 }
diff --git a/src/data/nl/messages.json b/src/data/nl/messages.json
index 29b22ae3..8f37a5ea 100644
--- a/src/data/nl/messages.json
+++ b/src/data/nl/messages.json
@@ -102,5 +102,6 @@
   "occupancy.quiet": "rustig",
   "occupancy.busy": "druk",
   "occupancy.crowded": "vol",
-  "occupancy.unknown": "onbekend"
+  "occupancy.unknown": "onbekend",
+  "updated": "Laatst bijgewerkt"
 }
diff --git a/src/stores/spaces.ts b/src/stores/spaces.ts
index a6d72af4..48212f44 100644
--- a/src/stores/spaces.ts
+++ b/src/stores/spaces.ts
@@ -28,6 +28,7 @@ export type AssociatedSpace = {
 export const useSpacesStore = defineStore("spaces", () => {
   const currentSelection = ref<Selection>(undefined);
   const currentAssociatedSpaces = ref<AssociatedSpace[]>([]);
+  const updatedAt = ref();
 
   const currentSpace = computed(() =>
     currentSelection.value && currentSelection.value.level == "space"
@@ -114,6 +115,7 @@ export const useSpacesStore = defineStore("spaces", () => {
       return { ...building, activeDevices, occupancy };
     });
     mapStore.updateData();
+    updatedAt.value = new Date();
   }
 
   function setBuildingOccupancy(
@@ -294,5 +296,6 @@ export const useSpacesStore = defineStore("spaces", () => {
     buildingsI18n, //These need to be exported to be passed as payload from server to client
     roomsI18n,
     spacesI18n,
+    updatedAt,
   };
 });

From 84b826b9b6e5fb2e7b62a06de26e7b2434ca0416 Mon Sep 17 00:00:00 2001
From: Selwyn <talk@selwyn.cc>
Date: Tue, 5 Sep 2023 14:31:36 +0200
Subject: [PATCH 2/2] Update FilterMenu.vue

---
 src/components/FilterMenu/FilterMenu.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/FilterMenu/FilterMenu.vue b/src/components/FilterMenu/FilterMenu.vue
index fbfd4a30..391f5263 100644
--- a/src/components/FilterMenu/FilterMenu.vue
+++ b/src/components/FilterMenu/FilterMenu.vue
@@ -171,8 +171,7 @@ function getRelativeTimeString(date: Date): string {
   const units: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour"];
 
   const unitIndex = cutoffs.findIndex(cutoff => cutoff > Math.abs(deltaSeconds));
-  // Get the divisor to divide from the seconds. E.g. if our unit is "day" our divisor
-  // is one day in seconds, so we can divide our seconds by this to get the # of days
+  // Get the divisor to divide from the seconds.
   const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
 
   const rtf = new Intl.RelativeTimeFormat($locale.value, { numeric: "auto" });