|
|
@ -4,11 +4,21 @@ import _ from 'lodash'
|
|
|
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
|
|
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
|
|
|
import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
|
|
|
|
import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
|
|
|
|
|
|
|
|
|
|
|
|
export const Courses = ({ source, timetables, selection, setSelection }) => {
|
|
|
|
export const Courses = ({
|
|
|
|
|
|
|
|
source,
|
|
|
|
|
|
|
|
timetables,
|
|
|
|
|
|
|
|
selection,
|
|
|
|
|
|
|
|
setSelection,
|
|
|
|
|
|
|
|
hideOtherCourses,
|
|
|
|
|
|
|
|
}) => {
|
|
|
|
const events = timetables[source]
|
|
|
|
const events = timetables[source]
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
|
|
|
|
|
|
|
|
const eventsByCourse = _.groupBy(_.sortBy(events, 'id'), 'id')
|
|
|
|
const visibleEvents = hideOtherCourses
|
|
|
|
|
|
|
|
? events.filter(e => selectionSet.has(e.id))
|
|
|
|
|
|
|
|
: events
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const eventsByCourse = _.groupBy(_.sortBy(visibleEvents, 'id'), 'id')
|
|
|
|
|
|
|
|
|
|
|
|
const profsPerCourse = _.mapValues(eventsByCourse, events =>
|
|
|
|
const profsPerCourse = _.mapValues(eventsByCourse, events =>
|
|
|
|
_.uniq(events.flatMap(event => event.docenti))
|
|
|
|
_.uniq(events.flatMap(event => event.docenti))
|
|
|
@ -42,6 +52,15 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div class="course-view" ref={element}>
|
|
|
|
<div class="course-view" ref={element}>
|
|
|
|
|
|
|
|
{hideOtherCourses && selection.length === 0 && (
|
|
|
|
|
|
|
|
<div class="no-courses-warning">
|
|
|
|
|
|
|
|
<p>Non hai ancora selezionato nessun corso.</p>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
Clicca sui corsi nelle altre visuali per selezionarli e
|
|
|
|
|
|
|
|
visualizzarli nella lista
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
<div class="wrap-container">
|
|
|
|
<div class="wrap-container">
|
|
|
|
{Object.entries(eventsByCourse).map(([id, courseEvents]) => (
|
|
|
|
{Object.entries(eventsByCourse).map(([id, courseEvents]) => (
|
|
|
|
<div
|
|
|
|
<div
|
|
|
@ -52,18 +71,27 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
data-course-id={id}
|
|
|
|
data-course-id={id}
|
|
|
|
onClick={() => {
|
|
|
|
onClick={() => {
|
|
|
|
if (!selectionSet.has(id)) setSelection([...selection, id])
|
|
|
|
if (!selectionSet.has(id))
|
|
|
|
else setSelection(selection.filter(selId => selId !== id))
|
|
|
|
setSelection([...selection, id])
|
|
|
|
|
|
|
|
else
|
|
|
|
|
|
|
|
setSelection(
|
|
|
|
|
|
|
|
selection.filter(selId => selId !== id)
|
|
|
|
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="title">{prettyCourseName(courseEvents[0].name)}</div>
|
|
|
|
<div class="title">
|
|
|
|
<div class="docenti">{profsPerCourse[id].join(', ')}</div>
|
|
|
|
{prettyCourseName(courseEvents[0].name)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="docenti">
|
|
|
|
|
|
|
|
{profsPerCourse[id].join(', ')}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="events">
|
|
|
|
<div class="events">
|
|
|
|
{courseEvents.map(course => (
|
|
|
|
{courseEvents.map(course => (
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
{WEEK_DAYS[course.start.getDay()]}{' '}
|
|
|
|
{WEEK_DAYS[course.start.getDay()]}{' '}
|
|
|
|
{format(course.start, 'H:mm')}–
|
|
|
|
{format(course.start, 'H:mm')}–
|
|
|
|
{format(course.end, 'H:mm')} {course.aule.join(', ')}
|
|
|
|
{format(course.end, 'H:mm')}{' '}
|
|
|
|
|
|
|
|
{course.aule.join(', ')}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|