ScanNext & ScanZone fixes

server/src/services/api/scannerApi.js

@@ -37,17 +37,17 @@ module.exports = async function scannerApi(category, method, data = null) {
           console.log(
             `[scannerApi] Request to scan new location by ${data.username}${
               data.userId ? ` (${data.userId})` : ''
-            } - type ${data.scanNextType}: ${data.scanNextLocation[0].toFixed(
+            } - type ${data.scanNextType}: ${data.scanLocation[0].toFixed(
               5,
-            )},${data.scanNextLocation[1].toFixed(5)}`,
+            )},${data.scanLocation[1].toFixed(5)}`,
           )
           const coords =
             config.scanner.backendConfig.platform === 'mad'
-              ? `${parseFloat(
-                  data.scanNextCoords[0][0].toFixed(5),
-                )},${parseFloat(data.scanNextCoords[0][1].toFixed(5))}`
+              ? `${parseFloat(data.scanCoords[0][0].toFixed(5))},${parseFloat(
+                  data.scanCoords[0][1].toFixed(5),
+                )}`
               : JSON.stringify(
-                  data.scanNextCoords.map((coord) => ({
+                  data.scanCoords.map((coord) => ({
                     lat: parseFloat(coord[0].toFixed(5)),
                     lon: parseFloat(coord[1].toFixed(5)),
                   })),
@@ -76,12 +76,12 @@ module.exports = async function scannerApi(category, method, data = null) {
           console.log(
             `[scannerApi] Request to scan new zone by ${data.username}${
               data.userId ? ` (${data.userId})` : ''
-            } - size ${data.scanZoneSize}: ${data.scanZoneLocation[0].toFixed(
+            } - size ${data.scanZoneSize}: ${data.scanLocation[0].toFixed(
               5,
-            )},${data.scanZoneLocation[1].toFixed(5)}`,
+            )},${data.scanLocation[1].toFixed(5)}`,
           )
           const coords = JSON.stringify(
-            data.scanZoneCoords.map((coord) => ({
+            data.scanCoords.map((coord) => ({
               lat: parseFloat(coord[0].toFixed(5)),
               lon: parseFloat(coord[1].toFixed(5)),
             })),

src/components/Map.jsx

@@ -10,8 +10,7 @@ import { useStatic, useStore } from '@hooks/useStore'
 import Nav from './layout/Nav'
 import QueryData from './QueryData'
 import Webhook from './layout/dialogs/webhooks/Webhook'
-import ScanNext from './layout/dialogs/scanner/ScanNext'
-import ScanZone from './layout/dialogs/scanner/ScanZone'
+import ScanOnDemand from './layout/dialogs/scanner/ScanOnDemand'
 import ClientError from './layout/dialogs/ClientError'
 
 const userSettingsCategory = (category) => {
@@ -164,7 +163,7 @@ export default function Map({
         Object.entries({ ...ui, ...ui.wayfarer, ...ui.admin }).map(
           ([category, value]) => {
             let enabled = false
-
+            if (scanZoneMode === 'setLocation') return null
             switch (category) {
               case 'scanAreas':
                 if (
@@ -275,20 +274,21 @@ export default function Map({
         )
       )}
       {scanNextMode && (
-        <ScanNext
+        <ScanOnDemand
           map={map}
-          scanNextMode={scanNextMode}
-          setScanNextMode={setScanNextMode}
+          scanMode={scanNextMode}
+          setScanMode={setScanNextMode}
           scanner={scanner}
+          mode="scanNext"
         />
       )}
       {scanZoneMode && (
-        <ScanZone
+        <ScanOnDemand
           map={map}
-          theme={theme}
-          scanZoneMode={scanZoneMode}
-          setScanZoneMode={setScanZoneMode}
+          scanMode={scanZoneMode}
+          setScanMode={setScanZoneMode}
           scanner={scanner}
+          mode="scanZone"
         />
       )}
       <Nav

src/components/layout/custom/AdvancedAccordion.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
-  createTheme,
-  ThemeProvider,
+  withStyles,
   Grid,
   Typography,
   Accordion,
@@ -11,84 +10,70 @@ import {
 import { ExpandMore } from '@material-ui/icons'
 import { useTranslation } from 'react-i18next'
 
-const accordionTheme = {
-  overrides: {
-    MuiAccordion: {
-      root: {
-        marginTop: 5,
-        border: 'none',
-        boxShadow: 'none',
-        borderRadius: 5,
-        '&:before': {
-          display: 'none',
-        },
-        '&$expanded': {
-          marginTop: 5,
-        },
-      },
-      rounded: {
-        borderRadius: 5,
-      },
-      expanded: {},
+const StyledAccordion = withStyles({
+  root: {
+    marginTop: 5,
+    border: 'none',
+    boxShadow: 'none',
+    borderRadius: 5,
+    '&:before': {
+      display: 'none',
     },
-    MuiAccordionSummary: {
-      root: {
-        backgroundColor: '#2e2e2e',
-        padding: '0px 5px 0px 8px',
-        minHeight: 30,
-        borderRadius: 5,
-        '&$expanded': {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-          minHeight: 30,
-        },
-      },
-      content: {
-        margin: '8px 0px',
-        '&$expanded': {
-          margin: '8px 0px',
-        },
-      },
-      expandIcon: {
-        padding: 0,
-        margin: 0,
-      },
-      expanded: {},
+    '&$expanded': {
+      marginTop: 5,
     },
   },
-}
+  rounded: {
+    borderRadius: 5,
+  },
+  expanded: {},
+})(Accordion)
+
+const StyledAccordionSummary = withStyles({
+  root: {
+    backgroundColor: '#2e2e2e',
+    padding: '0px 5px 0px 8px',
+    minHeight: 30,
+    borderRadius: 5,
+    '&$expanded': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      minHeight: 30,
+    },
+  },
+  content: {
+    margin: '8px 0px',
+    '&$expanded': {
+      margin: '8px 0px',
+    },
+  },
+  expandIcon: {
+    padding: 0,
+    margin: 0,
+  },
+  expanded: {},
+})(AccordionSummary)
 
-export default function AdvancedAccordion({ block, theme = {} }) {
+export default function AdvancedAccordion({ block = null, children }) {
   const { t } = useTranslation()
   return (
-    <ThemeProvider theme={theme}>
-      <ThemeProvider
-        theme={(theme2) =>
-          createTheme({
-            ...theme2,
-            ...accordionTheme,
-          })
-        }
+    <StyledAccordion>
+      <StyledAccordionSummary
+        expandIcon={<ExpandMore style={{ color: 'white' }} />}
       >
-        <Accordion>
-          <AccordionSummary
-            expandIcon={<ExpandMore style={{ color: 'white' }} />}
-          >
-            <Typography variant="caption">{t('advanced')}</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Grid
-              container
-              style={{ width: 200 }}
-              direction="row"
-              justifyContent="center"
-              alignItems="center"
-            >
-              {block}
-            </Grid>
-          </AccordionDetails>
-        </Accordion>
-      </ThemeProvider>
-    </ThemeProvider>
+        <Typography variant="caption">{t('advanced')}</Typography>
+      </StyledAccordionSummary>
+      <AccordionDetails>
+        <Grid
+          container
+          style={{ width: 200 }}
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+        >
+          {block ?? children}
+        </Grid>
+      </AccordionDetails>
+    </StyledAccordion>
   )
 }

src/components/layout/dialogs/scanner/ScanDialog.jsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Dialog, DialogContent, Grid, Typography } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+import Header from '@components/layout/general/Header'
+import Footer from '@components/layout/general/Footer'
+
+export default function ScanDialog({ scanMode, setScanMode }) {
+  const { t } = useTranslation()
+
+  return (
+    <Dialog
+      onClose={() => setScanMode(false)}
+      open={['confirmed', 'loading', 'error'].includes(scanMode)}
+      maxWidth="xs"
+    >
+      <Header
+        titles={[`scan_${scanMode}_title`]}
+        action={() => setScanMode(false)}
+      />
+      <DialogContent>
+        <Grid item style={{ textAlign: 'center' }}>
+          <Typography variant="subtitle1" align="center">
+            {t(`scan_${scanMode}`)}
+          </Typography>
+        </Grid>
+      </DialogContent>
+      <Footer
+        options={[
+          {
+            name: 'close',
+            icon: 'Clear',
+            color: 'primary',
+            align: 'right',
+            action: () => setScanMode(false),
+          },
+        ]}
+      />
+    </Dialog>
+  )
+}