diff --git a/nginx/dev.conf b/nginx/dev.conf
index 7532671811e83bb55407f8e5442d798727746247..5998c857466cf8d5284d3aceea9e96b15f7e689d 100644
--- a/nginx/dev.conf
+++ b/nginx/dev.conf
@@ -14,9 +14,9 @@ server {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://json-server:3000/api;
}
-
+
# Public api redirect
- location /base-adresse/base-adresse-nationale/streets {
+ location /base-adresse/base-adresse-nationale/streets {
proxy_pass https://passerelle.formulaireextranet.grandlyon.com/base-adresse/base-adresse-nationale/streets;
}
@@ -24,10 +24,13 @@ server {
proxy_pass https://download.data.grandlyon.com/geocoding/photon/api;
}
- location /reverse {
+ location /reverse {
proxy_pass https://api-adresse.data.gouv.fr/reverse;
}
+ location /wfs/grandlyon {
+ proxy_pass https://download.data.grandlyon.com/wfs/grandlyon;
+ }
# REALLY important for JavaScript modules (type="module") to work as expected!!!
location ~ \.js {
diff --git a/proxy.conf.json b/proxy.conf.json
index f6d20c2ac69c72bd5ebe74bfd45d949b48ea80c2..6c9d77bee241bf175a367621922204942b09e1ff 100644
--- a/proxy.conf.json
+++ b/proxy.conf.json
@@ -14,6 +14,12 @@
"changeOrigin": true,
"logLevel": "info"
},
+ "/wfs/grandlyon": {
+ "target": "https://download.data.grandlyon.com",
+ "secure": false,
+ "changeOrigin": true,
+ "logLevel": "info"
+ },
"/reverse": {
"target": "https://api-adresse.data.gouv.fr",
"secure": false,
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1a031a21257b35e59e3155dfc62e6d4a21aa8e98..52a961c6c2cfcf8ae3d4aa8822cf753cdd1ae978 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,9 +3,11 @@ import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
+import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
import { StructureListComponent } from './structure-list/structure-list.component';
const routes: Routes = [
+ { path: 'print', outlet: 'print', children: [{ path: 'structure', component: StructureDetailsComponent }] },
{
path: 'home',
component: HomeComponent,
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 863172c1c5b3a4173954ebbcd8a7fa060e776df1..f4d4b7c94d52798f4b87edb0e1160486c03c25b2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,6 +2,7 @@
<app-header></app-header>
<div class="app-body">
<router-outlet></router-outlet>
+ <router-outlet name="print"></router-outlet>
</div>
<app-footer></app-footer>
</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 25def1602220bc064e11f67c9119f7926c5356fc..54eae011826b429c49877e3ceb093d84ed45e7ce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,13 @@
import { Component } from '@angular/core';
+import { PrintService } from './shared/service/print.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'pamn';
+
+ constructor(public printService: PrintService) {}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 22a9a2020b9e7fd538ad576db38155202cfdd283..f49e4bb521a868341ea506516742e4255eea7f4a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,7 +18,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SearchComponent } from './structure-list/components/search/search.component';
import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
import { StructureOpeningStatusComponent } from './structure-list/components/structure-opening-status/structure-opening-status.component';
-import { ModalOutsideDirective } from './structure-list/services/modalOutside.directive';
import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { AboutComponent } from './about/about.component';
@@ -35,7 +34,6 @@ import { AboutComponent } from './about/about.component';
ModalFilterComponent,
StructureDetailsComponent,
StructureOpeningStatusComponent,
- ModalOutsideDirective,
LegalNoticeComponent,
AboutComponent,
],
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index b438f3aeab19b37195717fadedf03526461c46b1..f48ac61f4fde27d502874d9e8e47dbb09ba12a19 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -51,3 +51,15 @@
display: flex;
align-items: center;
}
+
+@media screen {
+ div {
+ flex-direction: row !important;
+ }
+}
+
+@media print {
+ div {
+ display: none !important;
+ }
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 42cd211f66ec5618a9930e8fa4e1970d7957a66c..045aa764b8794aac3f73ed8b168ec3e6e1c528e5 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
-<div fxLayout="row" fxLayout.lt-sm="column" class="header">
- <div class="logo clickable">
+<div fxLayout="row" class="header hide-on-print">
+ <div class="logo clickable" routerLink="/home">
<div fxLayout="row">
<!-- <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt /> -->
<div fxLayout="column" fxLayoutAlign="center">
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 724e589e8e29a0e0c0c0c3ffb9a039837b8fe1f4..0f02934cc371f7f9806836005e582678722b6cfd 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -15,10 +15,18 @@
padding: 0 20px;
a {
font-style: italic;
- color: $primary-color;
+ color: $grey-2;
&.active {
font-weight: bold;
color: $grey-1;
+ &:before {
+ color: $primary-color;
+ content: '// ';
+ }
+ &:after {
+ color: $primary-color;
+ content: ' //';
+ }
}
}
.right-header {
@@ -29,7 +37,14 @@
.logo {
@include cn-regular-14;
text-align: initial;
+ outline: none;
p {
margin: 0;
}
}
+
+@media print {
+ div {
+ display: none !important;
+ }
+}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 0f2ccf855c892e813002809742931f2a50f794f7..db8ce67263eedc9b6fb2638225526f893a7299c3 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,10 +1,12 @@
<div fxLayout="row" class="content-container">
<app-structure-list
(searchEvent)="getStructures($event)"
+ (loadMoreStructures)="loadMoreStructures()"
[structureList]="structures"
[location]="currentLocation"
(displayMapMarkerId)="setMapMarkerId($event)"
(selectedMarkerId)="setSelectedMarkerId($event)"
+ [selectedStructure]="currentStructure"
class="left-pane"
fxLayout="column"
></app-structure-list>
@@ -12,6 +14,7 @@
[structures]="structures"
[toogleToolTipId]="displayMarkerId"
[selectedMarkerId]="selectedMarkerId"
+ (selectedStructure)="showDetailStructure($event)"
class="right-pane"
></app-map>
</div>
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index e501173f8a4396e1be6c09814793874c8da26f6d..bfa9fd02cfa8fcfc20683307ba925805ecc98d91 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -4,8 +4,7 @@
}
.right-pane {
width: 80%;
- height: 80%;
- padding: 0 40px 40px 40px;
+ padding: 0 40px;
}
.content-container {
height: 100%;
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 2a1d85c1d7b75b2b3f477fbbecd636f0a64344fb..c96c6f15b2e1c9b5837c08df00599c15094aa6ae 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -21,6 +21,10 @@ export class HomeComponent implements OnInit {
public selectedMarkerId: number;
public geolocation = false;
public currentLocation: GeoJson;
+ public pageStructures = 0;
+ public structuresChunked: Structure[][] = [];
+ private chunck = 10;
+ public currentStructure: Structure;
constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
ngOnInit(): void {
@@ -31,23 +35,35 @@ export class HomeComponent implements OnInit {
}
public getStructures(filters: Filter[]): void {
+ if (filters) {
+ this.pageStructures = 0;
+ this.structuresChunked = [];
+ }
this.structureService.getStructures(filters).subscribe((structures) => {
- console.log(filters);
filters ? (structures = this.applyFilters(structures, filters)) : structures;
-
- Promise.all(
- structures.map((structure) => {
- if (this.geolocation) {
- return this.getStructurePosition(structure).then((val) => {
- return this.structureService.updateOpeningStructure(val, DateTime.local());
- });
- } else {
- return this.structureService.updateOpeningStructure(structure, DateTime.local());
+ if (structures) {
+ Promise.all(
+ structures.map((structure) => {
+ if (this.geolocation) {
+ return this.getStructurePosition(structure).then((val) => {
+ return this.structureService.updateOpeningStructure(val, DateTime.local());
+ });
+ } else {
+ return this.structureService.updateOpeningStructure(structure, DateTime.local());
+ }
+ })
+ ).then((structureList) => {
+ structureList = _.sortBy(structureList, ['distance']);
+ if (this.pageStructures == 0) {
+ for (let i = 0; i < structureList.length; i += this.chunck) {
+ this.structuresChunked.push(structureList.slice(i, i + this.chunck));
+ }
}
- })
- ).then((structureList) => {
- this.structures = _.sortBy(structureList, ['distance']);
- });
+ this.structures = this.structuresChunked[0];
+ });
+ } else {
+ this.structures = null;
+ }
});
}
@@ -128,4 +144,16 @@ export class HomeComponent implements OnInit {
public setSelectedMarkerId(id: number): void {
this.selectedMarkerId = id;
}
+
+ public loadMoreStructures(): void {
+ if (this.pageStructures < this.structuresChunked.length - 1) {
+ this.pageStructures++;
+ const newStructures = _.map(this.structuresChunked[this.pageStructures]);
+ this.structures = [...this.structures, ...newStructures];
+ }
+ }
+
+ public showDetailStructure(structure: Structure): void {
+ this.currentStructure = new Structure(structure);
+ }
}
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index fa76e2cc47cfd4efb7de3a9252c13912580eaaf5..9384e8a7b934ad971a673bb327a620509bf21eb9 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -3,19 +3,24 @@
@import '../../../assets/scss/icons';
@import '../../../assets/scss/typography';
@import '../../../assets/scss/shapes';
+@import '../../../assets/scss/buttons';
.map-wrapper {
border-radius: 6px;
@include background-hash;
+ border: 1px solid $grey-4;
}
#map {
- height: calc(100vh - #{$header-height} - #{$footer-height} - 120px);
- width: 100%;
+ height: calc(100vh - #{$header-height} - #{$footer-height} - 87px);
border: 10px solid $white;
border-radius: 6px;
}
+::ng-deep .leaflet-popup-close-button {
+ display: none;
+}
+
::ng-deep .fa-map-marker {
color: $black;
position: absolute;
@@ -55,9 +60,11 @@
stroke-width: unset !important;
}
}
+ margin-top: 0 !important;
+ margin-left: -21px !important;
}
-::ng-deep .leaflet-tooltip {
+::ng-deep .leaflet-popup {
padding: 8px 10px 8px 10px;
border-radius: 6px;
h1 {
@@ -70,9 +77,18 @@
@include cn-regular-16;
margin: 0 0 13px 0;
}
- div {
- align-items: center;
- display: flex;
+ .pop-up {
+ text-align: center;
+ padding-top: 20px;
+
+ button {
+ @include btn-search-filter;
+ @include cn-bold-14;
+ width: 149px;
+ }
+ }
+ span {
+ display: inline-block;
}
}
@@ -84,3 +100,9 @@
margin-right: 10px;
}
}
+
+@media print {
+ .map-wrapper {
+ display: none;
+ }
+}
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 81b35c4554b4d6469b45cac011e72f7cb2e83241..29937bdddf56cc5d01dc6b0a64ff3ef47a87a28d 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,13 +1,34 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { latLng, MapOptions, tileLayer, Map, CRS, TileLayer, LatLngBounds, latLngBounds, Control } from 'leaflet';
+import {
+ Component,
+ EventEmitter,
+ HostListener,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges,
+ ViewChild,
+} from '@angular/core';
+import {
+ latLng,
+ MapOptions,
+ tileLayer,
+ Map,
+ CRS,
+ TileLayer,
+ LatLngBounds,
+ latLngBounds,
+ Marker,
+ layerGroup,
+ polyline,
+} from 'leaflet';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
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';
import { NgxLeafletLocateComponent } from '@runette/ngx-leaflet-locate';
+import * as _ from 'lodash';
@Component({
selector: 'app-map',
@@ -19,6 +40,9 @@ export class MapComponent implements OnChanges {
@Input() public toogleToolTipId: number;
@Input() public selectedMarkerId: number;
@ViewChild(NgxLeafletLocateComponent, { static: false }) locateComponent: NgxLeafletLocateComponent;
+ @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+ private currentStructure: Structure;
+
public map: Map;
public mapOptions: MapOptions;
// Init locate options
@@ -30,13 +54,21 @@ export class MapComponent implements OnChanges {
circlePadding: [5, 5],
};
+ // Add listener on the popup button to show details of structure
+ @HostListener('document:click', ['$event'])
+ public clickout(event): void {
+ if (event.target.classList.contains('btnShowDetails')) {
+ this.selectedStructure.emit(this.currentStructure);
+ }
+ }
+
constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
this.initializeMapOptions();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.structures) {
- this.getStructurePosition();
+ this.handleStructurePosition(changes.structures.previousValue);
}
// Handle map marker tooltip
if (changes.toogleToolTipId && changes.toogleToolTipId.currentValue !== changes.toogleToolTipId.previousValue) {
@@ -59,12 +91,30 @@ export class MapComponent implements OnChanges {
/**
* Get structures positions and add marker corresponding to those positons on the map
*/
- private getStructurePosition(): void {
- this.structures.forEach((element: Structure) => {
+ private handleStructurePosition(previousStructuresValue: Structure[]): void {
+ // If there is more structure than before, append them
+ if (
+ previousStructuresValue &&
+ previousStructuresValue.length > 0 &&
+ previousStructuresValue.length < this.structures.length
+ ) {
+ this.getStructuresPositions(_.differenceWith(this.structures, previousStructuresValue, _.isEqual));
+ } else if (this.structures) {
+ this.map = this.mapService.cleanMap(this.map);
+ this.getStructuresPositions(this.structures);
+ }
+ }
+
+ private getStructuresPositions(structureListe: Structure[]): void {
+ structureListe.forEach((element: Structure) => {
this.getCoord(element.voie).subscribe((coord: GeoJson) => {
this.mapService
.createMarker(coord.geometry.getLon(), coord.geometry.getLat(), element.id, this.buildToolTip(element))
- .addTo(this.map);
+ .addTo(this.map)
+ // store structure before user click on button
+ .on('popupopen', () => {
+ this.currentStructure = element;
+ });
});
});
}
@@ -82,7 +132,6 @@ export class MapComponent implements OnChanges {
cssAvailabilityClass = 'unknown';
}
}
-
return (
'<h1>' +
structure.nomDeVotreStructure +
@@ -94,7 +143,7 @@ export class MapComponent implements OnChanges {
cssAvailabilityClass +
'"></span><span>' +
structure.openDisplay() +
- '</span></div>'
+ '</span></div><div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>'
);
}
@@ -139,7 +188,10 @@ export class MapComponent implements OnChanges {
width: 256,
height: 256,
};
+ // Init mdm
+ this.initMDMLayer();
// Init WMS service with param from data.grandlyon.com
+ layerGroup();
const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://carto.com/attributions">CARTO</a>',
maxZoom: 19,
@@ -155,6 +207,14 @@ export class MapComponent implements OnChanges {
};
}
+ private initMDMLayer(): void {
+ this.geoJsonService.getMDMGeoJson().subscribe((res) => {
+ res.forEach((mdm) => {
+ this.mapService.createMDMMarker(mdm.geometry.getLon(), mdm.geometry.getLat()).addTo(this.map);
+ });
+ });
+ }
+
/**
* Toogle all tooltips given in parameters
*/
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 822424dace5870c9ea4c7955776d038bc0294777..e5b7ebdfe0713d7ba92d4f8089b031b3d66f8d5d 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,30 +1,69 @@
import { Injectable } from '@angular/core';
-import { divIcon } from 'leaflet';
-import { icon, Marker, Map } from 'leaflet';
+import { DivIcon, divIcon, Map } from 'leaflet';
+import { Marker } from 'leaflet';
@Injectable({
providedIn: 'root',
})
export class MapService {
private static markersList = {};
+ public markerIconHover = divIcon({
+ className: null,
+ html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ });
+ public markerIcon = divIcon({
+ className: null,
+ html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ });
+ public markerIconMdm = divIcon({
+ className: null,
+ html: '<svg width="19" height="24"><use xlink:href="assets/ico/sprite.svg#mdm"></use></svg>',
+ iconSize: [19, 24],
+ iconAnchor: [19, 24],
+ });
+ public markerIconMdmHover = divIcon({
+ className: null,
+ html: '<svg width="19" height="24"><use xlink:href="assets/ico/sprite.svg#mdm-hover"></use></svg>',
+ iconSize: [19, 24],
+ iconAnchor: [19, 24],
+ });
constructor() {}
public createMarker(lat: number, lon: number, id: number, tooltip?: string): Marker {
- const markerIcon = divIcon({
- className: null,
- html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
- iconSize: [35, 41],
- iconAnchor: [13, 41],
+ const marker = new Marker([lat, lon], { icon: this.markerIcon });
+ marker.on('mouseclick', (evt) => {
+ evt.target.openPopup();
});
- const marker = new Marker([lat, lon], { icon: markerIcon });
if (tooltip) {
- marker.bindTooltip(tooltip, {
- opacity: 1,
- direction: 'top',
+ marker.bindPopup(tooltip, {
+ autoPan: false,
});
}
MapService.markersList[id] = marker;
+ return this.bindMouseEventOnMarker(marker, this.markerIcon, this.markerIconHover);
+ }
+
+ public createMDMMarker(lat: number, lon: number): Marker {
+ const marker = new Marker([lat, lon], { icon: this.markerIconMdm, attribution: 'mdm' });
+
+ return this.bindMouseEventOnMarker(marker, this.markerIconMdm, this.markerIconMdmHover);
+ }
+
+ private bindMouseEventOnMarker(marker: Marker, regularIcon: DivIcon, hoverIcon: DivIcon): Marker {
+ marker.on('mouseover', (e) => {
+ if (marker.getIcon() === regularIcon) {
+ marker.setIcon(hoverIcon);
+ }
+ });
+
+ marker.on('mouseout', (e) => {
+ marker.setIcon(regularIcon);
+ });
return marker;
}
@@ -34,7 +73,7 @@ export class MapService {
*/
public toogleToolTip(id: number): void {
if (id) {
- this.getMarker(id).toggleTooltip();
+ this.getMarker(id).togglePopup();
}
}
@@ -54,13 +93,7 @@ export class MapService {
*/
public setSelectedMarker(id: number): void {
if (id) {
- const markerIcon = divIcon({
- className: null,
- html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
- iconSize: [35, 41],
- iconAnchor: [13, 41],
- });
- this.getMarker(id).setIcon(markerIcon);
+ this.getMarker(id).setIcon(this.markerIconHover);
}
}
@@ -87,4 +120,16 @@ export class MapService {
public getMarker(id: number): Marker {
return MapService.markersList[id] ? MapService.markersList[id] : null;
}
+
+ public cleanMap(map: Map): Map {
+ MapService.markersList = {};
+ if (map) {
+ map.eachLayer((layer) => {
+ if (layer instanceof Marker && layer.options.attribution !== 'mdm') {
+ map.removeLayer(layer);
+ }
+ });
+ }
+ return map;
+ }
}
diff --git a/src/app/services/geojson.service.ts b/src/app/services/geojson.service.ts
index 39aed758f5cf06e5834199bb4bde3df374559153..36c0f3f56210c9b619bfe9df721c5ce01a2496c9 100644
--- a/src/app/services/geojson.service.ts
+++ b/src/app/services/geojson.service.ts
@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Address } from '../models/address.model';
import { GeoJson } from '../map/models/geojson.model';
+import * as _ from 'lodash';
@Injectable({
providedIn: 'root',
@@ -31,6 +32,27 @@ export class GeojsonService {
.pipe(map((data: { features: any[] }) => new GeoJson(data.features[0])));
}
+ /**
+ * Parse object to geojosn
+ * @param data string data
+ */
+ private parseToGeoJson(data: string): GeoJson {
+ return new GeoJson(data);
+ }
+
+ /**
+ * Retrive an address by geolocation
+ * @param idVoie Number
+ */
+ public getMDMGeoJson(): Observable<GeoJson[]> {
+ return this.http
+ .get(
+ '/wfs/grandlyon' +
+ '?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=ter_territoire.maison_de_la_metropole&outputFormat=application/json; subtype=geojson&SRSNAME=EPSG:4171&startIndex=0'
+ )
+ .pipe(map((data: { features: any[] }) => _.map(data.features, this.parseToGeoJson)));
+ }
+
/**
* Get GeoLocation with an address
* @param address Address
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..5b059dee959364d697fb6dabbe58e52ca0e63c43
--- /dev/null
+++ b/src/app/shared/components/button/button.component.html
@@ -0,0 +1,19 @@
+<ng-container *ngIf="style === 'buttonWithHash'">
+ <button class="btnSearch" type="{{ type }}" (click)="doAction()">
+ <div *ngIf="!iconBtn" class="searchButton">{{ text }}</div>
+ <div
+ *ngIf="iconBtn"
+ fxLayout="row center"
+ class="searchButton withIcon"
+ fxLayoutAlign="space-between center"
+ fxLayoutGap="13px"
+ >
+ <app-svg-icon style="height: 100%" [type]="'ico'" [iconClass]="'icon-32'" [icon]="iconBtn"></app-svg-icon>
+ {{ text }}
+ </div>
+ </button>
+</ng-container>
+
+<ng-container *ngIf="style === 'button'">
+ <button class="btn-search-filter" type="{{ type }}">{{ text }}</button>
+</ng-container>
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6506693b2e69be5ada4de9237f274d9d5755e2e9
--- /dev/null
+++ b/src/app/shared/components/button/button.component.scss
@@ -0,0 +1,74 @@
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/shapes';
+
+@mixin btn-bold {
+ @include cn-bold-16;
+ line-height: 18px;
+}
+@mixin btn-bold-underline {
+ @include btn-bold;
+ text-decoration: underline;
+}
+@mixin btn-regular {
+ @include cn-regular-16;
+ line-height: 19px;
+}
+
+button {
+ outline: none;
+ border-radius: 4px;
+ cursor: pointer;
+ border: 1px solid;
+}
+.btnSearch {
+ @include background-hash;
+ border-color: $grey-4;
+ padding: 0 0 4px 5px;
+ &:hover {
+ border-color: $grey-6;
+ .searchButton {
+ color: $grey-3 !important;
+ }
+ }
+ &:focus {
+ border-color: $blue-hover;
+ }
+ &:active {
+ background: none;
+ border-color: $grey-6;
+ }
+ .searchButton {
+ background: $white;
+ height: 31px;
+ color: $primary-color;
+ padding: 3px 16px 3px 16px;
+ display: table-cell;
+ vertical-align: middle;
+ @include btn-bold;
+ &.withIcon {
+ color: $black;
+ height: 36px;
+ }
+ }
+}
+.btn-search-filter {
+ background: $secondary-color;
+ height: 40px;
+ color: $white;
+ padding: 4px 37px 4px 37px;
+ border-color: transparent;
+ @include btn-bold;
+ line-break: 18px;
+ &:hover {
+ background-color: $blue-hover;
+ }
+ &:focus {
+ background-color: $white;
+ border-color: $secondary-color;
+ color: $secondary-color;
+ }
+ &:active {
+ background-color: $blue-active;
+ }
+}
diff --git a/src/app/shared/components/button/button.component.spec.ts b/src/app/shared/components/button/button.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b2d1343741e4a367e4dce58f1549fc88dd4b29d
--- /dev/null
+++ b/src/app/shared/components/button/button.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('button', () => {
+ let component: ButtonComponent;
+ let fixture: ComponentFixture<ButtonComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ButtonComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f88fda9054946f1e78cfdb15e9d496493083015
--- /dev/null
+++ b/src/app/shared/components/button/button.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-button',
+ templateUrl: './button.component.html',
+ styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent implements OnInit {
+ @Input() public style: string;
+ @Input() public text: string;
+ @Input() public type: string;
+ @Input() public iconBtn: string;
+ @Output() public action = new EventEmitter();
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ public doAction(): void {
+ console.log('in do action');
+ this.action.emit();
+ }
+}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index ae8dcc9b9cbbd9db5d243cf0428f4f6498db533d..c16e176b8a231207116e9055974735f25a43259e 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -1,8 +1,10 @@
+import { ButtonComponent } from './button/button.component';
import { LogoCardComponent } from './logo-card/logo-card.component';
+import { ModalComponent } from './modal/modal.component';
import { SvgIconComponent } from './svg-icon/svg-icon.component';
// tslint:disable-next-line: max-line-length
-export { LogoCardComponent, SvgIconComponent };
+export { LogoCardComponent, SvgIconComponent, ModalComponent, ButtonComponent };
// tslint:disable-next-line:variable-name
-export const SharedComponents = [LogoCardComponent, SvgIconComponent];
+export const SharedComponents = [LogoCardComponent, SvgIconComponent, ModalComponent, ButtonComponent];
diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..44094a5b8ae11d23fda1f3e476ac33543a2b7ed0
--- /dev/null
+++ b/src/app/shared/components/modal/modal.component.html
@@ -0,0 +1,15 @@
+<div class="cModal" [ngClass]="openned ? 'oModal' : ''">
+ <div (clickOutside)="closeModal()">
+ <p>{{ content }}</p>
+ <footer class="footer">
+ <a
+ (click)="closeModal()"
+ href="https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure/"
+ tabindex="0"
+ target="_blank"
+ rel="noreferrer noopener"
+ >Continuer vers le formulaire</a
+ >
+ </footer>
+ </div>
+</div>
diff --git a/src/app/shared/components/modal/modal.component.scss b/src/app/shared/components/modal/modal.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ec0dd8d35e72127edd81d971224dccdd67a95067
--- /dev/null
+++ b/src/app/shared/components/modal/modal.component.scss
@@ -0,0 +1,38 @@
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/buttons';
+@import '../../../../assets/scss/z-index';
+@import '../../../../assets/scss/hyperlink';
+.cModal {
+ position: fixed;
+ z-index: $modal-add-structure-z-index;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: $modal-background;
+ display: none;
+}
+.cModal > div {
+ max-width: 450px;
+ position: relative;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: $white;
+ text-align: center;
+ border-radius: 4px;
+ @include cn-bold-16;
+ p {
+ padding: 30px 48px 0 40px;
+ }
+}
+.oModal {
+ display: block;
+}
+.footer {
+ a {
+ @include hyperlink;
+ }
+ padding: 28px;
+}
diff --git a/src/app/shared/components/modal/modal.component.spec.ts b/src/app/shared/components/modal/modal.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f64b3e86881e22f2d2378db6bf6cfa2954e4c13
--- /dev/null
+++ b/src/app/shared/components/modal/modal.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+ let component: ModalComponent;
+ let fixture: ComponentFixture<ModalComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ModalComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/modal/modal.component.ts b/src/app/shared/components/modal/modal.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4a3566e38eea410d444a0b1a3518ec19c620b7a
--- /dev/null
+++ b/src/app/shared/components/modal/modal.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-modal',
+ templateUrl: './modal.component.html',
+ styleUrls: ['./modal.component.scss'],
+})
+export class ModalComponent implements OnInit {
+ constructor() {}
+
+ @Input() public openned: boolean;
+ @Input() public content: string;
+ @Output() closed = new EventEmitter();
+ ngOnInit(): void {}
+
+ public closeModal(): void {
+ this.closed.emit();
+ }
+}
diff --git a/src/app/shared/directives/index.ts b/src/app/shared/directives/index.ts
index 9cee80e98a91ceba14c2c0c1356f669d0d347793..6f873009890cff2f656316fadce624731b672a4e 100644
--- a/src/app/shared/directives/index.ts
+++ b/src/app/shared/directives/index.ts
@@ -1,4 +1,6 @@
-export {};
+import { ModalOutsideDirective } from './modalOutside.directive';
+
+export { ModalOutsideDirective };
// tslint:disable-next-line:variable-name
-export const SharedDirectives = [];
+export const SharedDirectives = [ModalOutsideDirective];
diff --git a/src/app/structure-list/services/modalOutside.directive.ts b/src/app/shared/directives/modalOutside.directive.ts
similarity index 100%
rename from src/app/structure-list/services/modalOutside.directive.ts
rename to src/app/shared/directives/modalOutside.directive.ts
diff --git a/src/app/shared/service/print.service.ts b/src/app/shared/service/print.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..101126c77ca3d0d2f6f9e5dabdebf87692a7f30a
--- /dev/null
+++ b/src/app/shared/service/print.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Structure } from '../../models/structure.model';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class PrintService {
+ public isPrinting = false;
+ public structure: Structure;
+
+ constructor(private router: Router) {}
+
+ public printDocument(documentName: string, structure: Structure): void {
+ this.isPrinting = true;
+ this.structure = structure;
+ this.router.navigate([
+ '/',
+ {
+ outlets: {
+ print: ['print', documentName],
+ },
+ },
+ ]);
+ }
+
+ public onDataReady(): void {
+ setTimeout(() => {
+ window.print();
+ this.isPrinting = false;
+ this.router.navigate([{ outlets: { print: null } }]);
+ });
+ }
+}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 4c925b67794639bfb0f93cfd1c93862950c5ae19..4848aad295a9a4baeb063b113fcc0c730ab44800 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -3,6 +3,7 @@
<div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
<span class="typeStructure">{{ structure.typeDeStructure }}</span>
+
<div
*ngIf="structure.distance"
class="distanceStructure"
@@ -11,29 +12,7 @@
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="center center">
- <div class="ico-marker-pin-sm"></div>
- <svg
- *ngFor="let i of [].constructor(structure.getDistanceRange())"
- width="35"
- height="7"
- viewBox="0 0 35 7"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M1.5 3.61905C3.73256 5.04762 3.73256 6 10.8023 6C18.2442 6 18.9884 1 24.5698 1C30.1512 1 31.2674 1.95238 33.5 3.38095"
- stroke="#828282"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-dasharray="1 4"
- />
- </svg>
- <div class="ico-close">
- <div class="mdiv">
- <div class="md"></div>
- </div>
- </div>
+ <span class="indicatorDistance" *ngFor="let i of [].constructor(structure.getDistanceRange())"></span>
</div>
<div>
{{ this.formatDistance() }}
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index b9682472abf591071f67faf654aa2b03ec623de1..aefdd8ed88bbe7427cbfec8c1e4948592b3dafa7 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -2,6 +2,22 @@
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
+.indicatorDistance {
+ width: 34px;
+ height: 1px;
+ background: $grey-3;
+ border-radius: 1px;
+ &:before {
+ height: 7px;
+ width: 33px;
+ content: '';
+ margin-top: -3px;
+ display: block;
+ border-radius: 1px;
+ border-left: 1px solid $grey-3;
+ border-right: 1px solid $grey-3;
+ }
+}
.structure {
padding: 12px 0 12px 0;
border-bottom: 1px dashed $grey !important;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.html b/src/app/structure-list/components/modal-filter/modal-filter.component.html
index e09cabe48ca53f996ee85f1b5af6d9b336544530..84740d349587af4e71c2601a88f8d56ca2721aa0 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.html
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.html
@@ -34,8 +34,8 @@
</div>
</div>
<div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
- <a tabindex="0" (click)="clearFilters()">Effacer</a>
- <button type="button" (click)="emitModules(checkedModules)">Appliquer</button>
+ <a (click)="clearFilters()" tabindex="0">Effacer</a>
+ <app-button [style]="'button'" [link]="" [text]="'Appliquer'" (click)="emitModules(checkedModules)"></app-button>
</div>
</div>
</div>
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index 7be709e3a09942051e6855f90f844fcfc204ecd6..96e21d4c81c9bb104262cffe426105a1a9b40248 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -3,7 +3,7 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/shapes';
-@import '../../../../assets/scss/buttons';
+@import '../../../../assets/scss/hyperlink';
.modaltraining {
@media #{$desktop} {
@@ -22,12 +22,12 @@
max-height: 648px;
max-width: 754px;
width: 94%;
- border-radius: 11px;
z-index: 1001 !important;
position: absolute;
border-radius: 6px;
margin-top: 3.5px;
@include background-hash;
+ border: 1px solid $grey-4;
::-webkit-scrollbar {
width: 16px;
}
@@ -95,38 +95,9 @@
}
.footer {
margin: 0px 20px 16px 0;
- a {
- @include btn-search-addStructure;
- border: 1px solid transparent;
- padding: 8px 8px 6px 8px;
-
- &:hover {
- color: $blue-hover;
- }
- &:focus {
- color: $secondary-color;
- border-color: $secondary-color;
- border-radius: 4px;
- }
- &:active {
- border: none;
- color: $blue-active;
- }
- }
height: 32px;
- button {
- @include btn-search-filter;
- &:hover {
- background-color: $blue-hover;
- }
- &:focus {
- background-color: $white;
- border-color: $secondary-color;
- color: $secondary-color;
- }
- &:active {
- background-color: $blue-active;
- }
- }
}
}
+a {
+ @include hyperlink;
+}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 1a8539fc30d9dfeed94ca3aa1aedc2a22e8624ae..35639e453e6c32c81cf6f350bb9464041165cfc8 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -12,56 +12,55 @@
>
<div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
<input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
- <button type="button" (click)="clearInput()" class="icon close"><div class="ico-close-search"></div></button>
-
+ <button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
<span class="separator"></span>
- <button class="icon pin" type="button" (click)="locateMe()"><div class="ico-pin-search"></div></button>
+ <button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
</div>
-
- <button class="btnSearch" type="submit">
- <div class="searchButton">Rechercher</div>
- </button>
+ <app-button [style]="'buttonWithHash'" [text]="'Rechercher'" [type]="'submit'"></app-button>
</form>
</div>
<div (clickOutside)="closeModal()">
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
<button
+ class="btn-filter"
type="button"
+ fxLayout="row"
[ngClass]="{
selected: modalTypeOpened === TypeModal.accompaniment,
containCheckedFilters: numberAccompanimentChecked
}"
- (click)="openModal(TypeModal.accompaniment)"
- fxLayout="row"
fxLayoutAlign="space-between center"
+ (click)="openModal(TypeModal.accompaniment)"
>
- <span class="btnText">Accompagnement</span>
+ <span>Accompagnement</span>
<div class="arrow"></div>
</button>
<button
+ class="btn-filter"
type="button"
+ fxLayout="row"
[ngClass]="{
selected: modalTypeOpened === TypeModal.training,
containCheckedFilters: numberTrainingChecked
}"
- (click)="openModal(TypeModal.training)"
- fxLayout="row"
fxLayoutAlign="space-between center"
+ (click)="openModal(TypeModal.training)"
>
- <span class="btnText">Formations</span>
+ <span>Formations</span>
<div class="arrow"></div>
</button>
<button
+ class="btn-filter"
type="button"
+ fxLayout="row"
[ngClass]="{
selected: modalTypeOpened === TypeModal.moreFilters,
containCheckedFilters: numberMoreFiltersChecked
}"
- (click)="openModal(TypeModal.moreFilters)"
- fxLayout="row"
fxLayoutAlign="space-between center"
+ (click)="openModal(TypeModal.moreFilters)"
>
- <span class="btnText">Plus de filtres</span>
+ <span>Plus de filtres</span>
<div class="arrow"></div>
</button>
</div>
@@ -91,7 +90,10 @@
</label>
</div>
</div>
- <a href="https://services.formulaireextranet.grandlyon.com/saisie-fiche-structure/" target="_blank"
- >Ajouter une structure</a
- >
+ <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
</div>
+<app-modal
+ [openned]="isConfirmationModalOpen"
+ [content]="confirmationModalContent"
+ (closed)="closeConfirmationModal()"
+></app-modal>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 4f2d6c8e59363dbea201ca76138de20447c4708d..1c2a86a42f51e4932ec27750a7764d3caba77ee1 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -1,10 +1,7 @@
-@import '../../../../assets/scss/icons';
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
-@import '../../../../assets/scss/breakpoint';
-@import '../../../../assets/scss/shapes';
-@import '../../../../assets/scss/buttons';
@import '../../../../assets/scss/inputs';
+@import '../../../../assets/scss/hyperlink';
.header {
.title {
@@ -23,41 +20,6 @@
@include input-search;
}
.searchSection {
- .icon {
- background-color: transparent;
- border: 1px solid transparent;
- outline: none;
- cursor: pointer;
- &.pin {
- padding: 4px 6px 8px 6px;
- &:hover {
- .ico-pin-search {
- background-color: $blue-hover;
- }
- }
- &:focus {
- border-color: $secondary-color;
- .ico-pin-search {
- background-color: $secondary-color;
- }
- }
- &:active {
- border-color: transparent;
- .ico-pin-search {
- background-color: $blue-active;
- }
- }
- }
- &.close {
- padding: 4px 7px 10px 5px;
- &:focus {
- border-color: $secondary-color;
- }
- &:active {
- border-color: transparent;
- }
- }
- }
.separator {
height: 100%;
width: 2px;
@@ -71,42 +33,32 @@
background-color: $white;
height: 40px;
}
- .btnSearch {
- @include background-hash;
- border: 1px solid $grey-4;
- border-radius: 4px;
- padding: 0 0 4px 5px;
- outline: none;
- &:hover {
- border-color: $grey-6;
- .searchButton {
- color: $grey-3;
- }
- }
- &:focus {
- border-color: $blue-hover;
- }
- &:active {
- background: none;
- border-color: $grey-6;
- }
- .searchButton {
- border-radius: 4px;
- @include btn-search;
- }
- }
}
.btnSection {
padding: 16px 0 0px 0;
button {
- @include btn-filter;
+ background: $white;
+ height: 40px;
+ width: 190px;
+ border: 1px solid $grey-4;
+ padding: 3px 16px 3px 16px;
+ outline: none;
+ border-radius: 4px;
+ cursor: pointer;
+ @include btn-normal;
+ .arrow {
+ background-color: transparent;
+ border-bottom: 1px solid $grey-2;
+ border-right: 1px solid $grey-2;
+ transform: translateY(-25%) rotate(45deg);
+ margin: 0 5px 0 10px;
+ height: 7px;
+ width: 7px;
+ }
&:focus {
- border-color: $secondary-color;
+ border-color: $blue-hover;
}
}
- .containCheckedFilters {
- border-color: $secondary-color;
- }
.selected {
border-color: $primary-color !important;
color: inherit;
@@ -120,14 +72,8 @@
width: 7px;
}
}
- .arrow {
- background-color: transparent;
- border-bottom: 1px solid $grey-2;
- border-right: 1px solid $grey-2;
- transform: translateY(-25%) rotate(45deg);
- margin: 0 5px 0 10px;
- height: 7px;
- width: 7px;
+ .containCheckedFilters {
+ border-color: $secondary-color;
}
}
}
@@ -135,22 +81,42 @@
.footerSearchSection {
margin: 8px 0px 8px 0px;
height: 40px;
- a {
- @include btn-search-addStructure;
- border: 1px solid transparent;
- padding: 8px 8px 6px 8px;
+}
+.icon {
+ background-color: transparent;
+ border: 1px solid transparent;
+ outline: none;
+ cursor: pointer;
+ &.pin {
+ padding: 4px 6px 8px 6px;
&:hover {
- color: $blue-hover;
+ .ico-pin-search {
+ background-color: $blue-hover;
+ }
}
&:focus {
- color: $secondary-color;
border-color: $secondary-color;
- border-radius: 4px;
+ .ico-pin-search {
+ background-color: $secondary-color;
+ }
}
&:active {
- border: none;
- color: $blue-active;
+ border-color: transparent;
+ .ico-pin-search {
+ background-color: $blue-active;
+ }
}
}
+ &.close {
+ &:focus {
+ border-color: $secondary-color;
+ }
+ &:active {
+ border-color: transparent;
+ }
+ }
+}
+a {
+ @include hyperlink;
}
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 414dc2df46c39edba8574b53c1b82303f6890fc7..39a0f9eaafc65cfa68f429eecf5a6c1f9b2bcc46 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -36,6 +36,11 @@ export class SearchComponent implements OnInit {
public numberAccompanimentChecked = 0;
public numberMoreFiltersChecked = 0;
+ // Modal confirmation variable
+ public isConfirmationModalOpen = false;
+ public confirmationModalContent =
+ 'Afin d’ajouter votre structure,vous allez être redirigé vers le formulaire Grand Lyon à remplir.';
+
ngOnInit(): void {
// Will store the different categories
this.categories = [];
@@ -216,4 +221,10 @@ export class SearchComponent implements OnInit {
);
}
}
+ public openConfirmationModal(): void {
+ this.isConfirmationModalOpen = true;
+ }
+ public closeConfirmationModal(): void {
+ this.isConfirmationModalOpen = false;
+ }
}
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 742bd4ac926bda6564c11347a161036c1eaf7718..c81d453cb131c529697b68296e2c593befc58328 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,15 +1,33 @@
<div class="structrue-details-container" *ngIf="structure">
<!-- Header info -->
<div fxLayout="row" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
- <em class="ic-arrow-left clickable" (click)="close()"></em>
+ <em class="ic-arrow-left clickable hide-on-print" (click)="close()"></em>
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
- <div fxLayout="column" fxLayoutAlign="center">
- <h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
- <h3>{{ structure.typeDeStructure }}</h3>
+ <div fxLayout="row" fxLayoutAlign="space-between">
+ <div fxLayout="column center">
+ <h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
+ <h3>{{ structure.typeDeStructure }}</h3>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="end">
+ <app-button
+ class="hide-on-print"
+ [type]="'button'"
+ [style]="'buttonWithHash'"
+ [text]="'Imprimer'"
+ [iconBtn]="'print'"
+ (action)="print()"
+ ></app-button>
+ </div>
</div>
- <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
<div fxLayout="row">
<div fxLayout="column" fxFlex="60%">
+ <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+ <app-structure-opening-status
+ class="hide-on-print"
+ [structure]="structure"
+ [isCalledByDetails]="true"
+ ></app-structure-opening-status>
+ </div>
<div *ngIf="structure.voie" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'adress'"></app-svg-icon>
<p>{{ structure.n }} {{ structure.address }}</p>
@@ -28,6 +46,10 @@
<app-svg-icon [type]="'ico'" [icon]="'email'"></app-svg-icon>
<a [href]="'mailto:' + structure.courriel">{{ structure.courriel }}</a>
</div>
+ <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+ <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
+ <p>Mise-Ã -jour le {{ structure.derniereModification | date: 'shortDate' }}</p>
+ </div>
</div>
</div>
</div>
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 5ece631a00393a2eae3ed865451a148398e3447b..df8f2159806f789a8ee7441a0176bacdc3a30576 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
@@ -58,3 +58,22 @@ a {
margin-top: 9px;
margin-bottom: 9px;
}
+
+@media print {
+ .structrue-details-container {
+ background-color: unset;
+ z-index: unset;
+ position: unset;
+ top: unset;
+ left: unset;
+ max-width: unset;
+ width: unset;
+ height: unset;
+ padding: unset;
+ overflow: hidden;
+ }
+
+ .hide-on-print {
+ display: none !important;
+ }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 26bda928a07623c386d9d122c09390272c312c5b..995d148ac0cef7c5f5d56353fe8e5c7ec8c5f1bd 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -5,6 +5,8 @@ import { Category } from '../../models/category.model';
import { AccessModality } from '../../enum/access-modality.enum';
import { SearchService } from '../../services/search.service';
import * as _ from 'lodash';
+import { ActivatedRoute } from '@angular/router';
+import { PrintService } from '../../../shared/service/print.service';
@Component({
selector: 'app-structure-details',
templateUrl: './structure-details.component.html',
@@ -19,8 +21,16 @@ export class StructureDetailsComponent implements OnInit {
public accessRightsReferentiel: Category;
public baseSkills: Module[];
public accessRights: Module[];
+ public printMode = false;
- constructor(private searchService: SearchService) {}
+ constructor(route: ActivatedRoute, private printService: PrintService, private searchService: SearchService) {
+ route.url.subscribe((url) => {
+ if (url[0].path === 'structure') {
+ this.structure = this.printService.structure;
+ this.printMode = true;
+ }
+ });
+ }
ngOnInit(): void {
this.searchService.getCategoriesTraining().subscribe((referentiels) => {
@@ -32,6 +42,9 @@ export class StructureDetailsComponent implements OnInit {
}
});
this.setServiceCategories();
+ if (this.printMode) {
+ this.printService.onDataReady();
+ }
});
}
@@ -39,12 +52,18 @@ export class StructureDetailsComponent implements OnInit {
this.closeDetails.emit(true);
}
+ public print(): void {
+ this.printService.printDocument('structure', this.structure);
+ }
+
public getAccessIcon(accessModality: AccessModality): string {
switch (accessModality) {
case AccessModality.free:
return 'group';
case AccessModality.meeting:
return 'calendar';
+ case AccessModality.meetingOnly:
+ return 'calendar';
case AccessModality.numeric:
return 'tel';
default:
diff --git a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.html b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.html
index 13e779d1b605a7f10e18668a8658e08b72873e4b..e4be2e113a8801a29791adf78d1e5ac1a7ba242d 100644
--- a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.html
+++ b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.html
@@ -1,7 +1,13 @@
-<div class="statusStructure" fxLayout="row" fxLayoutAlign="start center" *ngIf="structure">
+<div
+ class="statusStructure"
+ *ngIf="structure"
+ [class]="isCalledByDetails ? 'details' : ''"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+>
<div>
<span *ngIf="structure.isOpen; else closed" class="ico-dot-available"></span>
- <span>{{ structure.openDisplay() }}</span>
+ <span class="text">{{ structure.openDisplay() }}</span>
</div>
<ng-template #closed>
<span *ngIf="structure.openedOn.day; else unkown" class="ico-dot-unavailable"></span>
diff --git a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.scss b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.scss
index c4855a912d105ec405b0afa7e954a4112b47c5cb..f25bb4708b77947af128c6c97e18c8627a77dc1d 100644
--- a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.scss
+++ b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.scss
@@ -8,3 +8,15 @@
display: inline-block;
}
}
+.details {
+ span {
+ margin-right: 12px;
+ padding: 1px;
+ margin-left: 5px;
+ @include cn-regular-16;
+ }
+ .text {
+ margin-top: 9px;
+ margin-bottom: 9px;
+ }
+}
diff --git a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.ts b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.ts
index c2fe6417698033a5a05999f2a3fa05af1240225f..2c1e0afa7e0ac0b36e27a7dec2088cc956812c6a 100644
--- a/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.ts
+++ b/src/app/structure-list/components/structure-opening-status/structure-opening-status.component.ts
@@ -8,6 +8,7 @@ import { Structure } from '../../../models/structure.model';
})
export class StructureOpeningStatusComponent implements OnInit {
@Input() public structure: Structure;
+ @Input() public isCalledByDetails: boolean;
constructor() {}
diff --git a/src/app/structure-list/enum/access-modality.enum.ts b/src/app/structure-list/enum/access-modality.enum.ts
index 7b9a62f3232b76b0be26ef856a9a25de101e553f..684da963fc94c28f60b4a7f101666bb147ed08cf 100644
--- a/src/app/structure-list/enum/access-modality.enum.ts
+++ b/src/app/structure-list/enum/access-modality.enum.ts
@@ -1,5 +1,6 @@
export enum AccessModality {
free = 'Accès libre',
numeric = 'Téléphone / Visio',
- meeting = 'Uniquement sur RDV',
+ meetingOnly = 'Uniquement sur RDV',
+ meeting = 'Sur RDV',
}
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index cf88f4479d2217165b4b6337f1e2e63f8b75c05b..27a1c1029a0a1c0343097fe6f243a5641cabcff8 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,9 +1,11 @@
-<div class="topBlock">
+<div class="topBlock hide-on-print">
<app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
</div>
-<div class="nbStructuresLabel">{{ structureList.length }} structure{{ structureList.length > 1 ? 's' : '' }}</div>
+<div class="nbStructuresLabel hide-on-print">
+ {{ structureList ? structureList.length : '0' }} structure{{ structureList && structureList.length > 1 ? 's' : '' }}
+</div>
-<div class="listCard" (mouseout)="mouseOut()">
+<div (scroll)="onScrollDown($event)" class="listCard" (mouseout)="mouseOut()">
<app-card
*ngFor="let structure of structureList"
[structure]="structure"
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index b619da552a6d813ad91cec12773e16be18da7683..e95a3c4efca433a7b6e9b79fa5ef779fb7fb87f9 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -13,10 +13,19 @@
margin: 0 16px;
}
.listCard {
- overflow-y: scroll;
overflow-y: overlay;
padding: 0 25px;
}
.topBlock {
padding: 0 25px;
}
+
+@media print {
+ .listCard {
+ display: none;
+ }
+
+ .hide-on-print {
+ display: none !important;
+ }
+}
diff --git a/src/app/structure-list/structure-list.component.ts b/src/app/structure-list/structure-list.component.ts
index 1a849b45becdd23db725f0ba451244cae03749ea..33f3417b37517218ddcdf1a67698c6821043adf9 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, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
import { Filter } from './models/filter.model';
import { Structure } from '../models/structure.model';
import { GeoJson } from '../map/models/geojson.model';
@@ -7,19 +7,24 @@ import { GeoJson } from '../map/models/geojson.model';
templateUrl: './structure-list.component.html',
styleUrls: ['./structure-list.component.scss'],
})
-export class StructureListComponent implements OnInit {
+export class StructureListComponent implements OnChanges {
@Input() public structureList: Structure[];
@Output() searchEvent = new EventEmitter();
@Input() public location: GeoJson;
+ @Input() public selectedStructure: Structure = new Structure();
@Output() public displayMapMarkerId: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
@Output() public hoverOut: EventEmitter<Array<number>> = new EventEmitter<Array<number>>();
@Output() public selectedMarkerId: EventEmitter<number> = new EventEmitter<number>();
+ @Output() loadMoreStructures = new EventEmitter();
public showStructureDetails = false;
public structure: Structure;
constructor() {}
- ngOnInit(): void {}
-
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.selectedStructure && this.selectedStructure) {
+ this.showDetails(this.selectedStructure);
+ }
+ }
public fetchResults(filters: Filter[]): void {
this.searchEvent.emit(filters);
}
@@ -41,4 +46,13 @@ export class StructureListComponent implements OnInit {
public mouseOut(): void {
this.displayMapMarkerId.emit([undefined]);
}
+
+ public onScrollDown(event): void {
+ if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
+ console.log('loading...');
+ }
+ if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 50) {
+ this.loadMoreStructures.emit();
+ }
+ }
}
diff --git a/src/assets/ico/MDM.svg b/src/assets/ico/MDM.svg
new file mode 100644
index 0000000000000000000000000000000000000000..28a5a32c1e2df2fbf3c79cfc350cbb7fa683f3f8
--- /dev/null
+++ b/src/assets/ico/MDM.svg
@@ -0,0 +1,14 @@
+<svg width="64" height="81" viewBox="0 0 64 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00001 78.0479L4.00001 79.0479H5.00001H27H28V78.0479V62.1437C28 60.4868 29.3432 59.1437 31 59.1437H33C34.6569 59.1437 36 60.4868 36 62.1437V78.0479V79.0479H37H56V79.1437H57H59H60V78.1437L60 27.8479C60 26.1928 58.9807 24.7087 57.4359 24.1145L47.2821 20.2092C46.8824 20.0555 46.5426 19.7775 46.3127 19.4163L46.2589 19.3318L46.1895 19.2597L35.2297 7.87371C33.6783 5.56778 30.2938 5.51412 28.6701 7.76967L16.8041 19.335L16.7323 19.405L16.6759 19.4878C16.4574 19.8082 16.1506 20.0581 15.7927 20.2073L6.46154 24.0952C4.97095 24.7163 4 26.1727 4 27.7875L4.00001 78.0479Z" fill="#F2F2F2" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 27.5479C5 26.3368 5.72821 25.2445 6.84615 24.7787L16.4499 20.7771C16.8131 20.6258 17.143 20.4045 17.4207 20.1258L29.8008 7.70625C31.0017 6.50144 32.9632 6.53525 34.1219 7.78072L45.5277 20.0402C45.8385 20.3743 46.2213 20.633 46.6472 20.7968L57.0769 24.8082C58.2355 25.2539 59 26.367 59 27.6083V78.1436L37 78.1437V62.1437C37 59.9345 35.2091 58.1437 33 58.1437H31C28.7909 58.1437 27 59.9345 27 62.1437V78.1437L5 78.1436V27.5479ZM11 60.1437C11 57.9345 12.7909 56.1437 15 56.1437H17C19.2091 56.1437 21 57.9345 21 60.1437V74.1437H11V60.1437ZM43 60.1437C43 57.9345 44.7909 56.1437 47 56.1437H49C51.2091 56.1437 53 57.9345 53 60.1437V74.1437H43V60.1437ZM11 33.9521C11 31.743 12.7909 29.9521 15 29.9521H17C19.2091 29.9521 21 31.743 21 33.9521V47.9521H11V33.9521ZM27 34.0479C27 31.8387 28.7909 30.0479 31 30.0479H33C35.2091 30.0479 37 31.8387 37 34.0479V48.0479H27V34.0479ZM43 34.0479C43 31.8387 44.7909 30.0479 47 30.0479H49C51.2091 30.0479 53 31.8387 53 34.0479V48.0479H43V34.0479ZM32 23C34.2091 23 36 21.2091 36 19C36 16.7909 34.2091 15 32 15C29.7909 15 28 16.7909 28 19C28 21.2091 29.7909 23 32 23Z" fill="#8B999B"/>
+<line x1="48" y1="26.0479" x2="48" y2="50.0479" stroke="#8B999B"/>
+<line x1="48" y1="52.1437" x2="48" y2="76.1437" stroke="#8B999B"/>
+<line x1="32" y1="26.0479" x2="32" y2="50.0479" stroke="#8B999B"/>
+<line x1="16" y1="29.9521" x2="16" y2="47.9521" stroke="#8B999B"/>
+<line x1="21" y1="39.4521" x2="11" y2="39.4521" stroke="#8B999B"/>
+<line x1="21" y1="65.5479" x2="11" y2="65.5479" stroke="#8B999B"/>
+<line x1="39" y1="39.5479" x2="23" y2="39.5479" stroke="#8B999B"/>
+<line x1="55" y1="39.5479" x2="39" y2="39.5479" stroke="#8B999B"/>
+<line x1="55" y1="65.6436" x2="39" y2="65.6436" stroke="#8B999B"/>
+<line x1="16" y1="56.0479" x2="16" y2="74.0479" stroke="#8B999B"/>
+</svg>
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 894e96ef113d8564eb7577b3c88ff1232b47fa0c..e84aed14d80d371d6599132c17be61c410e425a5 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -83,6 +83,25 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.80852 4.27286C6.30371 3.50407 5.45804 3 4.5 3C2.9536 3 1.7 4.3133 1.7 5.93333C1.7 7.00468 2.24824 7.94188 3.06684 8.45382C1.84845 9.02743 1 10.3099 1 11.8V14H5.08296C5.33228 12.514 6.12778 11.214 7.25473 10.3124C6.82705 9.82915 6.49117 9.26223 6.27499 8.63916C6.16478 8.57108 6.05069 8.50916 5.93316 8.45382C6.01417 8.40316 6.09253 8.34834 6.16797 8.28963C6.05843 7.87827 6 7.44599 6 7C6 5.99389 6.29717 5.05718 6.80852 4.27286ZM7.9277 11.055C7.0051 11.7745 6.34145 12.8106 6.10002 14H8V11.8C8 11.5447 7.9751 11.2955 7.9277 11.055ZM7.27499 5.53957C7.29148 5.66836 7.3 5.79981 7.3 5.93333C7.3 6.40316 7.19457 6.84718 7.00713 7.24086C7.0024 7.16118 7 7.08087 7 7C7 6.48461 7.09747 5.99199 7.27499 5.53957Z" fill="#333333"/>
</symbol>
+<symbol id="mdm" width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
+<rect fill="white" y="-0.108661" width="19" height="24"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
+</mask>
+<path d="M2.84054 5.57617L3.03378 6.03731L2.84054 5.57617ZM1 23H0.5V23.5H1V23ZM8 23V23.5H8.5V23H8ZM11 23H10.5V23.5H11V23ZM18 23V23.5H18.5V23H18ZM16.0823 5.60565L16.2627 5.13932L16.0823 5.60565ZM14.5555 5.01505L14.3751 5.48138H14.3751L14.5555 5.01505ZM13.4355 4.2543L13.0685 4.59383V4.59383L13.4355 4.2543ZM10.9183 1.5332L11.2854 1.19366V1.19366L10.9183 1.5332ZM8.0297 1.48343L8.38482 1.8354V1.8354L8.0297 1.48343ZM5.19821 4.34019L4.84309 3.98821L5.19821 4.34019ZM4.22694 4.9952L4.42019 5.45634L4.22694 4.9952ZM1.5 8.34305C1.5 7.33564 2.10466 6.42666 3.03378 6.03731L2.6473 5.11502C1.34652 5.66011 0.5 6.93268 0.5 8.34305H1.5ZM1.5 23V8.34305H0.5V23H1.5ZM8 22.5H1V23.5H8V22.5ZM8.5 23V18.5H7.5V23H8.5ZM8.5 18.5C8.5 17.9477 8.94772 17.5 9.5 17.5V16.5C8.39543 16.5 7.5 17.3954 7.5 18.5H8.5ZM9.5 17.5C10.0523 17.5 10.5 17.9477 10.5 18.5H11.5C11.5 17.3954 10.6046 16.5 9.5 16.5V17.5ZM10.5 18.5V23H11.5V18.5H10.5ZM18 22.5H11V23.5H18V22.5ZM17.5 8.40362V23H18.5V8.40362H17.5ZM15.9019 6.07197C16.865 6.44453 17.5 7.37094 17.5 8.40362H18.5C18.5 6.95786 17.6111 5.66089 16.2627 5.13932L15.9019 6.07197ZM14.3751 5.48138L15.9019 6.07197L16.2627 5.13932L14.7359 4.54872L14.3751 5.48138ZM13.0685 4.59383C13.4307 4.98537 13.8776 5.28895 14.3751 5.48138L14.7359 4.54872C14.3805 4.41127 14.0613 4.19443 13.8026 3.91476L13.0685 4.59383ZM10.5513 1.87273L13.0685 4.59383L13.8026 3.91476L11.2854 1.19366L10.5513 1.87273ZM8.38482 1.8354C8.98595 1.22891 9.97141 1.24589 10.5513 1.87273L11.2854 1.19366C10.3189 0.148915 8.67647 0.120616 7.67458 1.13145L8.38482 1.8354ZM5.55333 4.69216L8.38482 1.8354L7.67458 1.13145L4.84309 3.98821L5.55333 4.69216ZM4.42019 5.45634C4.84445 5.27856 5.22951 5.01888 5.55333 4.69216L4.84309 3.98821C4.61179 4.22158 4.33675 4.40706 4.0337 4.53405L4.42019 5.45634ZM3.03378 6.03731L4.42019 5.45634L4.0337 4.53405L2.6473 5.11502L3.03378 6.03731Z" fill="white" mask="url(#path-1-outside-1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" fill="#D4C4A9"/>
+</symbol>
+
+<symbol id="mdm-hover" width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
+<rect fill="white" y="-0.108661" width="19" height="24"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
+</mask>
+<path d="M2.84054 5.57617L3.03378 6.03731L2.84054 5.57617ZM1 23H0.5V23.5H1V23ZM8 23V23.5H8.5V23H8ZM11 23H10.5V23.5H11V23ZM18 23V23.5H18.5V23H18ZM16.0823 5.60565L16.2627 5.13932L16.0823 5.60565ZM14.5555 5.01505L14.3751 5.48138H14.3751L14.5555 5.01505ZM13.4355 4.2543L13.0685 4.59383V4.59383L13.4355 4.2543ZM10.9183 1.5332L11.2854 1.19366V1.19366L10.9183 1.5332ZM8.0297 1.48343L8.38482 1.8354V1.8354L8.0297 1.48343ZM5.19821 4.34019L4.84309 3.98821L5.19821 4.34019ZM4.22694 4.9952L4.42019 5.45634L4.22694 4.9952ZM1.5 8.34305C1.5 7.33564 2.10466 6.42666 3.03378 6.03731L2.6473 5.11502C1.34652 5.66011 0.5 6.93268 0.5 8.34305H1.5ZM1.5 23V8.34305H0.5V23H1.5ZM8 22.5H1V23.5H8V22.5ZM8.5 23V18.5H7.5V23H8.5ZM8.5 18.5C8.5 17.9477 8.94772 17.5 9.5 17.5V16.5C8.39543 16.5 7.5 17.3954 7.5 18.5H8.5ZM9.5 17.5C10.0523 17.5 10.5 17.9477 10.5 18.5H11.5C11.5 17.3954 10.6046 16.5 9.5 16.5V17.5ZM10.5 18.5V23H11.5V18.5H10.5ZM18 22.5H11V23.5H18V22.5ZM17.5 8.40362V23H18.5V8.40362H17.5ZM15.9019 6.07197C16.865 6.44453 17.5 7.37094 17.5 8.40362H18.5C18.5 6.95786 17.6111 5.66089 16.2627 5.13932L15.9019 6.07197ZM14.3751 5.48138L15.9019 6.07197L16.2627 5.13932L14.7359 4.54872L14.3751 5.48138ZM13.0685 4.59383C13.4307 4.98537 13.8776 5.28895 14.3751 5.48138L14.7359 4.54872C14.3805 4.41127 14.0613 4.19443 13.8026 3.91476L13.0685 4.59383ZM10.5513 1.87273L13.0685 4.59383L13.8026 3.91476L11.2854 1.19366L10.5513 1.87273ZM8.38482 1.8354C8.98595 1.22891 9.97141 1.24589 10.5513 1.87273L11.2854 1.19366C10.3189 0.148915 8.67647 0.120616 7.67458 1.13145L8.38482 1.8354ZM5.55333 4.69216L8.38482 1.8354L7.67458 1.13145L4.84309 3.98821L5.55333 4.69216ZM4.42019 5.45634C4.84445 5.27856 5.22951 5.01888 5.55333 4.69216L4.84309 3.98821C4.61179 4.22158 4.33675 4.40706 4.0337 4.53405L4.42019 5.45634ZM3.03378 6.03731L4.42019 5.45634L4.0337 4.53405L2.6473 5.11502L3.03378 6.03731Z" fill="white" mask="url(#path-1-outside-1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" fill="#BD9E6A"/>
+</symbol>
+
+
<symbol id="wifi" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/symbol">
<g clip-path="url(#clip0)">
<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67067 6.53125 4.67067 7.8744 2.4991 10.046L1.08488 8.63175Z" fill="#333333"/>
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 491a797dc03ce61f4b2fd2ec64d8bcdb6887a97d..84fb5a756cc9528f7739d5a73549af7cfdf1d660 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -28,7 +28,6 @@
@mixin btn-search-filter {
background: $secondary-color;
height: 40px;
- border: none;
color: $white;
padding: 4px 37px 4px 37px;
border-radius: 4px;
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 4d99113345b1272768d49d373e5938d3a6155b6a..2e5b3fbe2838fc61c7800875b4d226b44632f925 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -15,7 +15,6 @@ $red: #f98181;
$blue: #348899;
$blue-hover: #117083;
$blue-active: #8cb6be;
-$grey-1: #594d59;
$red-metro: #d50000;
/* APP COLORS */
$primary-color: $red-metro;
@@ -23,3 +22,4 @@ $secondary-color: $blue;
$default-link-color: $grey-2;
$button-secondary: $blue;
$app-background: $grey-6;
+$modal-background: rgba($grey-1, 0.75);
diff --git a/src/assets/scss/_hyperlink.scss b/src/assets/scss/_hyperlink.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5eed9c1f2ce663bbcf14ac5ed6b685ebb54aa8ac
--- /dev/null
+++ b/src/assets/scss/_hyperlink.scss
@@ -0,0 +1,20 @@
+@import './typography.scss';
+@mixin hyperlink {
+ border: 1px solid transparent;
+ padding: 8px 8px 6px 8px;
+ color: $secondary-color;
+ outline: none;
+ @include btn-bold-sousligne;
+ &:hover {
+ color: $blue-hover;
+ }
+ &:focus {
+ color: $secondary-color;
+ border-color: $secondary-color;
+ border-radius: 4px;
+ }
+ &:active {
+ border: none;
+ color: $blue-active;
+ }
+}
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 052eb5e858a35eeb392dee9a7e5086aa5d6267e7..adcc85c0df44df682ad939230ca41e63235ce1e5 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -171,9 +171,10 @@
}
.ico-close-search {
- width: 15px;
- height: 7px;
- text-align: center;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ vertical-align: middle;
&:before {
transform: rotate(45deg);
}
@@ -185,7 +186,7 @@
.ico-close-search:after {
position: absolute;
content: '';
- height: 14px;
+ height: 16px;
width: 2px;
background-color: $grey-4;
}
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index fee23f71f9f88cc52f42772e9d0c3a5bb8402a8a..5180807ab293ecf5bb1d08d0aebdba09b4d42a53 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -1 +1,2 @@
$structure-details-z-index: 1001;
+$modal-add-structure-z-index: 1001;
diff --git a/src/styles.scss b/src/styles.scss
index d79b100f2e1dcc052123ad4db4107136f46898b3..2d6db92a4650118d681d882823bf1bf86d81aa7c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -40,7 +40,7 @@ a {
// Containers
.content-container {
margin: 0;
- padding: 30px 0 30px 0;
+ padding-top: 30px;
width: 100%;
height: 100%;
&.medium-pt {
@@ -132,3 +132,15 @@ a {
.w-100 {
width: 100%;
}
+
+@media print {
+ body,
+ html,
+ .forPrint {
+ height: auto;
+ }
+
+ .content-container {
+ display: none !important;
+ }
+}