kopia lustrzana https://github.com/FacilMap/facilmap
Add search field to POI dialog
rodzic
6f787064d6
commit
6454f11ac2
|
@ -2,7 +2,7 @@ import WithRender from "./overpass.vue";
|
|||
import Vue from "vue";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
import { Client, InjectClient, InjectContext, InjectMapComponents, InjectMapContext } from "../../utils/decorators";
|
||||
import { overpassPresets, validateOverpassQuery } from "facilmap-leaflet";
|
||||
import { OverpassPreset, overpassPresets, validateOverpassQuery } from "facilmap-leaflet";
|
||||
import FormModal from "../ui/form-modal/form-modal";
|
||||
import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
|
||||
import { Context } from "../facilmap/facilmap";
|
||||
|
@ -28,6 +28,10 @@ export default class Overpass extends Vue {
|
|||
@Prop({ type: String, required: true }) id!: string;
|
||||
|
||||
activeTab = 0;
|
||||
selectedPresets: string[] = [];
|
||||
customQuery = "";
|
||||
searchTerm = "";
|
||||
isCustomQueryMode = false;
|
||||
|
||||
get categories(): (typeof overpassPresets) {
|
||||
return overpassPresets.map((cat) => {
|
||||
|
@ -40,10 +44,6 @@ export default class Overpass extends Vue {
|
|||
});
|
||||
}
|
||||
|
||||
selectedPresets: string[] = [];
|
||||
customQuery = "";
|
||||
isCustomQueryMode = false;
|
||||
|
||||
get isModified(): boolean {
|
||||
if (this.isCustomQueryMode)
|
||||
return !!this.customQuery != !!this.mapContext.overpassCustom || this.customQuery != this.mapContext.overpassCustom;
|
||||
|
@ -51,6 +51,14 @@ export default class Overpass extends Vue {
|
|||
return !isEqual(new Set(this.selectedPresets), new Set(this.mapContext.overpassPresets.map((preset) => preset.key)));
|
||||
}
|
||||
|
||||
get filteredPresets(): OverpassPreset[] {
|
||||
if (!this.searchTerm)
|
||||
return [];
|
||||
|
||||
const lowerTerm = this.searchTerm.toLowerCase();
|
||||
return this.categories.map((cat) => cat.presets).flat().flat().filter((preset) => preset.label.toLowerCase().includes(lowerTerm));
|
||||
}
|
||||
|
||||
initialize(): void {
|
||||
this.selectedPresets = this.mapContext.overpassPresets.map((p) => p.key);
|
||||
this.customQuery = this.mapContext.overpassCustom || "";
|
||||
|
|
|
@ -8,7 +8,18 @@
|
|||
ok-title="Apply"
|
||||
>
|
||||
<template v-if="!isCustomQueryMode">
|
||||
<b-tabs pills lazy v-model="activeTab">
|
||||
<b-form-input type="search" v-model="searchTerm" placeholder="Search…" autofocus></b-form-input>
|
||||
<hr />
|
||||
|
||||
<div v-if="searchTerm" class="checkbox-grid">
|
||||
<b-form-checkbox
|
||||
v-for="preset in filteredPresets"
|
||||
:checked="preset.isChecked"
|
||||
@input="togglePreset(preset.key)"
|
||||
>{{preset.label}}</b-form-checkbox>
|
||||
</div>
|
||||
|
||||
<b-tabs v-else pills lazy v-model="activeTab">
|
||||
<b-tab v-for="(category, idx) in categories" :title="category.label">
|
||||
<template #title>
|
||||
{{category.label}}
|
||||
|
|
|
@ -171,6 +171,9 @@ export default class OverpassLayer extends FeatureGroup {
|
|||
if (this._lastRequestController)
|
||||
this._lastRequestController.abort();
|
||||
|
||||
if (!this._map._loaded)
|
||||
return;
|
||||
|
||||
if (this.isEmpty()) {
|
||||
this.clearLayers();
|
||||
return;
|
||||
|
|
Ładowanie…
Reference in New Issue