Develop

src/lib/components/ui/dashboardCard.svelte

@@ -13,6 +13,7 @@
 	import { _ } from 'svelte-i18n';
 	import moment from 'moment';
 	import EditLocationNameDialog from './EditLocationNameDialog.svelte';
+	import { nameToNotation } from '$lib/utilities/nameToNotation';
 
 	export let data;
 	const locationId = data.location_id;
@@ -145,7 +146,7 @@
 									{#each Object.keys(data) as dataPointKey}
 										<div class="px-3 pb-3 flex border-b">
 											<p class="basis-1/2 text-base">{$_(dataPointKey)}</p>
-											<p class="basis-1/2 text-base">{data[dataPointKey]}</p>
+											<p class="basis-1/2 text-base flex flex-row">{data[dataPointKey]} <span class="text-sm text-slate-500 flex-grow">{nameToNotation(dataPointKey)}</span></p>
 										</div>
 									{/each}
 								{/await}

src/lib/i18n/locales/en.json

@@ -59,7 +59,8 @@
   "app": {
     "loading_message": "Loading Content...",
     "loading_translations_message": "Loading Translations...",
-    "loading": "Loading..."
+    "loading": "Loading...",
+    "devices": "Devices"
   },
   "location": {
     "map_card_title": "Overview Map"

src/lib/utilities/nameToNotation.ts

@@ -0,0 +1,24 @@
+export const nameToNotation = (name: string) => {
+    switch (name) {
+        case 'humidity':
+        case 'soil_moisture':
+            return '%';
+        case 'temperature':
+        case 'soil_temperatureC':
+            return '°C';
+        case 'soil_EC':
+            return 'dS/m';
+        case 'soil_N':
+            return 'mg/kg';
+        case 'soil_P':
+            return 'mg/kg';
+        case 'soil_K':
+            return 'mg/kg';
+        case 'soil_PH':
+            return 'pH';
+        case 'co2_level':
+            return 'ppm';
+        default:
+            return '';
+    }
+}

src/routes/app/locations/[location_id]/+page.svelte

@@ -11,6 +11,8 @@
 	import { mdiMoleculeCo2 } from '@mdi/js';
 	import DarkCard2 from '$lib/components/ui/DarkCard2.svelte';
 	import SquareCard from '$lib/components/ui/SquareCard.svelte';
+	import { json } from '@sveltejs/kit';
+	import { nameToNotation } from '$lib/utilities/nameToNotation';
 
 	const location: Promise<Tables<'cw_locations'>> = browser
 		? fetch(`/api/v1/locations/${$page.params.location_id}`, { method: 'GET' }).then((r) =>
@@ -107,15 +109,15 @@
 					{#await getDeviceData(device.dev_eui)}
 						<ProgressCircle />
 					{:then dev_data}
-						<div class="flex flex-col text-center text-neutral-content text-xl">
-							<h2>{device.cw_devices.name}</h2>
-							<div class="flex flex-row flex-wrap">
-								{#each Object.keys(dev_data) as d}
+					<div class="flex flex-col text-center text-neutral-content text-xl">
+						<h2>{device.cw_devices.name}</h2>
+						<div class="flex flex-row flex-wrap justify-center">
+							{#each Object.keys(dev_data) as d}
 									<SquareCard
 										title={$_(d)}
 										titleColor={'#4FDE6F'}
 										value={dev_data[d]}
-										unit={'ºC'}
+										unit={nameToNotation(d)}
 										message={'Status coming soon'}
 									/>
 								{/each}