Add number fields for segments inside EditVirtuals

YeonV · Jan 31, 2024 · 7df15f3 · 7df15f3
1 parent 2b522de
commit 7df15f3
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 45 deletions.
diff --git a/src/pages/Devices/EditVirtuals/PixelSlider.tsx b/src/pages/Devices/EditVirtuals/PixelSlider.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useThrottledCallback } from 'use-debounce'
 import Slider from '@mui/material/Slider'
+import { Stack, TextField } from '@mui/material'
 import useStore from '../../../store/useStore'
 
 const PixelSlider = ({ s, handleRangeSegment }: any) => {
@@ -39,19 +40,92 @@ const PixelSlider = ({ s, handleRangeSegment }: any) => {
   ]
 
   return (
-    <Slider
-      value={range}
-      marks={marks}
-      valueLabelFormat={(e) => e + 1}
-      min={0}
-      max={devices[s[0]].config.pixel_count - 1}
-      onChange={(_event: any, n: any) => {
-        setRange(n)
-        throttled(_event, n)
-      }}
-      aria-labelledby="range-slider"
-      valueLabelDisplay="auto"
-    />
+    <Stack direction="row" spacing={5} alignItems="flex-start" flexBasis="100%">
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="flex-start"
+        alignSelf="flex-end"
+      >
+        <TextField
+          size="small"
+          type="number"
+          sx={{ minWidth: '80px' }}
+          InputProps={{
+            inputProps: {
+              style: { padding: '4.5px 14px' },
+              min: 1,
+              max: devices[s[0]].config.pixel_count
+            }
+          }}
+          value={range[0] + 1}
+          onChange={(
+            e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+          ) => {
+            if (parseInt(e.target.value, 10) > range[1] + 1) {
+              return
+            }
+            if (parseInt(e.target.value, 10) < 1) {
+              setRange([0, range[1]])
+              throttled(e, [0, range[1]])
+              return
+            }
+            setRange([parseInt(e.target.value, 10) - 1, range[1]])
+            throttled(e, [parseInt(e.target.value, 10) - 1, range[1]])
+          }}
+        />
+        <TextField
+          size="small"
+          type="number"
+          sx={{ minWidth: '80px' }}
+          InputProps={{
+            inputProps: {
+              style: { padding: '4.5px 14px' },
+              min: range[0] + 1,
+              max: devices[s[0]].config.pixel_count
+            }
+          }}
+          value={range[1] + 1}
+          onChange={(
+            e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+          ) => {
+            if (e.target.value === '') {
+              setRange([range[0], range[0] + 1])
+              throttled(e, [range[0], range[0] + 1])
+              return
+            }
+            if (parseInt(e.target.value, 10) < range[0] + 1) {
+              setRange([range[0], range[0] + 1])
+              throttled(e, [range[0], range[0] + 1])
+              return
+            }
+            if (
+              parseInt(e.target.value, 10) > devices[s[0]].config.pixel_count
+            ) {
+              setRange([range[0], devices[s[0]].config.pixel_count - 1])
+              throttled(e, [range[0], devices[s[0]].config.pixel_count - 1])
+              return
+            }
+            setRange([range[0], parseInt(e.target.value, 10) - 1])
+            throttled(e, [range[0], parseInt(e.target.value, 10) - 1])
+          }}
+        />
+      </Stack>
+      <Slider
+        sx={{ alignSelf: 'center' }}
+        value={range}
+        marks={marks}
+        valueLabelFormat={(e) => e + 1}
+        min={0}
+        max={devices[s[0]].config.pixel_count - 1}
+        onChange={(_event: any, n: any) => {
+          setRange(n)
+          throttled(_event, n)
+        }}
+        aria-labelledby="range-slider"
+        valueLabelDisplay="auto"
+      />
+    </Stack>
   )
 }
 

diff --git a/src/pages/Devices/EditVirtuals/Segment.tsx b/src/pages/Devices/EditVirtuals/Segment.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Typography, Button } from '@mui/material'
+import { Typography, Button, Stack } from '@mui/material'
 import { ExpandLess, ExpandMore, SwapHoriz } from '@mui/icons-material'
 import { swap } from '../../../utils/helpers'
 import PopoverSure from '../../../components/Popover/Popover'
@@ -102,39 +102,45 @@ const Segment = ({ s, i, virtual, segments, calib }: any) => {
       }}
     >
       <div className={classes.segmentsWrapper}>
-        <div className={classes.segmentsColOrder}>
-          <div style={{ display: 'flex' }}>
-            <div>
-              <Button
-                disabled={i === 0}
-                color="inherit"
-                onClick={() => reorder('UP')}
-                size="small"
-                className={classes.segmentsButtonUp}
-              >
-                <ExpandLess />
-              </Button>
+        <Stack direction="column" spacing={1} alignItems="flex-start">
+          <Typography color="textSecondary" marginTop={1} marginBottom={-1}>
+            {title}
+          </Typography>
+          <div className={classes.segmentsColOrder}>
+            <div style={{ display: 'flex' }}>
+              <div>
+                <Button
+                  disabled={i === 0}
+                  color="inherit"
+                  onClick={() => reorder('UP')}
+                  size="small"
+                  className={classes.segmentsButtonUp}
+                >
+                  <ExpandLess />
+                </Button>
+              </div>
+              <div>
+                <Button
+                  disabled={i === virtual.segments.length - 1}
+                  color="inherit"
+                  onClick={() => reorder('DOWN')}
+                  size="small"
+                  className={classes.segmentsButtonDown}
+                >
+                  <ExpandMore />
+                </Button>
+              </div>
             </div>
-            <div>
-              <Button
-                disabled={i === virtual.segments.length - 1}
-                color="inherit"
-                onClick={() => reorder('DOWN')}
-                size="small"
-                className={classes.segmentsButtonDown}
-              >
-                <ExpandMore />
-              </Button>
-            </div>
-          </div>
-          <div style={{ minWidth: '120px' }}>
-            <Typography color="textSecondary">{title}</Typography>
-            <Typography color="textSecondary">
-              {s[1] === s[2] ? s[1] + 1 : `[ ${s[1] + 1} - ${s[2] + 1} ]`}
-            </Typography>
           </div>
-        </div>
-        <div className={classes.segmentsColPixelSlider}>
+        </Stack>
+        <div
+          className={classes.segmentsColPixelSlider}
+          style={{
+            alignSelf: 'stretch',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
           <PixelSlider s={s} handleRangeSegment={handleRangeSegment} />
         </div>
         <div className={classes.segmentsColActions}>