Working on alerts page

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')

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'
+	)

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);
+			}
 		}
 	}
 }

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>

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 />}

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>
+	)
+}