Show when data was last updated

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>

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"
 }

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"
 }

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,
  };
 });