99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { CancelIcon, FiltersIcon, PlusIcon, RefreshIcon } from '@/icons'
|
|
import { cn } from '@/utils/cn'
|
|
import { intervalToRange } from '@/utils/intervalToRange'
|
|
import { useState } from 'preact/hooks'
|
|
import { GRID_H_SNAP, GRID_WIDTH } from '../../constants'
|
|
import { useDashboardContext } from '../../contexts/DashboardContext'
|
|
import { DashboardFilters } from './components/DashboardFilters'
|
|
import { DashboardSwitch } from './components/DashboardSwitch'
|
|
|
|
export const DashboardHeader = () => {
|
|
const { verticalMode, boxes, setBoxes, setFilter } = useDashboardContext()
|
|
const [filtersShown, setFiltersShown] = useState(false)
|
|
|
|
const handleRefresh = () => {
|
|
// @TODO: This is duplicate code, unify it somehow with dashboard filters
|
|
setFilter((v) => {
|
|
const range = intervalToRange(v.interval, v.customFrom, v.customTo)
|
|
|
|
return {
|
|
...v,
|
|
customFrom: range[0],
|
|
customTo: range[1],
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleNewBox = () => {
|
|
const box = {
|
|
id: new Date().getTime().toString(),
|
|
x: 0,
|
|
y: 0,
|
|
w: GRID_WIDTH,
|
|
h: GRID_H_SNAP * 20,
|
|
}
|
|
|
|
const otherBoxes = boxes.map((b) => {
|
|
b.y += 200
|
|
|
|
return b
|
|
})
|
|
|
|
setBoxes(() => [box, ...otherBoxes])
|
|
}
|
|
|
|
return (
|
|
<div className={cn('dashboard-head', verticalMode && 'vertical')}>
|
|
{verticalMode && (
|
|
<>
|
|
<button className="icon" onClick={handleNewBox}>
|
|
<PlusIcon />
|
|
</button>
|
|
<button className="icon" onClick={handleRefresh}>
|
|
<RefreshIcon />
|
|
</button>
|
|
<div className="filter-button" onClick={() => setFiltersShown(true)}>
|
|
<FiltersIcon />
|
|
</div>
|
|
|
|
{filtersShown && (
|
|
<>
|
|
<div className="filters-panel">
|
|
<div className="shadow" />
|
|
<div className="inner">
|
|
<div
|
|
className="filter-close"
|
|
onClick={() => setFiltersShown(false)}
|
|
>
|
|
<CancelIcon />
|
|
</div>
|
|
|
|
<DashboardSwitch />
|
|
|
|
<DashboardFilters />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="menu-overlay"
|
|
onClick={() => setFiltersShown(false)}
|
|
></div>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{!verticalMode && (
|
|
<>
|
|
<DashboardSwitch />
|
|
<button onClick={handleNewBox}>Add box</button>
|
|
<div className="spacer" />
|
|
<DashboardFilters />
|
|
<div className="spacer" />
|
|
<button onClick={handleRefresh}>
|
|
<RefreshIcon /> Refresh all
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|