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

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

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

@ -28,6 +28,7 @@ const AvailabilityViewer = ({
times, times,
timeLabels, timeLabels,
dates, dates,
isSpecificDates,
people = [], people = [],
min = 0, min = 0,
max = 0, max = 0,
@ -46,12 +47,12 @@ const AvailabilityViewer = ({
)} )}
</TimeLabels> </TimeLabels>
{dates.map((date, i) => { {dates.map((date, i) => {
const parsedDate = dayjs(date, 'DDMMYYYY'); const parsedDate = isSpecificDates ? dayjs(date, 'DDMMYYYY') : dayjs().day(date);
const last = dates.length === i+1 || dayjs(dates[i+1], 'DDMMYYYY').diff(parsedDate, 'day') > 1; const last = dates.length === i+1 || (isSpecificDates ? dayjs(dates[i+1], 'DDMMYYYY') : dayjs().day(dates[i+1])).diff(parsedDate, 'day') > 1;
return ( return (
<Fragment key={i}> <Fragment key={i}>
<Date> <Date>
<DateLabel>{parsedDate.format('MMM D')}</DateLabel> {isSpecificDates && <DateLabel>{parsedDate.format('MMM D')}</DateLabel>}
<DayLabel>{parsedDate.format('ddd')}</DayLabel> <DayLabel>{parsedDate.format('ddd')}</DayLabel>
<Times> <Times>
@ -80,7 +81,7 @@ const AvailabilityViewer = ({
x: Math.round(cellBox.x + cellBox.width/2), x: Math.round(cellBox.x + cellBox.width/2),
y: Math.round(cellBox.y + cellBox.height)+6, y: Math.round(cellBox.y + cellBox.height)+6,
available: `${peopleHere.length} / ${people.length} available`, 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(', '), 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: 1px solid ${props => props.theme.text};
border-radius: 3px; border-radius: 3px;
padding: 4px 8px; padding: 4px 8px;
background-color: ${props => props.theme.background}99; background-color: ${props => props.theme.background}DD;
max-width: 200px; max-width: 200px;
pointer-events: none; pointer-events: none;
`; `;

45
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -45,6 +45,7 @@ dayjs.extend(customParseFormat);
const Event = (props) => { const Event = (props) => {
const timeFormat = useSettingsStore(state => state.timeFormat); const timeFormat = useSettingsStore(state => state.timeFormat);
const weekStart = useSettingsStore(state => state.weekStart);
const { register, handleSubmit } = useForm(); const { register, handleSubmit } = useForm();
const { id } = props.match.params; const { id } = props.match.params;
@ -87,7 +88,9 @@ const Event = (props) => {
const response = await api.get(`/event/${id}/people`); const response = await api.get(`/event/${id}/people`);
const adjustedPeople = response.data.people.map(person => ({ const adjustedPeople = response.data.people.map(person => ({
...person, ...person,
availability: person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')), availability: (!!person.availability.length && person.availability[0].length === 13)
? person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
: person.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
})); }));
setPeople(adjustedPeople); setPeople(adjustedPeople);
} catch (e) { } catch (e) {
@ -103,21 +106,32 @@ const Event = (props) => {
// Convert to timezone and expand minute segments // Convert to timezone and expand minute segments
useEffect(() => { useEffect(() => {
if (event) { if (event) {
const isSpecificDates = event.times[0].length === 13;
setTimes(event.times.reduce( setTimes(event.times.reduce(
(allTimes, time) => { (allTimes, time) => {
const date = dayjs(time, 'HHmm-DDMMYYYY').utc(true).tz(timezone); const date = isSpecificDates ?
dayjs(time, 'HHmm-DDMMYYYY').utc(true).tz(timezone)
: dayjs(time, 'HHmm').day(time.substring(5)).utc(true).tz(timezone);
const format = isSpecificDates ? 'HHmm-DDMMYYYY' : 'HHmm-d';
return [ return [
...allTimes, ...allTimes,
date.minute(0).format('HHmm-DDMMYYYY'), date.minute(0).format(format),
date.minute(15).format('HHmm-DDMMYYYY'), date.minute(15).format(format),
date.minute(30).format('HHmm-DDMMYYYY'), date.minute(30).format(format),
date.minute(45).format('HHmm-DDMMYYYY'), date.minute(45).format(format),
]; ];
}, },
[] []
).sort((a, b) => dayjs(a, 'HHmm-DDMMYYYY').diff(dayjs(b, 'HHmm-DDMMYYYY')))); ).sort((a, b) => {
if (isSpecificDates) {
return dayjs(a, 'HHmm-DDMMYYYY').diff(dayjs(b, 'HHmm-DDMMYYYY'));
} else {
return dayjs(a, 'HHmm').day((parseInt(a.substring(5))-weekStart % 7 + 7) % 7)
.diff(dayjs(b, 'HHmm').day((parseInt(b.substring(5))-weekStart % 7 + 7) % 7));
}
}));
} }
}, [event, timezone]); }, [event, timezone, weekStart]);
useEffect(() => { useEffect(() => {
if (!!times.length && !!people.length) { if (!!times.length && !!people.length) {
@ -183,7 +197,9 @@ const Event = (props) => {
const response = await api.post(`/event/${id}/people/${user.name}`, { person: { password } }); const response = await api.post(`/event/${id}/people/${user.name}`, { person: { password } });
const adjustedUser = { const adjustedUser = {
...response.data, ...response.data,
availability: response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')), availability: (!!response.data.availability.length && response.data.availability[0].length === 13)
? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
: response.data.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
}; };
setUser(adjustedUser); setUser(adjustedUser);
} catch (e) { } catch (e) {
@ -192,7 +208,6 @@ const Event = (props) => {
}; };
if (user) { if (user) {
console.log('FETCHING', timezone);
fetchUser(); fetchUser();
} }
// eslint-disable-next-line // eslint-disable-next-line
@ -210,7 +225,9 @@ const Event = (props) => {
setPassword(data.password); setPassword(data.password);
const adjustedUser = { const adjustedUser = {
...response.data, ...response.data,
availability: response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')), availability: (!!response.data.availability.length && response.data.availability[0].length === 13)
? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
: response.data.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
}; };
setUser(adjustedUser); setUser(adjustedUser);
setTab('you'); setTab('you');
@ -361,6 +378,7 @@ const Event = (props) => {
times={times} times={times}
timeLabels={timeLabels} timeLabels={timeLabels}
dates={dates} dates={dates}
isSpecificDates={!!dates.length && dates[0].length === 8}
people={people.filter(p => p.availability.length > 0)} people={people.filter(p => p.availability.length > 0)}
min={min} min={min}
max={max} max={max}
@ -375,10 +393,13 @@ const Event = (props) => {
times={times} times={times}
timeLabels={timeLabels} timeLabels={timeLabels}
dates={dates} dates={dates}
isSpecificDates={!!dates.length && dates[0].length === 8}
value={user.availability} value={user.availability}
onChange={async availability => { onChange={async availability => {
const oldAvailability = [...user.availability]; const oldAvailability = [...user.availability];
const utcAvailability = availability.map(date => dayjs.tz(date, 'HHmm-DDMMYYYY', timezone).utc().format('HHmm-DDMMYYYY')); const utcAvailability = (!!availability.length && availability[0].length === 13)
? availability.map(date => dayjs.tz(date, 'HHmm-DDMMYYYY', timezone).utc().format('HHmm-DDMMYYYY'))
: availability.map(date => dayjs.tz(date, 'HHmm', timezone).day(date.substring(5)).utc().format('HHmm-d'));
setUser({ ...user, availability }); setUser({ ...user, availability });
try { try {
await api.patch(`/event/${id}/people/${user.name}`, { await api.patch(`/event/${id}/people/${user.name}`, {

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

@ -120,8 +120,6 @@ const Home = () => {
return [...times, ...day]; return [...times, ...day];
}, []); }, []);
return console.log(times);
if (times.length === 0) { if (times.length === 0) {
return setError(`You don't have any time selected`); return setError(`You don't have any time selected`);
} }