scott/crabfit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Event page and availability viewer

Browse source
This commit is contained in:
Ben Grant 2021-03-03 04:01:32 +11:00
parent baac453964
commit 3b67241107
15 changed files with 578 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

191
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -1,13 +1,196 @@
import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useState } from 'react';
import {
Center,
Donate,
TextField,
SelectField,
Button,
Legend,
AvailabilityViewer,
} from 'components';
import {
StyledMain,
Footer,
Logo,
Title,
EventName,
LoginForm,
LoginSection,
Info,
ShareInfo,
Tabs,
Tab,
} from './eventStyle';
import logo from 'res/logo.svg';
import timezones from 'res/timezones.json';
const Event = (props) => {
const { register, handleSubmit } = useForm();
const id = props.match.params.id;
const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
const [tab, setTab] = useState('group');
const onSubmit = data => console.log('submit', data);
return (
<div>
<div>Event {id}</div>
<Link to="/">Back home</Link>
</div>
<>
<StyledMain>
<Link to="/" style={{ textDecoration: 'none' }}>
<Center>
<Logo src={logo} alt="" />
<Title>CRAB FIT</Title>
</Center>
</Link>
<EventName>Event name ({id})</EventName>
<ShareInfo>https://page.url</ShareInfo>
<ShareInfo>Copy the link to this page, or share via <a href="#">Email</a> or <a href="#">Facebook</a>.</ShareInfo>
</StyledMain>
<LoginSection id="login">
<StyledMain>
<h2>Sign in to add your availability</h2>
<LoginForm onSubmit={handleSubmit(onSubmit)}>
<TextField
label="Your name"
type="text"
name="name"
id="name"
inline
required
register={register}
/>
<TextField
label="Password (optional)"
type="password"
name="password"
id="password"
inline
register={register}
/>
<Button
>Login</Button>
</LoginForm>
<Info>These details are only for this event. Use a password to prevent others from changing your availability.</Info>
<SelectField
label="Your time zone"
name="timezone"
id="timezone"
inline
value={timezone}
options={timezones}
/>
</StyledMain>
</LoginSection>
<StyledMain>
<Tabs>
<Tab
href="#you"
onClick={e => {
e.preventDefault();
if (false) {
setTab('you');
}
}}
selected={tab === 'you'}
disabled={true}
title={true ? 'Login to set your availability' : ''}
>Your availability</Tab>
<Tab
href="#group"
onClick={e => {
e.preventDefault();
setTab('group');
}}
selected={tab === 'group'}
>Group availability</Tab>
</Tabs>
</StyledMain>
{tab === 'group' ? (
<section id="group">
<StyledMain>
<Legend min={0} max={1} />
<Center>Hover and click the calendar below to see who is available</Center>
</StyledMain>
<AvailabilityViewer
dates={['03032021', '04032021', '05032021', '07032021', '08032021']}
times={[
'0900',
'0915',
'0930',
'0945',
'1000',
'1015',
'1030',
'1045',
'1100',
'1115',
'1130',
'1145',
'1200',
'1215',
'1230',
'1245',
'1300',
'1315',
'1330',
'1345',
'1400',
'1415',
'1430',
'1445',
'1500',
'1515',
'1530',
'1545',
'1600',
'1615',
'1630',
'1645',
]}
people={[{
name: 'James',
availability: [
'0900-04032021',
'0915-04032021',
'0930-04032021',
'0945-04032021',
'1000-04032021',
'1500-04032021',
'1515-04032021',
'1230-07032021',
'1245-07032021',
'1300-07032021',
'1315-07032021',
'1400-08032021',
'1430-08032021',
],
}]}
/>
</section>
) : (
<section id="you">
<StyledMain>
<Center>Click and drag the calendar below to set your availabilities</Center>
</StyledMain>
</section>
)}
<Footer id="donate">
<span>Thank you for using Crab Fit. If you like it, consider donating.</span>
<Donate />
</Footer>
</>
);
};