ajout de la page de configuration de la date et l'heure du système

package.json

@@ -28,7 +28,9 @@
     "font-awesome": "^4.7.0",
     "jquery": "^3.6.1",
     "material-icons": "^1.12.0",
+    "moment": "^2.29.4",
     "ngx-cookie-service": "^13.2.0",
+    "ngx-mat-timepicker": "^13.2.6",
     "ngx-toastr": "^14.3.0",
     "rxjs": "~7.5.0",
     "sha.js": "^2.4.11",

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { LoginComponent } from './components/login/login.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { AccountComponent } from './components/home/workspace/account/account.component';
 import { ParametresComponent } from './components/home/workspace/parametres/parametres.component';
+import { DatetimeComponent } from './components/home/workspace/datetime/datetime.component';
 import { InfosComponent } from './components/home/workspace/infos/infos.component';
 import { HoursComponent } from './components/home/workspace/hours/hours.component';
 import { LogsComponent } from './components/home/workspace/logs/logs.component';
@@ -28,6 +29,10 @@ const routes: Routes = [
 				path:"parameters",
 				component:ParametresComponent
 			},
+			{
+				path:"datetime",
+				component:DatetimeComponent
+			},
 			{
 				path:"infos",
 				component:InfosComponent

src/app/app.module.ts

@@ -31,8 +31,11 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { ToastrModule } from 'ngx-toastr';
 import { CodeInputModule } from 'angular-code-input';
+import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
 
 import { HttpXsrfInterceptorService } from './interceptors/http-xsrf-interceptor/http-xsrf-interceptor.service';
 import { AppRoutingModule } from './app-routing.module';
@@ -47,6 +50,7 @@ import { InfosComponent } from './components/home/workspace/infos/infos.componen
 import { HoursComponent } from './components/home/workspace/hours/hours.component';
 import { LogsComponent } from './components/home/workspace/logs/logs.component';
 import { ConfirmComponent } from './components/dialog/confirm/confirm.component';
+import { DatetimeComponent } from './components/home/workspace/datetime/datetime.component';
 
 @NgModule({
 	declarations: [
@@ -60,7 +64,8 @@ import { ConfirmComponent } from './components/dialog/confirm/confirm.component'
 		InfosComponent,
 		HoursComponent,
 		LogsComponent,
-		ConfirmComponent
+		ConfirmComponent,
+  		DatetimeComponent
 	],
 	imports: [
 		BrowserModule,
@@ -95,14 +100,18 @@ import { ConfirmComponent } from './components/dialog/confirm/confirm.component'
 		MatTabsModule,
 		MatSliderModule,
 		MatRadioModule,
+		MatDatepickerModule,
+		MatNativeDateModule,
 		FlexLayoutModule,
 		RouterModule,
 		FontAwesomeModule,
 		ToastrModule.forRoot(),
+		NgxMatTimepickerModule.setLocale('fr-FR'),
 		CodeInputModule
 	],
 	providers: [
-		{ provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptorService, multi: true }
+		{ provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptorService, multi: true },
+		{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' }
 	],
 	bootstrap: [AppComponent]
 })

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

@@ -9,6 +9,7 @@
 			<!-- The following menu items will be hidden on both SM and XS screen sizes -->
 			<a href="/compte" mat-button>Compte</a>
 			<a href="/parameters" mat-button>Paramètres</a>
+			<a href="/datetime" mat-button>Date & Heure</a>
 			<a href="/hours" mat-button>Horaires</a>
 			<a href="/infos" mat-button>Informations</a>
 			<a href="/logs" mat-button>Logs</a>
@@ -29,6 +30,10 @@
 					<mat-icon>build</mat-icon>
 					<span>  Paramètres</span>
 				</button>
+				<button mat-button routerLink="/datetime" class="menu-button">
+					<mat-icon>update</mat-icon>
+					<span>  Date & Heure</span>
+				</button>
 				<button mat-button routerLink="/hours" class="menu-button">
 					<mat-icon>calendar_today</mat-icon>
 					<span>  Horaires</span>

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

@@ -0,0 +1,24 @@
+.container {
+	margin-bottom: 100px;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.process {
+	width: 100%;
+	height: 75%;
+}
+
+.form-field {
+	width: 80%;
+	margin-bottom: 2rem;
+}
+
+.ngx-timepicker-field {
+	width: 80%;
+	margin-bottom: 2rem;
+}
+
+button {
+	width: 80%;
+}

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

@@ -0,0 +1,31 @@
+<div *ngIf="isProcessing" class="process"
+	fxLayout="column"
+	fxLayoutAlign="space-around center">
+	<mat-spinner></mat-spinner>
+</div>
+<div *ngIf="!isProcessing" class="container"
+	fxLayout="column"
+	fxLayoutAlign="space-around center">
+	<mat-form-field appearance="fill" class="form-field">
+		<input matInput (dateChange)="dateChanged($event)" [matDatepicker]="datepicker" placeholder="Choisissez une date">
+		<mat-hint>DD/MM/YYYY</mat-hint>
+		<mat-datepicker-toggle matSuffix [for]="datepicker">
+		</mat-datepicker-toggle>
+		<mat-datepicker #datepicker>
+			<mat-datepicker-actions>
+				<button mat-button matDatepickerCancel>Annuler</button>
+				<button mat-raised-button color="primary" matDatepickerApply>Appliquer</button>
+			</mat-datepicker-actions>
+		</mat-datepicker>
+	</mat-form-field>
+	<mat-form-field appearance="fill" class="form-field">
+		<input matInput name="selected_time_B" [format]="24" [ngxMatTimepicker]="pickerB" placeholder="Choisissez une heure" readonly />
+		<mat-hint>HH:MM</mat-hint>
+		<mat-icon matSuffix (click)="pickerB.open()">
+			watch_later
+		</mat-icon>
+	</mat-form-field>
+	<ngx-mat-timepicker color="primary" (timeChanged)="timeChanged($event)" #pickerB></ngx-mat-timepicker>
+
+	<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="onUpdate()">{{buttonText}}</button>
+</div>

src/app/components/home/workspace/datetime/datetime.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatetimeComponent } from './datetime.component';
+
+describe('DatetimeComponent', () => {
+  let component: DatetimeComponent;
+  let fixture: ComponentFixture<DatetimeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatetimeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatetimeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/home/workspace/datetime/datetime.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { BackendService } from '../../../../services/backend/backend.service';
+import { ToastrService } from 'ngx-toastr';
+import * as moment from 'moment';
+
+@Component({
+	selector: 'app-datetime',
+	templateUrl: './datetime.component.html',
+	styleUrls: ['./datetime.component.css']
+})
+export class DatetimeComponent implements OnInit {
+	isProcessing:boolean = true;
+	isDisabled:boolean = true;
+	timeLeft:number = 0;
+	buttonText:string = "Mise à jour";
+	interval:any;
+	time:string = "";
+	date:string = "";
+
+	constructor(private bs:BackendService,
+		    private router:Router,
+		    private toast:ToastrService) { }
+
+	ngOnInit(): void {
+		this.isProcessing = false;
+	}
+
+	timeChanged(time:string): void {
+		console.log("Nouvelle heure: ", time);
+		this.time = time;
+		if(this.time && this.date) {
+			this.isDisabled = false;
+		}
+	}
+
+	dateChanged(event:MatDatepickerInputEvent<Date>): void {
+		var date = moment(event.value);
+		this.date = date.format("DD/MM/YYYY").toString();
+		if(this.time && this.date) {
+			this.isDisabled = false;
+		}
+	}
+
+	setTimeoutDisabledButton(timeout:number): void {
+		this.timeLeft = timeout;
+		this.isDisabled = true;
+		this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
+		this.interval = setInterval(() => {
+			if(this.timeLeft > 0) {
+				this.timeLeft--;
+				this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
+			} else {
+				this.isDisabled = false;
+				this.buttonText = "Mise à jour";
+				clearInterval(this.interval);
+			}
+		},1000)
+	}
+
+	onUpdate(): void {
+		this.setTimeoutDisabledButton(5);
+		var newDateTime:string = this.date + " " + this.time;
+		console.log("Nouvelle date et heure: ", newDateTime);
+		this.bs.updateDatetime(newDateTime).subscribe(
+			data => {
+				this.toast.success("Mise à jour de la date et heure réussie");
+			}, err => {
+				if(err.status == 401) {
+					this.router.navigateByUrl("/login");
+				} else {
+					this.toast.error(err.error.description);
+				}
+			}
+		);
+
+	}
+}

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

@@ -8,6 +8,15 @@
 	fxLayoutAlign="space-around center">
 	<mat-card class="info-card">
 		<mat-card-content class="info-content">
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50" style="display: grid; align-items: center;"><b>Date:</b></span>
+				<div style="display: grid; align-items: center;">{{today | date:'dd/MM/yyyy HH:mm:ss'}}</div>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50" style="display: grid; align-items: center;"><b>RTC:</b></span>
+				<div *ngIf="RTCisAlive" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>
+				<div *ngIf="!RTCisAlive" style="display: grid; align-items: center;"><mat-icon style="color: red;">cancel</mat-icon></div>
+			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
 				<span fxFlex="50" style="display: grid; align-items: center;"><b>Processus InterCOM:</b></span>
 				<div *ngIf="isAlive" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>

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

@@ -19,6 +19,8 @@ export class InfosComponent implements OnInit {
 	qos_color:string = "green";
 	isProcessing:boolean = true;
 	isAlive:boolean = false;
+	RTCisAlive:boolean = false;
+	today:number = Date.now();
 
 	constructor( private bs:BackendService,
 			 private router:Router,
@@ -26,6 +28,10 @@ export class InfosComponent implements OnInit {
 			 private toast:ToastrService ) { }
 
 	ngOnInit(): void {
+		setInterval(() => {
+		      this.today = Date.now();
+		    }, 1000);
+
 		this.bs.retreiveInfos().subscribe(
 			(data:Info) => {
 				this.infos = data;
@@ -60,7 +66,17 @@ export class InfosComponent implements OnInit {
 				this.bs.processAlive().subscribe(
 					data => {
 						this.isAlive = data['alive'];
-						this.isProcessing = false;
+						this.bs.RTCAlive().subscribe(
+							data => {
+								this.isProcessing = false;
+							}, err => {
+								if(err.status == 401) {
+									this.router.navigateByUrl("/login");
+								} else {
+									this.toast.error(err.error.description);
+								}
+							}
+						);
 					}, err => {
 						if(err.status == 401) {
 							this.router.navigateByUrl("/login");
@@ -68,7 +84,7 @@ export class InfosComponent implements OnInit {
 							this.toast.error(err.error.description);
 						}
 					}
-				)
+				);
 			}, err => {
 				if(err.status == 401) {
 					this.router.navigateByUrl("/login");

src/app/services/backend/backend.service.ts

@@ -182,4 +182,27 @@ export class BackendService {
 		};
 		return this.http.post<any>(host+"/api/configurateur/shutdown", {}, options);
 	}
+
+	updateDatetime(val:string):Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+
+		return this.http.post<any>(host+"/api/configurateur/update_datetime", val, options);
+	}
+
+	RTCAlive():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/configurateur/rtc_alive", options);
+	}
 }