|
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
import { RouteComponentProps, useHistory } from 'react-router-dom'
|
|
|
|
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 { Content } from 'antd/lib/layout/layout'
|
|
|
|
import { Client } from '../types'
|
|
|
|
|
|
|
|
type Props = RouteComponentProps<{ clientId: string }>
|
|
|
|
|
|
|
|
export const Session = (props: Props) => {
|
|
|
|
const history = useHistory()
|
|
|
|
const { clientId } = props.match.params
|
|
|
|
const [client, setClient] = useState<Client | null>(null)
|
|
|
|
const [active, setActive] = useState(false)
|
|
|
|
|
|
|
|
const handleStartSession = async () => {
|
|
|
|
message.loading('Photo sequence starting! Stand by...')
|
|
|
|
await startSession(clientId)
|
|
|
|
setActive(true)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleRestartSession = async () => {
|
|
|
|
setActive(false)
|
|
|
|
message.loading(
|
|
|
|
'Deleting photos & restarting capture sequence! Stand by...',
|
|
|
|
)
|
|
|
|
await restartSession(clientId)
|
|
|
|
setActive(true)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleExit = async () => {
|
|
|
|
history.push('/')
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleNuke = async () => {
|
|
|
|
await killSession(clientId)
|
|
|
|
message.success('Photos Deleted! Going back to dashboard')
|
|
|
|
history.push('/')
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const get = async () => {
|
|
|
|
const client = await getClient(clientId)
|
|
|
|
setClient(client)
|
|
|
|
if (client.has_photos) setActive(true)
|
|
|
|
}
|
|
|
|
|
|
|
|
get()
|
|
|
|
}, [clientId])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Content>
|
|
|
|
<Typography.Title className="page-head" level={3}>
|
|
|
|
Session View
|
|
|
|
</Typography.Title>
|
|
|
|
|
|
|
|
<Row justify="space-around" style={{ width: '60%', margin: 'auto' }}>
|
|
|
|
<Typography.Text>
|
|
|
|
<strong>Name:</strong> {client?.name}
|
|
|
|
</Typography.Text>
|
|
|
|
<Typography.Text>
|
|
|
|
<strong>Email:</strong> {client?.email}
|
|
|
|
</Typography.Text>
|
|
|
|
<Typography.Text>
|
|
|
|
<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
|
|
|
|
</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 />
|
|
|
|
<Row className="controls">
|
|
|
|
{active && <SessionPictures clientId={clientId} />}
|
|
|
|
</Row>
|
|
|
|
</Content>
|
|
|
|
)
|
|
|
|
}
|