From e1b0d16ce68d3de52e83697f1b8337d7c269459c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Mon, 1 Apr 2024 13:13:35 +0200
Subject: [PATCH] Empty dashboard message

---
 .../DashboardGrid/DashboardGrid.tsx           | 21 +++++++++++++++++++
 .../DashboardGrid/components/GeneralBox.tsx   |  8 +++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx b/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
index d6a0485..2dd73de 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx
@@ -1,3 +1,4 @@
+import { GRID_WIDTH, GRID_H_SNAP } from '../../constants'
 import { useDashboardContext } from '../../contexts/DashboardContext'
 import { normalizeBoxes } from '../../utils/normalizeBoxes'
 import { NoDashboard } from '../NoDashboard'
@@ -6,9 +7,29 @@ import { GeneralBox } from './components/GeneralBox'
 export const DashboardGrid = () => {
 	const { isDashboardSelected, boxes, setBoxes } = useDashboardContext()
 
+	const addNewBox = () => {
+		const box = {
+			id: new Date().getTime().toString(),
+			x: 0,
+			y: 0,
+			w: GRID_WIDTH / 2,
+			h: GRID_H_SNAP * 20,
+		}
+
+		setBoxes((previous) => [box, ...previous])
+	}
+
 	return isDashboardSelected ? (
 		<div className="grid-sensors-container">
 			<div className="grid-sensors">
+				{boxes.length === 0 && (
+					<div className="empty">
+						<div>Empty dashboard</div>
+						<div>
+							<button onClick={() => addNewBox()}>Add box</button>
+						</div>
+					</div>
+				)}
 				{boxes.map((b) => (
 					<GeneralBox
 						box={b}
diff --git a/client/src/pages/dashboard/components/DashboardGrid/components/GeneralBox.tsx b/client/src/pages/dashboard/components/DashboardGrid/components/GeneralBox.tsx
index 93b6f35..b6f201b 100644
--- a/client/src/pages/dashboard/components/DashboardGrid/components/GeneralBox.tsx
+++ b/client/src/pages/dashboard/components/DashboardGrid/components/GeneralBox.tsx
@@ -1,6 +1,6 @@
 import { BoxDialContent } from './BoxDialContent'
 import { BoxGraphContent } from './BoxGraphContent'
-import { EditableBoxProps } from './EditableBox'
+import { EditableBox, EditableBoxProps } from './EditableBox'
 
 export const GeneralBox = (props: EditableBoxProps) => {
 	switch (props.box.data?.type) {
@@ -9,6 +9,10 @@ export const GeneralBox = (props: EditableBoxProps) => {
 		case 'graph':
 			return <BoxGraphContent {...props} data={props.box.data} />
 		default:
-			return <div>Unknown box type</div>
+			return (
+				<EditableBox {...props} onRefresh={() => null}>
+					<></>
+				</EditableBox>
+			)
 	}
 }