From 72bf57298194ae8b394935a3b63f805244ce52f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Fri, 29 Mar 2024 21:42:09 +0100
Subject: [PATCH] Working on alerts page

---
 client/src/api/alerts.ts                      | 31 +++++++++++++
 client/src/api/contactPoints.ts               | 43 +++++++++++++++++++
 .../src/assets/components/_user-layout.scss   |  9 +++-
 .../UserLayout/components/UserMenu.tsx        |  7 +--
 client/src/pages/Router.tsx                   |  4 ++
 client/src/pages/alerts/AlertsPage.tsx        | 20 +++++++++
 6 files changed, 110 insertions(+), 4 deletions(-)
 create mode 100644 client/src/api/alerts.ts
 create mode 100644 client/src/api/contactPoints.ts
 create mode 100644 client/src/pages/alerts/AlertsPage.tsx

diff --git a/client/src/api/alerts.ts b/client/src/api/alerts.ts
new file mode 100644
index 0000000..8bb8ca5
--- /dev/null
+++ b/client/src/api/alerts.ts
@@ -0,0 +1,31 @@
+import { request } from './request'
+
+export type AlertInfo = {
+	id: number
+	name: string
+	condition: string
+	contactPointId: number
+	customMessage: string
+	triggerInterval: number
+	lastStatus: string
+	lastStatusAt: string
+}
+
+export const getAlerts = () => request<AlertInfo[]>('/api/alerts')
+
+export const createAlert = (data: Omit<AlertInfo, 'id'>) =>
+	request<AlertInfo>('/api/alerts', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify({ data }),
+	})
+
+export const updateAlert = ({ id, ...body }: AlertInfo) =>
+	request<AlertInfo>(`/api/alerts/${id}`, {
+		method: 'PUT',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify(body),
+	})
+
+export const deleteAlert = (id: number) =>
+	request<AlertInfo>(`/api/alerts/${id}`, { method: 'DELETE' }, 'void')
diff --git a/client/src/api/contactPoints.ts b/client/src/api/contactPoints.ts
new file mode 100644
index 0000000..3fb8778
--- /dev/null
+++ b/client/src/api/contactPoints.ts
@@ -0,0 +1,43 @@
+import { request } from './request'
+
+export type ContactPointInfo = {
+	id: number
+	name: string
+	type: string
+	typeConfig: string
+}
+
+export const getContactPoints = () =>
+	request<ContactPointInfo[]>('/api/contact-points')
+
+export const createContactPoint = (data: {
+	name: string
+	type: string
+	config: string
+}) =>
+	request<ContactPointInfo>('/api/contact-points', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify({ data }),
+	})
+
+export const updateContactPoint = ({
+	id,
+	...body
+}: {
+	id: number
+	type: string
+	config: string
+}) =>
+	request<ContactPointInfo>(`/api/contact-points/${id}`, {
+		method: 'PUT',
+		headers: { 'content-type': 'application/json' },
+		body: JSON.stringify(body),
+	})
+
+export const deleteContactPoint = (id: number) =>
+	request<ContactPointInfo>(
+		`/api/contact-points/${id}`,
+		{ method: 'DELETE' },
+		'void'
+	)
diff --git a/client/src/assets/components/_user-layout.scss b/client/src/assets/components/_user-layout.scss
index 1497619..7859ff4 100644
--- a/client/src/assets/components/_user-layout.scss
+++ b/client/src/assets/components/_user-layout.scss
@@ -53,12 +53,19 @@ main.layout {
 	}
 
 	nav {
-		padding: 0em 1rem;
+		padding: 0em 0rem;
 		display: flex;
 		flex-direction: column;
+		font-size: 115%;
 
 		a {
 			text-decoration: none;
+			padding: 0.4rem 1rem;
+			display: flex;
+
+			&:hover {
+				background-color: var(--box-border-color);
+			}
 		}
 	}
 }
diff --git a/client/src/layouts/UserLayout/components/UserMenu.tsx b/client/src/layouts/UserLayout/components/UserMenu.tsx
index 8281544..44a4f03 100644
--- a/client/src/layouts/UserLayout/components/UserMenu.tsx
+++ b/client/src/layouts/UserLayout/components/UserMenu.tsx
@@ -19,9 +19,10 @@ export const UserMenu = ({ shown, onHide }: Props) => {
 					</div>
 
 					<nav>
-						<a href="#">Dashboards</a>
-						<Link href="/sensors">Sensors</Link>
-						<a href="#">Settings</a>
+						<a href="#">📈 Dashboards</a>
+						<Link href="/sensors">⌚ Sensors</Link>
+						<Link href="/alerts">🚨 Alerts</Link>
+						<a href="#">⚙️ Settings</a>
 					</nav>
 				</div>
 				<div className="shadow"></div>
diff --git a/client/src/pages/Router.tsx b/client/src/pages/Router.tsx
index ec050fa..086aa51 100644
--- a/client/src/pages/Router.tsx
+++ b/client/src/pages/Router.tsx
@@ -4,6 +4,7 @@ import { Route, Router as Wouter } from 'wouter'
 import { NewDashboardPage } from './dashboard/NewDashboardPage'
 import { LoginPage } from './login/LoginPage'
 import { SensorsPage } from './sensors/SensorsPage'
+import { AlertsPage } from './alerts/AlertsPage'
 
 export const Router = () => {
 	const { loggedIn } = useAppContext()
@@ -18,6 +19,9 @@ export const Router = () => {
 					<Route path="/sensors">
 						<SensorsPage />
 					</Route>
+					<Route path="/alerts">
+						<AlertsPage />
+					</Route>
 				</Wouter>
 			)}
 			{!loggedIn && <LoginPage />}
diff --git a/client/src/pages/alerts/AlertsPage.tsx b/client/src/pages/alerts/AlertsPage.tsx
new file mode 100644
index 0000000..04496f4
--- /dev/null
+++ b/client/src/pages/alerts/AlertsPage.tsx
@@ -0,0 +1,20 @@
+import { PlusIcon } from '@/icons'
+import { UserLayout } from '@/layouts/UserLayout/UserLayout'
+
+export const AlertsPage = () => {
+	return (
+		<UserLayout
+			header={
+				<div className="sensors-head">
+					<div>Alerts</div>
+					<button>
+						<PlusIcon /> Add alert
+					</button>
+				</div>
+			}
+			className="sensors-page"
+		>
+			TEST
+		</UserLayout>
+	)
+}