Add more filters and improve names & icons

scripts/data/cms/index.ts

@@ -54,6 +54,8 @@ export function getBuildingsDataFromCms() {
             nearPrinter
             nearBathroom
             grouptables
+            computer
+            dockingStation
           }
         }
       }

scripts/data/transform-spaces.ts

@@ -26,6 +26,8 @@ export function getSpace(source: Record<string, any>): CsvSpaceData {
       nearPrinter: space.nearPrinter,
       nearBathroom: space.nearBathroom,
       grouptables: space.grouptables,
+      computer: space.computer,
+      dockingStation: space.dockingStation,
     },
     spaceId: space.spaceId,
     floor: space.floor,

src/components/FilterMenu/FilterMenu.vue

@@ -16,7 +16,7 @@
               v-if="updatedAt"
               class="filter-menu__legend-meta"
             >
-              {{ $t('updated') }}:
+              {{ $t("updated") }}:
               {{ updatedAt }}
             </span>
           </legend>
@@ -52,6 +52,16 @@
             {{ $t("computerFacilities") }}
           </legend>
           <FilterMenuItem name="powerOutlets" />
+          <FilterMenuItem
+            name="computer"
+            icon="computer-desktop--mini"
+            icon-style="new"
+          />
+          <FilterMenuItem
+            name="dockingStation"
+            icon="battery-100--mini"
+            icon-style="new"
+          />
         </fieldset>
 
         <fieldset class="filter-menu__filter-group">
@@ -128,7 +138,7 @@
 <script setup lang="ts">
 const { $locale } = useNuxtApp();
 import { storeToRefs } from "pinia";
-import { useIntervalFn } from "@vueuse/core"
+import { useIntervalFn } from "@vueuse/core";
 import { useSpacesStore } from "~/stores/spaces";
 import { OCCUPANCY_RATES } from "~/types/Filters";
 
@@ -141,8 +151,8 @@ 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
 );
 
@@ -153,7 +163,9 @@ function getRelativeTimeString(date: Date): string {
   // 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));
+  const unitIndex = cutoffs.findIndex(
+    (cutoff) => cutoff > Math.abs(deltaSeconds)
+  );
   // Get the divisor to divide from the seconds.
   const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
 
@@ -163,14 +175,17 @@ function getRelativeTimeString(date: Date): string {
 
 const updatedAt = ref();
 const { resume, pause } = useIntervalFn(() => {
-  if (!spacesStore.updatedAt)
-    return;
+  if (!spacesStore.updatedAt) return;
 
-  updatedAt.value = getRelativeTimeString(spacesStore.updatedAt)
+  updatedAt.value = getRelativeTimeString(spacesStore.updatedAt);
 }, 5000);
 
-onMounted(() => { resume(); })
-onUnmounted(() => { pause(); })
+onMounted(() => {
+  resume();
+});
+onUnmounted(() => {
+  pause();
+});
 
 function clearFilters() {
   spacesStore.clearFilters();

src/components/FilterMenu/FilterMenuItem.vue

@@ -10,7 +10,10 @@
     <SvgIcon
       v-if="showIcon"
       :name="iconName"
-      class="filter-menu__filter-icon"
+      :class="{
+        'filter-menu__filter-icon--legacy': iconStyle === 'legacy',
+        'filter-menu__filter-icon--new': iconStyle === 'new',
+      }"
     />
     {{ label ?? $t(i18nKey) }}
   </label>
@@ -34,13 +37,15 @@ const props = withDefaults(
     icon?: string;
     /** False if you do not want to display an icon */
     showIcon?: boolean;
+    iconStyle: "legacy" | "new";
   }>(),
   {
     option: undefined,
     displayKey: undefined,
     label: undefined,
     icon: undefined,
     showIcon: true,
+    iconStyle: "legacy",
   }
 );
 const inputId = computed(() =>
@@ -80,11 +85,19 @@ const spacesStore = useSpacesStore();
   background: var(--brand-primary-color-light);
 }
 
-.filter-menu__filter-icon {
+.filter-menu__filter-icon--legacy {
   margin-top: -2px;
   margin-left: var(--spacing-half-negative);
   width: 25px;
   height: 25px;
   vertical-align: middle;
 }
+
+.filter-menu__filter-icon--new {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin-block-start: calc(1ex - 1cap);
+  margin-left: var(--spacing-quarter-negative);
+}
 </style>

src/components/SpaceFacilities/SpaceFacilities.vue

@@ -14,6 +14,7 @@
         <SvgIcon
           :name="getIconName(facility)"
           class="space-facility__icon"
+          :class="{ 'space-facility__icon--new': iconMapping[facility] }"
         />
         <template #popper>
           {{ $t(facility) }}
@@ -43,7 +44,16 @@ const facilitiesPresent = computed(() =>
     )
 );
 
+const iconMapping = {
+  computer: "computer-desktop--mini",
+  dockingStation: "battery-100--mini",
+};
+
 function getIconName(facilityValue: string) {
+  if (iconMapping[facilityValue]) {
+    return iconMapping[facilityValue];
+  }
+
   return `facility-${facilityValue}-icon`;
 }
 </script>
@@ -54,12 +64,15 @@ function getIconName(facilityValue: string) {
 .space-facility__list {
   display: flex;
   flex-wrap: wrap;
+  column-gap: 0.1rem;
 }
 
 .space-facility__item {
-  position: relative;
-  display: inline-block;
-  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25px;
+  height: 25px;
 }
 
 .space-facility__icon {
@@ -68,6 +81,11 @@ function getIconName(facilityValue: string) {
   height: 25px;
 }
 
+.space-facility__icon--new {
+  width: 20px;
+  height: 20px;
+}
+
 .space-facility__seating {
   margin-left: auto;
 }
@@ -81,14 +99,14 @@ function getIconName(facilityValue: string) {
 
 .v-popper--theme-tooltip .v-popper__inner {
   padding: var(--spacing-quarter) var(--spacing-half);
-  background: var(--brand-secondary-color)!important;
+  background: var(--brand-secondary-color) !important;
   font-size: var(--font-size-smaller);
   color: var(--background-color);
   border-radius: 0;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer {
-  border-color: var(--brand-secondary-color)!important;
+  border-color: var(--brand-secondary-color) !important;
 }
 
 .tooltip {

src/components/SpriteMap/SpriteMap.vue

@@ -3,6 +3,8 @@
     style="display: none"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <!-- https://heroicons.com/ -->
+
     <!-- Solid icons: 24x24 -->
     <symbol
       id="chevron-icon"
@@ -42,6 +44,30 @@
       />
     </symbol>
 
+    <symbol
+      id="computer-desktop--mini"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.1a3.5 3.5 0 0 0 1.1 1.68.75.75 0 0 1-.49 1.32H6.74a.75.75 0 0 1-.48-1.32A3.5 3.5 0 0 0 7.36 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z"
+      />
+    </symbol>
+
+    <symbol
+      id="battery-100--mini"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M4.75 8a.75.75 0 0 0-.75.75v2.5c0 .41.34.75.75.75h9.5a.75.75 0 0 0 .75-.75v-2.5a.75.75 0 0 0-.75-.75h-9.5Z"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M1 7.25A2.25 2.25 0 0 1 3.25 5h12.5A2.25 2.25 0 0 1 18 7.25v1.08a1.5 1.5 0 0 1 1 1.42v.5a1.5 1.5 0 0 1-1 1.42v1.08A2.25 2.25 0 0 1 15.75 15H3.25A2.25 2.25 0 0 1 1 12.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v5.5c0 .41.34.75.75.75h12.5a.75.75 0 0 0 .75-.75v-5.5a.75.75 0 0 0-.75-.75H3.25Z"
+        clip-rule="evenodd"
+      />
+    </symbol>
+
     <!-- Other icons -->
     <symbol
       id="back-icon"

src/data/en/messages.json

@@ -1,6 +1,6 @@
 {
   "addToHomescreen": "add to homescreen",
-  "adjustableChairs": "adjustable chairs",
+  "adjustableChairs": "adjustable chair",
   "allSpaces": "all spaces",
   "back": "back",
   "building": "building",
@@ -50,11 +50,13 @@
   "nearBathroom": "bathroom",
   "nearbyFacilities": "Nearby facilities",
   "nearCoffeeMachine": "coffee corner",
-  "grouptables": "group tables",
+  "grouptables": "group table",
+  "computer": "computer",
+  "dockingStation": "docking station",
   "nearPrinter": "printer",
   "noFilterResults": "There are no locations found",
   "noSeatsFilterLabel": "all",
-  "powerOutlets": "sockets",
+  "powerOutlets": "socket",
   "quietness": "Noise level",
   "quietness.silent": "silent",
   "quietness.noisy": "noisy",

src/data/nl/messages.json

@@ -50,7 +50,9 @@
   "nearBathroom": "wc",
   "nearbyFacilities": "Voorzieningen in de buurt",
   "nearCoffeeMachine": "coffee corner",
-  "grouptables": "groeptafels",
+  "grouptables": "groeptafel",
+  "computer": "computer",
+  "dockingStation": "docking station",
   "nearPrinter": "printer",
   "noFilterResults": "Er zijn geen ruimtes gevonden",
   "noSeatsFilterLabel": "alles",

src/stores/spaces.ts

@@ -61,6 +61,8 @@ export const useSpacesStore = defineStore("spaces", () => {
     showOpenLocations: false,
     whiteBoard: false,
     grouptables: false,
+    dockingStation: false,
+    computer: false,
   };
 
   const filters = useLocalStorage("filters", defaultFilters, {

src/types/Filters.ts

@@ -15,6 +15,8 @@ export const BOOLEAN_FACILITIES = [
   "nearPrinter",
   "nearBathroom",
   "grouptables",
+  "dockingStation",
+  "computer",
 ] as const;
 
 export const FACILITIES = BOOLEAN_FACILITIES