Basic structure for recording UI

src/components/gpx-record/GpxRecord.module.css

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

src/components/gpx-record/GpxRecord.tsx

@@ -0,0 +1,120 @@
+import {
+  Box,
+  Button,
+  DialogActions,
+  IconButton,
+  Typography,
+} from '@suid/material';
+import FiberManualRecordIcon from '@suid/icons-material/FiberManualRecord';
+import { Component, createEffect, createSignal, Show } from 'solid-js';
+import style from './GpxRecord.module.css';
+import Dialog from '../dialog';
+import { useI18n } from '@solid-primitives/i18n';
+import GpxChooser from '../gpx-chooser';
+import { currentGpxId } from '../gpx-dialog';
+
+const GpxRecord: Component<{}> = (props) => {
+  const [t] = useI18n();
+  const [state, setState] = createSignal('stopped');
+  const [open, setOpen] = createSignal(false);
+  const [gpxId, setGpxId] = createSignal<string>('');
+  const [trkId, setTrkId] = createSignal<string>('');
+
+  const handleClickOpen = () => {
+    if (state() === 'stopped') {
+      setGpxId(currentGpxId());
+    }
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const startRecordingHandler = () => {
+    setState('recording');
+    setOpen(false);
+  };
+  const pauseRecordingHandler = () => {
+    setState('paused');
+    setOpen(false);
+  };
+  const resumeRecordingHandler = () => {
+    setState('recording');
+    setOpen(false);
+  };
+  const stopRecordingHandler = () => {
+    setState('stopped');
+    setOpen(false);
+  };
+  return (
+    <>
+      <div class={style.control}>
+        <IconButton onClick={handleClickOpen}>
+          <FiberManualRecordIcon
+            color={state() === 'recording' ? 'error' : 'inherit'}
+          />
+        </IconButton>
+      </div>
+      <Dialog open={open()} title={t('gpxRecord')} closeHandler={handleClose}>
+        <Box
+          sx={{
+            width: '100%',
+          }}
+        >
+          <GpxChooser
+            gpxId={gpxId}
+            setGpxId={setGpxId}
+            disabled={state() !== 'stopped'}
+          />
+          <Typography sx={{ paddingTop: '20px' }} variant='h6'>
+            {t(`gpx_${state()}`)}
+          </Typography>
+        </Box>
+        <DialogActions>
+          <Show when={state() === 'stopped'}>
+            <Button
+              color='primary'
+              variant='contained'
+              onClick={startRecordingHandler}
+            >
+              {t('gpxStartRecording')}
+            </Button>
+          </Show>
+          <Show when={state() === 'recording'}>
+            <Button
+              color='primary'
+              variant='contained'
+              onClick={pauseRecordingHandler}
+            >
+              {t('gpxPauseRecording')}
+            </Button>
+            <Button
+              color='warning'
+              variant='contained'
+              onClick={stopRecordingHandler}
+            >
+              {t('gpxStopRecording')}
+            </Button>
+          </Show>
+          <Show when={state() === 'paused'}>
+            <Button
+              color='primary'
+              variant='contained'
+              onClick={resumeRecordingHandler}
+            >
+              {t('gpxResumeRecording')}
+            </Button>
+            <Button
+              color='warning'
+              variant='contained'
+              onClick={stopRecordingHandler}
+            >
+              {t('gpxStopRecording')}
+            </Button>
+          </Show>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default GpxRecord;

src/components/gpx-record/index.ts

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

src/components/map/Map.tsx

@@ -35,6 +35,7 @@ import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
 import DragZoom from 'ol/interaction/DragZoom';
 import Infos, { clickHandler } from '../infos';
 import GpxDialog from '../gpx-dialog';
+import GpxRecord from '../gpx-record';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -202,6 +203,7 @@ const Map: Component = () => {
       <GetLocation />
       <Forward />
       <Back />
+      <GpxRecord />
       <GpxImport />
       <MapTileProvider />
       <GpxDialog />