amélioration de la page infos

src/app/components/home/workspace/hours/hours.component.css

@@ -7,7 +7,7 @@
 }
 
 .process {
-	width: 100%;
+	width: 90%;
 	height: 75%;
 }
 
@@ -26,7 +26,7 @@ td {
 
 tr {
 	text-align: center;
-	font-size: 0.78em;
+	font-size: 0.85em;
 }
 
 button {
@@ -34,9 +34,21 @@ button {
 	width: 90%;
 }
 
+.radioprocess {
+	margin-top:1rem;
+	width: 90%;
+	font-size: 1em;
+}
+
 @media (max-width: 500px) {
 	tr {
 		text-align: center;
-		font-size:0.5em;
+		font-size: 0.5em;
+	}
+
+	.radioprocess {
+		margin-top:1rem;
+		width: 90%;
+		font-size: 0.8em;
 	}
 }

src/app/components/home/workspace/hours/hours.component.html

@@ -6,7 +6,7 @@
 <div *ngIf="!isProcessing" class="container"
 	fxLayout="column"
 	fxLayoutAlign="space-around center">
-	<div style="margin-top:1rem; width: 90%;">
+	<div class="radioprocess">
 		<mat-radio-group [(ngModel)]="defaultOp" fxLayout="row" fxLayoutAlign="space-around center">
 			<mat-radio-button style="margin: 10px; font-size: normal;" *ngFor="let operation of operations" [value]="operation">
 				{{operation}}

src/app/components/home/workspace/infos/infos.component.css

@@ -1,6 +1,4 @@
 .container {
-	/* display: flex; */
-	/*background-color: #b8b8b8;*/
 	margin-bottom: 100px;
 	overflow-x: hidden;
 	overflow-y: auto;
@@ -14,3 +12,24 @@
 .mat-spinner {
 	margin-top: 3rem;
 }
+
+.info-card {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	width: 85%;
+}
+ 
+.info-title {
+	width: 100%;
+}
+
+.info-content {
+	margin-top: 0.5rem;
+}
+
+.sys-card {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	width: 85%;
+}
+

src/app/components/home/workspace/infos/infos.component.html

@@ -5,25 +5,55 @@
 </div>
 <div *ngIf="!isProcessing" class="container"
 	fxLayout="column"
-	fxLayoutAlign="space-around start">
-	<ng-container *ngIf="infos">
-		<h3 style="margin-left: 2rem;">Module GSM</h3>
-		<div fxLayout="row" style="width:100%;">
-			<span fxFlexOffset="5" fxFlex="30"><b>Fabricant:</b></span>
-			<span>{{infos.manufacturer.identification}}</span>
-		</div>
-		<div fxLayout="row" style="width:100%;">
-			<span fxFlexOffset="5" fxFlex="30"><b>Modèle:</b></span>
-			<span>{{infos.manufacturer.model}}</span>
-		</div>
-		<div fxLayout="row" style="width:100%;">
-			<span fxFlexOffset="5" fxFlex="30"><b>Révision matérielle:</b></span>
-			<span>{{infos.manufacturer.hardware_rev}}</span>
-		</div>
-		<div fxLayout="row" style="width:100%;">
-			<span fxFlexOffset="5" fxFlex="30"><b>Numéro de série:</b></span>
-			<span>{{infos.manufacturer.serial_number}}</span>
-		</div>
+	fxLayoutAlign="space-around center">
+	<mat-card class="info-card">
+		<mat-card-header>
+			<mat-card-title-group class="info-title">
+				<mat-card-title>Module GSM</mat-card-title>
+				<img mat-card-sm-image src="/assets/img/GNSS_GSM_GPS_rpi.png">
+			</mat-card-title-group>
+		</mat-card-header>
+		<mat-card-content class="info-content">
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Fabricant:</b></span>
+				<span>{{infos.manufacturer.identification}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Modèle:</b></span>
+				<span>{{infos.manufacturer.model}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Révision matérielle:</b></span>
+				<span>{{infos.manufacturer.hardware_rev}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Numéro de série:</b></span>
+				<span>{{infos.manufacturer.serial_number}}</span>
+			</div>
+		</mat-card-content>
+	</mat-card>
+	<mat-card class="sys-card">
+		<mat-card-header>
+			<mat-card-title-group class="info-title">
+				<mat-card-title>Système</mat-card-title>
+				<img mat-card-sm-image src="/assets/img/linux.png">
+			</mat-card-title-group>
+		</mat-card-header>
+		<mat-card-content class="info-content">
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Architecture:</b></span>
+				<span>{{infos.system.arch}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>Machine:</b></span>
+				<span>{{infos.system.machine}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="30"><b>OS:</b></span>
+				<span>{{infos.system.os}} {{infos.system.version}}</span>
+			</div>
+		</mat-card-content>
+	</mat-card>
 		<h3 style="margin-left: 2rem;">Contrôle</h3>
 		<div fxLayout="row" style="width:100%;">
 			<span fxFlexOffset="5" fxFlex="30"><b>Opérateur:</b></span>
@@ -43,5 +73,4 @@
 			<div *ngIf="infos.sim_inserted"><mat-icon style="color: green;">check_circle</mat-icon></div>
 			<div *ngIf="!infos.sim_inserted"><mat-icon style="color: red;">cancel</mat-icon></div>
 		</div>
-	</ng-container>
 </div>

src/app/models/info.model.ts

@@ -1,3 +1,10 @@
+export interface System {
+	arch:string;
+	machine:string;
+	os:string;
+	version:string;
+}
+
 export interface Manufacturer {
 	identification:string;
 	model:string;
@@ -7,6 +14,7 @@ export interface Manufacturer {
 
 export interface Info {
 	manufacturer:Manufacturer;
+	system:System;
 	operator:string;
 	provider:string;
 	signal_dbm:string;