Settings modal

client/src/assets/style.css

@@ -41,7 +41,7 @@ input, select {
 	padding: 1rem;
 }
 
-#sensors-container {
+#application {
 	height: 100%;
 	overflow: auto;
 	display: flex;
@@ -188,4 +188,4 @@ form.horizontal .input label {
 
 .checkbox-label input[type=checkbox] {
 	margin-top: 6px;
-}
+}

client/src/pages/dashboard/DashboardPage.tsx

@@ -1,11 +1,14 @@
-import { getSensors } from '@/api/sensors'
+import { getSensors, SensorInfo } from '@/api/sensors'
 import { intervalToRange } from '@/utils/intervalToRange'
 import { useState } from 'preact/hooks'
 import { useQuery } from 'react-query'
 import { Filters, FilterValue } from './components/Filters'
 import { Sensor } from './components/Sensor'
+import { SensorSettings } from './components/SensorSettings'
 
 export const DashboardPage = () => {
+	const [editedSensor, setEditedSensor] = useState<SensorInfo>()
+
 	const [filter, setFilter] = useState<FilterValue>(() => {
 		const range = intervalToRange('week', new Date(), new Date())
 
@@ -19,9 +22,21 @@ export const DashboardPage = () => {
 			<Filters preset={filter} onApply={setFilter} />
 			<div className="sensors">
 				{sensors.data?.map((s) => (
-					<Sensor sensor={s} filter={filter} key={s.sensor} />
+					<Sensor
+						sensor={s}
+						filter={filter}
+						key={s.sensor}
+						onEdit={setEditedSensor}
+					/>
 				))}
 			</div>
+			{editedSensor && (
+				<SensorSettings
+					sensor={editedSensor}
+					onClose={() => setEditedSensor(undefined)}
+					onUpdate={() => sensors.refetch()}
+				/>
+			)}
 		</>
 	)
 }

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

@@ -7,9 +7,10 @@ import { FilterValue } from './Filters'
 type Props = {
 	sensor: SensorInfo
 	filter: FilterValue
+	onEdit: (sensor: SensorInfo) => void
 }
 
-export const Sensor = ({ sensor, filter }: Props) => {
+export const Sensor = ({ sensor, filter, onEdit }: Props) => {
 	const bodyRef = useRef<HTMLDivElement>(null)
 
 	const valuesQuery = {
@@ -82,8 +83,12 @@ export const Sensor = ({ sensor, filter }: Props) => {
 			<div className="header">
 				<div className="name">{sensor.config?.name ?? sensor.sensor}</div>
 				<div className="actions">
-					<button className="config">Config</button>
+					<button className="config" onClick={() => onEdit(sensor)}>
-					<button className="refresh">Refresh</button>
+						Config
+					</button>
+					<button className="refresh" onClick={() => values.refetch()}>
+						Refresh
+					</button>
 				</div>
 			</div>
 			<div className="body">

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

@@ -5,9 +5,10 @@ import { useState } from 'preact/hooks'
 type Props = {
 	sensor: SensorInfo
 	onClose: () => void
+	onUpdate: () => void
 }
 
-export const SensorSettings = ({ sensor, onClose }: Props) => {
+export const SensorSettings = ({ sensor, onClose, onUpdate }: Props) => {
 	const [value, setValue] = useState(() => ({ ...sensor.config }))
 	const [saving, setSaving] = useState(false)
 
@@ -35,6 +36,7 @@ export const SensorSettings = ({ sensor, onClose }: Props) => {
 		setSaving(false)
 
 		onClose()
+		onUpdate()
 	}
 
 	const handleChange = (e: Event) => {
@@ -51,8 +53,13 @@ export const SensorSettings = ({ sensor, onClose }: Props) => {
 	}
 
 	return (
-		<div className="settings-modal${shown ? ' show' : ''}" onClick={onClose}>
+		<div className="settings-modal show" onMouseDown={onClose}>
-			<div className="inner" onClick={preventPropagation}>
+			<div
+				className="inner"
+				onMouseDown={preventPropagation}
+				onMouseUp={preventPropagation}
+				onClick={preventPropagation}
+			>
 				<div className="body">
 					<form onSubmit={handleSave}>
 						<div className="input">