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