forked from phc/orario
Schedule view
parent
0f0bc1c52a
commit
c0340c3407
@ -0,0 +1,54 @@
|
|||||||
|
import { format } from 'date-fns'
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { normalizeCourseName, WEEK_DAYS, withClasses } from '../../utils.jsx'
|
||||||
|
|
||||||
|
export const Schedule = ({ events, selection, setSelection, hideOtherCourses }) => {
|
||||||
|
const selectionSet = new Set(selection)
|
||||||
|
|
||||||
|
const visibleEvents = !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id))
|
||||||
|
|
||||||
|
const eventsByWeekday = _.mapValues(
|
||||||
|
_.groupBy(visibleEvents, e => e.start.getDay()),
|
||||||
|
dailyEvents => _.groupBy(dailyEvents, e => e.start.getHours())
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="schedule-view">
|
||||||
|
{Object.entries(eventsByWeekday).map(([index, dailyEvents]) => (
|
||||||
|
<>
|
||||||
|
<div class="header giorno">
|
||||||
|
<div class="inner">{WEEK_DAYS[index]}</div>
|
||||||
|
</div>
|
||||||
|
{Object.values(dailyEvents).map(events => (
|
||||||
|
<>
|
||||||
|
<div class="header orario">{format(events[0].start, 'H:mm')}</div>
|
||||||
|
{events.map(event => (
|
||||||
|
<div
|
||||||
|
class={withClasses([
|
||||||
|
'event',
|
||||||
|
selectionSet.has(event.id) && 'selected',
|
||||||
|
])}
|
||||||
|
onClick={() => {
|
||||||
|
if (!selectionSet.has(event.id))
|
||||||
|
setSelection([...selection, event.id])
|
||||||
|
else
|
||||||
|
setSelection(
|
||||||
|
selection.filter(selId => selId !== event.id)
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="title">{normalizeCourseName(event.name)}</div>
|
||||||
|
<div class="orario">
|
||||||
|
{format(event.start, 'H:mm')} –{' '}
|
||||||
|
{format(event.end, 'H:mm')}
|
||||||
|
</div>
|
||||||
|
<div class="aula">{event.aula}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue