💎

client/src/App.css

@@ -1,20 +1,9 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+:root {
+  --color-primary: #282c34;
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: var(--color-primary);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -61,7 +50,7 @@
 }
 
 .loading-bar-container {
-  background: #282c34;
+  background: var(--color-primary);
   width: 100%;
   height: 30px;
   min-height: 30px;
@@ -74,7 +63,7 @@
 }
 
 .page-head {
-  background: #282c34;
+  background: var(--color-primary);
   color: white !important;
   margin-top: 0;
   padding: 1rem;
@@ -103,14 +92,41 @@
 }
 
 .ant-card {
-  border: 1px solid #0005;
+  border: 1px solid var(--color-primary);
   border-radius: 0.2rem;
 }
 
 .ant-card-head {
-  background: #333a;
+  background: var(--color-primary);
   color: white;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.2rem;
 }
+
+.session-toolbar {
+  justify-content: center;
+  width: 60%;
+  margin: 1rem auto;
+}
+
+.session-toolbar h3 {
+  font-weight: bold;
+  color: white;
+  margin-right: 1rem;
+}
+
+.slider {
+  margin: auto 1rem;
+}
+
+.toolbar {
+  padding: 0.5rem;
+  background: var(--color-primary);
+}
+
+.client-info {
+  justify-content: space-around;
+  width: 60%;
+  margin: 1rem auto;
+}

client/src/api/index.ts

@@ -1,4 +1,4 @@
-import { Client } from '../types'
+import { Client, Timings } from '../types'
 import axios from 'axios'
 import { message } from 'antd'
 import { Status } from '../components/StatusChip'
@@ -29,9 +29,9 @@ export const getClient = async (id: string): Promise<Client> => {
   const res = await axios.get<Client>(`/api/clients/${id}`)
   return res.data
 }
-export const startSession = async (clientId: string) => {
+export const startSession = async (clientId: string, timings: Timings) => {
   try {
-    const res = await axios.post(`/api/clients/${clientId}/session`)
+    const res = await axios.post(`/api/clients/${clientId}/session`, timings)
     return res.data
   } catch (err) {
     message.error('Something went wrong, check connection with the machine')
@@ -50,9 +50,9 @@ export const killSession = async (clientId: string) => {
   await axios.delete(`/api/clients/${clientId}/session`)
 }
 
-export const restartSession = async (clientId: string) => {
+export const restartSession = async (clientId: string, timings: Timings) => {
   await killSession(clientId)
-  await startSession(clientId)
+  await startSession(clientId, timings)
 }
 
 // TOOD: Get status

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>

client/src/types/index.ts

@@ -8,3 +8,7 @@ export type Client = {
 export type Session = {
   timestamp: number
 }
+
+export type Timings = {
+  light_time: number // 5000
+}