|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import React, { useEffect, useState } from 'react' |
|
|
|
|
import { Card, message, Modal, PageHeader, Spin } from 'antd' |
|
|
|
|
import { Card, message, Modal, PageHeader, Row, Spin, Typography } from 'antd' |
|
|
|
|
import { getSession } from '../api' |
|
|
|
|
|
|
|
|
|
type Props = { |
|
|
|
@ -33,6 +33,8 @@ export const SessionPictures = ({ clientId }: Props) => { |
|
|
|
|
|
|
|
|
|
if (!urls?.length) return null |
|
|
|
|
|
|
|
|
|
const u = urls.length / 89 |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<Modal |
|
|
|
@ -49,14 +51,20 @@ export const SessionPictures = ({ clientId }: Props) => { |
|
|
|
|
alt="large modal" |
|
|
|
|
></img> |
|
|
|
|
</Modal> |
|
|
|
|
<PageHeader |
|
|
|
|
title="Session Pictures" |
|
|
|
|
subTitle={`${urls.length}/${89 * 1} loaded`} |
|
|
|
|
> |
|
|
|
|
<div className="loading-bar-container"> |
|
|
|
|
<div className="loading-bar"></div> |
|
|
|
|
</div> |
|
|
|
|
</PageHeader> |
|
|
|
|
<Row align="middle" justify="center"> |
|
|
|
|
<Typography.Title level={3}>Session Pictures</Typography.Title> |
|
|
|
|
<Typography.Text>{urls.length}/ 89 loaded</Typography.Text> |
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
<div className="loading-bar-container"> |
|
|
|
|
<div |
|
|
|
|
className="loading-bar" |
|
|
|
|
style={{ |
|
|
|
|
width: `${u * 100}%`, |
|
|
|
|
background: `hsl(${Math.floor(1 * 120)}, 90%, 70%)`, |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
</div> |
|
|
|
|
<div className="photo-wall"> |
|
|
|
|
{urls ? ( |
|
|
|
|
urls |
|
|
|
|