Added dashboard migration, reworked types

client/src/api/dashboards.ts

@@ -1,4 +1,4 @@
-import { DashboardContent } from '@/utils/parseDashboard'
+import { DashboardContent } from '@/utils/dashboard/parseDashboard'
 import { request } from './request'
 
 export type DashboardInfo = {

client/src/pages/dashboard/NewDashboardPage.tsx

@@ -5,7 +5,7 @@ import {
 } from '@/api/dashboards'
 import { UserLayout } from '@/layouts/UserLayout/UserLayout'
 import { createDashboardContent } from '@/utils/createDashboardContent'
-import { parseDashboard } from '@/utils/parseDashboard'
+import { parseDashboard } from '@/utils/dashboard/parseDashboard'
 import { useEffect, useMemo, useState } from 'preact/hooks'
 import { useQuery, useQueryClient } from 'react-query'
 import { DashboardGrid } from './components/DashboardGrid/DashboardGrid'

client/src/pages/dashboard/components/BoxSettings/BoxSettings.tsx

@@ -1,7 +1,11 @@
 import { getSensors } from '@/api/sensors'
 import { Modal } from '@/components/Modal'
 import { useConfirmModal } from '@/contexts/ConfirmModalsContext'
-import { DashboardDialData, DashboardGraphData } from '@/utils/parseDashboard'
+import {
+	DashboardDialData,
+	DashboardGraphData,
+} from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
 import { useState } from 'preact/hooks'
 import { useQuery } from 'react-query'
 import { BoxDefinition } from '../../types'
@@ -18,14 +22,28 @@ type Props = {
 export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 	const sensors = useQuery(['/sensors'], getSensors)
 
-	const [formState, setFormState] = useState(() => ({
-		sensor: value.sensor,
-		title: value.title,
-		type: value.data?.type ?? 'graph',
-	}))
-
 	const [data, setData] = useState(() => value.data)
 
+	const {
+		value: formState,
+		handleChange,
+		handleSubmit,
+	} = useForm({
+		defaultValue: () => ({
+			title: value.title,
+			type: value.data?.type ?? '',
+		}),
+		onSubmit: async (v) => {
+			onClose()
+
+			onSave({
+				...value,
+				title: v.title,
+				data: data,
+			})
+		},
+	})
+
 	const deleteConfirm = useConfirmModal({
 		content: 'Are you sure you want to delete the box?',
 		onConfirm: () => {
@@ -33,48 +51,10 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 		},
 	})
 
-	const handleSave = async (e: Event) => {
-		e.preventDefault()
-		e.stopPropagation()
-
-		onClose()
-
-		onSave({
-			...value,
-			sensor: formState.sensor,
-			title: formState.title,
-			data: data,
-		})
-	}
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
-
 	return (
 		<Modal onClose={onClose} open>
-			<form onSubmit={handleSave}>
-				<div className="input">
-					<label>Sensor</label>
-					<select
-						name="sensor"
-						value={formState.sensor || ''}
-						onChange={handleChange}
-					>
-						{sensors.data?.map((s) => (
-							<option key={s.id} value={s.id}>
-								{s.name}
-							</option>
-						))}
-					</select>
-				</div>
-
-				{formState.sensor && (
+			<form onSubmit={handleSubmit}>
+				{
 					<>
 						<div className="input">
 							<label>Title</label>
@@ -90,6 +70,7 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 								name="type"
 								value={formState.type}
 								onChange={handleChange}
+								required
 							>
 								<option value="graph">Graph</option>
 								<option value="dial">Dial</option>
@@ -100,6 +81,7 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 							<GraphSettings
 								value={data as DashboardGraphData}
 								onChange={setData}
+								sensors={sensors.data ?? []}
 							/>
 						)}
 
@@ -107,10 +89,11 @@ export const BoxSettings = ({ value, onSave, onClose, onRemove }: Props) => {
 							<DialSettings
 								value={data as DashboardDialData}
 								onChange={setData}
+								sensors={sensors.data ?? []}
 							/>
 						)}
 					</>
-				)}
+				}
 
 				<div className="actions">
 					<button className="remove" type="button" onClick={deleteConfirm.show}>

client/src/pages/dashboard/components/BoxSettings/components/DialSettings.tsx

@@ -1,26 +1,21 @@
-import { DashboardDialData } from '@/utils/parseDashboard'
-import { useEffect, useState } from 'preact/hooks'
+import { SensorInfo } from '@/api/sensors'
+import { DashboardDialData } from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
+import { omit } from '@/utils/omit'
+import { useEffect } from 'preact/hooks'
 
 type Props = {
+	sensors: SensorInfo[]
 	value?: DashboardDialData
 	onChange: (data: DashboardDialData) => void
 }
 
-export const DialSettings = ({ value, onChange }: Props) => {
-	const [formState, setFormState] = useState(() => ({
-		unit: value?.unit,
-		decimals: value?.decimals,
-		multiplier: value?.multiplier,
-	}))
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
+export const DialSettings = ({ sensors, value, onChange }: Props) => {
+	const { value: formState, handleChange } = useForm({
+		defaultValue: () => ({
+			...(value && omit(value, ['type'])),
+		}),
+	})
 
 	useEffect(() => {
 		onChange({ ...formState, type: 'dial' })
@@ -28,6 +23,21 @@ export const DialSettings = ({ value, onChange }: Props) => {
 
 	return (
 		<>
+			<div className="input">
+				<label>Sensor</label>
+				<select
+					name="sensor"
+					value={formState.sensor || ''}
+					onChange={handleChange}
+					required
+				>
+					{sensors.map((s) => (
+						<option key={s.id} value={s.id}>
+							{s.name}
+						</option>
+					))}
+				</select>
+			</div>
 			<div className="input">
 				<label>Unit</label>
 				<input name="unit" value={formState.unit} onChange={handleChange} />

client/src/pages/dashboard/components/BoxSettings/components/GraphSettings.tsx

@@ -1,25 +1,21 @@
+import { SensorInfo } from '@/api/sensors'
+import { DashboardGraphData } from '@/utils/dashboard/parseDashboard'
+import { useForm } from '@/utils/hooks/useForm'
 import { omit } from '@/utils/omit'
-import { DashboardGraphData } from '@/utils/parseDashboard'
-import { useEffect, useState } from 'preact/hooks'
+import { useEffect } from 'preact/hooks'
 
 type Props = {
+	sensors: SensorInfo[]
 	value?: DashboardGraphData
 	onChange: (data: DashboardGraphData) => void
 }
 
-export const GraphSettings = ({ value, onChange }: Props) => {
-	const [formState, setFormState] = useState(() => ({
-		...(value && omit(value, ['type'])),
-	}))
-
-	const handleChange = (e: Event) => {
-		const target = e.target as HTMLSelectElement | HTMLInputElement
-
-		setFormState({
-			...formState,
-			[target.name]: target.value,
-		})
-	}
+export const GraphSettings = ({ value, onChange, sensors }: Props) => {
+	const { value: formState, handleChange } = useForm({
+		defaultValue: () => ({
+			...(value && omit(value, ['type'])),
+		}),
+	})
 
 	useEffect(() => {
 		onChange({ ...formState, type: 'graph' })
@@ -27,6 +23,22 @@ export const GraphSettings = ({ value, onChange }: Props) => {
 
 	return (
 		<>
+			<div className="input">
+				<label>Sensor</label>
+				<select
+					name="sensor"
+					value={formState.sensor || ''}
+					onChange={handleChange}
+					required
+				>
+					{sensors.map((s) => (
+						<option key={s.id} value={s.id}>
+							{s.name}
+						</option>
+					))}
+				</select>
+			</div>
+
 			<div className="input">
 				<label>Graph Type</label>
 				<select

client/src/pages/dashboard/components/DashboardGrid/components/BoxDialContent.tsx

@@ -1,5 +1,5 @@
 import { getLatestSensorValue } from '@/api/sensorValues'
-import { DashboardDialData } from '@/utils/parseDashboard'
+import { DashboardDialData } from '@/utils/dashboard/parseDashboard'
 import { RefObject } from 'preact'
 import { useMemo } from 'preact/hooks'
 import { useQuery } from 'react-query'
@@ -13,16 +13,18 @@ type Props = {
 	refreshRef: RefObject<() => void>
 }
 
-export const BoxDialContent = ({ box, data, refreshRef }: Props) => {
+export const BoxDialContent = ({ data, refreshRef }: Props) => {
 	const { filter } = useDashboardContext()
 
 	const valuesQuery = {
-		sensor: box.sensor ?? '-1',
+		sensor: data.sensor ?? '-1',
 		to: filter.customTo,
 	}
 
-	const value = useQuery(['/sensor/values/latest', valuesQuery], () =>
-		getLatestSensorValue(valuesQuery)
+	const value = useQuery(
+		['/sensor/values/latest', valuesQuery],
+		() => getLatestSensorValue(valuesQuery),
+		{ enabled: !!data.sensor }
 	)
 
 	refreshRef.current = () => {

client/src/pages/dashboard/components/DashboardGrid/components/BoxGraphContent.tsx

@@ -3,7 +3,7 @@ import { useDashboardContext } from '@/pages/dashboard/contexts/DashboardContext
 import { BoxDefinition } from '@/pages/dashboard/types'
 import { max } from '@/utils/max'
 import { min } from '@/utils/min'
-import { DashboardGraphData } from '@/utils/parseDashboard'
+import { DashboardGraphData } from '@/utils/dashboard/parseDashboard'
 import { RefObject } from 'preact'
 import { useEffect, useRef } from 'preact/hooks'
 import { useQuery } from 'react-query'
@@ -21,13 +21,15 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
 	const bodyRef = useRef<HTMLDivElement>(null)
 
 	const valuesQuery = {
-		sensor: box.sensor ?? '-1',
+		sensor: data.sensor ?? '-1',
 		from: filter.customFrom,
 		to: filter.customTo,
 	}
 
-	const values = useQuery(['/sensor/values', valuesQuery], () =>
-		getSensorValues(valuesQuery)
+	const values = useQuery(
+		['/sensor/values', valuesQuery],
+		() => getSensorValues(valuesQuery),
+		{ enabled: !!data.sensor }
 	)
 
 	refreshRef.current = () => {

client/src/pages/dashboard/components/DashboardGrid/components/EditableBox.tsx

@@ -132,7 +132,7 @@ export const EditableBox = ({
 				<div className="box" style={{ height: '100%' }}>
 					<div className="header">
 						<div className="drag-handle" onMouseDown={handleMouseDown}>
-							<div className="name">{box.title || box.sensor || ''}</div>
+							<div className="name">{box.title || ''}</div>
 						</div>
 						<div className="actions">
 							<div className="action" onClick={() => refreshRef.current?.()}>
@@ -144,14 +144,14 @@ export const EditableBox = ({
 						</div>
 					</div>
 					<div className="body">
-						{box.sensor && box.data?.type === 'graph' && (
+						{box.data?.type === 'graph' && (
 							<BoxGraphContent
 								box={box}
 								data={box.data}
 								refreshRef={refreshRef}
 							/>
 						)}
-						{box.sensor && box.data?.type === 'dial' && (
+						{box.data?.type === 'dial' && (
 							<BoxDialContent
 								box={box}
 								data={box.data}

client/src/pages/dashboard/types.ts

@@ -1,3 +1,3 @@
-import { DashboardContentBox } from '@/utils/parseDashboard'
+import { DashboardContentBox } from '@/utils/dashboard/parseDashboard'
 
 export type BoxDefinition = DashboardContentBox

client/src/utils/createDashboardContent.ts

@@ -1,4 +1,4 @@
-import { DashboardContent } from './parseDashboard'
+import { DashboardContent } from './dashboard/parseDashboard'
 
 export const createDashboardContent = (): DashboardContent => ({
 	version: '1.0',

client/src/utils/dashboard/createDashboardMigration.ts

@@ -0,0 +1,9 @@
+export type DashboardMigration = {
+	from: string
+	to: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	migrate: (v: any) => any
+}
+
+export const createDashboardMigration = (migration: DashboardMigration) =>
+	migration

client/src/utils/dashboard/getDashboardMigrations.ts

@@ -0,0 +1,11 @@
+import * as migrations from './migrations'
+
+export const getDashboardMigrations = (version: string) => {
+	const sortedMigrations = Object.values(migrations).sort((a, b) =>
+		a.from.localeCompare(b.to)
+	)
+
+	const migration = sortedMigrations.findIndex((m) => m.from === version)
+
+	return migration < 0 ? [] : sortedMigrations.slice(migration)
+}

client/src/utils/dashboard/migrations/index.ts

@@ -0,0 +1 @@
+export * from './migrationOf10to11'

client/src/utils/dashboard/migrations/migrationOf10to11.ts

@@ -0,0 +1,17 @@
+import { createDashboardMigration } from '../createDashboardMigration'
+
+export const migrationOf100To101 = createDashboardMigration({
+	from: '1.0',
+	to: '1.1',
+	migrate(v) {
+		for (const box of v.boxes) {
+			if (box.data) {
+				box.data.sensor = box.sensor
+			}
+
+			delete box.sensor
+		}
+
+		return v
+	},
+})

client/src/utils/dashboard/parseDashboard.ts

@@ -1,3 +1,5 @@
+import { getDashboardMigrations } from './getDashboardMigrations'
+
 export type DashboardContent = {
 	version: string
 	boxes: DashboardContentBox[]
@@ -9,13 +11,13 @@ export type DashboardContentBox = {
 	y: number
 	w: number
 	h: number
-	sensor?: string
 	title?: string
 	data?: DashboardGraphData | DashboardDialData
 }
 
 export type DashboardGraphData = {
 	type: 'graph'
+	sensor?: string
 	min?: string
 	max?: string
 	unit?: string
@@ -34,11 +36,20 @@ export type DashboardGraphData = {
 
 export type DashboardDialData = {
 	type: 'dial'
+	sensor?: string
 	unit?: string
 	decimals?: string
 	multiplier?: string
 }
 
 export const parseDashboard = (input: string) => {
-	return JSON.parse(input) as DashboardContent
+	const data = JSON.parse(input) as DashboardContent
+	const migrations = getDashboardMigrations(data.version)
+
+	return migrations.reduce((acc, migration) => {
+		const res = migration.migrate(acc)
+		res.version = migration.to
+
+		return res
+	}, data)
 }

client/src/utils/hooks/useForm.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from 'preact/hooks'
 
 type Props<TValue> = {
-	onSubmit: (value: TValue) => void
+	onSubmit?: (value: TValue) => void
 	defaultValue: TValue | (() => TValue)
 }
 
@@ -33,7 +33,7 @@ export const useForm = <TValue = unknown>({
 		e.preventDefault()
 		e.stopPropagation()
 
-		submitRef.current(stateRef.current)
+		submitRef.current?.(stateRef.current)
 	}, [])
 
 	return {