Commit 19d75800 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

feat: add structure detail display panel

parent 7e69ff3a
......@@ -11,7 +11,7 @@
.app-body {
flex: 1 0 auto;
overflow-y: auto;
overflow-y: hidden;
overflow-x: hidden;
position: relative;
}
......
......@@ -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],
......
......@@ -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;
......
......@@ -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];
}
}
}
// 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];
<div fxLayout="column" fxLayoutAlign="center center">
<img [src]="'../../../../assets/logos/' + getLogoKey(name) + '.svg'" [alt]="'logo ' + name" />
<p>{{ name }}</p>
</div>
@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;
}
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();
});
});
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';
}
}
}
export enum Demarches {
pole_emploi = 'Pôle Emploi',
cpam = 'CPAM',
impots = 'Impôts',
logements = 'Logement',
carsat = 'CARSAT',
other = 'Autres',
caf = 'Accompagnant CAF',
}
export enum Labels {
pass_numerique = 'Pass numérique',
maison_france_service = 'Maison France Service',
aidants_connect = 'Aidants Connect',
}
......@@ -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],
})
......
<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>
......@@ -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;
}
}
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);
}
}
<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>
@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;
}
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();
});
});
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;
}
<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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment