first brutal rework and first prototype

2023-08-19 03:57:46 +02:00
parent 04b6d5640d
commit a34d36257b
11 changed files with 289 additions and 313 deletions
@@ -0,0 +1,75 @@
+import { format } from 'date-fns'
+
+import _ from 'lodash'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
+
+export const Courses = ({ source, timetables, selection, setSelection }) => {
+    const events = timetables[source]
+    const selectionSet = new Set(selection)
+
+    const eventsByCourse = _.groupBy(_.sortBy(events, 'id'), 'id')
+
+    const profsPerCourse = _.mapValues(eventsByCourse, events =>
+        _.uniq(events.flatMap(event => event.docenti))
+    )
+
+    const [currentlyHovered, setCurrentlyHovered] = useState(null)
+    const element = useRef()
+
+    useEffect(() => {
+        if (element.current) {
+            const l = e => {
+                const isMobile = window.matchMedia('(pointer: coarse)').matches
+
+                const $course = e.target.closest('.course')
+                if ($course && !isMobile) {
+                    setCurrentlyHovered($course.dataset.courseId)
+                } else {
+                    setCurrentlyHovered(null)
+                }
+            }
+
+            element.current.addEventListener('mousemove', l)
+            element.current.addEventListener('mouseleave', l)
+
+            return () => {
+                element.current.removeEventListener('mousemove', l)
+                element.current.removeEventListener('mouseleave', l)
+            }
+        }
+    }, [element.current])
+
+    return (
+        <div class="course-view" ref={element}>
+            <div class="wrap-container">
+                {Object.entries(eventsByCourse).map(([id, courseEvents]) => (
+                    <div
+                        class={
+                            'course' +
+                            (currentlyHovered === id ? ' highlight' : '') +
+                            (selectionSet.has(id) ? ' selected' : '')
+                        }
+                        data-course-id={id}
+                        onClick={() => {
+                            if (!selectionSet.has(id)) setSelection([...selection, id])
+                            else setSelection(selection.filter(selId => selId !== id))
+                        }}
+                    >
+                        <div class="title">{prettyCourseName(courseEvents[0].name)}</div>
+                        <div class="docenti">{profsPerCourse[id].join(', ')}</div>
+                        <div class="events">
+                            {courseEvents.map(course => (
+                                <div>
+                                    {WEEK_DAYS[course.start.getDay()]}{' '}
+                                    {format(course.start, 'H:mm')}&ndash;
+                                    {format(course.end, 'H:mm')} {course.aule.join(', ')}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}