From 50369f0373d7a0a954121c0ae3a4348b7c457e53 Mon Sep 17 00:00:00 2001
From: Vincent BENOIT <vincent.benoit@benserv.fr>
Date: Sun, 27 Nov 2022 21:14:59 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20de=20la=20mat-card=20du=20s?=
 =?UTF-8?q?yst=C3=A8me=20dans=20la=20page=20infos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/workspace/infos/infos.component.html |  8 +++++---
 .../home/workspace/infos/infos.component.ts   | 19 ++++++++++++++++++-
 src/app/models/info.model.ts                  |  6 +++---
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/components/home/workspace/infos/infos.component.html b/src/app/components/home/workspace/infos/infos.component.html
index 0871941..ad22858 100644
--- a/src/app/components/home/workspace/infos/infos.component.html
+++ b/src/app/components/home/workspace/infos/infos.component.html
@@ -28,7 +28,7 @@
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50"><b>Usage CPU:</b></span>
-				<span>{{infos.system.cpu_usage}}%</span>
+				<span style="color:{{cpu_color}}"><b>{{infos.system.cpu_usage}}%</b></span>
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50"><b>Mémoire totale:</b></span>
@@ -40,7 +40,8 @@
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50"><b>Mémoire utilisée:</b></span>
-				<span>{{infos.system.used_mem}} Mo - {{infos.system.percent_used_mem}}%</span>
+				<span>{{infos.system.used_mem}} Mo</span>
+				<span style="margin-left: 5px; color:{{mem_color}}"><b>({{infos.system.percent_used_mem}}%)</b></span>
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50"><b>Disque total:</b></span>
@@ -52,7 +53,8 @@
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50"><b>Disque utilisé:</b></span>
-				<span>{{infos.system.used_disk}} Mo - {{infos.system.percent_used_disk}}%</span>
+				<span>{{infos.system.used_disk}} Mo</span>
+				<span style="margin-left: 5px; color:{{disk_color}}"><b>({{infos.system.percent_used_disk}}%)</b></span>
 			</div>
 		</mat-card-content>
 	</mat-card>
diff --git a/src/app/components/home/workspace/infos/infos.component.ts b/src/app/components/home/workspace/infos/infos.component.ts
index 3b56004..cdbd429 100644
--- a/src/app/components/home/workspace/infos/infos.component.ts
+++ b/src/app/components/home/workspace/infos/infos.component.ts
@@ -11,6 +11,9 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class InfosComponent implements OnInit {
 	infos:Info;
+	cpu_color:string = "green";
+	mem_color:string = "green";
+	disk_color:string = "green";
 	isProcessing:boolean = true;
 
 	constructor( private bs:BackendService,
@@ -21,7 +24,21 @@ export class InfosComponent implements OnInit {
 		this.bs.retreiveInfos().subscribe(
 			(data:Info) => {
 				this.infos = data;
-				console.log(this.infos);
+				if(data.system.percent_used_mem >= 65) {
+					this.mem_color = "orange";
+				} else if(data.system.percent_used_mem > 80) {
+					this.mem_color = "red";
+				} else {}
+				if(data.system.cpu_usage >= 70) {
+					this.cpu_color = "orange";
+				} else if(data.system.cpu_usage > 80) {
+					this.cpu_color = "red";
+				} else {}
+				if(data.system.percent_used_disk >= 50) {
+					this.disk_color = "orange";
+				} else if(data.system.percent_used_disk > 80) {
+					this.disk_color = "red";
+				} else {}
 				this.isProcessing = false;
 			}, err => {
 				if(err.status == 401) {
diff --git a/src/app/models/info.model.ts b/src/app/models/info.model.ts
index c2fa5ab..6a44cd3 100644
--- a/src/app/models/info.model.ts
+++ b/src/app/models/info.model.ts
@@ -4,15 +4,15 @@ export interface System {
 	os:string;
 	version:string;
 	total_cpu:string;
-	cpu_usage:string;
+	cpu_usage:number;
 	total_mem:string;
 	avail_mem:string;
 	used_mem:string;
-	percent_used_mem:string;
+	percent_used_mem:number;
 	total_disk:string;
 	free_disk:string;
 	used_disk:string;
-	percent_used_disk:string;
+	percent_used_disk:number;
 }
 
 export interface Manufacturer {