Starting to implement a <Finder> component.
This commit is contained in:
parent
79bcf65f27
commit
cc6ca0d718
|
@ -34,6 +34,7 @@
|
|||
"osmtogeojson": "^3.0.0-beta.5",
|
||||
"pouchdb": "^8.0.0",
|
||||
"pouchdb-browser": "^8.0.0",
|
||||
"proj4": "^2.8.1",
|
||||
"solid-js": "^1.6.9",
|
||||
"vite-plugin-solid-svg": "^0.6.0"
|
||||
},
|
||||
|
@ -43,6 +44,7 @@
|
|||
"@types/lodash": "^4.14.191",
|
||||
"@types/memoizee": "^0.4.8",
|
||||
"@types/pouchdb": "^6.4.0",
|
||||
"@types/proj4": "^2.5.2",
|
||||
"jsdom": ">=21.0.0",
|
||||
"solid-testing-library": ">=0.5.0",
|
||||
"typescript": "^4.9.4",
|
||||
|
@ -2062,6 +2064,12 @@
|
|||
"@types/pouchdb-find": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/proj4": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.2.tgz",
|
||||
"integrity": "sha512-/Nmfn9p08yaYw6xo5f2b0L+2oHk2kZeOkp5v+4VCeNfq+ETlLQbmHmC97/pjDIEZy8jxwz7pdPpwNzDHM5cuJw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/slice-ansi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/slice-ansi/-/slice-ansi-4.0.0.tgz",
|
||||
|
@ -4854,6 +4862,11 @@
|
|||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/mgrs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
|
||||
"integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
|
||||
|
@ -5534,6 +5547,15 @@
|
|||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/proj4": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/proj4/-/proj4-2.8.1.tgz",
|
||||
"integrity": "sha512-KK/bgM6oIwxdpeCaJ/JK3V1D8LMQCKKKzndab4/pYQNd+NVKTcddUNtds053Q110GxTALXVjx98L9f5q8xPVXQ==",
|
||||
"dependencies": {
|
||||
"mgrs": "1.0.0",
|
||||
"wkt-parser": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/prompts": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
|
||||
|
@ -7159,6 +7181,11 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/wkt-parser": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz",
|
||||
"integrity": "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
|
||||
},
|
||||
"node_modules/word-wrap": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
"@types/lodash": "^4.14.191",
|
||||
"@types/memoizee": "^0.4.8",
|
||||
"@types/pouchdb": "^6.4.0",
|
||||
"@types/proj4": "^2.5.2",
|
||||
"jsdom": ">=21.0.0",
|
||||
"solid-testing-library": ">=0.5.0",
|
||||
"typescript": "^4.9.4",
|
||||
|
@ -50,6 +51,7 @@
|
|||
"osmtogeojson": "^3.0.0-beta.5",
|
||||
"pouchdb": "^8.0.0",
|
||||
"pouchdb-browser": "^8.0.0",
|
||||
"proj4": "^2.8.1",
|
||||
"solid-js": "^1.6.9",
|
||||
"vite-plugin-solid-svg": "^0.6.0"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
.control {
|
||||
opacity: 1;
|
||||
position: fixed !important;
|
||||
top: 0px;
|
||||
margin-left: calc(100% - 230px) !important;
|
||||
z-index: 1;
|
||||
}
|
|
@ -0,0 +1,88 @@
|
|||
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;
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Finder';
|
|
@ -42,6 +42,7 @@ import { debounce } from 'lodash';
|
|||
import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
|
||||
import Account from '../account';
|
||||
import { Overlays } from '../overlays/Overlays';
|
||||
import Finder from '../finder';
|
||||
|
||||
const [getState, setState] = createSignal({
|
||||
lon: 0,
|
||||
|
@ -285,6 +286,7 @@ const Map: Component = () => {
|
|||
// @ts-ignore
|
||||
<div class='ol-map' ref={target}>
|
||||
<Overlays map={getMap} />
|
||||
<Finder />
|
||||
<GetLocation />
|
||||
<Forward />
|
||||
<Back />
|
||||
|
|
|
@ -73,6 +73,8 @@ const dict = {
|
|||
no: 'no',
|
||||
|
||||
deleteTrack: 'Delete this track',
|
||||
|
||||
search: 'Search',
|
||||
};
|
||||
|
||||
export default dict;
|
||||
|
|
|
@ -79,6 +79,8 @@ const dict = {
|
|||
no: 'non',
|
||||
|
||||
deleteTrack: 'Supprimer cette trace',
|
||||
|
||||
search: 'Chercher',
|
||||
};
|
||||
|
||||
export default dict;
|
||||
|
|
Loading…
Reference in New Issue