|
|
|
@ -124,8 +124,15 @@ const WorkWeekView = ({ events }) => {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const WorkWeekVerticalView = ({ events }) => {
|
|
|
|
|
const eventsByWeekday = _.groupBy(events, event => event.start.getDay())
|
|
|
|
|
const WorkWeekVerticalView = ({ events, selection, setSelection, hideOtherCourses }) => {
|
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
|
|
|
|
|
|
console.log(hideOtherCourses)
|
|
|
|
|
|
|
|
|
|
const eventsByWeekday = _.groupBy(
|
|
|
|
|
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name)),
|
|
|
|
|
event => event.start.getDay()
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
|
|
|
|
|
layoutIntervals(
|
|
|
|
@ -216,7 +223,8 @@ const WorkWeekVerticalView = ({ events }) => {
|
|
|
|
|
'event' +
|
|
|
|
|
(currentlyHovered === event.data.name
|
|
|
|
|
? ' highlight'
|
|
|
|
|
: '')
|
|
|
|
|
: '') +
|
|
|
|
|
(selectionSet.has(event.data.name) ? ' selected' : '')
|
|
|
|
|
}
|
|
|
|
|
data-event-id={event.data.name}
|
|
|
|
|
style={{
|
|
|
|
@ -228,6 +236,16 @@ const WorkWeekVerticalView = ({ events }) => {
|
|
|
|
|
360) +
|
|
|
|
|
'deg',
|
|
|
|
|
}}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
if (!selectionSet.has(event.data.name))
|
|
|
|
|
setSelection([...selection, event.data.name])
|
|
|
|
|
else
|
|
|
|
|
setSelection(
|
|
|
|
|
selection.filter(
|
|
|
|
|
name => event.data.name !== name
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div class="title">
|
|
|
|
|
{_.startCase(_.lowerCase(event.data.name))
|
|
|
|
@ -255,13 +273,48 @@ const WorkWeekVerticalView = ({ events }) => {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const CourseView = ({ events }) => {
|
|
|
|
|
const CourseView = ({ events, selection, setSelection }) => {
|
|
|
|
|
const eventsByCourse = _.groupBy(events, 'name')
|
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
|
|
|
|
|
|
const [currentlyHovered, setCurrentlyHovered] = useState(null)
|
|
|
|
|
const element = useRef()
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (element.current) {
|
|
|
|
|
const l = e => {
|
|
|
|
|
const $course = e.target.closest('.course')
|
|
|
|
|
if ($course) {
|
|
|
|
|
setCurrentlyHovered($course.dataset.courseId)
|
|
|
|
|
} else {
|
|
|
|
|
setCurrentlyHovered(null)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element.current.addEventListener('mousemove', l)
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
element.current.removeEventListener('mousemove', l)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [element.current])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div class="course-view">
|
|
|
|
|
<div class="course-view" ref={element}>
|
|
|
|
|
<div class="wrap-container">
|
|
|
|
|
{Object.entries(eventsByCourse).map(([name, courseEvents]) => (
|
|
|
|
|
<div class="course">
|
|
|
|
|
<div
|
|
|
|
|
class={
|
|
|
|
|
'course' +
|
|
|
|
|
(currentlyHovered === name ? ' highlight' : '') +
|
|
|
|
|
(selectionSet.has(name) ? ' selected' : '')
|
|
|
|
|
}
|
|
|
|
|
data-course-id={name}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
if (!selectionSet.has(name)) setSelection([...selection, name])
|
|
|
|
|
else setSelection(selection.filter(name => name !== name))
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div class="title">
|
|
|
|
|
{_.startCase(_.lowerCase(name))
|
|
|
|
|
.replaceAll('Ii', 'II')
|
|
|
|
@ -271,7 +324,7 @@ const CourseView = ({ events }) => {
|
|
|
|
|
<div class="docenti">{courseEvents[0].docenti.join(', ')}</div>
|
|
|
|
|
<div class="events">
|
|
|
|
|
{courseEvents.map(course => (
|
|
|
|
|
<div class="event">
|
|
|
|
|
<div>
|
|
|
|
|
{_.capitalize(format(course.start, 'EEEE', { locale: it }))}{' '}
|
|
|
|
|
{format(course.start, 'H:mm')} –
|
|
|
|
|
{format(course.end, 'H:mm')} {course.aula}
|
|
|
|
@ -298,9 +351,11 @@ const viewModeMap = {
|
|
|
|
|
export const EventsView = ({ mode, ...viewProps }) => {
|
|
|
|
|
const Mode = viewModeMap[mode]
|
|
|
|
|
|
|
|
|
|
const [selectedCourses, setSelectedCourses] = useState([])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div class="events-view">
|
|
|
|
|
<Mode {...viewProps} />
|
|
|
|
|
<Mode selection={selectedCourses} setSelection={setSelectedCourses} {...viewProps} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|