mapcomplete/UI/SearchAndGo.ts

88 lines
2.7 KiB
TypeScript
Raw Normal View History

2020-07-30 00:59:08 +02:00
import Locale from "./i18n/Locale";
import {UIElement} from "./UIElement";
2020-07-21 00:38:03 +02:00
import Translation from "./i18n/Translation";
2020-07-30 00:59:08 +02:00
import {VariableUiElement} from "./Base/VariableUIElement";
import {FixedUiElement} from "./Base/FixedUiElement";
import {TextField} from "./Input/TextField";
import {Geocoding} from "../Logic/Osm/Geocoding";
2020-07-21 00:38:03 +02:00
import Translations from "./i18n/Translations";
import {State} from "../State";
2020-07-01 02:12:33 +02:00
import {UIEventSource} from "../Logic/UIEventSource";
2020-07-01 02:12:33 +02:00
export class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
2020-07-20 15:54:50 +02:00
private _searchField = new TextField<string>({
2020-07-21 00:38:03 +02:00
placeholder: new VariableUiElement(
this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
),
2020-07-20 20:06:00 +02:00
fromString: str => str,
toString: str => str,
value: new UIEventSource<string>("")
2020-07-20 15:54:50 +02:00
}
);
2020-07-01 02:12:33 +02:00
private _foundEntries = new UIEventSource([]);
private _goButton = new FixedUiElement("<img class='search-go' src='./assets/search.svg' alt='GO'>");
constructor() {
2020-07-01 02:12:33 +02:00
super(undefined);
this.ListenTo(this._foundEntries);
const self = this;
this._searchField.enterPressed.addCallback(() => {
self.RunSearch();
});
this._goButton.onClick(function () {
self.RunSearch();
});
}
// Triggered by 'enter' or onclick
private RunSearch() {
2020-07-20 15:54:50 +02:00
const searchString = this._searchField.GetValue().data;
2020-07-01 02:12:33 +02:00
this._searchField.Clear();
this._placeholder.setData(Translations.t.general.search.searching);
2020-07-01 02:12:33 +02:00
const self = this;
Geocoding.Search(searchString, (result) => {
2020-07-01 21:21:29 +02:00
if (result.length == 0) {
this._placeholder.setData(Translations.t.general.search.nothing);
2020-07-01 21:21:29 +02:00
return;
}
const bb = result[0].boundingbox;
const bounds = [
[bb[0], bb[2]],
[bb[1], bb[3]]
]
State.state.bm.map.fitBounds(bounds);
this._placeholder.setData(Translations.t.general.search.search);
2020-07-01 21:21:29 +02:00
},
() => {
this._placeholder.setData(Translations.t.general.search.error);
2020-07-01 21:21:29 +02:00
});
2020-07-01 02:12:33 +02:00
}
2020-07-20 20:06:00 +02:00
InnerRender(): string {
2020-07-05 18:59:47 +02:00
return this._searchField.Render() +
this._goButton.Render();
2020-07-01 02:12:33 +02:00
}
Update() {
super.Update();
this._searchField.Update();
this._goButton.Update();
}
Activate() {
super.Activate();
this._searchField.Activate();
this._goButton.Activate();
}
}