Starting to implement a <Finder> component.

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

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

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;
+}

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> = (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;

src/components/finder/index.ts

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

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
     <div class='ol-map' ref={target}>
       <Overlays map={getMap} />
+      <Finder />
       <GetLocation />
       <Forward />
       <Back />

src/i18n/en.ts

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

src/i18n/fr.ts

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