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

Days of the week support on event page

Browse source
This commit is contained in:
Ben Grant 2021-03-11 14:05:02 +11:00
parent 4c36f2a550
commit d5508e9f99
5 changed files with 43 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

7
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -24,6 +24,7 @@ const AvailabilityEditor = ({
times,
timeLabels,
dates,
isSpecificDates,
value = [],
onChange,
...props
@ -54,12 +55,12 @@ const AvailabilityEditor = ({
)}
</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;
const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
const last = dates.length === x+1 || (isSpecificDates ? dayjs(dates[x+1], 'DDMMYYYY') : dayjs().day(dates[x+1])).diff(parsedDate, 'day') > 1;
return (
<Fragment key={x}>
<Date>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
{isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
<Times>

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

@ -28,6 +28,7 @@ const AvailabilityViewer = ({
times,
timeLabels,
dates,
isSpecificDates,
people = [],
min = 0,
max = 0,
@ -46,12 +47,12 @@ const AvailabilityViewer = ({
)}
</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;
const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
return (
<Fragment key={i}>
<Date>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel>
{isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
<Times>
@ -80,7 +81,7 @@ const AvailabilityViewer = ({
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, 4)).format('h:mma ddd, D MMM YYYY'),
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? 'h:mma ddd, D MMM YYYY' : 'h:mma ddd'),
people: peopleHere.join(', '),
});
}}

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

@ -80,7 +80,7 @@ export const Tooltip = styled.div`
border: 1px solid ${props => props.theme.text};
border-radius: 3px;
padding: 4px 8px;
background-color: ${props => props.theme.background}99;
background-color: ${props => props.theme.background}DD;
max-width: 200px;
pointer-events: none;
`;