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 Vue from "vue";
|
||||||
import { Component, Prop } from "vue-property-decorator";
|
import { Component, Prop } from "vue-property-decorator";
|
||||||
import { Client, InjectClient, InjectContext, InjectMapComponents, InjectMapContext } from "../../utils/decorators";
|
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 FormModal from "../ui/form-modal/form-modal";
|
||||||
import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
|
import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
|
||||||
import { Context } from "../facilmap/facilmap";
|
import { Context } from "../facilmap/facilmap";
|
||||||
|
@ -28,6 +28,10 @@ export default class Overpass extends Vue {
|
||||||
@Prop({ type: String, required: true }) id!: string;
|
@Prop({ type: String, required: true }) id!: string;
|
||||||
|
|
||||||
activeTab = 0;
|
activeTab = 0;
|
||||||
|
selectedPresets: string[] = [];
|
||||||
|
customQuery = "";
|
||||||
|
searchTerm = "";
|
||||||
|
isCustomQueryMode = false;
|
||||||
|
|
||||||
get categories(): (typeof overpassPresets) {
|
get categories(): (typeof overpassPresets) {
|
||||||
return overpassPresets.map((cat) => {
|
return overpassPresets.map((cat) => {
|
||||||
|
@ -40,10 +44,6 @@ export default class Overpass extends Vue {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
selectedPresets: string[] = [];
|
|
||||||
customQuery = "";
|
|
||||||
isCustomQueryMode = false;
|
|
||||||
|
|
||||||
get isModified(): boolean {
|
get isModified(): boolean {
|
||||||
if (this.isCustomQueryMode)
|
if (this.isCustomQueryMode)
|
||||||
return !!this.customQuery != !!this.mapContext.overpassCustom || this.customQuery != this.mapContext.overpassCustom;
|
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)));
|
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 {
|
initialize(): void {
|
||||||
this.selectedPresets = this.mapContext.overpassPresets.map((p) => p.key);
|
this.selectedPresets = this.mapContext.overpassPresets.map((p) => p.key);
|
||||||
this.customQuery = this.mapContext.overpassCustom || "";
|
this.customQuery = this.mapContext.overpassCustom || "";
|
||||||
|
|
|
@ -8,7 +8,18 @@
|
||||||
ok-title="Apply"
|
ok-title="Apply"
|
||||||
>
|
>
|
||||||
<template v-if="!isCustomQueryMode">
|
<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">
|
<b-tab v-for="(category, idx) in categories" :title="category.label">
|
||||||
<template #title>
|
<template #title>
|
||||||
{{category.label}}
|
{{category.label}}
|
||||||
|
|
|
@ -171,6 +171,9 @@ export default class OverpassLayer extends FeatureGroup {
|
||||||
if (this._lastRequestController)
|
if (this._lastRequestController)
|
||||||
this._lastRequestController.abort();
|
this._lastRequestController.abort();
|
||||||
|
|
||||||
|
if (!this._map._loaded)
|
||||||
|
return;
|
||||||
|
|
||||||
if (this.isEmpty()) {
|
if (this.isEmpty()) {
|
||||||
this.clearLayers();
|
this.clearLayers();
|
||||||
return;
|
return;
|
||||||
|
|
Ładowanie…
Reference in New Issue