Commit 1ee8957a authored by Curtis Adam's avatar Curtis Adam

Added a poi filter dropdown to the map-view

parent 9713bb2c
...@@ -2,7 +2,7 @@ import {Component, Input, OnInit} from '@angular/core'; ...@@ -2,7 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
import {categoryModelDefinition} from '../../../model-definitions/CategoryModelDefinition'; import {categoryModelDefinition} from '../../../model-definitions/CategoryModelDefinition';
import {CommonAddEditService} from '../../../services/common-add-edit/common-add-edit.service'; import {CommonAddEditService} from '../../../services/common-add-edit/common-add-edit.service';
import {CategoryModel} from '../../../models/category.model'; import {CategoryModel} from '../../../models/category.model';
import {defaultCategorieIcon} from '../../../data/map-renderer.data'; import {categoryIconNavigation, defaultCategorieIcon} from '../../../data/map-renderer.data';
@Component({ @Component({
selector: 'app-add-edit-category', selector: 'app-add-edit-category',
...@@ -27,10 +27,6 @@ export class AddEditCategoryComponent implements OnInit { ...@@ -27,10 +27,6 @@ export class AddEditCategoryComponent implements OnInit {
} }
public categoryIcon(): string { public categoryIcon(): string {
if (this.category.icon.trim().length) { return categoryIconNavigation(this.category.icon);
return this.category.icon;
} else {
return defaultCategorieIcon;
}
} }
} }
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
cursor: pointer; cursor: pointer;
} }
.map-toolbar .poi-category-dropdown img {
height: 22px;
}
.clickable { .clickable {
pointer-events: all; pointer-events: all;
} }
......
...@@ -16,11 +16,20 @@ ...@@ -16,11 +16,20 @@
*ngIf="mapRendererService.error.length === 0"> *ngIf="mapRendererService.error.length === 0">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button class="btn btn-outline-primary btn-sm" (click)="togglePOIs()"> <div ngbDropdown>
<span class="fa fa-map-marker mr-1"> <button class="btn btn-outline-primary btn-sm" id="poi-category-dropdown-button" ngbDropdownToggle>
</span> <i class="fas fa-map-marker-alt"></i>
{{mapRendererService.poisShown ? 'Hide POIs' : 'Show POIs'}} POIs
</button> </button>
<div ngbDropdownMenu aria-labelledby="poi-category-dropdown-button" class="poi-category-dropdown shadow">
<ng-container *ngFor="let category of getCategories(); let i = index">
<div class="form-check dropdown-item cursorpointer" (click)="updatePOICategory(category.getID())">
<input class="form-check-input cursorpointer" type="checkbox" id="poi-category-{{i}}" [checked]="poiCategoryDisabled(category.getID())">
<label class="form-check-label cursorpointer" for="poi-category-{{i}}">&nbsp;<img alt="{{category.name}}" src="{{getCategoryIcon(category.icon)}}">&nbsp;{{category.name}}</label>
</div>
</ng-container>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<button class="btn btn-outline-primary btn-sm" (click)="centerViewButtonClicked()"> <button class="btn btn-outline-primary btn-sm" (click)="centerViewButtonClicked()">
......
...@@ -12,6 +12,8 @@ import {RouteService} from '../../../services/route/route.service'; ...@@ -12,6 +12,8 @@ import {RouteService} from '../../../services/route/route.service';
import {Route} from '../../../models/sub-types/route.model'; import {Route} from '../../../models/sub-types/route.model';
import {NavigationRequest} from '../../../classes/NavigationRequest'; import {NavigationRequest} from '../../../classes/NavigationRequest';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {CategoryModel} from '../../../models/category.model';
import {categoryIconNavigation} from '../../../data/map-renderer.data';
@Component({ @Component({
selector: 'app-map-view', selector: 'app-map-view',
...@@ -116,6 +118,22 @@ export class MapViewComponent implements AfterViewInit, OnDestroy { ...@@ -116,6 +118,22 @@ export class MapViewComponent implements AfterViewInit, OnDestroy {
this.mapRendererService.resetCutEvents(); this.mapRendererService.resetCutEvents();
} }
getCategories(): CategoryModel[] {
return this.mapRendererService.poiCategories;
}
poiCategoryDisabled(id: string): boolean {
return !this.mapRendererService.filteredCategories.includes(id);
}
updatePOICategory(id: string): void {
event.preventDefault();
}
getCategoryIcon(url: string): string {
return categoryIconNavigation(url);
}
private buildRoutingPointCoordinatesFromContext(): NavigationPoint { private buildRoutingPointCoordinatesFromContext(): NavigationPoint {
const level = this.mapRendererService.selectedLevel ? this.mapRendererService.selectedLevel.level : null; const level = this.mapRendererService.selectedLevel ? this.mapRendererService.selectedLevel.level : null;
const building = this.mapRendererService.selectedBuilding ? this.mapRendererService.selectedBuilding.name : null; const building = this.mapRendererService.selectedBuilding ? this.mapRendererService.selectedBuilding.name : null;
......
...@@ -65,6 +65,7 @@ const icon = (url: string, retinaURL: string) => { ...@@ -65,6 +65,7 @@ const icon = (url: string, retinaURL: string) => {
}); });
}; };
export const iconForNavigationEndtype = (type: NavigationEndType) => { export const iconForNavigationEndtype = (type: NavigationEndType) => {
return icon(`assets/navigationMarkers/${NavigationEndType[type]}.png`, `assets/navigationMarkers/${NavigationEndType[type]}-2x.png`); return icon(`assets/navigationMarkers/${NavigationEndType[type]}.png`, `assets/navigationMarkers/${NavigationEndType[type]}-2x.png`);
}; };
...@@ -84,6 +85,14 @@ export const instructionForNavigationEndTyoe = (type: NavigationEndType): string ...@@ -84,6 +85,14 @@ export const instructionForNavigationEndTyoe = (type: NavigationEndType): string
} }
}; };
export const categoryIconNavigation = (url: string) => {
if (url.trim().length) {
return url;
} else {
return defaultCategorieIcon;
}
};
/** /**
* The red POI icon for poi marker. * The red POI icon for poi marker.
* @returns {Icon} * @returns {Icon}
......
...@@ -34,6 +34,8 @@ import {Edge} from '../../models/sub-types/edge.model'; ...@@ -34,6 +34,8 @@ import {Edge} from '../../models/sub-types/edge.model';
import {EdgeNode} from '../../models/sub-types/edgenode.model'; import {EdgeNode} from '../../models/sub-types/edgenode.model';
import {NavigationEndType} from '../../enums/NavigationEndType'; import {NavigationEndType} from '../../enums/NavigationEndType';
import {forEach} from '@angular/router/src/utils/collection'; import {forEach} from '@angular/router/src/utils/collection';
import {categoryModelDefinition} from '../../model-definitions/CategoryModelDefinition';
import {CategoryModel} from '../../models/category.model';
@Injectable() @Injectable()
export class MapRendererService { export class MapRendererService {
...@@ -47,6 +49,8 @@ export class MapRendererService { ...@@ -47,6 +49,8 @@ export class MapRendererService {
public selectedID = ''; public selectedID = '';
public error: string = ''; public error: string = '';
public searchToggled: boolean = false; public searchToggled: boolean = false;
public poiCategories: CategoryModel[] = [];
public filteredCategories: string[] = [];
private polygons: Polygon[] = []; private polygons: Polygon[] = [];
private polygonLayers: L.Polygon[] = []; private polygonLayers: L.Polygon[] = [];
private map: L.Map; private map: L.Map;
...@@ -74,6 +78,7 @@ export class MapRendererService { ...@@ -74,6 +78,7 @@ export class MapRendererService {
this.map = L.map(this.mapOutletIdentifier); this.map = L.map(this.mapOutletIdentifier);
this.setCenterView(); this.setCenterView();
this.resetCutEvents(); this.resetCutEvents();
this.setCategories();
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution, attribution,
maxZoom, maxZoom,
...@@ -124,6 +129,18 @@ export class MapRendererService { ...@@ -124,6 +129,18 @@ export class MapRendererService {
} }
} }
async setCategories(): Promise<void> {
try {
const categories = await this.dataService.get(categoryModelDefinition);
categories.forEach((category: CategoryModel) => {
this.poiCategories.push(category);
});
this.filteredCategories = [];
} catch (err) {
this.error = err.message;
}
}
private isBetweenTwoDates(start: Date, end: Date, theDate: Date): boolean { private isBetweenTwoDates(start: Date, end: Date, theDate: Date): boolean {
return start <= theDate && end >= theDate; return start <= theDate && end >= theDate;
} }
......
Markdown is supported
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