feat: show button presses

hello-nrfcloud · Jun 30, 2023 · 453768e · 453768e
1 parent abe1f1b
commit 453768e
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 15 deletions.
diff --git a/src/components/Ago.tsx b/src/components/Ago.tsx
@@ -2,18 +2,34 @@ import { formatDistanceToNowStrict } from 'date-fns'
 import { HistoryIcon } from 'lucide-preact'
 import { useEffect, useState } from 'preact/hooks'
 
-export const Ago = ({ date }: { date: Date }) => {
-	const [relTime, setRelTime] = useState<string>(distance(date))
+export const Ago = ({
+	date,
+	withSeconds,
+}: {
+	date: Date
+	withSeconds?: true
+}) => {
+	const [relTime, setRelTime] = useState<string>(distance(date, withSeconds))
 
 	useEffect(() => {
-		const i = setInterval(() => {
-			setRelTime(distance(date))
-		}, 60 * 1000)
+		const delta = Date.now() - date.getTime()
+		let i = setInterval(
+			() => {
+				setRelTime(distance(date, withSeconds))
+				if (withSeconds && delta > 60 * 1000) {
+					clearInterval(i)
+					i = setInterval(() => {
+						setRelTime(distance(date))
+					}, 60 * 1000)
+				}
+			},
+			withSeconds ? 1000 : 60 * 1000,
+		)
 
 		return () => {
 			clearInterval(i)
 		}
-	}, [date])
+	}, [date, withSeconds])
 
 	return (
 		<time dateTime={date.toISOString()} class="text-nowrap">
@@ -23,7 +39,9 @@ export const Ago = ({ date }: { date: Date }) => {
 	)
 }
 
-const distance = (to: Date) =>
-	Date.now() - to.getTime() < 60 * 1000
+const distance = (to: Date, withSeconds?: true) =>
+	withSeconds ?? false
+		? formatDistanceToNowStrict(to)
+		: Date.now() - to.getTime() < 60 * 1000
 		? '<1 minute'
 		: formatDistanceToNowStrict(to)
diff --git a/src/components/DeviceHeader.css b/src/components/DeviceHeader.css
@@ -0,0 +1,13 @@
+.hot {
+  animation: coolOff 5s ease-in;
+}
+
+@keyframes coolOff {
+  from {
+    color: var(--color-nordic-power);
+  }
+
+  to {
+    color: inherit;
+  }
+}
diff --git a/src/components/DeviceHeader.tsx b/src/components/DeviceHeader.tsx
@@ -1,8 +1,14 @@
 import { type Device } from '#context/Device.js'
 import { useDeviceState } from '#context/DeviceState.js'
 import { useSolarThingyHistory } from '#context/models/PCA20035-solar.js'
-import { Slash, ThermometerIcon } from 'lucide-preact'
+import {
+	ActivitySquareIcon,
+	ChevronDownSquareIcon,
+	Slash,
+	ThermometerIcon,
+} from 'lucide-preact'
 import { Ago } from './Ago.js'
+import './DeviceHeader.css'
 import { EnergyEstimateIcons, EnergyEstimateLabel } from './SignalQuality.js'
 import { LoadingIndicator } from './ValueLoading.js'
 import { LTEm } from './icons/LTE-m.js'
@@ -16,7 +22,7 @@ export const DeviceHeader = ({ device }: { device: Device }) => {
 	return (
 		<div class="container my-md-4">
 			<header class="mt-md-4">
-				<div class="row">
+				<div class="row mt-3">
 					<div class="col d-flex justify-content-between align-items-center">
 						<h1>
 							<small class="text-muted" style={{ fontSize: '16px' }}>
@@ -27,19 +33,22 @@ export const DeviceHeader = ({ device }: { device: Device }) => {
 						</h1>
 					</div>
 				</div>
-				<div class="row mt-2">
-					<div class="col-4 col-lg-3 mb-2">
+				<div class="row my-4">
+					<div class="col-4 col-lg-2 mb-2">
 						<NetworkModeInfo />
 					</div>
-					<div class="col-4 col-lg-3 mb-2">
+					<div class="col-4 col-lg-2 mb-2">
 						<SignalQualityInfo />
 					</div>
-					<div class="col-4 col-lg-3 mb-2">
+					<div class="col-4 col-lg-2 mb-2">
 						<BatteryInfo />
 					</div>
-					<div class="col-12 col-lg-3 mb-2">
+					<div class="col-6 col-lg-3 mb-2">
 						<EnvironmentInfo />
 					</div>
+					<div class="col-6 col-lg-2 mb-2">
+						<Interact />
+					</div>
 				</div>
 			</header>
 		</div>
@@ -192,3 +201,34 @@ const BatteryInfo = () => {
 		</span>
 	)
 }
+
+const Interact = () => {
+	const { button } = useSolarThingyHistory()
+	const buttonPress = button[0]
+	return (
+		<span class="d-flex flex-column">
+			<small class="text-muted">
+				<strong>Interact</strong>
+			</small>
+			{buttonPress === undefined && (
+				<small class="d-flex">
+					<ActivitySquareIcon class="me-1" />
+					<span>Press the button on your DK!</span>
+				</small>
+			)}
+			{buttonPress !== undefined && (
+				<>
+					<small class="d-flex hot" key={`button-${buttonPress.ts}`}>
+						<ChevronDownSquareIcon class="me-1" />
+						<span>
+							Button <strong>#{buttonPress.id}</strong> pressed
+						</span>
+					</small>
+					<small class="text-muted">
+						<Ago date={new Date(buttonPress.ts)} withSeconds />
+					</small>
+				</>
+			)}
+		</span>
+	)
+}
diff --git a/src/context/models/PCA20035-solar.tsx b/src/context/models/PCA20035-solar.tsx
@@ -4,6 +4,7 @@ import {
 	AirQuality,
 	AirTemperature,
 	Battery,
+	Button,
 	Context,
 	Gain,
 	HelloMessage,
@@ -40,6 +41,10 @@ const isAirTemperature = (
 	message: Static<typeof HelloMessage>,
 ): message is Static<typeof AirTemperature> =>
 	message['@context'] === solarThingy.transformed('airTemperature').toString()
+const isButton = (
+	message: Static<typeof HelloMessage>,
+): message is Static<typeof Button> =>
+	message['@context'] === solarThingy.transformed('button').toString()
 
 export const SolarThingyHistoryContext = createContext<{
 	gain: Static<typeof Gain>[]
@@ -48,13 +53,15 @@ export const SolarThingyHistoryContext = createContext<{
 	airPressure: Static<typeof AirPressure>[]
 	airQuality: Static<typeof AirQuality>[]
 	airTemperature: Static<typeof AirTemperature>[]
+	button: Static<typeof Button>[]
 }>({
 	gain: [],
 	battery: [],
 	airHumidity: [],
 	airPressure: [],
 	airQuality: [],
 	airTemperature: [],
+	button: [],
 })
 
 const byTs = ({ ts: t1 }: { ts: number }, { ts: t2 }: { ts: number }) => t2 - t1
@@ -74,6 +81,7 @@ export const Provider = ({ children }: { children: ComponentChildren }) => {
 	const [airTemperature, setAirTemperature] = useState<
 		Static<typeof AirTemperature>[]
 	>([])
+	const [button, setButton] = useState<Static<typeof Button>[]>([])
 
 	const onMessage: MessageListenerFn = (message) => {
 		if (isGain(message)) {
@@ -94,6 +102,9 @@ export const Provider = ({ children }: { children: ComponentChildren }) => {
 		if (isAirTemperature(message)) {
 			setAirTemperature((m) => [message, ...m].sort(byTs))
 		}
+		if (isButton(message)) {
+			setButton((m) => [message, ...m].sort(byTs))
+		}
 	}
 
 	useEffect(() => {
@@ -113,6 +124,7 @@ export const Provider = ({ children }: { children: ComponentChildren }) => {
 				airPressure,
 				airQuality,
 				airTemperature,
+				button,
 			}}
 		>
 			{children}