mapcomplete/UI/BigComponents/SearchAndGo.ts

84 lines
2.8 KiB
TypeScript
Raw Normal View History

import Locale from "../i18n/Locale";
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {Translation} from "../i18n/Translation";
import {VariableUiElement} from "../Base/VariableUIElement";
import Svg from "../../Svg";
import State from "../../State";
import {TextField} from "../Input/TextField";
import {Geocoding} from "../../Logic/Osm/Geocoding";
import Translations from "../i18n/Translations";
import Hash from "../../Logic/Web/Hash";
export default class SearchAndGo extends UIElement {
2020-07-01 00:12:33 +00:00
private _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
2020-11-06 00:58:26 +00:00
private _searchField = new TextField({
2020-07-20 22:38:03 +00:00
placeholder: new VariableUiElement(
this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
),
value: new UIEventSource<string>("")
2020-07-20 13:54:50 +00:00
}
);
2020-07-01 00:12:33 +00:00
private _foundEntries = new UIEventSource([]);
2021-01-25 02:12:09 +00:00
private _goButton = Svg.search_ui().SetClass('w-8 h-8 full-rounded border-black float-right');
2020-07-01 00:12:33 +00:00
constructor() {
2020-07-01 00:12:33 +00:00
super(undefined);
this.ListenTo(this._foundEntries);
const self = this;
this._searchField.enterPressed.addCallback(() => {
self.RunSearch();
});
this._goButton.onClick(function () {
self.RunSearch();
});
}
InnerRender(): string {
return this._searchField.Render() +
this._goButton.Render();
}
2020-07-01 00:12:33 +00:00
// Triggered by 'enter' or onclick
private RunSearch() {
2020-07-20 13:54:50 +00:00
const searchString = this._searchField.GetValue().data;
if (searchString === undefined || searchString === "") {
2020-09-17 12:24:28 +00:00
return;
}
2020-09-12 21:15:17 +00:00
this._searchField.GetValue().setData("");
this._placeholder.setData(Translations.t.general.search.searching);
2020-07-01 00:12:33 +00:00
const self = this;
Geocoding.Search(searchString, (result) => {
2020-07-01 19:21:29 +00:00
console.log("Search result", result)
2020-07-01 19:21:29 +00:00
if (result.length == 0) {
2020-09-12 21:15:17 +00:00
self._placeholder.setData(Translations.t.general.search.nothing);
2020-07-01 19:21:29 +00:00
return;
}
const poi = result[0];
const bb = poi.boundingbox;
const bounds: [[number, number], [number, number]] = [
2020-07-01 19:21:29 +00:00
[bb[0], bb[2]],
[bb[1], bb[3]]
]
State.state.selectedElement. setData(undefined);
2021-01-27 01:26:57 +00:00
Hash.hash.setData(poi.osm_type+"/"+poi.osm_id);
2021-01-02 20:03:40 +00:00
State.state.leafletMap.data.fitBounds(bounds);
2020-09-12 21:15:17 +00:00
self._placeholder.setData(Translations.t.general.search.search);
2020-07-01 19:21:29 +00:00
},
() => {
2020-09-12 21:15:17 +00:00
self._searchField.GetValue().setData("");
self._placeholder.setData(Translations.t.general.search.error);
2020-07-01 19:21:29 +00:00
});
2020-07-01 00:12:33 +00:00
}
}