89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { Coordinate } from 'ol/coordinate';
|
|
import { Component, 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, IconButton, TextField } from '@suid/material';
|
|
import Dialog from '../dialog';
|
|
import { getState } from '../map';
|
|
|
|
interface Props {}
|
|
|
|
const Finder: Component<Props> = (props) => {
|
|
const [open, setOpen] = createSignal(false);
|
|
const [searchString, setSearchString] = createSignal('');
|
|
const navigate = useNavigate();
|
|
const [t, { add, locale, dict }] = useI18n();
|
|
|
|
const searchStringChangeHandler = (event: any) => {
|
|
setSearchString(event.target.value);
|
|
};
|
|
|
|
const submitHandler = () => {
|
|
let coordinates: Coordinate | undefined = undefined;
|
|
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]]);
|
|
}
|
|
console.log({
|
|
caller: 'Finder / submitHandler',
|
|
searchString: searchString(),
|
|
isUtm: utmMatch,
|
|
coordinates,
|
|
});
|
|
|
|
if (!!coordinates) {
|
|
setOpen(false);
|
|
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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Finder;
|