From 026932cfab2cdc681684e9764cdc5262daff5780 Mon Sep 17 00:00:00 2001
From: Andre Henriques <andr3h3nriqu3s@gmail.com>
Date: Tue, 16 Apr 2024 14:49:08 +0100
Subject: [PATCH] add notification to warn of model training closes #79

---
 webpage/src/routes/models/edit/+page.svelte |   6 +
 webpage/src/styles/app.css                  | 159 +++++++++++---------
 2 files changed, 98 insertions(+), 67 deletions(-)

diff --git a/webpage/src/routes/models/edit/+page.svelte b/webpage/src/routes/models/edit/+page.svelte
index 2e09629..516c9a4 100644
--- a/webpage/src/routes/models/edit/+page.svelte
+++ b/webpage/src/routes/models/edit/+page.svelte
@@ -128,6 +128,12 @@
 <KeepPageSize />
 
 <main>
+	{#if [4, 7].includes(_model?.status ?? 0)}
+		<div class="big-msg warning">The Model is currently training</div>
+	{/if}
+	{#if [-4, -7].includes(_model?.status ?? 0)}
+		<div class="big-msg danger">The Model is failed to train</div>
+	{/if}
 	<Tabs active="model" let:isActive nobox>
 		<div slot="buttons" let:setActive let:isActive>
 			<button
diff --git a/webpage/src/styles/app.css b/webpage/src/styles/app.css
index d9fb469..7b90b45 100644
--- a/webpage/src/styles/app.css
+++ b/webpage/src/styles/app.css
@@ -1,148 +1,173 @@
-*{box-sizing: border-box;font-family: 'Roboto', sans-serif;}
+* {
+	box-sizing: border-box;
+	font-family: 'Roboto', sans-serif;
+}
 
 :root {
-    --nav-bar-size: 54px;
-    --white: #ffffff;
-    --grey: #dbdcde;
-    --light-grey: #fafafa;
-    --main: #fca311;
-    --sec: #14213d;
-    --black: #000000;
-    --red: 212, 38, 38;
-    --green: 92, 199, 30;
+	--nav-bar-size: 54px;
+	--white: #ffffff;
+	--grey: #dbdcde;
+	--light-grey: #fafafa;
+	--main: #fca311;
+
+	--warning: #fca311;
+	--warning-transparent: #fca31144;
+
+	--danger: #ff8282;
+	--danger-transparent: #ff828244;
+
+	--sec: #14213d;
+	--black: #000000;
+	--red: 212, 38, 38;
+	--green: 92, 199, 30;
 }
 
 body {
-    margin: 0px;
+	margin: 0px;
 }
 
 .button,
 button {
-    border-radius: 10px;
-    text-align: center;
-    padding: 3px 6px;
-    border: none;
-    box-shadow: 0 2px 8px 1px #66666655;
-    background: var(--main);
-    color: var(--black);
+	border-radius: 10px;
+	text-align: center;
+	padding: 3px 6px;
+	border: none;
+	box-shadow: 0 2px 8px 1px #66666655;
+	background: var(--main);
+	color: var(--black);
 
-    &.padded {
-        padding: 10px;
-    }
+	&.padded {
+		padding: 10px;
+	}
 
-    &.danger {
-        background: rgb(var(--red));
-        color: white;
-        font-weight: bold;
-    }
+	&.danger {
+		background: rgb(var(--red));
+		color: white;
+		font-weight: bold;
+	}
 }
 
 button.expander {
-    background: none;
-    width: 100%;
-    box-shadow: none;
-    border-bottom: 1px #ccc;
-    text-align: left;
-    font-size: 20px;
-    font-weight: bold;
+	background: none;
+	width: 100%;
+	box-shadow: none;
+	border-bottom: 1px #ccc;
+	text-align: left;
+	font-size: 20px;
+	font-weight: bold;
 }
 
 button.expander::after {
-    content: '▼'
+	content: '▼';
 }
 
-
 a.button {
-    text-decoration: none;
+	text-decoration: none;
 }
 
 .flex {
-    display: flex;
+	display: flex;
 }
 
 .justify-center {
-    justify-content: center;
+	justify-content: center;
 }
 
 .justify-start {
-    justify-content: start;
+	justify-content: start;
 }
 
 .justify-end {
-    justify-content: end;
+	justify-content: end;
 }
 
 .align-center {
-    align-items: center;
+	align-items: center;
 }
 
 .grow-1 {
-    flex-grow: 1;
+	flex-grow: 1;
 }
 
 .w100 {
-    width: 100%;
-    display: block;
+	width: 100%;
+	display: block;
 }
 
 .text-center {
-    text-align: center;
+	text-align: center;
 }
 
 .simple-link {
-    color: var(--sec);
-    text-decoration: none;
+	color: var(--sec);
+	text-decoration: none;
 }
 
 .bold {
-    font-weight: bold;
+	font-weight: bold;
 }
 
 .bigger {
-    font-size: 1.1rem;
+	font-size: 1.1rem;
 }
 
 .danger {
-    color: red;
+	color: red;
 }
 
 .card {
-    box-shadow: 0 2px 5px 1px #66666655;
-    padding: 20px;
-    border-radius: 10px;
-    margin: 20px 0;
+	box-shadow: 0 2px 5px 1px #66666655;
+	padding: 20px;
+	border-radius: 10px;
+	margin: 20px 0;
 }
 
 .card h3 {
-    margin-top: 0;
+	margin-top: 0;
 }
 
-
 .table {
-    width: 100%;
-    box-shadow: 0 2px 8px 1px #66666622;
-    border-radius: 10px;
-    border-collapse: collapse;
-    overflow: hidden;
+	width: 100%;
+	box-shadow: 0 2px 8px 1px #66666622;
+	border-radius: 10px;
+	border-collapse: collapse;
+	overflow: hidden;
 }
 
 .table thead {
-    background: #60606022;
+	background: #60606022;
 }
 
 .table tr td,
 .table tr th {
-    border-left: 1px solid #22222244;
-    padding: 15px;
+	border-left: 1px solid #22222244;
+	padding: 15px;
 }
 
 .table tr td:first-child,
 .table tr th:first-child {
-    border-left: none;
+	border-left: none;
 }
 
 .table tr td button,
 .table tr td .button {
-    padding: 5px 10px;
-    box-shadow: 0 2px 5px 1px #66666655;
+	padding: 5px 10px;
+	box-shadow: 0 2px 5px 1px #66666655;
+}
+
+.big-msg {
+	padding: 10px;
+	margin: 10px 0;
+	border-radius: 10px;
+	border: 1px solid black;
+}
+
+.big-msg.warning {
+	background-color: var(--warning-transparent);
+	border: 1px solid var(--warning);
+}
+
+.big-msg.danger {
+	background-color: var(--danger-transparent);
+	border: 1px solid var(--danger);
 }