Use Temporal polyfill to implement availability viewer structure
This commit is contained in:
Ben Grant
parent
877c4b3479
commit
756b71433c
|
|
@ -11,7 +11,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@azure/msal-browser": "^2.37.0",
|
||||
"@giraugh/tools": "^1.5.0",
|
||||
"@giraugh/tools": "^1.6.0",
|
||||
"@js-temporal/polyfill": "^0.4.4",
|
||||
"@microsoft/microsoft-graph-client": "^3.0.5",
|
||||
"accept-language": "^3.0.18",
|
||||
"dayjs": "^1.11.7",
|
||||
|
|
|
|||
50
frontend/src/app/how-to/page.module.scss
Normal file
50
frontend/src/app/how-to/page.module.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.step {
|
||||
text-decoration-color: var(--primary);
|
||||
text-decoration-style: solid;
|
||||
text-decoration-line: underline;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.fakeCalendar {
|
||||
user-select: none;
|
||||
|
||||
& div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-gap: 2px;
|
||||
}
|
||||
& div:first-of-type span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px 0;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
opacity: .7;
|
||||
@media (max-width: 350px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
& div:last-of-type span {
|
||||
border: 1px solid var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
color: #FFF;
|
||||
background-color: var(--primary);
|
||||
|
||||
&:first-of-type {
|
||||
border-start-start-radius: 3px;
|
||||
border-end-start-radius: 3px;
|
||||
color: inherit;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
&:last-of-type {
|
||||
border-end-end-radius: 3px;
|
||||
border-start-end-radius: 3px;
|
||||
color: inherit;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
}
|
||||
}
|
||||
74
frontend/src/app/how-to/page.tsx
Normal file
74
frontend/src/app/how-to/page.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { Trans } from 'react-i18next/TransWithoutContext'
|
||||
import { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { range } from '@giraugh/tools'
|
||||
|
||||
import AvailabilityViewer from '/src/components/AvailabilityViewer/AvailabilityViewer'
|
||||
import Button from '/src/components/Button/Button'
|
||||
import Content from '/src/components/Content/Content'
|
||||
import Header from '/src/components/Header/Header'
|
||||
import { P } from '/src/components/Paragraph/Text'
|
||||
import Section from '/src/components/Section/Section'
|
||||
import TimeRangeField from '/src/components/TimeRangeField/TimeRangeField'
|
||||
import Video from '/src/components/Video/Video'
|
||||
import { useTranslation } from '/src/i18n/server'
|
||||
|
||||
import styles from './page.module.scss'
|
||||
|
||||
export const generateMetadata = async (): Promise<Metadata> => {
|
||||
const { t } = await useTranslation('help')
|
||||
|
||||
return {
|
||||
title: t('name'),
|
||||
}
|
||||
}
|
||||
|
||||
const Page = async () => {
|
||||
const { t, i18n } = await useTranslation(['common', 'help'])
|
||||
|
||||
return <>
|
||||
<Content>
|
||||
{/* @ts-expect-error Async Server Component */}
|
||||
<Header />
|
||||
|
||||
<h1>{t('help:name')}</h1>
|
||||
|
||||
<Video />
|
||||
|
||||
<P>{t('help:p1')}</P>
|
||||
<P>{t('help:p2')}</P>
|
||||
|
||||
<h2 className={styles.step}>{t('help:s1')}</h2>
|
||||
<P><Trans i18nKey="help:p3" t={t} i18n={i18n}>_<Link href="/">_</Link>_</Trans></P>
|
||||
<P>{t('help:p4')}</P>
|
||||
<div className={styles.fakeCalendar}>
|
||||
<div>{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => <span key={d}>{d}</span>)}</div>
|
||||
<div>{range(11, 17).map(d => <span key={d}>{d}</span>)}</div>
|
||||
</div>
|
||||
<P>{t('help:p5')}</P>
|
||||
<TimeRangeField name="time" staticValue={{ start: 11, end: 17 }} />
|
||||
|
||||
<h2 className={styles.step}>{t('help:s2')}</h2>
|
||||
<P>{t('help:p6')}</P>
|
||||
<P>{t('help:p7')}</P>
|
||||
<AvailabilityViewer
|
||||
times={['1100-12042021', '1115-12042021', '1130-12042021', '1145-12042021', '1200-12042021', '1215-12042021', '1230-12042021', '1245-12042021', '1300-12042021', '1315-12042021', '1330-12042021', '1345-12042021', '1400-12042021', '1415-12042021', '1430-12042021', '1445-12042021', '1500-12042021', '1515-12042021', '1530-12042021', '1545-12042021', '1600-12042021', '1615-12042021', '1630-12042021', '1645-12042021', '1100-13042021', '1115-13042021', '1130-13042021', '1145-13042021', '1200-13042021', '1215-13042021', '1230-13042021', '1245-13042021', '1300-13042021', '1315-13042021', '1330-13042021', '1345-13042021', '1400-13042021', '1415-13042021', '1430-13042021', '1445-13042021', '1500-13042021', '1515-13042021', '1530-13042021', '1545-13042021', '1600-13042021', '1615-13042021', '1630-13042021', '1645-13042021', '1100-14042021', '1115-14042021', '1130-14042021', '1145-14042021', '1200-14042021', '1215-14042021', '1230-14042021', '1245-14042021', '1300-14042021', '1315-14042021', '1330-14042021', '1345-14042021', '1400-14042021', '1415-14042021', '1430-14042021', '1445-14042021', '1500-14042021', '1515-14042021', '1530-14042021', '1545-14042021', '1600-14042021', '1615-14042021', '1630-14042021', '1645-14042021', '1100-15042021', '1115-15042021', '1130-15042021', '1145-15042021', '1200-15042021', '1215-15042021', '1230-15042021', '1245-15042021', '1300-15042021', '1315-15042021', '1330-15042021', '1345-15042021', '1400-15042021', '1415-15042021', '1430-15042021', '1445-15042021', '1500-15042021', '1515-15042021', '1530-15042021', '1545-15042021', '1600-15042021', '1615-15042021', '1630-15042021', '1645-15042021', '1100-16042021', '1115-16042021', '1130-16042021', '1145-16042021', '1200-16042021', '1215-16042021', '1230-16042021', '1245-16042021', '1300-16042021', '1315-16042021', '1330-16042021', '1345-16042021', '1400-16042021', '1415-16042021', '1430-16042021', '1445-16042021', '1500-16042021', '1515-16042021', '1530-16042021', '1545-16042021', '1600-16042021', '1615-16042021', '1630-16042021', '1645-16042021']}
|
||||
people={[{ name: 'Jenny', created_at: 0, availability: ['1100-12042021', '1100-13042021', '1100-14042021', '1100-15042021', '1115-12042021', '1115-13042021', '1115-14042021', '1115-15042021', '1130-12042021', '1130-13042021', '1130-14042021', '1130-15042021', '1145-12042021', '1145-13042021', '1145-14042021', '1145-15042021', '1200-12042021', '1200-13042021', '1200-14042021', '1200-15042021', '1215-12042021', '1215-13042021', '1215-14042021', '1215-15042021', '1230-12042021', '1230-13042021', '1230-14042021', '1230-15042021', '1245-12042021', '1245-13042021', '1245-14042021', '1245-15042021', '1300-12042021', '1300-13042021', '1300-14042021', '1300-15042021', '1300-16042021', '1315-12042021', '1315-13042021', '1315-14042021', '1315-15042021', '1315-16042021', '1330-12042021', '1330-13042021', '1330-14042021', '1330-15042021', '1330-16042021', '1345-12042021', '1345-13042021', '1345-14042021', '1345-15042021', '1345-16042021', '1400-12042021', '1400-13042021', '1400-14042021', '1400-15042021', '1400-16042021', '1415-12042021', '1415-13042021', '1415-14042021', '1415-15042021', '1415-16042021', '1430-12042021', '1430-13042021', '1430-14042021', '1430-15042021', '1430-16042021', '1445-12042021', '1445-13042021', '1445-14042021', '1445-15042021', '1445-16042021', '1500-12042021', '1500-15042021', '1500-16042021', '1515-12042021', '1515-15042021', '1515-16042021', '1530-12042021', '1530-15042021', '1530-16042021', '1545-12042021', '1545-15042021', '1545-16042021', '1600-12042021', '1600-15042021', '1600-16042021', '1615-12042021', '1615-15042021', '1615-16042021', '1630-12042021', '1630-15042021', '1630-16042021', '1645-12042021', '1645-15042021', '1645-16042021'] }]}
|
||||
timezone="UTC"
|
||||
/>
|
||||
|
||||
<h2 className={styles.step}>{t('help:s3')}</h2>
|
||||
<P>{t('help:p8')}</P>
|
||||
<P>{t('help:p9')}</P>
|
||||
<P>{t('help:p10')}</P>
|
||||
</Content>
|
||||
|
||||
<Section>
|
||||
<Content isCentered>
|
||||
<Button href="/">{t('common:cta')}</Button>
|
||||
</Content>
|
||||
</Section>
|
||||
</>
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import dayjs from 'dayjs'
|
||||
import localeData from 'dayjs/plugin/localeData'
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { createPalette } from 'hue-map'
|
||||
|
||||
import { useSettingsStore, useLocaleUpdateStore } from '/src/stores'
|
||||
|
||||
import { Legend } from '/src/components'
|
||||
import {
|
||||
Wrapper,
|
||||
ScrollWrapper,
|
||||
Container,
|
||||
Date,
|
||||
Times,
|
||||
DateLabel,
|
||||
DayLabel,
|
||||
Time,
|
||||
Spacer,
|
||||
Tooltip,
|
||||
TooltipTitle,
|
||||
TooltipDate,
|
||||
TooltipContent,
|
||||
TooltipPerson,
|
||||
TimeLabels,
|
||||
TimeLabel,
|
||||
TimeSpace,
|
||||
People,
|
||||
Person,
|
||||
StyledMain,
|
||||
Info,
|
||||
} from './AvailabilityViewer.styles'
|
||||
|
||||
import locales from '/src/i18n/locales'
|
||||
|
||||
dayjs.extend(localeData)
|
||||
dayjs.extend(customParseFormat)
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const AvailabilityViewer = ({
|
||||
times,
|
||||
timeLabels,
|
||||
dates,
|
||||
isSpecificDates,
|
||||
people = [],
|
||||
min = 0,
|
||||
max = 0,
|
||||
}) => {
|
||||
const [tooltip, setTooltip] = useState(null)
|
||||
const timeFormat = useSettingsStore(state => state.timeFormat)
|
||||
const highlight = useSettingsStore(state => state.highlight)
|
||||
const colormap = useSettingsStore(state => state.colormap)
|
||||
const [filteredPeople, setFilteredPeople] = useState([])
|
||||
const [touched, setTouched] = useState(false)
|
||||
const [tempFocus, setTempFocus] = useState(null)
|
||||
const [focusCount, setFocusCount] = useState(null)
|
||||
|
||||
const { t } = useTranslation('event')
|
||||
const locale = useLocaleUpdateStore(state => state.locale)
|
||||
|
||||
const wrapper = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredPeople(people.map(p => p.name))
|
||||
setTouched(people.length <= 1)
|
||||
}, [people])
|
||||
|
||||
const [palette, setPalette] = useState([])
|
||||
|
||||
useEffect(() => setPalette(createPalette({
|
||||
map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap,
|
||||
steps: tempFocus !== null ? 2 : Math.min(max, filteredPeople.length)+1,
|
||||
}).format()), [tempFocus, filteredPeople, max, colormap])
|
||||
|
||||
const heatmap = useMemo(() => (
|
||||
<Container>
|
||||
<TimeLabels>
|
||||
{!!timeLabels.length && timeLabels.map((label, i) =>
|
||||
<TimeSpace key={i}>
|
||||
{label.label?.length !== '' && <TimeLabel>{label.label}</TimeLabel>}
|
||||
</TimeSpace>
|
||||
)}
|
||||
</TimeLabels>
|
||||
{dates.map((date, i) => {
|
||||
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>
|
||||
{isSpecificDates && <DateLabel locale={locale}>{parsedDate.format('MMM D')}</DateLabel>}
|
||||
<DayLabel>{parsedDate.format('ddd')}</DayLabel>
|
||||
|
||||
<Times
|
||||
$borderRight={last}
|
||||
$borderLeft={i === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[i-1], 'DDMMYYYY') : dayjs().day(dates[i-1]), 'day') > 1}
|
||||
>
|
||||
{timeLabels.map((timeLabel, i) => {
|
||||
if (!timeLabel.time) return null
|
||||
if (!times.includes(`${timeLabel.time}-${date}`)) {
|
||||
return (
|
||||
<TimeSpace className="timespace" key={i} title={t('event:greyed_times')} />
|
||||
)
|
||||
}
|
||||
const time = `${timeLabel.time}-${date}`
|
||||
const peopleHere = tempFocus !== null
|
||||
? people.filter(person => person.availability.includes(time) && tempFocus === person.name).map(person => person.name)
|
||||
: people.filter(person => person.availability.includes(time) && filteredPeople.includes(person.name)).map(person => person.name)
|
||||
|
||||
return (
|
||||
<Time
|
||||
key={i}
|
||||
$time={time}
|
||||
className="time"
|
||||
$peopleCount={focusCount !== null && focusCount !== peopleHere.length ? null : peopleHere.length}
|
||||
$palette={palette}
|
||||
aria-label={peopleHere.join(', ')}
|
||||
$maxPeople={tempFocus !== null ? 1 : Math.min(max, filteredPeople.length)}
|
||||
$minPeople={tempFocus !== null ? 0 : Math.min(min, filteredPeople.length)}
|
||||
$highlight={highlight}
|
||||
onMouseEnter={e => {
|
||||
const cellBox = e.currentTarget.getBoundingClientRect()
|
||||
const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 }
|
||||
const timeText = timeFormat === '12h' ? `h${locales[locale]?.separator ?? ':'}mma` : `HH${locales[locale]?.separator ?? ':'}mm`
|
||||
setTooltip({
|
||||
x: Math.round(cellBox.x-wrapperBox.x + cellBox.width/2),
|
||||
y: Math.round(cellBox.y-wrapperBox.y + cellBox.height)+6,
|
||||
available: `${peopleHere.length} / ${filteredPeople.length} ${t('event:available')}`,
|
||||
date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
|
||||
people: peopleHere,
|
||||
})
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setTooltip(null)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Times>
|
||||
</Date>
|
||||
{last && dates.length !== i+1 && <Spacer />}
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</Container>
|
||||
), [
|
||||
people,
|
||||
filteredPeople,
|
||||
tempFocus,
|
||||
focusCount,
|
||||
highlight,
|
||||
locale,
|
||||
dates,
|
||||
isSpecificDates,
|
||||
max,
|
||||
min,
|
||||
t,
|
||||
timeFormat,
|
||||
timeLabels,
|
||||
times,
|
||||
palette,
|
||||
])
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledMain>
|
||||
<Legend
|
||||
min={Math.min(min, filteredPeople.length)}
|
||||
max={Math.min(max, filteredPeople.length)}
|
||||
total={filteredPeople.length}
|
||||
onSegmentFocus={count => setFocusCount(count)}
|
||||
/>
|
||||
<Info>{t('event:group.info1')}</Info>
|
||||
{people.length > 1 && (
|
||||
<>
|
||||
<Info>{t('event:group.info2')}</Info>
|
||||
<People>
|
||||
{people.map((person, i) =>
|
||||
<Person
|
||||
key={i}
|
||||
$filtered={filteredPeople.includes(person.name)}
|
||||
onClick={() => {
|
||||
setTempFocus(null)
|
||||
if (filteredPeople.includes(person.name)) {
|
||||
if (!touched) {
|
||||
setTouched(true)
|
||||
setFilteredPeople([person.name])
|
||||
} else {
|
||||
setFilteredPeople(filteredPeople.filter(n => n !== person.name))
|
||||
}
|
||||
} else {
|
||||
setFilteredPeople([...filteredPeople, person.name])
|
||||
}
|
||||
}}
|
||||
onMouseOver={() => setTempFocus(person.name)}
|
||||
onMouseOut={() => setTempFocus(null)}
|
||||
title={person.created && dayjs.unix(person.created).fromNow()}
|
||||
>{person.name}</Person>
|
||||
)}
|
||||
</People>
|
||||
</>
|
||||
)}
|
||||
</StyledMain>
|
||||
|
||||
<Wrapper ref={wrapper}>
|
||||
<ScrollWrapper>
|
||||
{heatmap}
|
||||
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
$x={tooltip.x}
|
||||
$y={tooltip.y}
|
||||
>
|
||||
<TooltipTitle>{tooltip.available}</TooltipTitle>
|
||||
<TooltipDate>{tooltip.date}</TooltipDate>
|
||||
{!!filteredPeople.length && (
|
||||
<TooltipContent>
|
||||
{tooltip.people.map(person =>
|
||||
<TooltipPerson key={person}>{person}</TooltipPerson>
|
||||
)}
|
||||
{filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
|
||||
<TooltipPerson key={person} disabled>{person}</TooltipPerson>
|
||||
)}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
</ScrollWrapper>
|
||||
</Wrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AvailabilityViewer
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
.heatmap {
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 100%;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 0 calc(calc(100% - 600px) / 2);
|
||||
|
||||
@media (max-width: 660px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeLabels {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 40px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.timeSpace {
|
||||
height: 10px;
|
||||
position: relative;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&.grey {
|
||||
background-origin: border-box;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.3px,
|
||||
var(--loading) 4.3px,
|
||||
var(--loading) 8.6px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.timeLabel {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.7em;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dateColumn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dateLabel {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dayLabel {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.times {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-bottom: 2px solid var(--text);
|
||||
border-left: 1px solid var(--text);
|
||||
border-right: 1px solid var(--text);
|
||||
|
||||
&[data-border-left=true] {
|
||||
border-left: 2px solid var(--text);
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
&[data-border-right=true] {
|
||||
border-right: 2px solid var(--text);
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
& .time + .timespace, & .timespace:first-of-type {
|
||||
border-top: 2px solid var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
height: 10px;
|
||||
background-origin: border-box;
|
||||
transition: background-color .1s;
|
||||
|
||||
border-top-width: 2px;
|
||||
border-top-style: solid;
|
||||
border-top-color: var(--text);
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.3px,
|
||||
rgba(0,0,0,.5) 4.3px,
|
||||
rgba(0,0,0,.5) 8.6px
|
||||
);
|
||||
}
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.people {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
margin: 14px auto;
|
||||
}
|
||||
|
||||
.person {
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--text);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.personSelected {
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow-y: visible;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.columnSpacer {
|
||||
width: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -1,112 +1,4 @@
|
|||
import { styled } from 'goober'
|
||||
import { forwardRef } from 'react'
|
||||
|
||||
export const Wrapper = styled('div', forwardRef)`
|
||||
overflow-y: visible;
|
||||
margin: 20px 0;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
export const ScrollWrapper = styled('div')`
|
||||
overflow-x: auto;
|
||||
`
|
||||
|
||||
export const Container = styled('div')`
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 100%;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding: 0 calc(calc(100% - 600px) / 2);
|
||||
|
||||
@media (max-width: 660px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
`
|
||||
|
||||
export const Date = styled('div')`
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const Times = styled('div')`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-bottom: 2px solid var(--text);
|
||||
border-left: 1px solid var(--text);
|
||||
border-right: 1px solid var(--text);
|
||||
|
||||
${props => props.$borderLeft && `
|
||||
border-left: 2px solid var(--text);
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
`}
|
||||
${props => props.$borderRight && `
|
||||
border-right: 2px solid var(--text);
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
`}
|
||||
|
||||
& .time + .timespace, & .timespace:first-of-type {
|
||||
border-top: 2px solid var(--text);
|
||||
}
|
||||
`
|
||||
|
||||
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;
|
||||
background-origin: border-box;
|
||||
transition: background-color .1s;
|
||||
|
||||
${props => props.$time.slice(2, 4) === '00' && `
|
||||
border-top: 2px solid var(--text);
|
||||
`}
|
||||
${props => props.$time.slice(2, 4) !== '00' && `
|
||||
border-top: 2px solid transparent;
|
||||
`}
|
||||
${props => props.$time.slice(2, 4) === '30' && `
|
||||
border-top: 2px dotted var(--text);
|
||||
`}
|
||||
|
||||
background-color: ${props => props.$palette[props.$peopleCount] ?? 'transparent'};
|
||||
|
||||
${props => props.$highlight && props.$peopleCount === props.$maxPeople && props.$peopleCount > 0 && `
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.3px,
|
||||
rgba(0,0,0,.5) 4.3px,
|
||||
rgba(0,0,0,.5) 8.6px
|
||||
);
|
||||
`}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
`
|
||||
|
||||
export const Spacer = styled('div')`
|
||||
width: 12px;
|
||||
flex-shrink: 0;
|
||||
`
|
||||
|
||||
export const Tooltip = styled('div')`
|
||||
position: absolute;
|
||||
|
|
@ -153,80 +45,3 @@ export const TooltipPerson = styled('span')`
|
|||
border-color: var(--text);
|
||||
`}
|
||||
`
|
||||
|
||||
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;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&.timespace {
|
||||
background-origin: border-box;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.3px,
|
||||
var(--loading) 4.3px,
|
||||
var(--loading) 8.6px
|
||||
);
|
||||
}
|
||||
`
|
||||
|
||||
export const TimeLabel = styled('label')`
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.7em;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export const StyledMain = styled('div')`
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
max-width: calc(100% - 60px);
|
||||
`
|
||||
|
||||
export const People = styled('div')`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
margin: 14px auto;
|
||||
`
|
||||
|
||||
export const Person = styled('button')`
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--text);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
user-select: none;
|
||||
|
||||
${props => props.$filtered && `
|
||||
background: var(--primary);
|
||||
color: #FFFFFF;
|
||||
border-color: var(--primary);
|
||||
`}
|
||||
`
|
||||
|
||||
export const Info = styled('span')`
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
'use client'
|
||||
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
import { createPalette } from 'hue-map'
|
||||
|
||||
import Content from '/src/components/Content/Content'
|
||||
import Legend from '/src/components/Legend/Legend'
|
||||
import { PersonResponse } from '/src/config/api'
|
||||
import { useTranslation } from '/src/i18n/client'
|
||||
import { useStore } from '/src/stores'
|
||||
import useSettingsStore from '/src/stores/settingsStore'
|
||||
import { calculateAvailability, calculateColumns, calculateRows, convertTimesToDates, makeClass } from '/src/utils'
|
||||
|
||||
import styles from './AvailabilityViewer.module.scss'
|
||||
|
||||
interface AvailabilityViewerProps {
|
||||
times: string[]
|
||||
timezone: string
|
||||
people: PersonResponse[]
|
||||
}
|
||||
|
||||
const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps) => {
|
||||
const { t, i18n } = useTranslation('event')
|
||||
|
||||
// const [tooltip, setTooltip] = useState(null)
|
||||
const timeFormat = useStore(useSettingsStore, state => state.timeFormat)
|
||||
const highlight = useStore(useSettingsStore, state => state.highlight)
|
||||
const colormap = useStore(useSettingsStore, state => state.colormap)
|
||||
const [filteredPeople, setFilteredPeople] = useState(people.map(p => p.name))
|
||||
// const [tempFocus, setTempFocus] = useState(null)
|
||||
// const [focusCount, setFocusCount] = useState(null)
|
||||
|
||||
// const wrapper = useRef()
|
||||
|
||||
// Calculate rows and columns
|
||||
const [dates, rows, columns] = useMemo(() => {
|
||||
const dates = convertTimesToDates(times, timezone)
|
||||
return [dates, calculateRows(dates), calculateColumns(dates)]
|
||||
}, [times, timezone])
|
||||
|
||||
// Calculate availabilities
|
||||
const { availabilities, min, max } = useMemo(() => calculateAvailability(dates, people
|
||||
.filter(p => filteredPeople.includes(p.name))
|
||||
.map(p => ({
|
||||
...p,
|
||||
availability: convertTimesToDates(p.availability, timezone),
|
||||
}))
|
||||
), [dates, filteredPeople, people, timezone])
|
||||
|
||||
// Is specific dates or just days of the week
|
||||
const isSpecificDates = useMemo(() => times[0].length === 13, [times])
|
||||
|
||||
// Create the colour palette
|
||||
const [palette, setPalette] = useState<string[]>([])
|
||||
useEffect(() => {
|
||||
setPalette(createPalette({
|
||||
map: colormap !== 'crabfit' ? colormap : [[0, [247, 158, 0, 0]], [1, [247, 158, 0, 255]]],
|
||||
steps: (max - min) + 1,
|
||||
}).format())
|
||||
}, [min, max, colormap])
|
||||
|
||||
const heatmap = useMemo(() => (
|
||||
<div className={styles.heatmap}>
|
||||
<div className={styles.timeLabels}>
|
||||
{rows.map((row, i) =>
|
||||
<div className={styles.timeSpace} key={i}>
|
||||
{row && row.minute === 0 && <label className={styles.timeLabel}>
|
||||
{row.toLocaleString(i18n.language, { hour: 'numeric', hour12: timeFormat === '12h' })}
|
||||
</label>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{columns.map((column, i) => <Fragment key={i}>
|
||||
{column ? <div className={styles.dateColumn}>
|
||||
{isSpecificDates && <label className={styles.dateLabel}>{column.toLocaleString(i18n.language, { month: 'short', day: 'numeric' })}</label>}
|
||||
<label className={styles.dayLabel}>{column.toLocaleString(i18n.language, { weekday: 'short' })}</label>
|
||||
|
||||
<div
|
||||
className={styles.times}
|
||||
data-border-left={i === 0 || columns.at(i - 1) === null}
|
||||
data-border-right={i === columns.length - 1 || columns.at(i + 1) === null}
|
||||
>
|
||||
{rows.map((row, i) => {
|
||||
if (i === rows.length - 1) return null
|
||||
|
||||
if (!row || rows.at(i + 1) === null || dates.every(d => !d.equals(column.toZonedDateTime({ timeZone: timezone, plainTime: row })))) {
|
||||
return <div
|
||||
className={makeClass(styles.timeSpace, styles.grey)}
|
||||
key={i}
|
||||
title={t<string>('greyed_times')}
|
||||
/>
|
||||
}
|
||||
|
||||
const date = column.toZonedDateTime({ timeZone: timezone, plainTime: row })
|
||||
const peopleHere = availabilities.find(a => a.date.equals(date))?.people ?? []
|
||||
|
||||
return <div
|
||||
key={i}
|
||||
className={makeClass(
|
||||
styles.time,
|
||||
highlight && peopleHere.length === max && peopleHere.length > 0 && styles.highlight,
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: palette[peopleHere.length],
|
||||
...date.minute !== 0 && date.minute !== 30 && { borderTopColor: 'transparent' },
|
||||
...date.minute === 30 && { borderTopStyle: 'dotted' },
|
||||
}}
|
||||
aria-label={peopleHere.join(', ')}
|
||||
// onMouseEnter={e => {
|
||||
// const cellBox = e.currentTarget.getBoundingClientRect()
|
||||
// const wrapperBox = wrapper?.current?.getBoundingClientRect() ?? { x: 0, y: 0 }
|
||||
// const timeText = timeFormat === '12h' ? `h${locales[locale]?.separator ?? ':'}mma` : `HH${locales[locale]?.separator ?? ':'}mm`
|
||||
// setTooltip({
|
||||
// x: Math.round(cellBox.x - wrapperBox.x + cellBox.width / 2),
|
||||
// y: Math.round(cellBox.y - wrapperBox.y + cellBox.height) + 6,
|
||||
// available: `${peopleHere.length} / ${filteredPeople.length} ${t('event:available')}`,
|
||||
// date: parsedDate.hour(time.slice(0, 2)).minute(time.slice(2, 4)).format(isSpecificDates ? `${timeText} ddd, D MMM YYYY` : `${timeText} ddd`),
|
||||
// people: peopleHere,
|
||||
// })
|
||||
// }}
|
||||
// onMouseLeave={() => {
|
||||
// setTooltip(null)
|
||||
// }}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
</div> : <div className={styles.columnSpacer} />}
|
||||
</Fragment>)}
|
||||
</div>
|
||||
), [
|
||||
availabilities,
|
||||
dates,
|
||||
isSpecificDates,
|
||||
rows,
|
||||
columns,
|
||||
highlight,
|
||||
max,
|
||||
t,
|
||||
timeFormat,
|
||||
palette,
|
||||
])
|
||||
|
||||
return <>
|
||||
<Content>
|
||||
<Legend
|
||||
min={min}
|
||||
max={max}
|
||||
total={filteredPeople.length}
|
||||
palette={palette}
|
||||
onSegmentFocus={console.log}
|
||||
/>
|
||||
|
||||
<span className={styles.info}>{t('group.info1')}</span>
|
||||
|
||||
{people.length > 1 && <>
|
||||
<span className={styles.info}>{t('group.info2')}</span>
|
||||
<div className={styles.people}>
|
||||
{people.map(person =>
|
||||
<button
|
||||
type="button"
|
||||
className={makeClass(
|
||||
styles.person,
|
||||
filteredPeople.includes(person.name) && styles.personSelected,
|
||||
)}
|
||||
key={person.name}
|
||||
// onClick={() => {
|
||||
// setTempFocus(null)
|
||||
// if (filteredPeople.includes(person.name)) {
|
||||
// if (!touched) {
|
||||
// setTouched(true)
|
||||
// setFilteredPeople([person.name])
|
||||
// } else {
|
||||
// setFilteredPeople(filteredPeople.filter(n => n !== person.name))
|
||||
// }
|
||||
// } else {
|
||||
// setFilteredPeople([...filteredPeople, person.name])
|
||||
// }
|
||||
// }}
|
||||
// onMouseOver={() => setTempFocus(person.name)}
|
||||
// onMouseOut={() => setTempFocus(null)}
|
||||
title={Temporal.Instant.fromEpochSeconds(person.created_at).until(Temporal.Now.instant()).toLocaleString()}
|
||||
>{person.name}</button>
|
||||
)}
|
||||
</div>
|
||||
</>}
|
||||
</Content>
|
||||
|
||||
<div className={styles.wrapper}>
|
||||
<div>
|
||||
{heatmap}
|
||||
|
||||
{/* {tooltip && (
|
||||
<Tooltip
|
||||
$x={tooltip.x}
|
||||
$y={tooltip.y}
|
||||
>
|
||||
<TooltipTitle>{tooltip.available}</TooltipTitle>
|
||||
<TooltipDate>{tooltip.date}</TooltipDate>
|
||||
{!!filteredPeople.length && (
|
||||
<TooltipContent>
|
||||
{tooltip.people.map(person =>
|
||||
<TooltipPerson key={person}>{person}</TooltipPerson>
|
||||
)}
|
||||
{filteredPeople.filter(p => !tooltip.people.includes(p)).map(person =>
|
||||
<TooltipPerson key={person} disabled>{person}</TooltipPerson>
|
||||
)}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default AvailabilityViewer
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createPalette } from 'hue-map'
|
||||
|
||||
import { useSettingsStore } from '/src/stores'
|
||||
|
||||
import {
|
||||
Wrapper,
|
||||
Label,
|
||||
Bar,
|
||||
Grade,
|
||||
} from './Legend.styles'
|
||||
|
||||
const Legend = ({
|
||||
min,
|
||||
max,
|
||||
total,
|
||||
onSegmentFocus,
|
||||
}) => {
|
||||
const { t } = useTranslation('event')
|
||||
const highlight = useSettingsStore(state => state.highlight)
|
||||
const colormap = useSettingsStore(state => state.colormap)
|
||||
const setHighlight = useSettingsStore(state => state.setHighlight)
|
||||
|
||||
const [palette, setPalette] = useState([])
|
||||
|
||||
useEffect(() => setPalette(createPalette({
|
||||
map: colormap === 'crabfit' ? [[0, [247,158,0,0]], [1, [247,158,0,255]]] : colormap,
|
||||
steps: max+1-min,
|
||||
}).format()), [min, max, colormap])
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Label>{min}/{total} {t('event:available')}</Label>
|
||||
|
||||
<Bar
|
||||
onMouseOut={() => onSegmentFocus(null)}
|
||||
onClick={() => setHighlight(!highlight)}
|
||||
title={t('event:group.legend_tooltip')}
|
||||
>
|
||||
{[...Array(max+1-min).keys()].map(i => i+min).map(i =>
|
||||
<Grade
|
||||
key={i}
|
||||
$color={palette[i]}
|
||||
$highlight={highlight && i === max && max > 0}
|
||||
onMouseOver={() => onSegmentFocus(i)}
|
||||
/>
|
||||
)}
|
||||
</Bar>
|
||||
|
||||
<Label>{max}/{total} {t('event:available')}</Label>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default Legend
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
import { styled } from 'goober'
|
||||
|
||||
export const Wrapper = styled('div')`
|
||||
.wrapper {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -13,15 +11,15 @@ export const Wrapper = styled('div')`
|
|||
@media (max-width: 400px) {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
export const Label = styled('label')`
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
`
|
||||
}
|
||||
|
||||
export const Bar = styled('div')`
|
||||
.bar {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
height: 20px;
|
||||
|
|
@ -34,19 +32,14 @@ export const Bar = styled('div')`
|
|||
width: 100%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
export const Grade = styled('div')`
|
||||
flex: 1;
|
||||
background-color: ${props => props.$color};
|
||||
|
||||
${props => props.$highlight && `
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.5px,
|
||||
rgba(0,0,0,.5) 4.5px,
|
||||
rgba(0,0,0,.5) 9px
|
||||
);
|
||||
`}
|
||||
`
|
||||
.highlight {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 4.5px,
|
||||
rgba(0,0,0,.5) 4.5px,
|
||||
rgba(0,0,0,.5) 9px
|
||||
);
|
||||
}
|
||||
43
frontend/src/components/Legend/Legend.tsx
Normal file
43
frontend/src/components/Legend/Legend.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { useTranslation } from '/src/i18n/client'
|
||||
import { useStore } from '/src/stores'
|
||||
import useSettingsStore from '/src/stores/settingsStore'
|
||||
|
||||
import styles from './Legend.module.scss'
|
||||
|
||||
interface LegendProps {
|
||||
min: number
|
||||
max: number
|
||||
total: number
|
||||
palette: string[]
|
||||
onSegmentFocus: (segment: number | undefined) => void
|
||||
}
|
||||
|
||||
const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
|
||||
const { t } = useTranslation('event')
|
||||
const highlight = useStore(useSettingsStore, state => state.highlight)
|
||||
const setHighlight = useStore(useSettingsStore, state => state.setHighlight)
|
||||
|
||||
return <div className={styles.wrapper}>
|
||||
<label className={styles.label}>{min}/{total} {t('available')}</label>
|
||||
|
||||
<div
|
||||
className={styles.bar}
|
||||
onMouseOut={() => onSegmentFocus(undefined)}
|
||||
onClick={() => setHighlight?.(!highlight)}
|
||||
title={t<string>('group.legend_tooltip')}
|
||||
>
|
||||
{[...Array(max + 1 - min).keys()].map(i => i + min).map(i =>
|
||||
<div
|
||||
key={i}
|
||||
style={{ flex: 1, backgroundColor: palette[i] }}
|
||||
className={highlight && i === max && max > 0 ? styles.highlight : undefined}
|
||||
onMouseOver={() => onSegmentFocus(i)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label className={styles.label}>{max}/{total} {t('available')}</label>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Legend
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { Wrapper, Loader } from './Loading.styles'
|
||||
|
||||
const Loading = () => <Wrapper><Loader /></Wrapper>
|
||||
|
||||
export default Loading
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { styled } from 'goober'
|
||||
|
||||
export const Wrapper = styled('main')`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
`
|
||||
|
||||
export const Loader = styled('div')`
|
||||
@keyframes load {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border: 3px solid var(--primary);
|
||||
border-left-color: transparent;
|
||||
border-radius: 100px;
|
||||
animation: load .5s linear infinite;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
border: 0;
|
||||
|
||||
&::before {
|
||||
content: 'loading...';
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -14,20 +14,20 @@ const Stats = async () => {
|
|||
const stats = await getStats()
|
||||
const { t } = await useTranslation('home')
|
||||
|
||||
return <div className={styles.wrapper}>
|
||||
return stats ? <div className={styles.wrapper}>
|
||||
<div>
|
||||
<span className={styles.number}>
|
||||
{new Intl.NumberFormat().format(stats?.event_count || 17000)}{!stats?.event_count && '+'}
|
||||
{new Intl.NumberFormat().format(stats.event_count)}
|
||||
</span>
|
||||
<span className={styles.label}>{t('about.events')}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className={styles.number}>
|
||||
{new Intl.NumberFormat().format(stats?.person_count || 65000)}{!stats?.person_count && '+'}
|
||||
{new Intl.NumberFormat().format(stats.person_count)}
|
||||
</span>
|
||||
<span className={styles.label}>{t('about.availabilities')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> : null
|
||||
}
|
||||
|
||||
export default Stats
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
'use client'
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { FieldValues, useController, UseControllerProps } from 'react-hook-form'
|
||||
import dayjs from 'dayjs'
|
||||
|
|
@ -13,14 +15,24 @@ const times = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
|
|||
interface TimeRangeFieldProps<TValues extends FieldValues> extends UseControllerProps<TValues> {
|
||||
label?: React.ReactNode
|
||||
description?: React.ReactNode
|
||||
staticValue?: {
|
||||
start: number
|
||||
end: number
|
||||
}
|
||||
}
|
||||
|
||||
const TimeRangeField = <TValues extends FieldValues>({
|
||||
label,
|
||||
description,
|
||||
staticValue,
|
||||
...props
|
||||
}: TimeRangeFieldProps<TValues>) => {
|
||||
const { field: { value, onChange } } = useController(props)
|
||||
const { field: { value, onChange } } = !staticValue
|
||||
? useController(props)
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
: { field: { value: staticValue, onChange: () => {} } }
|
||||
|
||||
if (!('start' in value) || !('end' in value)) return null
|
||||
|
||||
return <Wrapper>
|
||||
{label && <Label>{label}</Label>}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ interface LanguageDetails {
|
|||
/** 0: Sunday, 1: Monday */
|
||||
weekStart: 0 | 1
|
||||
timeFormat: '12h' | '24h'
|
||||
/** TODO: document */
|
||||
/** The separator to show between hours and minutes (default `:`) */
|
||||
separator?: string
|
||||
/** Day.js locale import */
|
||||
import: () => Promise<unknown>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ColorMap } from 'hue-map/dist/maps'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
|
|
@ -9,13 +10,13 @@ interface SettingsStore {
|
|||
timeFormat: TimeFormat
|
||||
theme: Theme
|
||||
highlight: boolean
|
||||
colormap: string
|
||||
colormap: 'crabfit' | ColorMap
|
||||
|
||||
setWeekStart: (weekStart: 0 | 1) => void
|
||||
setTimeFormat: (timeFormat: TimeFormat) => void
|
||||
setTheme: (theme: Theme) => void
|
||||
setHighlight: (highlight: boolean) => void
|
||||
setColormap: (colormap: string) => void
|
||||
setColormap: (colormap: 'crabfit' | ColorMap) => void
|
||||
}
|
||||
|
||||
const useSettingsStore = create<SettingsStore>()(persist(
|
||||
|
|
|
|||
43
frontend/src/utils/calculateAvailability.ts
Normal file
43
frontend/src/utils/calculateAvailability.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
interface Person {
|
||||
name: string
|
||||
availability: Temporal.ZonedDateTime[]
|
||||
}
|
||||
|
||||
interface Availability {
|
||||
date: Temporal.ZonedDateTime
|
||||
/** Names of everyone who is available at this date */
|
||||
people: string[]
|
||||
}
|
||||
|
||||
interface AvailabilityInfo {
|
||||
availabilities: Availability[]
|
||||
/** The amount of people available in the date with lowest availability */
|
||||
min: number
|
||||
/** The amount of people available in the date with highest availability */
|
||||
max: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes an array of dates and an array of people,
|
||||
* where each person has a name and availability array, and returns the
|
||||
* group availability for each date passed in.
|
||||
*/
|
||||
export const calculateAvailability = (dates: Temporal.ZonedDateTime[], people: Person[]): AvailabilityInfo => {
|
||||
let min = Infinity
|
||||
let max = -Infinity
|
||||
|
||||
const availabilities: Availability[] = dates.map(date => {
|
||||
const names = people.flatMap(p => p.availability.some(d => d.equals(date)) ? [p.name] : [])
|
||||
if (names.length < min) {
|
||||
min = names.length
|
||||
}
|
||||
if (names.length > max) {
|
||||
max = names.length
|
||||
}
|
||||
return { date, people: names }
|
||||
})
|
||||
|
||||
return { availabilities, min, max }
|
||||
}
|
||||
25
frontend/src/utils/calculateColumns.ts
Normal file
25
frontend/src/utils/calculateColumns.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { splitArrayBy } from '@giraugh/tools'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
/**
|
||||
* Calculates the columns required for an availability grid
|
||||
* @returns An array of PlainDate or null, where null indicates a spacer column between dates
|
||||
*/
|
||||
export const calculateColumns = (dates: Temporal.ZonedDateTime[]): (Temporal.PlainDate | null)[] => {
|
||||
// Dedupe dates by date and sort
|
||||
const sortedDates = [...new Map(dates.map(d => {
|
||||
const plain = d.toPlainDate()
|
||||
return [plain.toString(), plain]
|
||||
})).values()]
|
||||
.sort(Temporal.PlainDate.compare)
|
||||
|
||||
// Partition by distance
|
||||
const partitionedDates = splitArrayBy(sortedDates, (a, b) => !a.add({ days: 1 }).equals(b))
|
||||
|
||||
// Join
|
||||
return partitionedDates.reduce((columns, partition, i) => [
|
||||
...columns,
|
||||
...partition,
|
||||
...partitionedDates.length - 1 < i ? [null] : [], // Add spacer in between partitions
|
||||
], [] as (Temporal.PlainDate | null)[])
|
||||
}
|
||||
26
frontend/src/utils/calculateRows.ts
Normal file
26
frontend/src/utils/calculateRows.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { splitArrayBy } from '@giraugh/tools'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
/**
|
||||
* Calculates the rows required for an availability grid
|
||||
* @returns An array of PlainTime or null, where null indicates a spacer row in gaps
|
||||
*/
|
||||
export const calculateRows = (dates: Temporal.ZonedDateTime[]): (Temporal.PlainTime | null)[] => {
|
||||
// Dedupe dates by time and sort
|
||||
const sortedDates = [...new Map(dates.map(d => {
|
||||
const plain = d.toPlainTime()
|
||||
return [plain.toString({ smallestUnit: 'minute' }), plain]
|
||||
})).values()]
|
||||
.sort(Temporal.PlainTime.compare)
|
||||
|
||||
// Partition by distance
|
||||
const partitionedDates = splitArrayBy(sortedDates, (a, b) => !a.add({ minutes: 15 }).equals(b))
|
||||
|
||||
// Add end cap time and join
|
||||
return partitionedDates.reduce((rows, partition, i) => [
|
||||
...rows,
|
||||
...partition,
|
||||
partition[partition.length - 1].add({ minutes: 15 }),
|
||||
...partitionedDates.length - 1 < i ? [null, null] : [], // Add spacer in between partitions
|
||||
], [] as (Temporal.PlainTime | null)[])
|
||||
}
|
||||
54
frontend/src/utils/convertTimesToDates.ts
Normal file
54
frontend/src/utils/convertTimesToDates.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
/**
|
||||
* Take times as strings and convert to Dayjs objects
|
||||
* @param times An array of strings in `HHmm-d` or `HHmm-DDMMYYYY` format
|
||||
* @param timezone The target timezone
|
||||
*/
|
||||
export const convertTimesToDates = (times: string[], timezone: string): Temporal.ZonedDateTime[] => {
|
||||
const isSpecificDates = times[0].length === 13
|
||||
|
||||
return times.map(time => isSpecificDates ?
|
||||
parseSpecificDate(time).withTimeZone(timezone)
|
||||
: parseWeekdayDate(time).withTimeZone(timezone)
|
||||
)
|
||||
}
|
||||
|
||||
// Parse from UTC `HHmm-DDMMYYYY` format into a ZonedDateTime in UTC
|
||||
const parseSpecificDate = (str: string): Temporal.ZonedDateTime => {
|
||||
if (str.length !== 13) {
|
||||
throw new Error('String must be in HHmm-DDMMYYYY format')
|
||||
}
|
||||
|
||||
// Extract values
|
||||
const [hour, minute] = [Number(str.substring(0, 2)), Number(str.substring(2, 4))]
|
||||
const [day, month, year] = [Number(str.substring(5, 7)), Number(str.substring(7, 9)), Number(str.substring(9))]
|
||||
|
||||
// Construct PlainDateTime
|
||||
return Temporal.ZonedDateTime.from({
|
||||
hour, minute, day, month, year,
|
||||
timeZone: 'UTC',
|
||||
})
|
||||
}
|
||||
|
||||
// Parse from UTC `HHmm-d` format into a ZonedDateTime in UTC based on the current date
|
||||
const parseWeekdayDate = (str: string): Temporal.ZonedDateTime => {
|
||||
if (str.length !== 6) {
|
||||
throw new Error('String must be in HHmm-d format')
|
||||
}
|
||||
|
||||
// Extract values
|
||||
const [hour, minute] = [Number(str.substring(0, 2)), Number(str.substring(2, 4))]
|
||||
let dayOfWeek = Number(str.substring(5))
|
||||
if (dayOfWeek === 0) {
|
||||
dayOfWeek = 7 // Sunday is 7 in ISO8601
|
||||
}
|
||||
|
||||
// Construct PlainDateTime from today
|
||||
const today = Temporal.Now.zonedDateTimeISO('UTC').round('day')
|
||||
const currentDayOfWeek = today.dayOfWeek
|
||||
return today.with({
|
||||
hour, minute,
|
||||
day: today.day + (dayOfWeek - currentDayOfWeek), // Set day of week
|
||||
})
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
export const detectBrowser = () => {
|
||||
// Opera 8.0+
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
export * from './detectBrowser'
|
||||
export * from './makeClass'
|
||||
export * from './unhyphenate'
|
||||
export * from './convertTimesToDates'
|
||||
export * from './calculateAvailability'
|
||||
export * from './calculateRows'
|
||||
export * from './calculateColumns'
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noImplicitAny": true,
|
||||
"target": "ES2022",
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.40.0.tgz#3ba73359e11f5a7bd3e407f70b3528abfae69cec"
|
||||
integrity sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==
|
||||
|
||||
"@giraugh/tools@^1.5.0":
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@giraugh/tools/-/tools-1.5.0.tgz#5c5cc8b248d1e04aebc46dcbeb7620c99f47d2ec"
|
||||
integrity sha512-DZTrxKU5Ul5+UnDUNja0Cp1HcMLPGF2fh7j4ICEzaNwvRMwcHRH241L/pfneuibZ22w1Ka4U7LVzOWL+SjLIjw==
|
||||
"@giraugh/tools@^1.6.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@giraugh/tools/-/tools-1.6.0.tgz#6bf501161a3a848c00d3f6f960d9cfe386860941"
|
||||
integrity sha512-KaC5YrA2UIA6Ol4fQtGknQX+gkQOsRhEhK4h+2GrfOj4+jfO1lz8zf8wHrSk4sorOv+a47sFANJGnicSVXq7SQ==
|
||||
|
||||
"@humanwhocodes/config-array@^0.11.8":
|
||||
version "0.11.8"
|
||||
|
|
@ -89,6 +89,14 @@
|
|||
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
|
||||
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
|
||||
|
||||
"@js-temporal/polyfill@^0.4.4":
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/@js-temporal/polyfill/-/polyfill-0.4.4.tgz#4c26b4a1a68c19155808363f520204712cfc2558"
|
||||
integrity sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==
|
||||
dependencies:
|
||||
jsbi "^4.3.0"
|
||||
tslib "^2.4.1"
|
||||
|
||||
"@microsoft/microsoft-graph-client@^3.0.5":
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.5.tgz#c661b5bb271fd59d34391b0657b8a78c02af9ab8"
|
||||
|
|
@ -1717,6 +1725,11 @@ js-yaml@^4.1.0:
|
|||
dependencies:
|
||||
argparse "^2.0.1"
|
||||
|
||||
jsbi@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/jsbi/-/jsbi-4.3.0.tgz#b54ee074fb6fcbc00619559305c8f7e912b04741"
|
||||
integrity sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g==
|
||||
|
||||
json-schema-traverse@^0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
|
||||
|
|
@ -2637,6 +2650,11 @@ tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
|
|||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
|
||||
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
|
||||
|
||||
tslib@^2.4.1:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
|
||||
integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
|
||||
|
||||
tsutils@^3.21.0:
|
||||
version "3.21.0"
|
||||
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
|
||||
|
|
|
|||
Loading…
Reference in a new issue