Ajout d'un système de cache des

requêtes HTTP

Front/skydivelogs-app/src/app/app.component.ts

@@ -1,20 +1,19 @@
-import { Component, OnInit } from '@angular/core';
-import { ServiceComm } from '../services/serviceComm';
+import { Component, OnInit } from "@angular/core";
+import { ServiceComm } from "../services/service-comm.service";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"]
 })
 export class AppComponent implements OnInit {
-  title = 'app';
+  title = "app";
   showMenu = false;
 
-  constructor(private serviceComm: ServiceComm) {
-  }
+  constructor(private serviceComm: ServiceComm) {}
 
   ngOnInit() {
-    this.serviceComm.componentTitle.subscribe(title => this.title = title);
+    this.serviceComm.componentTitle.subscribe(title => (this.title = title));
   }
 
   toggleMenu() {

Front/skydivelogs-app/src/app/app.module.ts

@@ -1,23 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 
-import { AppComponent } from './app.component';
+import { AppComponent } from "./app.component";
 
-import { SummaryComponent } from './summary/summary.component';
-import { ListOfJumpsComponent } from './list-of-jumps/list-of-jumps.component';
-import { ListOfDzsComponent } from './list-of-dzs/list-of-dzs.component';
-import { NewJumpComponent } from './new-jump/new-jump.component';
-import { ListOfAircraftsComponent } from './list-of-aircrafts/list-of-aircrafts.component';
-import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-types.component';
+import { SummaryComponent } from "./summary/summary.component";
+import { ListOfJumpsComponent } from "./list-of-jumps/list-of-jumps.component";
+import { ListOfDzsComponent } from "./list-of-dzs/list-of-dzs.component";
+import { NewJumpComponent } from "./new-jump/new-jump.component";
+import { ListOfAircraftsComponent } from "./list-of-aircrafts/list-of-aircrafts.component";
+import { ListOfJumpTypesComponent } from "./list-of-jump-types/list-of-jump-types.component";
 
-import { DateService } from '../services/dateService';
-import { ServiceApiGet } from '../services/serviceApiGet';
-import { ServiceApiPost } from '../services/serviceApiPost';
-import { ServiceComm } from '../services/serviceComm';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import { DateService } from "../services/date.service";
+import { ServiceApiGet } from "../services/service-api-get.service";
+import { ServiceApiPost } from "../services/service-api-post.service";
+import { ServiceComm } from "../services/service-comm.service";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { FormsModule } from "@angular/forms";
 import {
   MatPaginatorModule,
   MatTableModule,
@@ -30,20 +30,19 @@ import {
   MatInputModule,
   MatButtonModule,
   MatIconModule
-} from '@angular/material';
-
-
+} from "@angular/material";
+import { RequestCache } from "../services/request-cache.service";
+import { CachingInterceptor } from "../services/caching-interceptor.service";
 
 const appRoutes: Routes = [
-  { path: 'summary', component: SummaryComponent },
-  { path: 'jumpsList', component: ListOfJumpsComponent },
-  { path: 'dz', component: ListOfDzsComponent },
-  { path: 'newjump', component: NewJumpComponent },
-  { path: 'aircraftList', component: ListOfAircraftsComponent },
-  { path: 'jumpTypeList', component: ListOfJumpTypesComponent }
+  { path: "summary", component: SummaryComponent },
+  { path: "jumpsList", component: ListOfJumpsComponent },
+  { path: "dz", component: ListOfDzsComponent },
+  { path: "newjump", component: NewJumpComponent },
+  { path: "aircraftList", component: ListOfAircraftsComponent },
+  { path: "jumpTypeList", component: ListOfJumpTypesComponent }
 ];
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -75,7 +74,14 @@ const appRoutes: Routes = [
     MatIconModule
   ],
   exports: [HttpClientModule],
-  providers: [ServiceApiPost, ServiceApiGet, ServiceComm, DateService],
+  providers: [
+    ServiceApiPost,
+    ServiceApiGet,
+    ServiceComm,
+    DateService,
+    RequestCache,
+    { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts

@@ -1,32 +1,33 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 
-import { AircraftResp } from '../../models/aircraft';
-import { ServiceApiGet } from '../../services/serviceApiGet';
-import { ServiceComm } from '../../services/serviceComm';
+import { AircraftResp } from "../../models/aircraft";
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: 'app-list-of-aircrafts',
-  templateUrl: './list-of-aircrafts.component.html',
-  styleUrls: ['./list-of-aircrafts.component.css']
+  selector: "app-list-of-aircrafts",
+  templateUrl: "./list-of-aircrafts.component.html",
+  styleUrls: ["./list-of-aircrafts.component.css"]
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ['id', 'name'];
+  public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(private serviceApi: ServiceApiGet, private serviceComm: ServiceComm) {
-  }
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('List of aircrafts');
+    this.serviceComm.updatedComponentTitle("List of aircrafts");
     this.getListOfAircrafts();
   }
 
   getListOfAircrafts() {
-    this.serviceApi.getListOfAircrafts()
-      .subscribe(data => {
+    this.serviceApi.getListOfAircrafts().subscribe(data => {
       this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
       this.dataSourceTable.paginator = this.paginator;
     });

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -1,35 +1,41 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 
-import { DropZoneResp } from '../../models/dropzone';
-import { ServiceApiGet } from '../../services/serviceApiGet';
-import { ServiceComm } from '../../services/serviceComm';
+import { DropZoneResp } from "../../models/dropzone";
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: 'app-list-of-dzs',
-  templateUrl: './list-of-dzs.component.html',
-  styleUrls: ['./list-of-dzs.component.css']
+  selector: "app-list-of-dzs",
+  templateUrl: "./list-of-dzs.component.html",
+  styleUrls: ["./list-of-dzs.component.css"]
 })
-
-
 export class ListOfDzsComponent implements OnInit {
-  public displayedColumns: Array<string> = ['id', 'name', 'latitude', 'longitude', 'address', 'email', 'type'];
+  public displayedColumns: Array<string> = [
+    "id",
+    "name",
+    "latitude",
+    "longitude",
+    "address",
+    "email",
+    "type"
+  ];
   public dataSourceTable;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(private serviceApi: ServiceApiGet,
-    private serviceComm: ServiceComm) {
-  }
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('List of DZs');
+    this.serviceComm.updatedComponentTitle("List of DZs");
     this.getListOfDropZones();
   }
 
   getListOfDropZones() {
-    this.serviceApi.getListOfDropZones()
-      .subscribe(data => {
+    this.serviceApi.getListOfDropZones().subscribe(data => {
       this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
       this.dataSourceTable.paginator = this.paginator;
     });

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts

@@ -1,32 +1,33 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 
-import { JumpTypeResp } from '../../models/jumpType';
-import { ServiceApiGet } from '../../services/serviceApiGet';
-import { ServiceComm } from '../../services/serviceComm';
+import { JumpTypeResp } from "../../models/jumpType";
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: 'app-list-of-jump-types',
-  templateUrl: './list-of-jump-types.component.html',
-  styleUrls: ['./list-of-jump-types.component.css']
+  selector: "app-list-of-jump-types",
+  templateUrl: "./list-of-jump-types.component.html",
+  styleUrls: ["./list-of-jump-types.component.css"]
 })
 export class ListOfJumpTypesComponent implements OnInit {
-  public displayedColumns: Array<string> = ['id', 'name'];
+  public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(private serviceApi: ServiceApiGet, private serviceComm: ServiceComm) {
-  }
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('List of jump types');
+    this.serviceComm.updatedComponentTitle("List of jump types");
     this.getListOfJumpTypes();
   }
 
   getListOfJumpTypes() {
-    this.serviceApi.getListOfJumpTypes()
-      .subscribe(data => {
+    this.serviceApi.getListOfJumpTypes().subscribe(data => {
       this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
       this.dataSourceTable.paginator = this.paginator;
     });

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,29 +1,36 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
-
-import { Observable } from 'rxjs';
-import { JumpResp } from '../../models/jump';
-import { ServiceApiGet } from '../../services/serviceApiGet';
-import { ServiceComm } from '../../services/serviceComm';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
 
+import { Observable } from "rxjs";
+import { JumpResp } from "../../models/jump";
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: 'app-list-of-jumps',
-  templateUrl: './list-of-jumps.component.html',
-  styleUrls: ['./list-of-jumps.component.css']
+  selector: "app-list-of-jumps",
+  templateUrl: "./list-of-jumps.component.html",
+  styleUrls: ["./list-of-jumps.component.css"]
 })
 export class ListOfJumpsComponent implements OnInit {
   public listOfJumps: Observable<Array<JumpResp>>;
-  public displayedColumns: Array<string> = ['id', 'jumpDate', 'jumpTypeId', 'aircraftId', 'dropZoneId',];
+  public displayedColumns: Array<string> = [
+    "id",
+    "jumpDate",
+    "jumpTypeId",
+    "aircraftId",
+    "dropZoneId"
+  ];
   public dataSourceTable;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(private serviceApi: ServiceApiGet, private serviceComm: ServiceComm) {
-  }
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('List of jumps');
+    this.serviceComm.updatedComponentTitle("List of jumps");
     this.getListOfJumps();
   }
 

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { ServiceComm } from '../../services/serviceComm';
-import { ServiceApiGet } from '../../services/serviceApiGet';
-import { ServiceApiPost } from '../../services/serviceApiPost';
-import { JumpTypeResp } from '../../models/jumpType';
-import { AircraftResp } from '../../models/aircraft';
-import { DropZoneResp } from '../../models/dropzone';
-import { DateService } from '../../services/dateService';
-
+import { Component, OnInit } from "@angular/core";
+import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceApiPost } from "../../services/service-api-post.service";
+import { JumpTypeResp } from "../../models/jumpType";
+import { AircraftResp } from "../../models/aircraft";
+import { DropZoneResp } from "../../models/dropzone";
+import { DateService } from "../../services/date.service";
 
 @Component({
-  selector: 'app-new-jump',
-  templateUrl: './new-jump.component.html',
-  styleUrls: ['./new-jump.component.css']
+  selector: "app-new-jump",
+  templateUrl: "./new-jump.component.html",
+  styleUrls: ["./new-jump.component.css"]
 })
 export class NewJumpComponent implements OnInit {
   beginDate: Date;
@@ -28,14 +27,15 @@ export class NewJumpComponent implements OnInit {
   listOfAircraft: Array<AircraftResp>;
   listOfDropZone: Array<DropZoneResp>;
 
-  constructor(private serviceComm: ServiceComm,
+  constructor(
+    private serviceComm: ServiceComm,
     private serviceApiGet: ServiceApiGet,
     private serviceApiPost: ServiceApiPost,
-    private dateService: DateService) {
-  }
+    private dateService: DateService
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('Add a new jump');
+    this.serviceComm.updatedComponentTitle("Add a new jump");
 
     this.endDate = new Date();
 
@@ -64,8 +64,7 @@ export class NewJumpComponent implements OnInit {
   }
 
   private getListOfJumpTypes() {
-    this.serviceApiGet.getListOfJumpTypes()
-      .subscribe(data => {
+    this.serviceApiGet.getListOfJumpTypes().subscribe(data => {
       this.listOfJumpType = data;
       this.getListOfAircrafts();
       this.getListOfDropZones();
@@ -73,15 +72,13 @@ export class NewJumpComponent implements OnInit {
   }
 
   private getListOfAircrafts() {
-    this.serviceApiGet.getListOfAircrafts()
-      .subscribe(data => {
+    this.serviceApiGet.getListOfAircrafts().subscribe(data => {
       this.listOfAircraft = data;
     });
   }
 
   private getListOfDropZones() {
-    this.serviceApiGet.getListOfDropZones()
-      .subscribe(data => {
+    this.serviceApiGet.getListOfDropZones().subscribe(data => {
       this.listOfDropZone = data;
     });
   }

Front/skydivelogs-app/src/app/summary/summary.component.ts

@@ -1,25 +1,26 @@
-import { Component, OnInit } from '@angular/core';
-import { ServiceComm } from '../../services/serviceComm';
-import { ServiceApiGet } from '../../services/serviceApiGet';
+import { Component, OnInit } from "@angular/core";
+import { ServiceComm } from "../../services/service-comm.service";
+import { ServiceApiGet } from "../../services/service-api-get.service";
 
 @Component({
-  selector: 'app-summary',
-  templateUrl: './summary.component.html',
-  styleUrls: ['./summary.component.css']
+  selector: "app-summary",
+  templateUrl: "./summary.component.html",
+  styleUrls: ["./summary.component.css"]
 })
 export class SummaryComponent implements OnInit {
-  public displayedColumns: Array<string> = ['label', 'nb'];
+  public displayedColumns: Array<string> = ["label", "nb"];
   public dsNbJumpByDz;
   public dsNbJumpByAircraft;
   public dsNbJumpByRig;
   public dsNbJumpByType;
   public dsNbJumpByYear;
 
-  constructor(private serviceApi: ServiceApiGet,
-    private serviceComm: ServiceComm) { }
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.updatedComponentTitle('Summary');
+    this.serviceComm.updatedComponentTitle("Summary");
   }
-
 }

Front/skydivelogs-app/src/services/caching-interceptor.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from "@angular/core";
+import {
+  HttpEvent,
+  HttpRequest,
+  HttpResponse,
+  HttpInterceptor,
+  HttpHandler
+} from "@angular/common/http";
+
+import { Observable } from "rxjs/Observable";
+import { startWith, tap } from "rxjs/operators";
+import "rxjs/add/observable/of";
+
+import { RequestCache } from "./request-cache.service";
+
+@Injectable()
+export class CachingInterceptor implements HttpInterceptor {
+  constructor(private cache: RequestCache) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const cachedResponse = this.cache.get(req);
+    return cachedResponse
+      ? Observable.of(cachedResponse)
+      : this.sendRequest(req, next);
+  }
+
+  sendRequest(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(
+      tap(event => {
+        if (event instanceof HttpResponse) {
+          this.cache.put(req, event);
+        }
+      })
+    );
+  }
+}

Front/skydivelogs-app/src/services/request-cache.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from "@angular/core";
+import { HttpRequest, HttpResponse } from "@angular/common/http";
+
+const maxAge = 30000;
+@Injectable()
+export class RequestCache {
+  cache = new Map();
+
+  get(req: HttpRequest<any>): HttpResponse<any> | undefined {
+    const url = req.urlWithParams + "-" + req.method;
+    const cached = this.cache.get(url);
+
+    if (!cached) {
+      return undefined;
+    }
+
+    return cached.response;
+  }
+
+  put(req: HttpRequest<any>, response: HttpResponse<any>): void {
+    //const url = req.url;
+    const url = req.urlWithParams + "-" + req.method;
+    const entry = { url, response, lastRead: Date.now() };
+    this.cache.set(url, entry);
+
+    console.log(this.cache);
+
+    const expired = Date.now() - maxAge;
+    this.cache.forEach(expiredEntry => {
+      if (expiredEntry.lastRead < expired) {
+        this.cache.delete(expiredEntry.url);
+      }
+    });
+  }
+}

Front/skydivelogs-app/src/services/service-api-post.service.ts

@@ -1,18 +1,17 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 
-import { JumpReq } from '../models/jump';
-import { environment } from '../environments/environment';
-import { DateService } from './dateService';
+import { JumpReq } from "../models/jump";
+import { environment } from "../environments/environment";
+import { DateService } from "./date.service";
 
 @Injectable()
 export class ServiceApiPost {
   private readonly headers = new HttpHeaders({
-    'Access-Control-Allow-Origin': environment.urlApi
+    "Access-Control-Allow-Origin": environment.urlApi
   });
 
-  constructor(private http: HttpClient,
-    private dateService: DateService) { }
+  constructor(private http: HttpClient, private dateService: DateService) {}
 
   public AddListOfJump(
     selectedJumpType: number,
@@ -26,7 +25,8 @@ export class ServiceApiPost {
     defaultDeployAltitude: number,
     countOfJumps: number
   ) {
-    const diffInDays = this.dateService.DiffBetweenDates(beginDate, endDate) + 1;
+    const diffInDays =
+      this.dateService.DiffBetweenDates(beginDate, endDate) + 1;
     const countOfJumpsPerDay = Math.trunc(countOfJumps / diffInDays);
 
     for (let i = 1; beginDate.getTime() < endDate.getTime(); i++) {
@@ -79,15 +79,16 @@ export class ServiceApiPost {
         exitAltitude: defaultExitAltitude,
         deployAltitude: defaultDeployAltitude,
         gearId: selectedRig,
-        notes: '',
+        notes: "",
         id: 0,
         jumpDate: jumpDate
       };
 
       // console.log(bodyNewjump.jumpDate);
-      this.http.post(`${environment.urlApi}/api/Jump`,
-        bodyNewjump,
-        { headers: this.headers })
+      this.http
+        .post(`${environment.urlApi}/api/Jump`, bodyNewjump, {
+          headers: this.headers
+        })
         .subscribe(data => console.log(data));
     }
   }