diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index 621f1e0..927799f 100644 --- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -24,6 +24,7 @@ const AvailabilityEditor = ({ times, timeLabels, dates, + isSpecificDates, value = [], onChange, ...props @@ -54,12 +55,12 @@ const AvailabilityEditor = ({ )} {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 ( - {parsedDate.format('MMM D')} + {isSpecificDates && {parsedDate.format('MMM D')}} {parsedDate.format('ddd')} diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx index 1a3e77e..c62ff9e 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx +++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx @@ -28,6 +28,7 @@ const AvailabilityViewer = ({ times, timeLabels, dates, + isSpecificDates, people = [], min = 0, max = 0, @@ -46,12 +47,12 @@ const AvailabilityViewer = ({ )} {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 ( - {parsedDate.format('MMM D')} + {isSpecificDates && {parsedDate.format('MMM D')}} {parsedDate.format('ddd')} @@ -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(', '), }); }} diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts index 4023a30..1abf22a 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts +++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts @@ -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; `; diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index b7a9392..d000fe0 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/crabfit-frontend/src/pages/Event/Event.tsx @@ -45,6 +45,7 @@ dayjs.extend(customParseFormat); const Event = (props) => { const timeFormat = useSettingsStore(state => state.timeFormat); + const weekStart = useSettingsStore(state => state.weekStart); const { register, handleSubmit } = useForm(); const { id } = props.match.params; @@ -87,7 +88,9 @@ const Event = (props) => { const response = await api.get(`/event/${id}/people`); const adjustedPeople = response.data.people.map(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); } catch (e) { @@ -103,21 +106,32 @@ const Event = (props) => { // Convert to timezone and expand minute segments useEffect(() => { if (event) { + const isSpecificDates = event.times[0].length === 13; setTimes(event.times.reduce( (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 [ ...allTimes, - date.minute(0).format('HHmm-DDMMYYYY'), - date.minute(15).format('HHmm-DDMMYYYY'), - date.minute(30).format('HHmm-DDMMYYYY'), - date.minute(45).format('HHmm-DDMMYYYY'), + date.minute(0).format(format), + date.minute(15).format(format), + date.minute(30).format(format), + 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(() => { 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 adjustedUser = { ...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); } catch (e) { @@ -192,7 +208,6 @@ const Event = (props) => { }; if (user) { - console.log('FETCHING', timezone); fetchUser(); } // eslint-disable-next-line @@ -210,7 +225,9 @@ const Event = (props) => { setPassword(data.password); const adjustedUser = { ...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); setTab('you'); @@ -361,6 +378,7 @@ const Event = (props) => { times={times} timeLabels={timeLabels} dates={dates} + isSpecificDates={!!dates.length && dates[0].length === 8} people={people.filter(p => p.availability.length > 0)} min={min} max={max} @@ -375,10 +393,13 @@ const Event = (props) => { times={times} timeLabels={timeLabels} dates={dates} + isSpecificDates={!!dates.length && dates[0].length === 8} value={user.availability} onChange={async 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 }); try { await api.patch(`/event/${id}/people/${user.name}`, { diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 623cbde..c64f749 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -120,8 +120,6 @@ const Home = () => { return [...times, ...day]; }, []); - return console.log(times); - if (times.length === 0) { return setError(`You don't have any time selected`); }