Skip to content
Snippets Groups Projects
Commit fa0c7524 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

feat(structure-details): update structure card

parent 3bdb11bb
No related branches found
No related tags found
3 merge requests!68Recette,!67Dev,!61Feat/structure details
Hide whitespace changes
Inline Side-by-side
src/app/structure-list/components/structure-details/structure-details.component.html
+ 58
− 56
View file @ fa0c7524
......@@ -101,6 +101,60 @@
</div>
</div>
</div>
<!-- Accueil -->
<div
*ngIf="structure.accessModality.length > 0 || structure.hours.hasData()"
fxLayout="column"
class="structure-details-block"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<app-svg-icon [type]="'ico'" [icon]="'accueil'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Accueil</h2>
</div>
<!-- Openning Hours -->
<div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div *ngIf="structure.hours.hasData()" fxFlex="50%">
<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 | day }}</h4>
<div class="openning-time" fxLayout="row" fxLayoutAlign="none flex-end">
<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>
<!-- accessModality -->
<div *ngIf="structure.accessModality.length > 0" fxFlex="50%">
<h3 class="subtitle">Accès</h3>
<div fxLayout="column" fxLayoutGap="10px">
<div fxLayout="column" fxLayoutGap="8px">
<div
fxLayout="row"
fxLayoutAlign="none flex-end"
fxLayoutGap="8px"
*ngFor="let acces of structure.accessModality"
>
<p class="no-margin">{{ getAccessLabel(acces) }}</p>
</div>
<p class="no-margin">Accessibles aux personnes à mobilité réduite</p>
</div>
<div *ngFor="let public of structure.publics" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<p class="no-margin">{{ getPublicLabel(public) }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- Démarches en ligne -->
<div
*ngIf="structure.proceduresAccompaniment.length"
......@@ -126,7 +180,7 @@
</p>
</div>
</div>
<!-- Services -->
<!-- Ateliers -->
<div
*ngIf="isBaseSkills() || isAccessRights()"
fxLayout="column"
......@@ -138,6 +192,7 @@
<app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Ateliers</h2>
</div>
<span class="bold-info">L'accès à ces ateliers peut être payant</span>
<div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div fxFlex="50%" *ngIf="isBaseSkills()">
<h3 class="subtitle">Compétences de base</h3>
......@@ -149,53 +204,6 @@
</div>
</div>
</div>
<!-- Accueil -->
<div
*ngIf="structure.accessModality.length > 0 || structure.hours.hasData()"
fxLayout="column"
class="structure-details-block"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<app-svg-icon [type]="'ico'" [icon]="'accueil'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Accueil</h2>
</div>
<!-- Openning Hours -->
<div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div *ngIf="structure.hours.hasData()" fxFlex="50%">
<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 | day }}</h4>
<div class="openning-time" fxLayout="row" fxLayoutAlign="none flex-end">
<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>
<!-- accessModality -->
<div *ngIf="structure.accessModality.length > 0" fxFlex="50%">
<h3 class="subtitle">Accès</h3>
<div
*ngFor="let acces of structure.accessModality"
fxLayout="row"
fxLayoutAlign="none flex-end"
fxLayoutGap="8px"
>
<app-svg-icon [type]="'ico'" [icon]="getAccessIcon(acces)"></app-svg-icon>
<p>{{ getAccessLabel(acces) }}</p>
</div>
</div>
</div>
</div>
<!-- Equipements -->
<div
*ngIf="structure.hasEquipments()"
......@@ -207,13 +215,8 @@
<app-svg-icon [type]="'ico'" [icon]="'equipement'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Équipements</h2>
</div>
<div
fxLayout="row"
fxLayoutAlign="none flex-end"
fxLayoutGap="13px"
*ngFor="let equipement of structure.equipmentsAndServices"
>
<p>
<div fxLayout="column">
<p *ngFor="let equipement of structure.equipmentsAndServices" class="no-margin-bottom">
{{ getEquipmentsLabel(equipement) }}
<span *ngIf="equipement == 'ordinateurs' && structure.nbComputers"> : {{ structure.nbComputers }}</span>
<span *ngIf="equipement == 'tablettes' && structure.nbTablets"> : {{ structure.nbTablets }}</span>
......@@ -266,7 +269,6 @@
</p>
<p *ngFor="let bus of tclStop.busLines">
<app-svg-icon [type]="'tcl'" [icon]="bus" [iconClass]="'icon-75'"></app-svg-icon>
<!-- {{ bus }} -->
</p>
</div>
</div>
......
src/app/structure-list/components/structure-details/structure-details.component.scss
+ 14
− 2
View file @ fa0c7524
......@@ -40,6 +40,8 @@ a {
.subtitle {
text-transform: uppercase;
@include cn-bold-16;
margin-bottom: 10px;
color: $grey-3;
}
}
......@@ -53,8 +55,7 @@ a {
.openning-time {
p {
margin-left: 0;
margin-right: 5px;
margin: 0 5px 12px 0;
}
}
.typeInformationHeader {
......@@ -82,6 +83,17 @@ p,
@include cn-regular-16;
margin-top: 9px;
margin-bottom: 9px;
&.no-margin {
margin-top: unset;
margin-bottom: unset;
}
&.no-margin-bottom {
margin-bottom: unset;
}
}
.bold-info {
@include cn-bold-16;
}
@media print {
......
src/app/structure-list/components/structure-details/structure-details.component.ts
+ 16
− 14
View file @ fa0c7524
......@@ -15,6 +15,7 @@ import { TclStopPoint } from '../../../models/tclStopPoint.model';
import { ProfileService } from '../../../profile/services/profile.service';
import { User } from '../../../models/user.model';
import { AuthService } from '../../../services/auth.service';
import { PublicCategorie } from '../../enum/public.enum';
@Component({
selector: 'app-structure-details',
templateUrl: './structure-details.component.html',
......@@ -130,20 +131,6 @@ export class StructureDetailsComponent implements OnInit {
this.displayForm();
this.ngOnInit();
}
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:
return null;
}
}
public getAccessLabel(accessModality: AccessModality): string {
switch (accessModality) {
......@@ -160,6 +147,21 @@ export class StructureDetailsComponent implements OnInit {
}
}
public getPublicLabel(tagetPublic: PublicCategorie): string {
switch (tagetPublic) {
case PublicCategorie.young:
return 'Jeunes (16 - 25 ans)';
case PublicCategorie.adult:
return 'Adultes (25 - 65 ans)';
case PublicCategorie.elderly:
return 'Séniors (+ de 65 ans)';
case PublicCategorie.all:
return 'Tout public';
default:
return null;
}
}
public setServiceCategories(): void {
this.baseSkills = this.structure.baseSkills.map((skill) =>
_.find(this.baseSkillssReferentiel.modules, { id: skill })
......
src/app/structure-list/enum/public.enum.ts 0 → 100644
+ 6
− 0
View file @ fa0c7524
export enum PublicCategorie {
young = 'jeunes1625Ans',
adult = 'adultes',
elderly = 'seniorsPlusDe65Ans',
all = 'toutPublic',
}
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