forked from MapComplete/MapComplete
84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
import {UIEventSource} from "../../Logic/UIEventSource";
|
|
import {Translation} from "../i18n/Translation";
|
|
import {VariableUiElement} from "../Base/VariableUIElement";
|
|
import Svg from "../../Svg";
|
|
import {TextField} from "../Input/TextField";
|
|
import {Geocoding} from "../../Logic/Osm/Geocoding";
|
|
import Translations from "../i18n/Translations";
|
|
import Hash from "../../Logic/Web/Hash";
|
|
import Combine from "../Base/Combine";
|
|
|
|
export default class SearchAndGo extends Combine {
|
|
constructor(state: {
|
|
leafletMap: UIEventSource<any>,
|
|
selectedElement: UIEventSource<any>
|
|
}) {
|
|
const goButton = Svg.search_ui().SetClass(
|
|
"w-8 h-8 full-rounded border-black float-right"
|
|
);
|
|
|
|
const placeholder = new UIEventSource<Translation>(
|
|
Translations.t.general.search.search
|
|
);
|
|
const searchField = new TextField({
|
|
placeholder: new VariableUiElement(placeholder),
|
|
value: new UIEventSource<string>(""),
|
|
inputStyle:
|
|
" background: transparent;\n" +
|
|
" border: none;\n" +
|
|
" font-size: large;\n" +
|
|
" width: 100%;\n" +
|
|
" height: 100%;\n" +
|
|
" box-sizing: border-box;\n" +
|
|
" color: var(--foreground-color);",
|
|
});
|
|
|
|
searchField.SetClass("relative float-left mt-0 ml-2");
|
|
searchField.SetStyle("width: calc(100% - 3em);height: 100%");
|
|
|
|
super([searchField, goButton]);
|
|
|
|
this.SetClass("block h-8");
|
|
this.SetStyle(
|
|
"background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;"
|
|
);
|
|
|
|
// Triggered by 'enter' or onclick
|
|
function runSearch() {
|
|
const searchString = searchField.GetValue().data;
|
|
if (searchString === undefined || searchString === "") {
|
|
return;
|
|
}
|
|
searchField.GetValue().setData("");
|
|
placeholder.setData(Translations.t.general.search.searching);
|
|
Geocoding.Search(
|
|
searchString,
|
|
(result) => {
|
|
console.log("Search result", result);
|
|
if (result.length == 0) {
|
|
placeholder.setData(Translations.t.general.search.nothing);
|
|
return;
|
|
}
|
|
|
|
const poi = result[0];
|
|
const bb = poi.boundingbox;
|
|
const bounds: [[number, number], [number, number]] = [
|
|
[bb[0], bb[2]],
|
|
[bb[1], bb[3]],
|
|
];
|
|
state.selectedElement.setData(undefined);
|
|
Hash.hash.setData(poi.osm_type + "/" + poi.osm_id);
|
|
state.leafletMap.data.fitBounds(bounds);
|
|
placeholder.setData(Translations.t.general.search.search);
|
|
},
|
|
() => {
|
|
searchField.GetValue().setData("");
|
|
placeholder.setData(Translations.t.general.search.error);
|
|
}
|
|
);
|
|
}
|
|
|
|
searchField.enterPressed.addCallback(runSearch);
|
|
goButton.onClick(runSearch);
|
|
}
|
|
}
|