Commit 06a7d109 authored by Curtis Adam's avatar Curtis Adam

Merge branch '127-add-a-poi-categories-filter-for-the-map-navigation' into 'develop'

Resolve "Add a poi categories filter for the map navigation"

Closes #127

See merge request !120
parents 9713bb2c 9a632208
Pipeline #30007 passed with stage
in 8 minutes and 43 seconds
......@@ -2,7 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
import {categoryModelDefinition} from '../../../model-definitions/CategoryModelDefinition';
import {CommonAddEditService} from '../../../services/common-add-edit/common-add-edit.service';
import {CategoryModel} from '../../../models/category.model';
import {defaultCategorieIcon} from '../../../data/map-renderer.data';
import {categoryIconNavigation, defaultCategorieIcon} from '../../../data/map-renderer.data';
@Component({
selector: 'app-add-edit-category',
......@@ -27,10 +27,6 @@ export class AddEditCategoryComponent implements OnInit {
}
public categoryIcon(): string {
if (this.category.icon.trim().length) {
return this.category.icon;
} else {
return defaultCategorieIcon;
}
return categoryIconNavigation(this.category.icon);
}
}
......@@ -12,10 +12,18 @@
cursor: pointer;
}
.map-toolbar .poi-category-dropdown img {
height: 22px;
}
.clickable {
pointer-events: all;
}
#toggle-all-pois {
margin-left: 5px;
}
.cursorpointer {
cursor: pointer;
}
......
......@@ -16,11 +16,21 @@
*ngIf="mapRendererService.error.length === 0">
<div class="row">
<div class="col">
<button class="btn btn-outline-primary btn-sm" (click)="togglePOIs()">
<span class="fa fa-map-marker mr-1">
</span>
{{mapRendererService.poisShown ? 'Hide POIs' : 'Show POIs'}}
</button>
<div ngbDropdown>
<button class="btn btn-outline-primary btn-sm" id="poi-category-dropdown-button" ngbDropdownToggle>
<i class="fas fa-map-marker-alt"></i>&nbsp;POIs
</button>
<div ngbDropdownMenu aria-labelledby="poi-category-dropdown-button" class="poi-category-dropdown shadow" (click)="$event.stopPropagation()">
<button class="btn btn-outline-primary btn-sm" id="toggle-all-pois" (click)="togglePOIs()"><i class="fas fa-map-marker-alt"></i>&nbsp;Toggle all</button>
<hr class="dropdown-divider">
<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 class="col">
<button class="btn btn-outline-primary btn-sm" (click)="centerViewButtonClicked()">
......
......@@ -12,6 +12,8 @@ import {RouteService} from '../../../services/route/route.service';
import {Route} from '../../../models/sub-types/route.model';
import {NavigationRequest} from '../../../classes/NavigationRequest';
import {Subscription} from 'rxjs';
import {CategoryModel} from '../../../models/category.model';
import {categoryIconNavigation} from '../../../data/map-renderer.data';
@Component({
selector: 'app-map-view',
......@@ -116,6 +118,29 @@ export class MapViewComponent implements AfterViewInit, OnDestroy {
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();
const index = this.mapRendererService.filteredCategories.indexOf(id);
if (index === -1) {
this.mapRendererService.filteredCategories.push(id);
} else {
this.mapRendererService.filteredCategories.splice(index, 1);
}
this.mapRendererService.drawPois();
}
getCategoryIcon(url: string): string {
return categoryIconNavigation(url);
}
private buildRoutingPointCoordinatesFromContext(): NavigationPoint {
const level = this.mapRendererService.selectedLevel ? this.mapRendererService.selectedLevel.level : null;
const building = this.mapRendererService.selectedBuilding ? this.mapRendererService.selectedBuilding.name : null;
......
......@@ -84,6 +84,16 @@ export const instructionForNavigationEndTyoe = (type: NavigationEndType): string
}
};
export const defaultCategorieIcon = 'assets/red-marker-icon-2x.png';
export const categoryIconNavigation = (url: string) => {
if (url.trim().length) {
return url;
} else {
return defaultCategorieIcon;
}
};
/**
* The red POI icon for poi marker.
* @returns {Icon}
......@@ -112,8 +122,6 @@ export const categoryIcon = (url: string, retinaUrl: string) => {
}
};
export const defaultCategorieIcon = 'assets/red-marker-icon-2x.png';
/**
* The tooltip options for the room tags.
* @returns {TooltipOptions}
......
......@@ -34,6 +34,8 @@ import {Edge} from '../../models/sub-types/edge.model';
import {EdgeNode} from '../../models/sub-types/edgenode.model';
import {NavigationEndType} from '../../enums/NavigationEndType';
import {forEach} from '@angular/router/src/utils/collection';
import {categoryModelDefinition} from '../../model-definitions/CategoryModelDefinition';
import {CategoryModel} from '../../models/category.model';
@Injectable()
export class MapRendererService {
......@@ -47,6 +49,8 @@ export class MapRendererService {
public selectedID = '';
public error: string = '';
public searchToggled: boolean = false;
public poiCategories: CategoryModel[] = [];
public filteredCategories: string[] = [];
private polygons: Polygon[] = [];
private polygonLayers: L.Polygon[] = [];
private map: L.Map;
......@@ -74,6 +78,7 @@ export class MapRendererService {
this.map = L.map(this.mapOutletIdentifier);
this.setCenterView();
this.resetCutEvents();
this.setCategories();
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution,
maxZoom,
......@@ -106,6 +111,10 @@ export class MapRendererService {
this.leaveBuilding();
}
isNotFilteredID(poiID: string, categoryID: string): boolean {
return poiID !== this.selectedID && !this.filteredCategories.includes(categoryID);
}
async drawBuildings(): Promise<void> {
this.selectedBuilding = null;
this.selectedLevel = null;
......@@ -124,6 +133,19 @@ export class MapRendererService {
}
}
async setCategories(): Promise<void> {
try {
const categories = await this.dataService.get(categoryModelDefinition);
this.poiCategories = [];
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 {
return start <= theDate && end >= theDate;
}
......@@ -135,10 +157,10 @@ export class MapRendererService {
this.addPoiToMap(poi);
}
} else {
if (poi.building.length === 0 && !this.selectedBuilding && poi.id !== this.selectedID) {
if (poi.building.length === 0 && !this.selectedBuilding && this.isNotFilteredID(poi.id, poi.category.getID())) {
this.addPoiToMap(poi); // general pois like A20, THM
} else if (this.selectedBuilding && this.selectedBuilding.name === poi.building &&
this.selectedLevel && poi.levels.includes(this.selectedLevel.level) && poi.id !== this.selectedID) {
this.selectedLevel && poi.levels.includes(this.selectedLevel.level) && this.isNotFilteredID(poi.id, poi.category.getID())) {
this.addPoiToMap(poi);
}
}
......@@ -159,10 +181,15 @@ export class MapRendererService {
}
togglePois() {
if (this.poisShown) {
this.removePois();
} else {
if (this.filteredCategories.length) {
this.filteredCategories = [];
this.poisShown = true;
this.drawPois();
} else {
for (const category of this.poiCategories) {
this.filteredCategories.push(category.getID());
}
this.removePois();
}
}
......
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