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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

112
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx Normal file
View file

@ -0,0 +1,112 @@
import { useState, useRef, Fragment } from 'react';
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {
Wrapper,
Container,
Date,
DateLabel,
DayLabel,
Spacer,
TimeLabels,
TimeLabel,
TimeSpace,
} from 'components/AvailabilityViewer/availabilityViewerStyle';
import { Time } from './availabilityEditorStyle';
dayjs.extend(localeData);
dayjs.extend(customParseFormat);
const AvailabilityEditor = ({
dates,
times,
value = [],
onChange,
...props
}) => {
const [selectingTimes, _setSelectingTimes] = useState([]);
const staticSelectingTimes = useRef([]);
const setSelectingTimes = newTimes => {
staticSelectingTimes.current = newTimes;
_setSelectingTimes(newTimes);
};
const startPos = useRef({});
const staticMode = useRef(null);
const [mode, _setMode] = useState(staticMode.current);
const setMode = newMode => {
staticMode.current = newMode;
_setMode(newMode);
};
return (
<Wrapper>
<Container>
<TimeLabels>
{times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
<TimeSpace key={i} time={time}>
{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
</TimeSpace>
)}
</TimeLabels>
{dates.map((date, x) => {
const parsedDate = dayjs(date, 'DDMMYYYY');
const last = dates.length === x+1 || dayjs(dates[x+1], 'DDMMYYYY').diff(parsedDate, 'day') > 1;
return (
<Fragment key={x}>
<Date className={last ? 'last' : ''}>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
{times.map((time, y) =>
<Time
key={x+y}
time={time}
className="time"
selected={value.includes(`${time}-${date}`)}
selecting={selectingTimes.includes(`${time}-${date}`)}
mode={mode}
onPointerDown={(e) => {
e.preventDefault();
startPos.current = {x, y};
setMode(value.includes(`${time}-${date}`) ? 'remove' : 'add');
setSelectingTimes([`${time}-${date}`]);
e.currentTarget.releasePointerCapture(e.pointerId);
document.addEventListener('pointerup', () => {
if (staticMode.current === 'add') {
onChange([...value, ...staticSelectingTimes.current]);
} else if (staticMode.current === 'remove') {
onChange(value.filter(t => !staticSelectingTimes.current.includes(t)));
}
setMode(null);
}, { once: true });
}}
onPointerEnter={() => {
if (staticMode.current) {
let found = [];
for (let cy = Math.min(startPos.current.y, y); cy < Math.max(startPos.current.y, y)+1; cy++) {
for (let cx = Math.min(startPos.current.x, x); cx < Math.max(startPos.current.x, x)+1; cx++) {
found.push({y: cy, x: cx});
}
}
setSelectingTimes(found.map(d => `${times[d.y]}-${dates[d.x]}`));
}
}}
/>
)}
</Date>
{last && dates.length !== x+1 && (
<Spacer />
)}
</Fragment>
);
})}
</Container>
</Wrapper>
);
};
export default AvailabilityEditor;

21
crabfit-frontend/src/components/AvailabilityEditor/availabilityEditorStyle.ts Normal file
View file

@ -0,0 +1,21 @@
import styled from '@emotion/styled';
export const Time = styled.div`
height: 10px;
border-left: 1px solid ${props => props.theme.primaryDark};
touch-action: none;
${props => props.time.slice(-2) === '00' && `
border-top: 1px solid ${props.theme.primaryDark};
`}
${props => props.time.slice(-2) === '30' && `
border-top: 1px dotted ${props.theme.primaryDark};
`}
${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
background-color: ${props.theme.primary};
`};
${props => props.mode === 'remove' && props.selecting && `
background-color: initial;
`};
`;

22
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
View file

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, Fragment } from 'react';
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import customParseFormat from 'dayjs/plugin/customParseFormat';
@ -15,6 +15,9 @@ import {
TooltipTitle,
TooltipDate,
TooltipContent,
TimeLabels,
TimeLabel,
TimeSpace,
} from './availabilityViewerStyle';
dayjs.extend(localeData);
@ -31,12 +34,19 @@ const AvailabilityViewer = ({
return (
<Wrapper>
<Container>
<TimeLabels>
{times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
<TimeSpace key={i} time={time}>
{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
</TimeSpace>
)}
</TimeLabels>
{dates.map((date, i) => {
const parsedDate = dayjs(date, 'DDMMYYYY');
const last = dates.length === i+1 || dayjs(dates[i+1], 'DDMMYYYY').diff(parsedDate, 'day') > 1;
return (
<>
<Date key={i} className={last ? 'last' : ''}>
<Fragment key={i}>
<Date className={last ? 'last' : ''}>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
@ -53,8 +63,8 @@ const AvailabilityViewer = ({
onMouseEnter={(e) => {
const cellBox = e.currentTarget.getBoundingClientRect();
setTooltip({
x: Math.round(cellBox.x + cellBox.width),
y: Math.round(cellBox.y + cellBox.height),
x: Math.round(cellBox.x + cellBox.width/2),
y: Math.round(cellBox.y + cellBox.height)+6,
available: `${peopleHere.length} / ${people.length} available`,
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(-2)).format('h:mma ddd, D MMM YYYY'),
people: peopleHere.join(', '),
@ -70,7 +80,7 @@ const AvailabilityViewer = ({
{last && dates.length !== i+1 && (
<Spacer />
)}
</>
</Fragment>
);
})}
</Container>

45
crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
View file

@ -9,8 +9,12 @@ export const Container = styled.div`
display: inline-flex;
box-sizing: border-box;
min-width: 100%;
align-items: flex-start;
align-items: flex-end;
padding: 0 calc(calc(100% - 600px) / 2);
@media (max-width: 660px) {
padding: 0 30px;
}
`;
export const Date = styled.div`
@ -19,6 +23,7 @@ export const Date = styled.div`
flex-direction: column;
width: 60px;
min-width: 60px;
margin-bottom: 10px;
& .time:last-of-type {
border-bottom: 1px solid ${props => props.theme.primaryDark};
@ -63,13 +68,15 @@ export const Spacer = styled.div`
export const Tooltip = styled.div`
position: fixed;
top: ${props => props.y+6}px;
left: ${props => props.x+6}px;
top: ${props => props.y}px;
left: ${props => props.x}px;
transform: translateX(-50%);
border: 1px solid ${props => props.theme.text};
border-radius: 3px;
padding: 4px 8px;
background-color: ${props => props.theme.background};
background-color: ${props => props.theme.background}99;
max-width: 200px;
pointer-events: none;
`;
export const TooltipTitle = styled.span`
@ -89,3 +96,33 @@ export const TooltipContent = styled.span`
font-size: 13px;
display: block;
`;
export const TimeLabels = styled.div`
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 40px;
padding-right: 6px;
`;
export const TimeSpace = styled.div`
height: 10px;
position: relative;
${props => props.time.slice(-2) === '00' && `
border-top: 1px solid transparent;
`}
${props => props.time.slice(-2) === '30' && `
border-top: 1px dotted transparent;
`}
`;
export const TimeLabel = styled.label`
display: block;
position: absolute;
top: -.7em;
font-size: 12px;
text-align: right;
user-select: none;
width: 100%;
`;

1
crabfit-frontend/src/components/Donate/Donate.tsx
View file

@ -6,6 +6,7 @@ const Donate = () => (
<Button
buttonHeight="30px"
buttonWidth="90px"
type="button"
>Donate</Button>
</a>
</div>

1
crabfit-frontend/src/components/index.ts
View file

@ -6,6 +6,7 @@ export { default as TimeRangeField } from './TimeRangeField/TimeRangeField';
export { default as Button } from './Button/Button';
export { default as Legend } from './Legend/Legend';
export { default as AvailabilityViewer } from './AvailabilityViewer/AvailabilityViewer';
export { default as AvailabilityEditor } from './AvailabilityEditor/AvailabilityEditor';
export { default as Center } from './Center/Center';
export { default as Donate } from './Donate/Donate';

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;

2
crabfit-frontend/src/theme/index.ts
View file

@ -10,7 +10,7 @@ const theme = {
},
dark: {
mode: 'dark',
background: '#111',
background: '#111111',
text: '#DDDDDD',
primary: '#F79E00',
primaryDark: '#F4BB60',