feat: add tooltip handling for structure card hover

src/app/home/home.component.html

 <div fxLayout="row" class="content-container">
-  <app-structure-list [structureList]="structures" [location]="currentLocation" class="left-pane"></app-structure-list>
-  <app-map [structures]="structures" class="right-pane"></app-map>
+  <app-structure-list
+    [structureList]="structures"
+    [location]="currentLocation"
+    (displayMapMarkerId)="setMapMarkerId($event)"
+    class="left-pane"
+  ></app-structure-list>
+  <app-map [structures]="structures" [toogleToolTipId]="displayMarkerId" class="right-pane"></app-map>
 </div>

src/app/home/home.component.ts

@@ -15,6 +15,7 @@ import { GeojsonService } from '../services/geojson.service';
 })
 export class HomeComponent implements OnInit {
   public structures: Structure[] = [];
+  public displayMarkerId: number;
   public geolocation = false;
   public currentLocation: GeoJson;
   constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
@@ -86,4 +87,8 @@ export class HomeComponent implements OnInit {
       (err) => console.error(err)
     );
   }
+
+  public setMapMarkerId(event: Array<number>): void {
+    this.displayMarkerId = event[0];
+  }
 }

src/app/map/components/map.component.scss

@@ -4,7 +4,8 @@
 @import '../../../assets/scss/typography';
 
 #map {
-  height: calc(100vh - #{$header-height} - #{$footer-height});
+  height: calc(100vh - #{$header-height} - #{$footer-height} - 120px);
+  // height: 100%;
   width: 100%;
   border: 10px solid white;
 }
@@ -52,6 +53,7 @@
 
 ::ng-deep .leaflet-tooltip {
   padding: 8px 10px 8px 10px;
+  border-radius: 6px;
   h1 {
     color: $purple;
     @include cn-bold-20;

src/app/map/components/map.component.ts

@@ -6,6 +6,7 @@ import { Structure } from '../../models/structure.model';
 import { GeoJson } from '../models/geojson.model';
 import { GeojsonService } from '../../services/geojson.service';
 import { MapService } from '../services/map.service';
+import { LeafletControlLayersChanges } from '@asymmetrik/ngx-leaflet';
 
 @Component({
   selector: 'app-map',
@@ -14,7 +15,7 @@ import { MapService } from '../services/map.service';
 })
 export class MapComponent implements OnChanges {
   @Input() public structures: Structure[] = [];
-  @Input() public toogleToolTipIds: Array<number> = [];
+  @Input() public toogleToolTipId: number;
   public map: Map;
   public mapOptions: MapOptions;
   // Init locate options
@@ -34,6 +35,17 @@ export class MapComponent implements OnChanges {
     if (changes.structures) {
       this.getStructurePosition();
     }
+    if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
+      if (changes.toogleToolTipId.previousValue !== undefined) {
+        this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
+      }
+      this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
+      // if (changes.toogleToolTipId.currentValue === undefined) {
+      //   this.mapService.toogleToolTip(changes.toogleToolTipId.previousValue);
+      // } else {
+      //   this.mapService.toogleToolTip(changes.toogleToolTipId.currentValue);
+      // }
+    }
   }
 
   /**
@@ -43,7 +55,7 @@ export class MapComponent implements OnChanges {
     this.structures.forEach((element: Structure) => {
       this.getCoord(element.voie).subscribe((coord: GeoJson) => {
         this.mapService
-          .createMarker(coord.geometry.getLon(), coord.geometry.getLat(), 1, this.buildToolTip(element))
+          .createMarker(coord.geometry.getLon(), coord.geometry.getLat(), element.id, this.buildToolTip(element))
           .addTo(this.map);
       });
     });

src/app/map/services/map.service.ts

@@ -6,7 +6,7 @@ import { icon, Marker, Map } from 'leaflet';
   providedIn: 'root',
 })
 export class MapService {
-  private markersList = {};
+  private static markersList = {};
   constructor() {}
 
   public createMarker(lat: number, lon: number, id: number, tooltip?: string): Marker {
@@ -21,7 +21,7 @@ export class MapService {
     if (tooltip) {
       marker.bindTooltip(tooltip);
     }
-    this.markersList[id] = marker;
+    MapService.markersList[id] = marker;
     return marker;
   }
 
@@ -30,7 +30,9 @@ export class MapService {
    * @param id marker id
    */
   public toogleToolTip(id: number): void {
-    this.getMarker(id).toggleTooltip();
+    if (id) {
+      this.getMarker(id).toggleTooltip();
+    }
   }
 
   /**
@@ -46,6 +48,6 @@ export class MapService {
    * Get marker by id
    */
   public getMarker(id: number): Marker {
-    return this.markersList[id] ? this.markersList[id] : null;
+    return MapService.markersList[id] ? MapService.markersList[id] : null;
   }
 }

src/app/models/structure.model.ts

@@ -2,8 +2,8 @@ import { Weekday } from '../structure-list/enum/weekday.enum';
 import { Day } from './day.model';
 import { OpeningDay } from './openingDay.model';
 import { Week } from './week.model';
-
 export class Structure {
+  public id: number;
   public numero: string;
   public dateDeCreation: string;
   public derniereModification: string;
@@ -66,11 +66,11 @@ export class Structure {
 
   public openDisplay(): string {
     if (this.isOpen) {
-      return 'Ouvert actuellement ';
+      return 'Ouvert actuellement';
     } else if (this.openedOn.day) {
-      return 'Fermé - Ouvre ' + this.openedOn.day + ' à ' + this.openedOn.schedule;
+      return 'Fermé - Ouvre ' + this.hours.getDayTranslation(this.openedOn.day) + ' à ' + this.openedOn.schedule;
     } else {
-      return 'Aucun horaire disponible ';
+      return 'Aucun horaire disponible';
     }
   }
 

src/app/models/week.model.ts

 import { Day } from './day.model';
-import { Time } from './time.model';
 
 export class Week {
   monday: Day;
@@ -21,4 +20,25 @@ export class Week {
       sunday: obj && obj.sunday ? new Day(obj.sunday) : null,
     });
   }
+
+  public getDayTranslation(day: string): string {
+    switch (day) {
+      case 'monday':
+        return 'lundi';
+      case 'tuesday':
+        return 'mardi';
+      case 'thursday':
+        return 'jeudi';
+      case 'wednesday':
+        return 'mercredi';
+      case 'friday':
+        return 'vendredi';
+      case 'saturday':
+        return 'samedi';
+      case 'sunday':
+        return 'dimanche';
+      default:
+        return null;
+    }
+  }
 }

src/app/shared/pipes/day.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'day', pure: false })
+export class DayPipe implements PipeTransform {
+  transform(day: string): any {
+    switch (day) {
+      case 'monday':
+        return 'lundi';
+      case 'tuesday':
+        return 'mardi';
+      case 'thursday':
+        return 'jeudi';
+      case 'wednesday':
+        return 'mercredi';
+      case 'friday':
+        return 'vendredi';
+      case 'saturday':
+        return 'samedi';
+      case 'sunday':
+        return 'dimanche';
+      default:
+        return null;
+    }
+  }
+}

src/app/shared/pipes/index.ts

-export {};
+import { DayPipe } from './day.pipe';
+
+export { DayPipe };
 
 // tslint:disable-next-line:variable-name
-export const SharedPipes = [];
+export const SharedPipes = [DayPipe];

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

-<div class="structure" fxLayout="column" (click)="cardClicked()">
+<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseover)="cardHover()">
   <span class="nomStructure">{{ structure.nomDeVotreStructure }}</span>
 
   <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">

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

@@ -13,6 +13,7 @@ import { mergeMap } from 'rxjs/operators';
 export class CardComponent implements OnInit {
   @Input() public structure: Structure;
   @Output() public showDetails: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Output() public hover: EventEmitter<Structure> = new EventEmitter<Structure>();
 
   constructor(private geoJsonService: GeojsonService) {}
   ngOnInit(): void {}
@@ -39,4 +40,8 @@ export class CardComponent implements OnInit {
   public cardClicked(): void {
     this.showDetails.emit(this.structure);
   }
+
+  public cardHover(hoverOut: boolean): void {
+    this.hover.emit(this.structure);
+  }
 }

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

 <div class="structrue-details-container">
+  <!-- Header info -->
   <div fxLayout="row" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
     <em class="ic-arrow-left clickable" (click)="close()"></em>
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
@@ -39,7 +40,7 @@
       </div>
     </div>
   </div>
-
+  <!-- Démarches -->
   <div
     *ngIf="structure.accompagnementDesDemarches.length > 0"
     fxLayout="column"
@@ -57,6 +58,7 @@
       </div>
     </div>
   </div>
+  <!-- Services -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
     <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
       <em class="ic-mouse"></em>
@@ -71,18 +73,20 @@
       </div>
     </div>
   </div>
+  <!-- Accueil -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
     <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
       <em class="ic-mouse"></em>
       <h2>Accueil</h2>
     </div>
+    <!-- Openning Hours -->
     <div fxLayout="row" class="w-100">
       <div fxFlex="70%">
         <h3 class="subtitle">Horaires d’ouverture au public :</h3>
         <div fxLayout="column">
           <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
             <div *ngIf="day.value.open">
-              <h4>{{ day.key }}</h4>
+              <h4>{{ day.key | day }}</h4>
               <div class="openning-time" fxLayout="row" fxLayoutAlign="none center">
                 <div *ngFor="let timeRange of day.value.time; let isFirst = first">
                   <p *ngIf="isFirst">de {{ timeRange.formatOpenningDate() }} à {{ timeRange.formatClosingDate() }}</p>
@@ -95,6 +99,7 @@
           </div>
         </div>
       </div>
+      <!-- modalitesDacces -->
       <div fxFlex="30%">
         <h3 class="subtitle">Accès</h3>
         <div *ngFor="let acces of structure.modalitesDacces">
@@ -107,10 +112,10 @@
           ></em>
           <p>{{ acces }}</p>
         </div>
-        <!-- modalitesDacces -->
       </div>
     </div>
   </div>
+  <!-- Equipements -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline">
     <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
       <em class="ic-toolbox"></em>
@@ -125,6 +130,7 @@
       <p>Ordinateurs à disposition : {{ structure.nombre }}</p>
     </div>
   </div>
+  <!-- Labels -->
   <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
     <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
       <em class="ic-toolbox"></em>

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

@@ -2,6 +2,7 @@
 @import '../../../../assets/scss/color';
 @import '../../../../assets/scss/typography';
 @import '../../../../assets/scss/z-index';
+@import '../../../../assets/scss/layout';
 
 .structrue-details-container {
   background-color: $white;
@@ -9,8 +10,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 980px;
-  height: 100%;
+  max-width: 980px;
+  width: 100%;
+  height: calc(100vh - #{$header-height} - #{$footer-height} - 36px);
   padding: 18px 24px;
   overflow: auto;
 }
@@ -23,6 +25,9 @@
     @include cn-bold-16;
   }
 }
+.structrue-details-block:last-child {
+  border-bottom: none;
+}
 
 .openning-time {
   p {

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

 <app-recherche></app-recherche>
 <span class="nbStructuresLabel">{{ structureList.length }} structures</span>
-<app-card
-  *ngFor="let structure of structureList"
-  [structure]="structure"
-  (showDetails)="showDetails($event)"
-></app-card>
+<div (mouseout)="mouseOut()">
+  <app-card
+    *ngFor="let structure of structureList"
+    [structure]="structure"
+    (showDetails)="showDetails($event)"
+    (hover)="handleCardHover($event)"
+  ></app-card>
+</div>
 <app-structure-details
   *ngIf="showStructureDetails"
   [structure]="structure"

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

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Structure } from '../models/structure.model';
 import { GeoJson } from '../map/models/geojson.model';
 @Component({
@@ -9,18 +9,30 @@ import { GeoJson } from '../map/models/geojson.model';
 export class StructureListComponent implements OnInit {
   @Input() public structureList: Structure[];
   @Input() public location: GeoJson;
+  @Output() public displayMapMarkerId: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
+  @Output() public hoverOut: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
   public showStructureDetails = false;
-  public structure: Structure[];
+  public structure: Structure;
   constructor() {}
 
   ngOnInit(): void {}
 
-  public showDetails(event): void {
+  public showDetails(event: Structure): void {
     this.showStructureDetails = true;
     this.structure = event;
+    // this.displayMapMarkerId.emit([this.structure.id]);
   }
 
   public closeDetails(): void {
+    // this.displayMapMarkerId.emit([]);
     this.showStructureDetails = false;
   }
+
+  public handleCardHover(event: Structure): void {
+    this.displayMapMarkerId.emit([event.id]);
+  }
+
+  public mouseOut(): void {
+    this.displayMapMarkerId.emit([undefined]);
+  }
 }

src/styles.scss

@@ -40,10 +40,11 @@ a {
 // Containers
 .content-container {
   margin: 0;
-  padding: 20px 0 30px 0;
+  padding: 30px 0 30px 0;
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
+  height: 100%;
   &.medium-pt {
     padding: 25px 0 30px 0;
   }