60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
|
import { createDashboard, getDashboards } from '@/api/dashboards'
|
||
|
|
import { createDashboardContent } from '@/utils/createDashboardContent'
|
||
|
|
import { parseDashboard } from '@/utils/parseDashboard'
|
||
|
|
import { useEffect, useMemo, useState } from 'preact/hooks'
|
||
|
|
import { useQuery } from 'react-query'
|
||
|
|
import { EditableBox } from './components/EditableBox'
|
||
|
|
import { normalizeBoxes } from './utils/normalizeBoxes'
|
||
|
|
|
||
|
|
export const NewDashboardPage = () => {
|
||
|
|
const dashboards = useQuery(['/dashboards'], getDashboards)
|
||
|
|
const dashboard = dashboards.data?.find((i) => i.id === 'default')
|
||
|
|
|
||
|
|
const dashboardContent = useMemo(
|
||
|
|
() => (dashboard ? parseDashboard(dashboard.contents) : undefined),
|
||
|
|
[dashboard]
|
||
|
|
)
|
||
|
|
|
||
|
|
// Terrible code - ensure there's default dashboard
|
||
|
|
useEffect(() => {
|
||
|
|
if (dashboards.data && !dashboard) {
|
||
|
|
createDashboard({
|
||
|
|
id: 'default',
|
||
|
|
contents: createDashboardContent(),
|
||
|
|
}).then(() => {
|
||
|
|
dashboards.refetch()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}, [dashboards.data, dashboard])
|
||
|
|
|
||
|
|
const [boxes, setBoxes] = useState(dashboardContent?.boxes ?? [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid-sensors">
|
||
|
|
{boxes.map((b) => (
|
||
|
|
<EditableBox
|
||
|
|
box={b}
|
||
|
|
key={b.id}
|
||
|
|
boxes={boxes}
|
||
|
|
onPosition={(p) => {
|
||
|
|
setBoxes((previous) => {
|
||
|
|
b.x = p.x
|
||
|
|
b.y = p.y
|
||
|
|
|
||
|
|
return normalizeBoxes([...previous])
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
onResize={(s) => {
|
||
|
|
setBoxes((previous) => {
|
||
|
|
b.w = s.w
|
||
|
|
b.h = s.h
|
||
|
|
|
||
|
|
return normalizeBoxes([...previous])
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|