From 699e8aa959ba68fd2ad5891febac4caf81c26e93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Mon, 1 Apr 2024 08:37:57 +0200
Subject: [PATCH] Working on better styling, added graceful shutdown

---
 client/src/assets/components/_modal.scss      |  1 +
 .../src/assets/components/_section-title.scss |  9 +++++
 client/src/assets/pages/_alerts-page.scss     | 13 ++-----
 client/src/assets/pages/_sensors-page.scss    |  3 +-
 client/src/assets/style.scss                  |  1 +
 client/src/assets/themes/_basic.scss          |  2 +-
 client/src/pages/sensors/SensorsPage.tsx      | 19 +++++-----
 server/main.go                                | 35 +++++++++++++++++--
 8 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 client/src/assets/components/_section-title.scss

diff --git a/client/src/assets/components/_modal.scss b/client/src/assets/components/_modal.scss
index 33180f3..cb89c88 100644
--- a/client/src/assets/components/_modal.scss
+++ b/client/src/assets/components/_modal.scss
@@ -36,6 +36,7 @@
 		color: var(--modal-fg-color);
 		margin-top: 5vh;
 		box-shadow: var(--box-shadow);
+		border: 1px solid var(--box-border-color);
 		border-radius: var(--border-radius);
 		width: 20rem;
 		max-height: 90%;
diff --git a/client/src/assets/components/_section-title.scss b/client/src/assets/components/_section-title.scss
new file mode 100644
index 0000000..188e449
--- /dev/null
+++ b/client/src/assets/components/_section-title.scss
@@ -0,0 +1,9 @@
+.section-title {
+	display: flex;
+	align-items: center;
+
+	h2 {
+		flex: 1;
+		font-weight: normal;
+	}
+}
diff --git a/client/src/assets/pages/_alerts-page.scss b/client/src/assets/pages/_alerts-page.scss
index 8923b86..e7be254 100644
--- a/client/src/assets/pages/_alerts-page.scss
+++ b/client/src/assets/pages/_alerts-page.scss
@@ -1,16 +1,7 @@
 .alerts-page .content {
-	max-width: 50rem;
+	width: 50rem;
 	padding: 1rem;
-
-	.section-title {
-		display: flex;
-		align-items: center;
-
-		h2 {
-			flex: 1;
-			font-weight: normal;
-		}
-	}
+	margin: 0 auto;
 
 	.contact-points {
 		margin-bottom: 2rem;
diff --git a/client/src/assets/pages/_sensors-page.scss b/client/src/assets/pages/_sensors-page.scss
index 602ae66..6f67790 100644
--- a/client/src/assets/pages/_sensors-page.scss
+++ b/client/src/assets/pages/_sensors-page.scss
@@ -10,7 +10,8 @@
 	}
 
 	section.content {
-		max-width: 50rem;
+		width: 50rem;
+		margin: 0 auto;
 		padding: 1rem;
 	}
 }
diff --git a/client/src/assets/style.scss b/client/src/assets/style.scss
index 8610253..9406f30 100644
--- a/client/src/assets/style.scss
+++ b/client/src/assets/style.scss
@@ -46,6 +46,7 @@ a {
 @import 'components/user-layout';
 @import 'components/box';
 @import 'components/data-table';
+@import 'components/section-title';
 
 @import 'pages/login-page';
 @import 'pages/sensors-page';
diff --git a/client/src/assets/themes/_basic.scss b/client/src/assets/themes/_basic.scss
index 629c8a4..daa1fd6 100644
--- a/client/src/assets/themes/_basic.scss
+++ b/client/src/assets/themes/_basic.scss
@@ -75,7 +75,7 @@
 		--button-bg-color: #0b3c9f;
 		--button-fg-color: #eee;
 		--button-cancel-fg-color: #ccc;
-		--modal-overlay-bg-color: rgba(0, 0, 0, 0.3);
+		--modal-overlay-bg-color: rgba(0, 0, 0, 0.5);
 		--confirm-overlay-bg-color: rgba(0, 0, 0, 0.5);
 		--input-border-color: #333;
 		--input-focus-border-color: #666;
diff --git a/client/src/pages/sensors/SensorsPage.tsx b/client/src/pages/sensors/SensorsPage.tsx
index 3562929..d0b440f 100644
--- a/client/src/pages/sensors/SensorsPage.tsx
+++ b/client/src/pages/sensors/SensorsPage.tsx
@@ -27,17 +27,14 @@ export const SensorsPage = () => {
 	})
 
 	return (
-		<UserLayout
-			header={
-				<div className="sensors-head">
-					<div>Sensors</div>
-					<button onClick={() => setShowNew(true)}>
-						<PlusIcon /> Add sensor
-					</button>
-				</div>
-			}
-			className="sensors-page"
-		>
+		<UserLayout className="sensors-page">
+			<div className="section-title">
+				<h2>Sensors</h2>
+				<button onClick={() => setShowNew(true)}>
+					<PlusIcon /> Add sensor
+				</button>
+			</div>
+
 			<div className="box-shadow">
 				<DataTable
 					data={sensors.data ?? []}
diff --git a/server/main.go b/server/main.go
index 73190d9..a276548 100644
--- a/server/main.go
+++ b/server/main.go
@@ -4,8 +4,12 @@ import (
 	"basic-sensor-receiver/app"
 	"basic-sensor-receiver/middleware"
 	"basic-sensor-receiver/routes"
+	"context"
 	"fmt"
 	"log"
+	"net/http"
+	"os/signal"
+	"syscall"
 
 	"github.com/gin-gonic/gin"
 	"github.com/joho/godotenv"
@@ -80,10 +84,35 @@ func main() {
 	// Starts alerts handling goroutine
 	server.StartAlerts()
 
+	// Graceful shutdown using SIGTERM or SIGINT
+	ctx, stop := signal.NotifyContext(context.Background(), syscall.SIGINT, syscall.SIGTERM)
+	defer stop()
+
+	// Prepare http server
 	address := fmt.Sprintf("%s:%d", server.Config.Ip, server.Config.Port)
+	srv := &http.Server{
+		Addr:    address,
+		Handler: router,
+	}
 
-	log.Println("Starting server on", address)
+	// Run the server in a goroutine so that it doesn't block and we can stop it later
+	go func() {
+		log.Println("Running server on", address)
 
-	// Run the server
-	router.Run(address)
+		if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
+			log.Fatalf("Listen: %s\n", err)
+		}
+	}()
+
+	// Wait for shutdown signal
+	<-ctx.Done()
+
+	// Shutdown the server
+	log.Println("Shutting down server...")
+
+	if err := srv.Shutdown(context.TODO()); err != nil {
+		log.Fatalf("Server shutdown failed: %v", err)
+	}
+
+	log.Println("Server stopped")
 }