feat: add structure detail display panel

src/app/app.component.scss

@@ -11,7 +11,7 @@
 
 .app-body {
   flex: 1 0 auto;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
   position: relative;
 }

src/app/app.module.ts

@@ -15,6 +15,8 @@ import { MapModule } from './map/map.module';
 import { RechercheComponent } from './structure-list/components/recherche/recherche.component';
 import { StructureListComponent } from './structure-list/structure-list.component';
 import { CardComponent } from './structure-list/components/card/card.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';
 
 @NgModule({
   declarations: [
@@ -25,6 +27,8 @@ import { CardComponent } from './structure-list/components/card/card.component';
     StructureListComponent,
     CardComponent,
     RechercheComponent,
+    StructureDetailsComponent,
+    StructureOpeningStatusComponent,
   ],
   imports: [BrowserModule, HttpClientModule, AppRoutingModule, FlexLayoutModule, SharedModule, MapModule],
   providers: [{ provide: LOCALE_ID, useValue: 'fr' }, CustomBreakPointsProvider],

src/app/models/structure.model.ts

@@ -27,7 +27,11 @@ export class Structure {
   public accessibilitePersonnesAMobiliteReduitePmr: boolean;
   public jaccompagneLesUsagersDansLeursDemarchesEnLigne: boolean;
   public accompagnementDesDemarches: string[];
+  public modalitesDacces: string[];
+  public labelsEtQualifications: string[];
   public wifi: boolean;
+  public ordinateurs: boolean;
+  public nombre: number;
   public hours: Week;
   public isOpen: boolean;
   public openedOn: OpeningDay;

src/app/models/time.model.ts

@@ -5,4 +5,22 @@ export class Time {
   constructor(obj?: any) {
     Object.assign(this, obj);
   }
+
+  public formatOpenningDate(): string {
+    return this.formatDate(this.openning);
+  }
+
+  public formatClosingDate(): string {
+    return this.formatDate(this.closing);
+  }
+
+  private formatDate(n: number): string {
+    if (n.toString().length === 3) {
+      const tabNum = n.toString().match(/.{1,1}/g);
+      return tabNum[0] + 'h' + tabNum[1] + tabNum[2];
+    } else if (n.toString().length === 4) {
+      const tabNum = n.toString().match(/.{1,2}/g);
+      return tabNum[0] + 'h' + tabNum[1];
+    }
+  }
 }

src/app/shared/components/index.ts

-// import { CardComponent } from './card/card.component';
+import { LogoCardComponent } from './logo-card/logo-card.component';
 
 // tslint:disable-next-line: max-line-length
-// export { CardComponent };
+export { LogoCardComponent };
 
 // tslint:disable-next-line:variable-name
-export const SharedComponents = [];
+export const SharedComponents = [LogoCardComponent];

src/app/shared/components/logo-card/logo-card.component.html

+<div fxLayout="column" fxLayoutAlign="center center">
+  <img [src]="'../../../../assets/logos/' + getLogoKey(name) + '.svg'" [alt]="'logo ' + name" />
+  <p>{{ name }}</p>
+</div>

src/app/shared/components/logo-card/logo-card.component.scss

+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+
+img {
+  margin-bottom: 16px;
+}
+
+p {
+  @include cn-bold-18;
+  margin: 0;
+}
+
+div {
+  border: 1px solid $grey-4;
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin-bottom: 24px;
+  padding: 16px 25px;
+}

src/app/shared/components/logo-card/logo-card.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoCardComponent } from './logo-card.component';
+
+describe('LogoCardComponent', () => {
+  let component: LogoCardComponent;
+  let fixture: ComponentFixture<LogoCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LogoCardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/logo-card/logo-card.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Demarches } from '../../enum/demarches.enum';
+import { Labels } from '../../enum/labels.emum';
+
+@Component({
+  selector: 'app-logo-card',
+  templateUrl: './logo-card.component.html',
+  styleUrls: ['./logo-card.component.scss'],
+})
+export class LogoCardComponent implements OnInit {
+  @Input() public logoPath: string;
+  @Input() public name: string;
+  public demarches = Demarches;
+  public labels = Labels;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  public getLogoKey(demarche: string): string {
+    // return Demarches[demerche];
+    switch (demarche) {
+      case Demarches.pole_emploi:
+        return 'pole_emploi';
+      case Demarches.caf:
+        return 'caf';
+      case Demarches.carsat:
+        return 'carsat';
+      case Demarches.cpam:
+        return 'cpam';
+      case Demarches.impots:
+        return 'impots';
+      case Demarches.logements:
+        return 'logements';
+      case Demarches.other:
+        return 'other';
+      default:
+        return this.getLabelKey(demarche);
+    }
+  }
+
+  private getLabelKey(demarche: string): string {
+    switch (demarche) {
+      case Labels.aidants_connect:
+        return 'aidants_connect';
+      case Labels.maison_france_service:
+        return 'maison_france_service';
+      case Labels.pass_numerique:
+        return 'pass_numerique';
+      default:
+        return 'null';
+    }
+  }
+}

src/app/shared/enum/demarches.enum.ts

+export enum Demarches {
+  pole_emploi = 'Pôle Emploi',
+  cpam = 'CPAM',
+  impots = 'Impôts',
+  logements = 'Logement',
+  carsat = 'CARSAT',
+  other = 'Autres',
+  caf = 'Accompagnant CAF',
+}

src/app/shared/enum/labels.emum.ts

+export enum Labels {
+  pass_numerique = 'Pass numérique',
+  maison_france_service = 'Maison France Service',
+  aidants_connect = 'Aidants Connect',
+}

src/app/shared/shared.module.ts

@@ -4,9 +4,9 @@ import { SharedComponents } from './components';
 import { SharedPipes } from './pipes';
 import { SharedDirectives } from './directives';
 import { RouterModule } from '@angular/router';
-
+import { FlexLayoutModule } from '@angular/flex-layout';
 @NgModule({
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, FlexLayoutModule],
   declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives],
   exports: [...SharedPipes, ...SharedComponents, ...SharedDirectives],
 })

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

-<div class="structure" fxLayout="column">
+<div class="structure" fxLayout="column" (click)="cardClicked()">
   <span class="nomStructure">{{ structure.nomDeVotreStructure }}</span>
 
   <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
@@ -41,16 +41,5 @@
     </div>
   </div>
   <br />
-  <div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
-    <div>
-      <span *ngIf="structure.isOpen; else closed" class="ico-dot-available"></span>
-      <span>{{ structure.openDisplay() }}</span>
-    </div>
-    <ng-template #closed>
-      <span *ngIf="structure.openedOn.day; else unkown" class="ico-dot-unavailable"></span>
-    </ng-template>
-    <ng-template #unkown>
-      <span class="ico-dot-unknown"></span>
-    </ng-template>
-  </div>
+  <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
 </div>

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

@@ -5,6 +5,7 @@
 .structure {
   padding: 12px 0 12px 0;
   border-bottom: 1px dashed $grey !important;
+  cursor: pointer;
   .typeStructure {
     color: $grey;
     @include cn-regular-16;
@@ -23,10 +24,3 @@
     border-bottom: none;
   }
 }
-.statusStructure {
-  span {
-    @include cn-regular-14;
-    margin-right: 8px;
-    display: inline-block;
-  }
-}

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

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
 import { Structure } from '../../../models/structure.model';
 import { GeojsonService } from '../../../services/geojson.service';
 import { GeoJson } from '../../../map/models/geojson.model';
@@ -12,6 +12,7 @@ import { mergeMap } from 'rxjs/operators';
 })
 export class CardComponent implements OnInit {
   @Input() public structure: Structure;
+  @Output() public showDetails: EventEmitter<Structure> = new EventEmitter<Structure>();
 
   constructor(private geoJsonService: GeojsonService) {}
   ngOnInit(): void {}
@@ -34,4 +35,8 @@ export class CardComponent implements OnInit {
   public getCoord(idVoie: number): Observable<GeoJson> {
     return this.geoJsonService.getAddressByIdVoie(idVoie).pipe(mergeMap((res) => this.geoJsonService.getCoord(res)));
   }
+
+  public cardClicked(): void {
+    this.showDetails.emit(this.structure);
+  }
 }

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

+<div class="structrue-details-container">
+  <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%">
+      <div fxLayout="column" fxLayoutAlign="center">
+        <h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
+        <h3>{{ structure.typeDeStructure }}</h3>
+      </div>
+      <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
+      <div fxLayout="row">
+        <div fxLayout="column" fxFlex="60%">
+          <div *ngIf="structure.voie" fxLayout="row" fxLayoutAlign="none center">
+            <em class="ico-marker-pin-sm absolute"></em>
+            <p>{{ structure.voie }}</p>
+          </div>
+          <div *ngIf="structure.siteWeb" fxLayout="row" fxLayoutAlign="none center">
+            <em class="ic-globe-alt"></em>
+            <a target="_blank" rel="noopener noreferrer" [href]="structure.siteWeb">{{ structure.siteWeb }}</a>
+          </div>
+          <div *ngIf="structure.telephone" fxLayout="row" fxLayoutAlign="none center">
+            <em class="ic-phone"></em>
+            <p>{{ structure.telephone }}</p>
+          </div>
+        </div>
+        <div fxLayout="column" fxFlex="40%">
+          <div *ngIf="structure.courriel" fxLayout="row" fxLayoutAlign="none center">
+            <em class="ic-mail"></em>
+            <a [href]="'mailto:' + structure.courriel">{{ structure.courriel }}</a>
+          </div>
+          <div fxLayout="row" fxLayoutAlign="none center">
+            <em class="ic-mail"></em>
+            <p>TODO: PASS</p>
+          </div>
+          <div fxLayout="row" fxLayoutAlign="none center">
+            <em class="ic-mail"></em>
+            <p>TODO: FABLAB</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    *ngIf="structure.accompagnementDesDemarches.length > 0"
+    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>Démarches</h2>
+    </div>
+    <div fxLayout="row wrap" fxLayoutGap="24px">
+      <div *ngFor="let accompagnement of structure.accompagnementDesDemarches">
+        <app-logo-card [name]="accompagnement"></app-logo-card>
+      </div>
+    </div>
+  </div>
+  <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>Services</h2>
+    </div>
+    <div fxLayout="row" class="w-100">
+      <div fxFlex="50%">
+        <h3 class="subtitle">Compétences de base</h3>
+      </div>
+      <div fxFlex="50%">
+        <h3 class="subtitle">Accès au droits</h3>
+      </div>
+    </div>
+  </div>
+  <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>
+    <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>
+              <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>
+                  <p *ngIf="!isFirst && timeRange.openning">
+                    et de {{ timeRange.formatOpenningDate() }} à {{ timeRange.formatClosingDate() }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div fxFlex="30%">
+        <h3 class="subtitle">Accès</h3>
+        <div *ngFor="let acces of structure.modalitesDacces">
+          <em
+            [ngClass]="{
+              'ic-user': acces === accessModality.free,
+              'ic-calendar-today': acces === accessModality.meeting,
+              'ic-camera': acces === accessModality.numeric
+            }"
+          ></em>
+          <p>{{ acces }}</p>
+        </div>
+        <!-- modalitesDacces -->
+      </div>
+    </div>
+  </div>
+  <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline">
+    <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="20px">
+      <em class="ic-toolbox"></em>
+      <h2>Équipements</h2>
+    </div>
+    <div *ngIf="structure.wifi" fxLayout="row" fxLayoutAlign="none center">
+      <em class="ic-wifi"></em>
+      <p>Wifi en accès libre</p>
+    </div>
+    <div *ngIf="structure.ordinateurs" fxLayout="row" fxLayoutAlign="none center">
+      <em class="ic-screen"></em>
+      <p>Ordinateurs à disposition : {{ structure.nombre }}</p>
+    </div>
+  </div>
+  <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>
+      <h2>Labelisation</h2>
+    </div>
+    <div fxLayout="row wrap" fxLayoutGap="24px">
+      <div *ngFor="let accompagnement of structure.labelsEtQualifications">
+        <app-logo-card [name]="accompagnement"></app-logo-card>
+      </div>
+    </div>
+  </div>
+</div>

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

+@import '../../../../assets/scss/icons';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/z-index';
+
+.structrue-details-container {
+  background-color: $white;
+  z-index: $structure-details-z-index;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 980px;
+  height: 100%;
+  padding: 18px 24px;
+  overflow: auto;
+}
+
+.structrue-details-block {
+  border-bottom: 1px dashed $grey-2;
+  padding-bottom: 24px;
+  .subtitle {
+    text-transform: uppercase;
+    @include cn-bold-16;
+  }
+}
+
+.openning-time {
+  p {
+    margin-left: 0;
+    margin-right: 5px;
+  }
+}
+
+h2 {
+  margin-bottom: 5px;
+  @include cn-regular-24;
+}
+h3 {
+  margin: 0;
+  @include cn-regular-16;
+  color: $grey-3;
+}
+h4 {
+  margin-left: 0;
+  margin-bottom: 0;
+  @include cn-regular-14;
+  color: $grey-2;
+  text-transform: uppercase;
+}
+p,
+a {
+  @include cn-regular-16;
+  margin-left: 30px;
+  margin-top: 9px;
+  margin-bottom: 9px;
+}

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureDetailsComponent } from './structure-details.component';
+
+describe('StructureDetailsComponent', () => {
+  let component: StructureDetailsComponent;
+  let fixture: ComponentFixture<StructureDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Structure } from '../../../models/structure.model';
+import { AccessModality } from '../../enum/access-modality.enum';
+@Component({
+  selector: 'app-structure-details',
+  templateUrl: './structure-details.component.html',
+  styleUrls: ['./structure-details.component.scss'],
+})
+export class StructureDetailsComponent implements OnInit {
+  @Input() public structure: Structure;
+  @Output() public closeDetails: EventEmitter<boolean> = new EventEmitter<boolean>();
+  public accessModality = AccessModality;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  public close(): void {
+    this.closeDetails.emit(true);
+  }
+
+  public keepOriginalOrder = (a, b) => a.key;
+}

src/app/structure-list/components/structure-opening-status/structure-opening-status.component.html

+<div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
+  <div>
+    <span *ngIf="structure.isOpen; else closed" class="ico-dot-available"></span>
+    <span>{{ structure.openDisplay() }}</span>
+  </div>
+  <ng-template #closed>
+    <span *ngIf="structure.openedOn.day; else unkown" class="ico-dot-unavailable"></span>
+  </ng-template>
+  <ng-template #unkown>
+    <span class="ico-dot-unknown"></span>
+  </ng-template>
+</div>