E 3 years ago
parent b0aec2cfd1
commit 0760c93ce4
  1. 14
      client/src/App.css
  2. 37
      client/src/api/index.ts
  3. 13
      client/src/data/index.ts
  4. 13
      client/src/pages/Dashboard.tsx
  5. 29
      client/src/pages/Session.tsx
  6. 47
      client/src/pages/SessionPictures.tsx
  7. 2
      client/src/types/index.ts

@ -40,3 +40,17 @@
.error { .error {
color: red; color: red;
} }
.photo-wall {
display: flex;
flex-wrap: wrap;
margin: 2rem;
}
.ant-card {
margin: 1rem;
}
.ant-card img {
max-width: 250px;
}

@ -1,31 +1,35 @@
import { Client } from '../types' import { Client } from '../types'
import axios from 'axios' import axios from 'axios'
import { client, clients } from '../data'
import settings from '../settings' import settings from '../settings'
const apiUrl = '/api' if (settings.env === 'jank') {
const host = 'http://192.168.1.107:5000'
export const createClient = async (body: Omit<Client, 'photos'>) => { axios.defaults.baseURL = host
await axios.post(`${apiUrl}/clients`, body)
} }
export const getClients = async (): Promise<Client[]> => { export const createClient = async (body: Omit<Client, 'has_photos'>) => {
if (settings.env === 'jank') return clients const res = await axios.post<{ client_id: string }>(`/api/clients`, body)
const res = await axios.post<Client[]>(`${apiUrl}/clients`) return res.data.client_id
return res.data
} }
export const getClient = async (id: string): Promise<Client> => { export const getClient = async (id: string): Promise<Client> => {
if (settings.env === 'jank') return client const res = await axios.get<Client>(`/api/clients/${id}`)
const res = await axios.post<Client>(`${apiUrl}/client/${id}`)
return res.data return res.data
} }
export const startSession = async (clientId: string) => { export const startSession = async (clientId: string) => {
const res = await axios.post(`${apiUrl}/clients/${clientId}`) const res = await axios.post(`/api/clients/${clientId}/session`)
return res.data // session data
}
export const getSession = async (clientId: string) => {
const res = await axios.get<{ photos: string[] }>(
`/api/clients/${clientId}/session`,
)
return res.data // session data return res.data // session data
} }
export const killSession = async (clientId: string) => { export const killSession = async (clientId: string) => {
await axios.delete(`${apiUrl}/clients/${clientId}`) await axios.delete(`/api/clients/${clientId}/session`)
} }
export const restartSession = async (clientId: string) => { export const restartSession = async (clientId: string) => {
@ -33,6 +37,13 @@ export const restartSession = async (clientId: string) => {
await startSession(clientId) await startSession(clientId)
} }
// Someday
export const getClients = async (): Promise<Client[]> => {
const res = await axios.get<Client[]>(`/api/clients`)
return res.data
}
export const cleanup = () => { export const cleanup = () => {
// send // send
} }

@ -5,18 +5,17 @@ export const clients: Client[] = [
name: 'Elijah', name: 'Elijah',
email: 'elijah@elijah.com', email: 'elijah@elijah.com',
phone: 4039876543, phone: 4039876543,
photos: [], has_photos: false,
}, },
{ {
name: 'Tanner', name: 'Tanner',
email: 'tanner@tanner.com', email: 'tanner@tanner.com',
phone: 4031234567, phone: 4031234567,
photos: [ has_photos: true,
'/images/1.jpg',
'/images/2.jpg',
'/images/3.jpg',
'/images/4.jpg',
],
}, },
] ]
export const client: Client = clients[0] export const client: Client = clients[0]
export const session: { photos: string[] } = {
photos: ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg'],
}

@ -4,7 +4,6 @@ import React, { FormEvent } from 'react'
import { useState } from 'react' import { useState } from 'react'
import { useHistory } from 'react-router-dom' import { useHistory } from 'react-router-dom'
import { createClient } from '../api' import { createClient } from '../api'
import settings from '../settings'
export const Dashboard = () => { export const Dashboard = () => {
const history = useHistory() const history = useHistory()
@ -30,13 +29,13 @@ export const Dashboard = () => {
return return
} }
if (settings.env === 'jank') { const client_id = await createClient({
history.push(`/sessions/${phone}`) name,
return email,
} phone: parseInt(phone),
})
await createClient({ name, email, phone: parseInt(phone) }) history.push(`/sessions/${client_id}`)
history.push(`/sessions/${phone}`)
} }
return ( return (

@ -1,24 +1,38 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { RouteComponentProps, useHistory } from 'react-router-dom' import { RouteComponentProps, useHistory } from 'react-router-dom'
import { getClient, killSession, restartSession } from '../api' import { getClient, killSession, restartSession, startSession } from '../api'
import { SessionPictures } from './SessionPictures' import { SessionPictures } from './SessionPictures'
import { Button, Divider, message, PageHeader, Popconfirm, Row } from 'antd' import {
Button,
Divider,
message,
PageHeader,
Popconfirm,
Row,
Tag,
} from 'antd'
import { Content } from 'antd/lib/layout/layout' import { Content } from 'antd/lib/layout/layout'
import { Client } from '../types'
type Props = RouteComponentProps<{ clientId: string }> type Props = RouteComponentProps<{ clientId: string }>
export const Session = (props: Props) => { export const Session = (props: Props) => {
const history = useHistory() const history = useHistory()
const { clientId } = props.match.params const { clientId } = props.match.params
const [client, setClient] = useState<Client | null>(null)
const [active, setActive] = useState(false) const [active, setActive] = useState(false)
const handleStartSession = async () => { const handleStartSession = async () => {
await startSession(clientId)
message.loading('Photo sequence starting! Stand by...')
setActive(true) setActive(true)
} }
const handleRestartSession = async () => { const handleRestartSession = async () => {
setActive(false) setActive(false)
message.loading('Removing all photos...')
await restartSession(clientId) await restartSession(clientId)
message.loading('Restarting capture sequence! Stand by...')
setActive(true) setActive(true)
} }
@ -33,13 +47,13 @@ export const Session = (props: Props) => {
useEffect(() => { useEffect(() => {
const get = async () => { const get = async () => {
const { photos } = await getClient(clientId) const client = await getClient(clientId)
if (photos.length) setActive(true) setClient(client)
else message.info("Click 'Capture' to take a photo set!") if (client.has_photos) setActive(true)
} }
get() get()
}) }, [clientId])
return ( return (
<Content> <Content>
@ -47,6 +61,7 @@ export const Session = (props: Props) => {
ghost={false} ghost={false}
onBack={() => history.goBack()} onBack={() => history.goBack()}
title={`Session for ${clientId}`} title={`Session for ${clientId}`}
tags={active ? <Tag color="lime">Active</Tag> : <Tag>Inactive</Tag>}
subTitle={`session has ${active ? 'started' : 'not started'}`} subTitle={`session has ${active ? 'started' : 'not started'}`}
extra={[ extra={[
<Button <Button
@ -88,7 +103,7 @@ export const Session = (props: Props) => {
></PageHeader> ></PageHeader>
<Divider /> <Divider />
<Row className="controls"> <Row className="controls">
{active && <SessionPictures clientId={clientId} />} <SessionPictures clientId={clientId} />
</Row> </Row>
</Content> </Content>
) )

@ -1,34 +1,55 @@
import { Spin } from 'antd'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { getClient } from '../api' import { Card, Spin } from 'antd'
import { getSession } from '../api'
import { client } from '../data'
import settings from '../settings'
import { url } from 'inspector'
type Props = { type Props = {
clientId: string clientId: string
} }
export const SessionPictures = ({ clientId }: Props) => { export const SessionPictures = ({ clientId }: Props) => {
const [pics, setPics] = useState<string[] | null>(null) const [urls, setUrls] = useState<string[] | null>(null)
useEffect(() => { useEffect(() => {
const get = async () => { const get = async () => {
if (pics) return if (urls) return
const { photos } = await getClient(clientId)
if (photos.length) setPics(photos) const { photos } = await getSession(clientId)
if (photos.length) setUrls(photos)
} }
const interval = setInterval(get, 300) const interval = setInterval(get, 5000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, [clientId, pics]) }, [clientId, urls])
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
if (!urls?.length) return null
return ( return (
<div> <div>
<h3>Session Pictures</h3> <h3>Session Pictures</h3>
{pics ? ( <div className="photo-wall">
pics.map((src) => <img id={src} src={src} alt="lol" />) {urls ? (
) : ( urls
<Spin /> .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
)} .map((src) => (
<Card className="photo" title={src.split('_')[0]}>
<img
key={src}
id={src}
src={`${host}/output/${clientId}/${src}`}
alt="lol"
/>
</Card>
))
) : (
<Spin />
)}
</div>
</div> </div>
) )
} }

@ -2,7 +2,7 @@ export type Client = {
name: string name: string
email: string email: string
phone: number phone: number
photos: string[] has_photos: boolean
} }
export type Session = { export type Session = {

Loading…
Cancel
Save