Event page and availability viewer

crabfit-frontend/src/App.tsx

@@ -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: {

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -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;

crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts

@@ -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;
+`;

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -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);
-
+dayjs.extend(localeData);
-const days = [
-	'Sun',
-	'Mon',
-	'Tue',
-	'Wed',
-	'Thu',
-	'Fri',
-	'Sat',
-];
-
-const months = [
-	'January',
-	'February',
-	'March',
-	'April',
-	'May',
-	'June',
-	'July',
-	'August',
-	'September',
-	'October',
-	'November',
-	'December',
-];
 
 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}

crabfit-frontend/src/components/Center/Center.ts

@@ -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;

crabfit-frontend/src/components/Legend/Legend.tsx

@@ -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;

crabfit-frontend/src/components/Legend/legendStyle.ts

@@ -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};
+`;

crabfit-frontend/src/components/SelectField/SelectField.tsx

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

crabfit-frontend/src/components/SelectField/selectFieldStyle.ts

@@ -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`

crabfit-frontend/src/components/TextField/TextField.tsx

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

crabfit-frontend/src/components/TextField/textFieldStyle.ts

@@ -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`

crabfit-frontend/src/components/index.ts

@@ -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';

crabfit-frontend/src/pages/Event/Event.tsx

@@ -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>
+			<StyledMain>
-			<Link to="/">Back home</Link>
+				<Link to="/" style={{ textDecoration: 'none' }}>
-		</div>
+					<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>
+		</>
 	);
 };
 

crabfit-frontend/src/pages/Event/eventStyle.ts

@@ -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;
+	`}
+`;

crabfit-frontend/src/pages/Home/Home.tsx

@@ -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}
 					/>