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

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

2
crabfit-frontend/src/App.tsx
View file

@ -32,7 +32,7 @@ const App = () => {
backgroundColor: theme.background,
color: theme.text,
fontFamily: `'Karla', sans-serif`,
fontWeight: 600,
fontWeight: theme.mode === 'dark' ? 500 : 600,
margin: 0,
},
a: {

91
crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx Normal file
View file

@ -0,0 +1,91 @@
import { useState } from 'react';
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {
Wrapper,
Container,
Date,
DateLabel,
DayLabel,
Time,
Spacer,
Tooltip,
TooltipTitle,
TooltipDate,
TooltipContent,
} from './availabilityViewerStyle';
dayjs.extend(localeData);
dayjs.extend(customParseFormat);
const AvailabilityViewer = ({
dates,
times,
people = [],
...props
}) => {
const [tooltip, setTooltip] = useState(null);
return (
<Wrapper>
<Container>
{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' : ''}>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
{times.map((time, i) => {
const peopleHere = people.filter(person => person.availability.includes(`${time}-${date}`)).map(person => person.name);
return (
<Time
key={i}
time={time}
className="time"
people={peopleHere}
aria-label={peopleHere.join(', ')}
totalPeople={people.length}
onMouseEnter={(e) => {
const cellBox = e.currentTarget.getBoundingClientRect();
setTooltip({
x: Math.round(cellBox.x + cellBox.width),
y: Math.round(cellBox.y + cellBox.height),
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(', '),
});
}}
onMouseLeave={() => {
setTooltip(null);
}}
/>
);
})}
</Date>
{last && dates.length !== i+1 && (
<Spacer />
)}
</>
);
})}
</Container>
{tooltip && (
<Tooltip
x={tooltip.x}
y={tooltip.y}
>
<TooltipTitle>{tooltip.available}</TooltipTitle>
<TooltipDate>{tooltip.date}</TooltipDate>
<TooltipContent>{tooltip.people}</TooltipContent>
</Tooltip>
)}
</Wrapper>
);
};
export default AvailabilityViewer;

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

@ -0,0 +1,91 @@
import styled from '@emotion/styled';
export const Wrapper = styled.div`
overflow-x: auto;
margin: 20px 0;
`;
export const Container = styled.div`
display: inline-flex;
box-sizing: border-box;
min-width: 100%;
align-items: flex-start;
padding: 0 calc(calc(100% - 600px) / 2);
`;
export const Date = styled.div`
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 60px;
min-width: 60px;
& .time:last-of-type {
border-bottom: 1px solid ${props => props.theme.primaryDark};
}
&.last > .time {
border-right: 1px solid ${props => props.theme.primaryDark};
}
`;
export const DateLabel = styled.label`
display: block;
font-size: 12px;
text-align: center;
user-select: none;
`;
export const DayLabel = styled.label`
display: block;
font-size: 15px;
text-align: center;
user-select: none;
`;
export const Time = styled.div`
height: 10px;
border-left: 1px solid ${props => props.theme.primaryDark};
${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};
`}
background-color: ${props => `${props.theme.primary}${Math.round((props.people.length/(props.totalPeople))*255).toString(16)}`};
`;
export const Spacer = styled.div`
width: 12px;
flex-shrink: 0;
`;
export const Tooltip = styled.div`
position: fixed;
top: ${props => props.y+6}px;
left: ${props => props.x+6}px;
border: 1px solid ${props => props.theme.text};
border-radius: 3px;
padding: 4px 8px;
background-color: ${props => props.theme.background};
max-width: 200px;
`;
export const TooltipTitle = styled.span`
font-size: 15px;
display: block;
font-weight: 700;
`;
export const TooltipDate = styled.span`
font-size: 13px;
display: block;
opacity: .7;
font-weight: 700;
`;
export const TooltipContent = styled.span`
font-size: 13px;
display: block;
`;

33
crabfit-frontend/src/components/CalendarField/CalendarField.tsx
View file

@ -1,6 +1,7 @@
import { useState, useEffect, useRef } from 'react';
import dayjs from 'dayjs';
import isToday from 'dayjs/plugin/isToday';
import localeData from 'dayjs/plugin/localeData';
import { Button } from 'components';
import {
@ -15,31 +16,7 @@ import {
} from './calendarFieldStyle';
dayjs.extend(isToday);
const days = [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
];
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
dayjs.extend(localeData);
const calculateMonth = (month, year) => {
const date = dayjs().month(month).year(year);
@ -123,7 +100,7 @@ const CalendarField = ({
}
}}
>&lt;</Button>
<span>{months[month]} {year}</span>
<span>{dayjs.months()[month]} {year}</span>
<Button
buttonHeight="30px"
buttonWidth="30px"
@ -141,7 +118,7 @@ const CalendarField = ({
</CalendarHeader>
<CalendarDays>
{days.map((name, i) =>
{dayjs.weekdaysShort().map((name, i) =>
<Day key={i}>{name}</Day>
)}
</CalendarDays>
@ -152,7 +129,7 @@ const CalendarField = ({
key={y+x}
otherMonth={date.month() !== month}
isToday={date.isToday()}
title={`${date.date()} ${months[date.month()]}${date.isToday() ? ' (today)' : ''}`}
title={`${date.date()} ${dayjs.months()[date.month()]}${date.isToday() ? ' (today)' : ''}`}
selected={selectedDates.includes(date.format('DDMMYYYY'))}
selecting={selectingDates.includes(date)}
mode={mode}

4
crabfit-frontend/src/components/Center/Center.ts
View file

@ -1,7 +1,9 @@
import styled from '@emotion/styled';
const Center = styled.div`
text-align: center;
display: flex;
align-items: center;
justify-content: center;
`;
export default Center;

32
crabfit-frontend/src/components/Legend/Legend.tsx Normal file
View file

@ -0,0 +1,32 @@
import { useTheme } from '@emotion/react';
import {
Wrapper,
Label,
Bar,
Grade,
} from './legendStyle';
const Legend = ({
min,
max,
...props
}) => {
const theme = useTheme();
return (
<Wrapper>
<Label>{min}/{max} available</Label>
<Bar>
{[...Array(max-min+1).keys()].map(i =>
<Grade key={i} color={`${theme.primary}${Math.round((i/(max-min))*255).toString(16)}`} />
)}
</Bar>
<Label>{max}/{max} available</Label>
</Wrapper>
);
};
export default Legend;

42
crabfit-frontend/src/components/Legend/legendStyle.ts Normal file
View file

@ -0,0 +1,42 @@
import styled from '@emotion/styled';
export const Wrapper = styled.div`
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
& label:last-of-type {
text-align: right;
}
@media (max-width: 400px) {
display: block;
}
`;
export const Label = styled.label`
display: block;
font-size: 14px;
text-align: left;
`;
export const Bar = styled.div`
display: flex;
width: 40%;
height: 20px;
border-radius: 3px;
overflow: hidden;
margin: 0 8px;
border: 1px solid ${props => props.theme.primaryLight};
@media (max-width: 400px) {
width: 100%;
margin: 8px 0;
}
`;
export const Grade = styled.div`
flex: 1;
background-color: ${props => props.color};
`;

5
crabfit-frontend/src/components/SelectField/SelectField.tsx
View file

@ -10,11 +10,12 @@ const SelectField = ({
subLabel,
id,
options = [],
inline = false,
register,
...props
}) => (
<Wrapper>
{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
<Wrapper inline={inline}>
{label && <StyledLabel htmlFor={id} inline={inline}>{label}</StyledLabel>}
{subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
<StyledSelect

8
crabfit-frontend/src/components/SelectField/selectFieldStyle.ts
View file

@ -2,12 +2,20 @@ import styled from '@emotion/styled';
export const Wrapper = styled.div`
margin: 30px 0;
${props => props.inline && `
margin: 0;
`}
`;
export const StyledLabel = styled.label`
display: block;
padding-bottom: 4px;
font-size: 18px;
${props => props.inline && `
font-size: 16px;
`}
`;
export const StyledSubLabel = styled.label`

5
crabfit-frontend/src/components/TextField/TextField.tsx
View file

@ -9,11 +9,12 @@ const TextField = ({
label,
subLabel,
id,
inline = false,
register,
...props
}) => (
<Wrapper>
{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
<Wrapper inline={inline}>
{label && <StyledLabel htmlFor={id} inline={inline}>{label}</StyledLabel>}
{subLabel && <StyledSubLabel htmlFor={id}>{subLabel}</StyledSubLabel>}
<StyledInput id={id} ref={register} {...props} />
</Wrapper>

8
crabfit-frontend/src/components/TextField/textFieldStyle.ts
View file

@ -2,12 +2,20 @@ import styled from '@emotion/styled';
export const Wrapper = styled.div`
margin: 30px 0;
${props => props.inline && `
margin: 0;
`}
`;
export const StyledLabel = styled.label`
display: block;
padding-bottom: 4px;
font-size: 18px;
${props => props.inline && `
font-size: 16px;
`}
`;
export const StyledSubLabel = styled.label`

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

@ -4,6 +4,8 @@ export { default as CalendarField } from './CalendarField/CalendarField';
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 Center } from './Center/Center';
export { default as Donate } from './Donate/Donate';

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>
</>
);
};

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

@ -0,0 +1,100 @@
import styled from '@emotion/styled';
export const StyledMain = styled.div`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
`;
export const Footer = styled.footer`
width: 600px;
margin: 20px auto;
max-width: calc(100% - 60px);
display: flex;
align-items: center;
justify-content: space-between;
`;
export const Logo = styled.img`
width: 2.5rem;
margin-right: 16px;
`;
export const Title = styled.span`
display: block;
font-size: 2rem;
color: ${props => props.theme.primary};
font-family: 'Molot';
font-weight: 400;
text-shadow: 0 2px 0 ${props => props.theme.primaryDark};
line-height: 1em;
`;
export const EventName = styled.h1`
text-align: center;
font-weight: 800;
margin: 20px 0 14px;
`;
export const LoginForm = styled.form`
display: grid;
grid-template-columns: 1fr 1fr 100px;
align-items: flex-end;
grid-gap: 18px;
@media (max-width: 500px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 400px) {
grid-template-columns: 1fr;
}
`;
export const LoginSection = styled.section`
background-color: ${props => props.theme.primaryBackground};
padding: 10px 0;
`;
export const Info = styled.p`
margin: 18px 0;
opacity: .6;
font-size: 12px;
`;
export const ShareInfo = styled.p`
margin: 6px 0;
text-align: center;
font-size: 15px;
`;
export const Tabs = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0 20px;
`;
export const Tab = styled.a`
user-select: none;
text-decoration: none;
display: block;
color: ${props => props.theme.text};
padding: 8px 18px;
background-color: ${props => props.theme.primaryBackground};
border: 1px solid ${props => props.theme.primaryLight};
border-bottom: 0;
margin: 0 4px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
${props => props.selected && `
color: #FFF;
background-color: ${props.theme.primary};
border-color: ${props.theme.primary};
`}
${props => props.disabled && `
opacity: .5;
cursor: not-allowed;
`}
`;

2
crabfit-frontend/src/pages/Home/Home.tsx
View file

@ -61,6 +61,7 @@ const Home = () => {
subLabel="Click and drag to select"
name="dates"
id="dates"
required
register={register}
/>
@ -69,6 +70,7 @@ const Home = () => {
subLabel="Click and drag to select a time range"
name="times"
id="times"
required
register={register}
/>