💎

client/src/pages/Session.tsx

@@ -4,7 +4,15 @@ import { getClient, killSession, restartSession, startSession } from '../api'
 import { SessionPictures } from '../components/SessionPictures'
 import { StatusChip } from '../components/StatusChip'
 
-import { Button, Divider, message, Popconfirm, Row, Typography } from 'antd'
+import {
+  Button,
+  Input,
+  InputNumber,
+  message,
+  Popconfirm,
+  Row,
+  Typography,
+} from 'antd'
 import { Content } from 'antd/lib/layout/layout'
 import { Client } from '../types'
 
@@ -15,10 +23,18 @@ export const Session = (props: Props) => {
   const { clientId } = props.match.params
   const [client, setClient] = useState<Client | null>(null)
   const [active, setActive] = useState(false)
+  const [lightTime, setLightTime] = useState(
+    parseInt(window.localStorage.getItem('lightTime') || '5000'),
+  )
+
+  const handleTimingUpdate = (n: number) => {
+    window.localStorage.setItem('lightTime', n.toString())
+    setLightTime(n)
+  }
 
   const handleStartSession = async () => {
     message.loading('Photo sequence starting! Stand by...')
-    await startSession(clientId)
+    await startSession(clientId, { light_time: lightTime })
     setActive(true)
   }
 
@@ -27,7 +43,7 @@ export const Session = (props: Props) => {
     message.loading(
       'Deleting photos & restarting capture sequence! Stand by...',
     )
-    await restartSession(clientId)
+    await restartSession(clientId, { light_time: lightTime })
     setActive(true)
   }
 
@@ -57,7 +73,7 @@ export const Session = (props: Props) => {
         Session View
       </Typography.Title>
 
-      <Row justify="space-around" style={{ width: '60%', margin: 'auto' }}>
+      <Row className="client-info">
         <Typography.Text>
           <strong>Name:</strong> {client?.name}
         </Typography.Text>
@@ -68,45 +84,56 @@ export const Session = (props: Props) => {
           <strong>Phone:</strong> {client?.phone}
         </Typography.Text>
       </Row>
-      <Divider />
-
-      <Row justify="center" className="session-toolbar">
-        <Button key="finish" onClick={handleExit}>
-          Back To Dashboard
-        </Button>
-        <Button
-          key="startsession"
-          disabled={active}
-          type="primary"
-          onClick={handleStartSession}
-        >
-          Capture
-        </Button>
-        <Popconfirm
-          disabled={!active}
-          key="retry"
-          title="Re-capture set?"
-          onConfirm={handleRestartSession}
-        >
-          <Button type="default" disabled={!active}>
-            Retry Capture
+      <div className="toolbar">
+        <Row justify="center" className="session-toolbar">
+          <Button key="finish" onClick={handleExit}>
+            Back To Dashboard
           </Button>
-        </Popconfirm>
-        <Popconfirm
-          key="nuke"
-          disabled={!active}
-          title="Delete all photos and return to dashboard?"
-          onConfirm={handleNuke}
-        >
-          <Button danger disabled={!active}>
-            Abort Session
+          <Button
+            key="startsession"
+            disabled={active}
+            type="primary"
+            onClick={handleStartSession}
+          >
+            Capture
           </Button>
-        </Popconfirm>
+          <Popconfirm
+            disabled={!active}
+            key="retry"
+            title="Re-capture set?"
+            onConfirm={handleRestartSession}
+          >
+            <Button type="default" disabled={!active}>
+              Retry Capture
+            </Button>
+          </Popconfirm>
+          <Popconfirm
+            key="nuke"
+            disabled={!active}
+            title="Delete all photos and return to dashboard?"
+            onConfirm={handleNuke}
+          >
+            <Button danger disabled={!active}>
+              Abort Session
+            </Button>
+          </Popconfirm>
 
-        <StatusChip poll={true} />
-      </Row>
-
-      <Divider />
+          <StatusChip poll={true} />
+        </Row>
+        <Row className="session-toolbar">
+          <h3>Light Duration (ms)</h3>
+          <InputNumber value={lightTime} onChange={handleTimingUpdate} />
+          <Input
+            className="slider"
+            type="range"
+            onChange={(e) => handleTimingUpdate(parseInt(e.target.value))}
+            value={lightTime}
+            min={500}
+            max={10000}
+            step={500}
+          />
+        </Row>
+      </div>
       <Row className="controls">
         {active && <SessionPictures clientId={clientId} />}
       </Row>