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

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