add notification to warn of model training closes #79

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

webpage/src/styles/app.css

@@ -1,4 +1,7 @@
-*{box-sizing: border-box;font-family: 'Roboto', sans-serif;}
+* {
+	box-sizing: border-box;
+	font-family: 'Roboto', sans-serif;
+}
 
 :root {
 	--nav-bar-size: 54px;
@@ -6,6 +9,13 @@
 	--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;
@@ -48,10 +58,9 @@ button.expander {
 }
 
 button.expander::after {
-    content: '▼'
+	content: '▼';
 }
 
-
 a.button {
 	text-decoration: none;
 }
@@ -117,7 +126,6 @@ a.button {
 	margin-top: 0;
 }
 
-
 .table {
 	width: 100%;
 	box-shadow: 0 2px 8px 1px #66666622;
@@ -146,3 +154,20 @@ a.button {
 	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);
+}