147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
import { Coordinate } from 'ol/coordinate';
|
|
import { Component, createEffect, createSignal } from 'solid-js';
|
|
import { useNavigate } from '@solidjs/router';
|
|
|
|
import SearchIcon from '@suid/icons-material/Search';
|
|
import { useI18n } from '@solid-primitives/i18n';
|
|
import proj4 from 'proj4';
|
|
|
|
import style from './Finder.module.css';
|
|
import { Box, Button, IconButton, TextField } from '@suid/material';
|
|
import Dialog from '../dialog';
|
|
import { getMap, getState } from '../map';
|
|
import { Overlay } from 'ol';
|
|
import { fromLonLat } from 'ol/proj';
|
|
|
|
interface Props {}
|
|
|
|
const Finder: Component<Props> = (props) => {
|
|
const [open, setOpen] = createSignal(false);
|
|
const [searchString, setSearchString] = createSignal('');
|
|
const [popupContent, setPopupContent] = createSignal(<></>);
|
|
const navigate = useNavigate();
|
|
const [t, { add, locale, dict }] = useI18n();
|
|
const [popup, setPopup] = createSignal<Overlay>();
|
|
const searchStringChangeHandler = (event: any) => {
|
|
setSearchString(event.target.value);
|
|
};
|
|
|
|
const popupCloseHandler = () => {
|
|
popup()?.setMap(null);
|
|
};
|
|
|
|
let popupElement: HTMLElement;
|
|
|
|
const submitHandler = () => {
|
|
let coordinates: Coordinate | undefined = undefined;
|
|
const latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
|
|
const latLonMatch = searchString().match(latLonRegExp);
|
|
|
|
if (!!latLonMatch) {
|
|
coordinates = [+latLonMatch[2], +latLonMatch[1]];
|
|
setPopupContent(<>{latLonMatch[0]}</>);
|
|
console.log({
|
|
caller: 'Finder / submitHandler',
|
|
searchString: searchString(),
|
|
latLonMatch,
|
|
coordinates,
|
|
});
|
|
} else {
|
|
const utmRegExp = /([0-6]?[0-9])\s*([C-X])\s*([0-9]+)\s*([0-9]+)/;
|
|
const utmMatch = searchString().match(utmRegExp);
|
|
if (!!utmMatch) {
|
|
const utm = `+proj=utm +zone=${utmMatch[1]}`;
|
|
coordinates = proj4(utm, 'EPSG:4326', [+utmMatch[3], +utmMatch[4]]);
|
|
setPopupContent(
|
|
<>{`${coordinates[0]}, ${coordinates[1]} (UTM ${utmMatch[0]})`}</>
|
|
);
|
|
}
|
|
console.log({
|
|
caller: 'Finder / submitHandler',
|
|
searchString: searchString(),
|
|
utmMatch,
|
|
coordinates,
|
|
});
|
|
}
|
|
|
|
if (!!coordinates) {
|
|
setOpen(false);
|
|
if (popup() === undefined) {
|
|
setPopup(
|
|
new Overlay({
|
|
element: popupElement,
|
|
positioning: 'center-center',
|
|
})
|
|
);
|
|
}
|
|
console.log({
|
|
caller: 'Finder / submitHandler / popup',
|
|
searchString: searchString(),
|
|
coordinates,
|
|
popup: popup(),
|
|
popupElement,
|
|
});
|
|
popup().setMap(getMap());
|
|
popup().setPosition(fromLonLat(coordinates));
|
|
getMap()?.addOverlay(popup());
|
|
|
|
navigate(
|
|
`/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
|
|
getState().rotation
|
|
}`
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div class={style.control}>
|
|
<IconButton
|
|
onClick={() => {
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
<SearchIcon />
|
|
</IconButton>
|
|
</div>
|
|
<Dialog
|
|
closeHandler={() => {
|
|
setOpen(false);
|
|
}}
|
|
open={open()}
|
|
title={t('search')}
|
|
>
|
|
<Box
|
|
component='form'
|
|
sx={{
|
|
width: '100%',
|
|
'& .MuiTextField-root': { m: 1, width: '100%' },
|
|
paddingTop: '5px',
|
|
}}
|
|
noValidate
|
|
autoComplete='off'
|
|
onSubmit={submitHandler}
|
|
method='dialog'
|
|
>
|
|
<TextField onChange={searchStringChangeHandler} />
|
|
</Box>
|
|
</Dialog>
|
|
<div class={style.ol_popup} ref={popupElement}>
|
|
<a
|
|
href='#'
|
|
onclick={popupCloseHandler}
|
|
class={style.ol_popup_closer}
|
|
></a>
|
|
<div>
|
|
<div>{popupContent()}</div>
|
|
<div>
|
|
<Button>New waypoint</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Finder;
|