Merge pull request #55 from TurtIeSocks/various-client-adjustments

various client adjustments

.github/workflows/docker.yml

@@ -1,9 +1,5 @@
 name: Docker
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
+on: [push]
 
 env:
   REGISTRY: ghcr.io
@@ -34,11 +30,15 @@ jobs:
         uses: docker/metadata-action@v4
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v3
         with:
           context: .
           push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

client/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "koji",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Tool to make RDM routes",
   "main": "server/dist/index.js",
   "author": "TurtIeSocks <[email protected]>",

client/src/assets/types.ts

@@ -7,6 +7,12 @@ import * as L from 'leaflet'
 import type { UsePersist } from '@hooks/usePersist'
 import type { UseStatic } from '@hooks/useStatic'
 
+export type SpecificValueType<T, U> = {
+  [k in keyof T]: T[k] extends U ? k : never
+}[keyof T]
+
+export type OnlyType<T, U> = { [k in SpecificValueType<T, U>]: U }
+
 export interface Data {
   gyms: PixiMarker[]
   pokestops: PixiMarker[]

client/src/components/dialogs/Manager.tsx

@@ -73,6 +73,7 @@ export default function Manager({ open, setOpen, geojson }: Props) {
           Save to Koji
         </Button>
         <Button
+          disabled
           onClick={() =>
             save('/api/v1/geofence/save-scanner', code).then((res) =>
               console.log(res),

client/src/components/dialogs/Polygon.tsx

@@ -7,10 +7,10 @@ import type { ToConvert } from '@assets/types'
 import { usePersist } from '@hooks/usePersist'
 import { useShapes } from '@hooks/useShapes'
 import { convert } from '@services/fetches'
+import MultiOptions from '@components/drawer/inputs/MultiOptions'
 
 import DialogHeader from './Header'
 import { Code } from '../Code'
-import BtnGroup from '../drawer/inputs/BtnGroup'
 
 interface Props {
   open: string
@@ -40,7 +40,6 @@ export default function ExportPolygon({
 }: Import | Export | ExportAll): JSX.Element {
   const polygonExportMode = usePersist((s) => s.polygonExportMode)
   const simplifyPolygons = usePersist((s) => s.simplifyPolygons)
-  const setStore = usePersist((s) => s.setStore)
 
   const add = useShapes((s) => s.setters.add)
 
@@ -147,22 +146,22 @@ export default function ExportPolygon({
       </DialogContent>
       <DialogActions>
         {(mode === 'export' || mode === 'exportAll') && (
-          <BtnGroup
+          <MultiOptions
             field="polygonExportMode"
-            value={polygonExportMode}
-            setValue={setStore}
             buttons={[
-              'featureCollection',
-              'feature',
               'array',
+              'multiArray',
+              'feature',
+              'featureCollection',
               'struct',
+              'multiStruct',
               'text',
               'altText',
               'poracle',
             ]}
           />
         )}
-        <Button onClick={() => navigator.clipboard.writeText(code)}>
+        <Button onPointerDown={() => navigator.clipboard.writeText(code)}>
           Copy to Clipboard
         </Button>
         <Button

client/src/components/drawer/drawing/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { List, Divider, ListItem } from '@mui/material'
+
+import ListSubheader from '../../styled/Subheader'
+import Toggle from '../inputs/Toggle'
+import MultiOptions from '../inputs/MultiOptions'
+
+export default function DrawingTab() {
+  return (
+    <List dense>
+      <ListSubheader disableGutters>Drawing Options</ListSubheader>
+      <Toggle field="snappable" />
+      <Toggle field="continueDrawing" />
+      <ListItem>
+        Activate:
+        <MultiOptions field="setActiveMode" buttons={['hover', 'click']} />
+      </ListItem>
+      <Divider sx={{ my: 2 }} />
+      <ListSubheader disableGutters>Vectors</ListSubheader>
+      <Toggle field="showCircles" />
+      <Toggle field="showLines" />
+      <Toggle field="showPolygons" />
+      <Toggle field="showArrows" />
+    </List>
+  )
+}

client/src/components/drawer/index.tsx

@@ -12,7 +12,7 @@ import { safeParse } from '@services/utils'
 
 import { Drawer } from '../styled/Drawer'
 import DrawerHeader from '../styled/DrawerHeader'
-import GeofenceTab from './geofence'
+import DrawingTab from './drawing'
 import RoutingTab from './routing'
 import MenuAccordion from './MenuItem'
 import ImportExport from './manage'
@@ -72,7 +72,7 @@ export default function DrawerIndex({ drawerWidth }: Props) {
                 {!!i && <Divider />}
                 <MenuAccordion name={text}>
                   {{
-                    Drawing: <GeofenceTab />,
+                    Drawing: <DrawingTab />,
                     Clustering: <RoutingTab />,
                     Manage: <ImportExport />,
                     Settings: <Settings />,

client/src/components/drawer/inputs/DateTime.tsx

@@ -3,23 +3,21 @@ import dayjs from 'dayjs'
 import TextField from '@mui/material/TextField'
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 
-import { type UsePersist } from '@hooks/usePersist'
+import { usePersist, type UsePersist } from '@hooks/usePersist'
 import { fromCamelCase, fromSnakeCase } from '@services/utils'
 import { ListItem } from '@mui/material'
+import { OnlyType } from '@assets/types'
 
-interface Props<T extends keyof UsePersist> {
+export default function DateTime<T extends keyof OnlyType<UsePersist, Date>>({
+  field,
+  disabled,
+}: {
   field: T
-  value: Date
-  setValue: (field: Props<T>['field'], value: Props<T>['value']) => void
   disabled?: boolean
-}
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
 
-export default function DateTime<T extends keyof UsePersist>({
-  field,
-  value,
-  setValue,
-  disabled,
-}: Props<T>) {
   return (
     <ListItem>
       <DateTimePicker
@@ -35,7 +33,7 @@ export default function DateTime<T extends keyof UsePersist>({
         value={dayjs(value)}
         onChange={(newValue) => {
           if (newValue) {
-            setValue(field, newValue.set('second', 0).set('minute', 0).toDate())
+            setStore(field, newValue.set('second', 0).set('minute', 0).toDate())
           }
         }}
       />

client/src/components/drawer/inputs/MultiOptions.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import {
+  ToggleButtonGroup,
+  ToggleButton,
+  Select,
+  MenuItem,
+} from '@mui/material'
+
+import { usePersist, type UsePersist } from '@hooks/usePersist'
+import { fromCamelCase, fromSnakeCase } from '@services/utils'
+import { OnlyType } from '@assets/types'
+
+export default function MultiOptions<
+  T extends keyof OnlyType<UsePersist, string>,
+  K extends UsePersist[T],
+>({
+  field,
+  buttons,
+  disabled = false,
+  type = 'button',
+}: {
+  field: T
+  buttons: K[]
+  disabled?: boolean
+  type?: 'button' | 'select'
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
+
+  return type === 'button' ? (
+    <ToggleButtonGroup
+      size="small"
+      color="primary"
+      value={value}
+      exclusive
+      onChange={(_e, v) => setStore(field, v)}
+      sx={{ mx: 'auto' }}
+      disabled={disabled}
+    >
+      {buttons.map((m) => (
+        <ToggleButton key={m} value={m} disabled={disabled}>
+          {m.includes('_') ? fromSnakeCase(m) : fromCamelCase(m)}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  ) : (
+    <Select
+      size="small"
+      color="primary"
+      value={value}
+      onChange={({ target }) => setStore(field, target.value as K)} // Mui y u like this
+      sx={{ mx: 'auto' }}
+      disabled={disabled}
+    >
+      {buttons.map((m) => (
+        <MenuItem key={m} value={m}>
+          {m.includes('_') ? fromSnakeCase(m) : fromCamelCase(m)}
+        </MenuItem>
+      ))}
+    </Select>
+  )
+}

client/src/components/drawer/inputs/NumInput.tsx

@@ -3,22 +3,23 @@ import * as React from 'react'
 import { ListItem, ListItemText, TextField } from '@mui/material'
 
 import { fromCamelCase, fromSnakeCase } from '@services/utils'
+import { UsePersist, usePersist } from '@hooks/usePersist'
+import { OnlyType } from '@assets/types'
 
-interface Props<T> {
+export default function NumInput<
+  T extends keyof OnlyType<UsePersist, number | ''>,
+>({
+  field,
+  endAdornment,
+  disabled = false,
+}: {
   field: T
-  value: number | ''
-  setValue: (field: T, value: number | '') => void
   disabled?: boolean
   endAdornment?: string
-}
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
 
-export default function NumInput<T extends string>({
-  field,
-  value,
-  setValue,
-  endAdornment,
-  disabled = false,
-}: Props<T>) {
   return (
     <ListItem disabled={disabled}>
       <ListItemText
@@ -28,17 +29,10 @@ export default function NumInput<T extends string>({
       />
       <TextField
         name={field}
-        value={value}
+        value={value || ''}
         type="number"
         size="small"
-        onChange={({ target }) => {
-          setValue(
-            field,
-            target.value && (+target.value || target.value === '0')
-              ? +target.value
-              : '',
-          )
-        }}
+        onChange={({ target }) => setStore(field, +target.value)}
         sx={{ width: '35%' }}
         inputProps={{ min: 0, max: 9999 }}
         InputProps={{ endAdornment }}