From cc6ca0d7188573f8abf440e1b810a7d3dd821d26 Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 31 Jan 2023 17:32:19 +0100 Subject: [PATCH] Starting to implement a component. --- package-lock.json | 27 ++++++++ package.json | 2 + src/components/finder/Finder.module.css | 7 ++ src/components/finder/Finder.tsx | 88 +++++++++++++++++++++++++ src/components/finder/index.ts | 1 + src/components/map/Map.tsx | 2 + src/i18n/en.ts | 2 + src/i18n/fr.ts | 2 + 8 files changed, 131 insertions(+) create mode 100644 src/components/finder/Finder.module.css create mode 100644 src/components/finder/Finder.tsx create mode 100644 src/components/finder/index.ts diff --git a/package-lock.json b/package-lock.json index fc05def..87547fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8b5587d..4df255e 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/components/finder/Finder.module.css b/src/components/finder/Finder.module.css new file mode 100644 index 0000000..b2ea16d --- /dev/null +++ b/src/components/finder/Finder.module.css @@ -0,0 +1,7 @@ +.control { + opacity: 1; + position: fixed !important; + top: 0px; + margin-left: calc(100% - 230px) !important; + z-index: 1; +} diff --git a/src/components/finder/Finder.tsx b/src/components/finder/Finder.tsx new file mode 100644 index 0000000..2f6cfed --- /dev/null +++ b/src/components/finder/Finder.tsx @@ -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) => { + 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 ( + <> +
+ { + setOpen(true); + }} + > + + +
+ { + setOpen(false); + }} + open={open()} + title={t('search')} + > + + + + + + ); +}; + +export default Finder; diff --git a/src/components/finder/index.ts b/src/components/finder/index.ts new file mode 100644 index 0000000..af60998 --- /dev/null +++ b/src/components/finder/index.ts @@ -0,0 +1 @@ +export { default } from './Finder'; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 3c672e9..995fdae 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -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
+ diff --git a/src/i18n/en.ts b/src/i18n/en.ts index d866bc2..b218790 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -73,6 +73,8 @@ const dict = { no: 'no', deleteTrack: 'Delete this track', + + search: 'Search', }; export default dict; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 0a46935..42e89ff 100644 --- a/src/i18n/fr.ts +++ b/src/i18n/fr.ts @@ -79,6 +79,8 @@ const dict = { no: 'non', deleteTrack: 'Supprimer cette trace', + + search: 'Chercher', }; export default dict;