From d6b6ee3eb8ed6c9ddc4548a73c1d6abfc88e5d46 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 30 Oct 2020 14:03:40 +0100
Subject: [PATCH] feat: add tooltip handling for structure card hover
---
src/app/home/home.component.html | 9 +++++--
src/app/home/home.component.ts | 5 ++++
src/app/map/components/map.component.scss | 4 ++-
src/app/map/components/map.component.ts | 16 ++++++++++--
src/app/map/services/map.service.ts | 10 +++++---
src/app/models/structure.model.ts | 8 +++---
src/app/models/week.model.ts | 22 +++++++++++++++-
src/app/shared/pipes/day.pipe.ts | 25 +++++++++++++++++++
src/app/shared/pipes/index.ts | 6 +++--
.../components/card/card.component.html | 2 +-
.../components/card/card.component.ts | 5 ++++
.../structure-details.component.html | 12 ++++++---
.../structure-details.component.scss | 9 +++++--
.../structure-list.component.html | 13 ++++++----
.../structure-list.component.ts | 18 ++++++++++---
src/styles.scss | 3 ++-
16 files changed, 136 insertions(+), 31 deletions(-)
create mode 100644 src/app/shared/pipes/day.pipe.ts
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index d7631f523..23b5213eb 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,9 @@
<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>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 2108d3e9e..98cd045c5 100644
--- a/src/app/home/home.component.ts
+++ b/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];
+ }
}
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 95ae40f2b..3e717886a 100644
--- a/src/app/map/components/map.component.scss
+++ b/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;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 7330bf5fd..f57135c71 100644
--- a/src/app/map/components/map.component.ts
+++ b/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);
});
});
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index f13895072..381c51ba8 100644
--- a/src/app/map/services/map.service.ts
+++ b/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;
}
}
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 30503b314..16f2781e6 100644
--- a/src/app/models/structure.model.ts
+++ b/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';
}
}
diff --git a/src/app/models/week.model.ts b/src/app/models/week.model.ts
index 60c023298..b2176e785 100644
--- a/src/app/models/week.model.ts
+++ b/src/app/models/week.model.ts
@@ -1,5 +1,4 @@
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;
+ }
+ }
}
diff --git a/src/app/shared/pipes/day.pipe.ts b/src/app/shared/pipes/day.pipe.ts
new file mode 100644
index 000000000..f8a64598e
--- /dev/null
+++ b/src/app/shared/pipes/day.pipe.ts
@@ -0,0 +1,25 @@
+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;
+ }
+ }
+}
diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts
index 67f3e70cc..a00b240b7 100644
--- a/src/app/shared/pipes/index.ts
+++ b/src/app/shared/pipes/index.ts
@@ -1,4 +1,6 @@
-export {};
+import { DayPipe } from './day.pipe';
+
+export { DayPipe };
// tslint:disable-next-line:variable-name
-export const SharedPipes = [];
+export const SharedPipes = [DayPipe];
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 655aefc8d..4c925b677 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,4 +1,4 @@
-<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">
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index 3869da49d..6c8706c2d 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 09ff7d2af..c2185f875 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -1,4 +1,5 @@
<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>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 0aead2360..7ad3492d4 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/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 {
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 7e6387370..feb355d0a 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,10 +1,13 @@
<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"
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index a7c4f46cf..83acdd4d9 100644
--- a/src/app/structure-list/structure-list.component.ts
+++ b/src/app/structure-list/structure-list.component.ts
@@ -1,4 +1,4 @@
-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]);
+ }
}
diff --git a/src/styles.scss b/src/styles.scss
index 717431913..c100a71c0 100644
--- a/src/styles.scss
+++ b/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;
}
--
GitLab