Merge branch 'feat/transport-api' into 'dev'

feat: add tcl display handling

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!48

src/app/models/tclStopPoint.model.ts

+export class TclStopPoint {
+  public tramLines: string[];
+  public subLines: string[];
+  public busLines: string[];
+  public _id: string;
+  public id: string;
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
+}

src/app/services/tcl.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { TclStopPoint } from '../models/tclStopPoint.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TclService {
+  constructor(private http: HttpClient) {}
+
+  /**
+   * Retrive all tcl stop point around given coord
+   */
+  public getTclStopPointBycoord(longitude: number, latitude: number): Observable<any> {
+    return this.http.post<TclStopPoint[]>('/api/tcl/closest', { coordinates: [longitude, latitude] });
+  }
+}

src/app/shared/components/svg-icon/svg-icon.component.scss

@@ -5,6 +5,9 @@
   &.icon-32 {
     width: 2em;
   }
+  &.icon-75 {
+    width: 4.688em;
+  }
 }
 
 svg {

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -206,4 +206,34 @@
       </div>
     </div>
   </div>
+  <!-- Transport -->
+  <div
+    *ngIf="tclStopPoints.length"
+    fxLayout="column"
+    class="structure-details-block"
+    fxLayoutAlign="baseline baseline"
+    fxLayoutGap="20px"
+  >
+    <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
+      <app-svg-icon [type]="'ico'" [icon]="'transport'" [iconClass]="'icon-32'"></app-svg-icon>
+      <h2>Accès</h2>
+    </div>
+    <div fxLayout="column wrap" fxLayoutGap="24px">
+      <div *ngFor="let tclStop of tclStopPoints">
+        {{ tclStop.name }}
+        <div fxLayout="row wrap" fxLayoutGap="24px">
+          <p *ngFor="let sub of tclStop.subLines">
+            <app-svg-icon [type]="'tcl'" [icon]="sub" [iconClass]="'icon-75'"></app-svg-icon>
+          </p>
+          <p *ngFor="let tram of tclStop.tramLines">
+            <app-svg-icon [type]="'tcl'" [icon]="tram" [iconClass]="'icon-75'"></app-svg-icon>
+          </p>
+          <p *ngFor="let bus of tclStop.busLines">
+            <app-svg-icon [type]="'tcl'" [icon]="bus" [iconClass]="'icon-75'"></app-svg-icon>
+            <!-- {{ bus }} -->
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -9,6 +9,8 @@ import { ActivatedRoute } from '@angular/router';
 import { PrintService } from '../../../shared/service/print.service';
 import { Equipment } from '../../enum/equipment.enum';
 import { typeStructureEnum } from '../../../shared/enum/typeStructure.enum';
+import { TclService } from '../../../services/tcl.service';
+import { TclStopPoint } from '../../../models/tclStopPoint.model';
 import { ProfileService } from '../../../profile/services/profile.service';
 import { User } from '../../../models/user.model';
 @Component({
@@ -26,6 +28,7 @@ export class StructureDetailsComponent implements OnInit {
   public accessRightsReferentiel: Category;
   public baseSkills: Module[];
   public accessRights: Module[];
+  public tclStopPoints: TclStopPoint[] = [];
   public printMode = false;
   public isOtherSection = false;
   public showForm = false;
@@ -34,6 +37,7 @@ export class StructureDetailsComponent implements OnInit {
   constructor(
     route: ActivatedRoute,
     private printService: PrintService,
+    private tclService: TclService,
     private profileService: ProfileService,
     private searchService: SearchService
   ) {
@@ -55,6 +59,8 @@ export class StructureDetailsComponent implements OnInit {
       this.structure.proceduresAccompaniment.splice(index, 1);
       this.isOtherSection = true;
     }
+    // GetTclStopPoints
+    this.getTclStopPoints();
   }
 
   private setReferentiels(): void {
@@ -183,4 +189,10 @@ export class StructureDetailsComponent implements OnInit {
   public isAccessRights(): boolean {
     return this.accessRights && this.accessRights[0] !== undefined;
   }
+
+  public getTclStopPoints(): void {
+    this.tclService.getTclStopPointBycoord(this.structure.getLon(), this.structure.getLat()).subscribe((res) => {
+      this.tclStopPoints = res;
+    });
+  }
 }

src/assets/ico/sprite.svg

@@ -10,6 +10,11 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M16 18C16.5523 18 17 17.5523 17 17V4C17 3.44772 16.5523 3 16 3H6C5.44772 3 5 3.44772 5 4V17C5 17.5523 5.44772 18 6 18H16ZM16 4H6V16H16V4ZM11 17.5C11.2761 17.5 11.5 17.2761 11.5 17C11.5 16.7239 11.2761 16.5 11 16.5C10.7239 16.5 10.5 16.7239 10.5 17C10.5 17.2761 10.7239 17.5 11 17.5Z" fill="#333333"/>
 </symbol>
 
+<symbol id="transport" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4C5.89543 4 5 4.89543 5 6V23C5 24.1046 5.89543 25 7 25L7 26.5C7 27.3284 7.67157 28 8.5 28C9.32843 28 10 27.3284 10 26.5V25H21V26.5C21 27.3284 21.6716 28 22.5 28C23.3284 28 24 27.3284 24 26.5V25C25.1046 25 26 24.1046 26 23V6C26 4.89543 25.1046 4 24 4H7ZM24 9H7V18H24V9ZM12 22H19L18.125 23H12.875L12 22ZM10 6C9.44772 6 9 6.44772 9 7C9 7.55228 9.44772 8 10 8H21C21.5523 8 22 7.55228 22 7C22 6.44772 21.5523 6 21 6H10ZM10.6668 21.8754C10.4609 21.1805 9.89524 20.6514 9.18821 20.4923L7 20V23H11L10.6668 21.8754ZM21.8118 20.4923C21.1048 20.6514 20.5391 21.1805 20.3332 21.8754L20 23H24V20L21.8118 20.4923Z" fill="black"/>
+</symbol>
+
+
 <symbol id="liste" viewBox="0 0 32 32"  xmlns="http://www.w3.org/2000/svg">
 <rect x="10" y="9" width="16" height="2" rx="1" />
 <rect x="10" y="15" width="16" height="2" rx="1" />

src/assets/ico/transport.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4C5.89543 4 5 4.89543 5 6V23C5 24.1046 5.89543 25 7 25L7 26.5C7 27.3284 7.67157 28 8.5 28C9.32843 28 10 27.3284 10 26.5V25H21V26.5C21 27.3284 21.6716 28 22.5 28C23.3284 28 24 27.3284 24 26.5V25C25.1046 25 26 24.1046 26 23V6C26 4.89543 25.1046 4 24 4H7ZM24 9H7V18H24V9ZM12 22H19L18.125 23H12.875L12 22ZM10 6C9.44772 6 9 6.44772 9 7C9 7.55228 9.44772 8 10 8H21C21.5523 8 22 7.55228 22 7C22 6.44772 21.5523 6 21 6H10ZM10.6668 21.8754C10.4609 21.1805 9.89524 20.6514 9.18821 20.4923L7 20V23H11L10.6668 21.8754ZM21.8118 20.4923C21.1048 20.6514 20.5391 21.1805 20.3332 21.8754L20 23H24V20L21.8118 20.4923Z" fill="black"/>
+</svg>