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

Availability editor and responsive page

Browse source
This commit is contained in:
Ben Grant 2021-03-03 13:15:06 +11:00
parent 3b67241107
commit 855477570f
9 changed files with 259 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import {
Button,
Legend,
AvailabilityViewer,
AvailabilityEditor,
} from 'components';
import {
@ -33,7 +34,11 @@ 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 [user, setUser] = useState({
name: 'Benji',
availability: [],
});
const [tab, setTab] = useState(user ? 'you' : 'group');
const onSubmit = data => console.log('submit', data);
@ -49,36 +54,40 @@ const Event = (props) => {
<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>
<ShareInfo>Copy the link to this page, or share via <a href="#test">Email</a> or <a href="#test">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}
/>
{!user && (
<>
<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}
/>
<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>
<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"
@ -86,6 +95,7 @@ const Event = (props) => {
id="timezone"
inline
value={timezone}
onChange={value => setTimezone(value)}
options={timezones}
/>
</StyledMain>
@ -97,13 +107,13 @@ const Event = (props) => {
href="#you"
onClick={e => {
e.preventDefault();
if (false) {
if (user) {
setTab('you');
}
}}
selected={tab === 'you'}
disabled={true}
title={true ? 'Login to set your availability' : ''}
disabled={!user}
title={user ? '' : 'Login to set your availability'}
>Your availability</Tab>
<Tab
href="#group"
@ -119,45 +129,12 @@ const Event = (props) => {
{tab === 'group' ? (
<section id="group">
<StyledMain>
<Legend min={0} max={1} />
<Center>Hover and click the calendar below to see who is available</Center>
<Legend min={0} max={3} />
<Center>Hover or tap 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',
]}
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: [
@ -175,7 +152,24 @@ const Event = (props) => {
'1400-08032021',
'1430-08032021',
],
}]}
},{
name: 'Phoebe',
availability: [
'1100-07032021',
'1115-07032021',
'1130-07032021',
'1145-07032021',
'1200-07032021',
'1215-07032021',
'1230-07032021',
'1245-07032021',
'1300-07032021',
'1315-07032021',
'1330-07032021',
'1345-07032021',
'1400-07032021',
],
},user]}
/>
</section>
) : (
@ -183,6 +177,12 @@ const Event = (props) => {
<StyledMain>
<Center>Click and drag the calendar below to set your availabilities</Center>
</StyledMain>
<AvailabilityEditor
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']}
value={user.availability}
onChange={availability => setUser({ ...user, availability })}
/>
</section>
)}

2
crabfit-frontend/src/pages/Event/eventStyle.ts
View file

@ -8,7 +8,7 @@ export const StyledMain = styled.div`
export const Footer = styled.footer`
width: 600px;
margin: 20px auto;
margin: 50px auto 20px;
max-width: calc(100% - 60px);
display: flex;
align-items: center;