-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebar.component.html
54 lines (53 loc) · 2.83 KB
/
sidebar.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="sidebar">
<a href="javascript:;" (click)="sidebarService.closeSidebar();" *ngIf="sidebarService.sidenavMode === 'over'" class="close-sidebar">
<fa-icon [icon]="['fal', 'times']"></fa-icon>
</a>
<div class="brand">
<img [src]="config.logo ? config.logo : 'assets/proximiio-logo-vertical.png'">
</div>
<mat-form-field appearance="outline" *ngIf="showPlaceSelector">
<mat-label>{{ placeSelectorLabel }}</mat-label>
<ng-select ngSelectMat [items]="places" bindLabel="name" (change)="onPlaceSelect($event)" [(ngModel)]="selectedPlace" ></ng-select>
<span matPrefix><fa-icon [icon]="['fal', 'map-marker-alt']" transform="up-3"></fa-icon></span>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{ endPointLabel }}</mat-label>
<ng-select ngSelectMat groupBy="category" [items]="pois" bindLabel="title" (change)="onEndPointSelect($event)" [searchFn]="poiSearchFn">
<ng-template ng-optgroup-tmp let-item="item" let-index="index">
{{ item.category }}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="28" width="28" [src]="item.icon"/>
{{ item.title | slice: 0:18 }} {{ item.title.length > 18 ? '...' : '' }}
<span class="level">L<small>{{ item.level }}</small></span>
</ng-template>
</ng-select>
<span matPrefix><fa-icon [icon]="['fal', 'search']" transform="up-3"></fa-icon></span>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>{{ startPointLabel }}</mat-label>
<ng-select ngSelectMat groupBy="category" [items]="pois" bindLabel="title" (change)="onStartPointSelect($event)" [searchFn]="poiSearchFn">
<ng-template ng-optgroup-tmp let-item="item" let-index="index">
{{ item.category }}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<img height="28" width="28" [src]="item.icon"/>
{{ item.title | slice: 0:18 }} {{ item.title.length > 18 ? '...' : '' }}
<span class="level">L<small>{{ item.level }}</small></span>
</ng-template>
</ng-select>
<span matPrefix><fa-icon [icon]="['fal', 'dot-circle']" transform="up-3"></fa-icon></span>
</mat-form-field>
<div *ngIf="showOnlyAccessibleToggle">
<button type="button" class="accessible-btn" (click)="onAccessibleOnlyToggle()">
<fa-icon [icon]="['fal', 'wheelchair']" size="lg"></fa-icon>
<span>Accessible routes only</span>
<fa-icon [icon]="['fal', 'toggle-off']" *ngIf="!onlyAccessible" class="toggle-off" size="2x"></fa-icon>
<fa-icon [icon]="['fal', 'toggle-on']" *ngIf="onlyAccessible" class="toggle-on" size="2x"></fa-icon>
</button>
</div>
<div class="powered-by" *ngIf="showPoweredBy">
<img src="assets/proximiio-logo-only.png" alt="Proximi.io">
<h4 class="title">Powered by Proximi.io</h4>
</div>
</div>