diff --git a/client/src/assets/style.css b/client/src/assets/style.css index 94092e7..4706fd0 100644 --- a/client/src/assets/style.css +++ b/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; -} \ No newline at end of file +} diff --git a/client/src/pages/dashboard/DashboardPage.tsx b/client/src/pages/dashboard/DashboardPage.tsx index 2441e18..b1dee39 100644 --- a/client/src/pages/dashboard/DashboardPage.tsx +++ b/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() + const [filter, setFilter] = useState(() => { const range = intervalToRange('week', new Date(), new Date()) @@ -19,9 +22,21 @@ export const DashboardPage = () => {
{sensors.data?.map((s) => ( - + ))}
+ {editedSensor && ( + setEditedSensor(undefined)} + onUpdate={() => sensors.refetch()} + /> + )} ) } diff --git a/client/src/pages/dashboard/components/Sensor.tsx b/client/src/pages/dashboard/components/Sensor.tsx index 5780912..db6730e 100644 --- a/client/src/pages/dashboard/components/Sensor.tsx +++ b/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(null) const valuesQuery = { @@ -82,8 +83,12 @@ export const Sensor = ({ sensor, filter }: Props) => {
{sensor.config?.name ?? sensor.sensor}
- - + +
diff --git a/client/src/pages/dashboard/components/SensorSettings.tsx b/client/src/pages/dashboard/components/SensorSettings.tsx index 12d7f75..9bb3b47 100644 --- a/client/src/pages/dashboard/components/SensorSettings.tsx +++ b/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 ( -
-
+
+