Starting to implement a <Finder> component.

This commit is contained in:
Eric van der Vlist 2023-01-31 17:32:19 +01:00
parent 79bcf65f27
commit cc6ca0d718
8 changed files with 131 additions and 0 deletions

27
package-lock.json generated
View File

@ -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",

View File

@ -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"
}

View File

@ -0,0 +1,7 @@
.control {
opacity: 1;
position: fixed !important;
top: 0px;
margin-left: calc(100% - 230px) !important;
z-index: 1;
}

View File

@ -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;

View File

@ -0,0 +1 @@
export { default } from './Finder';

View File

@ -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 />

View File

@ -73,6 +73,8 @@ const dict = {
no: 'no',
deleteTrack: 'Delete this track',
search: 'Search',
};
export default dict;

View File

@ -79,6 +79,8 @@ const dict = {
no: 'non',
deleteTrack: 'Supprimer cette trace',
search: 'Chercher',
};
export default dict;