Added compact grid view for the week
Francesco Baldino
2 years ago
parent
c0340c3407
commit
ebb78c4aff
@ -0,0 +1,200 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||||
|
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { differenceInMinutes, startOfDay } from 'date-fns'
|
||||||
|
|
||||||
|
import { hashString, normalizeCourseName, WEEK_DAYS } from '../../utils.jsx'
|
||||||
|
import { layoutIntervals } from '../../interval-layout.js'
|
||||||
|
|
||||||
|
export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses }) => {
|
||||||
|
const selectionSet = new Set(selection)
|
||||||
|
|
||||||
|
const colorList = [
|
||||||
|
'red',
|
||||||
|
'purple',
|
||||||
|
'blue',
|
||||||
|
'yellow',
|
||||||
|
'green',
|
||||||
|
'orange',
|
||||||
|
'lightblue',
|
||||||
|
];
|
||||||
|
|
||||||
|
const courses = _.uniqBy(!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)), event => event.id);
|
||||||
|
const colors = Object.fromEntries(courses.map((course, index) => {
|
||||||
|
return [
|
||||||
|
course.id,
|
||||||
|
[
|
||||||
|
colorList[index % colorList.length],
|
||||||
|
courses.length <= colorList.length ? '' : String.fromCharCode(65 + Math.floor(index / colorList.length))
|
||||||
|
]
|
||||||
|
];
|
||||||
|
}));
|
||||||
|
|
||||||
|
const base = {
|
||||||
|
1: [],
|
||||||
|
2: [],
|
||||||
|
3: [],
|
||||||
|
4: [],
|
||||||
|
5: [],
|
||||||
|
}
|
||||||
|
const eventsByWeekday = {
|
||||||
|
... base,
|
||||||
|
... _.groupBy(
|
||||||
|
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
|
||||||
|
event => event.start.getDay()
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
|
||||||
|
layoutIntervals(
|
||||||
|
events.map(e => ({
|
||||||
|
start: differenceInMinutes(e.start, startOfDay(e.start)),
|
||||||
|
end: differenceInMinutes(e.end, startOfDay(e.start)),
|
||||||
|
data: e,
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
)
|
||||||
|
const startsAndEnds = Object.entries(dayIntervalLayout).flatMap(([index, layout]) => layout.flatMap(events => events.map(event => [event.start, event.end])));
|
||||||
|
const minStart = Math.min(...startsAndEnds.map(([s, e]) => s)) / 60;
|
||||||
|
const maxEnd = Math.max(...startsAndEnds.map(([s, e]) => e)) / 60;
|
||||||
|
// const timeStart = minStart < 9 ? 7 :
|
||||||
|
// minStart < 11 ? 9 :
|
||||||
|
// minStart < 13 ? 11 :
|
||||||
|
// minStart < 14 ? 13 :
|
||||||
|
// minStart < 16 ? 14 :
|
||||||
|
// minStart < 18 ? 16 :
|
||||||
|
// 18;
|
||||||
|
// const timeEnd = maxEnd > 18 ? 20 :
|
||||||
|
// maxEnd > 16 ? 18 :
|
||||||
|
// maxEnd > 14 ? 16 :
|
||||||
|
// maxEnd > 13 ? 14 :
|
||||||
|
// maxEnd > 11 ? 13 :
|
||||||
|
// maxEnd > 9 ? 11 :
|
||||||
|
// 9;
|
||||||
|
const timeStart = minStart < 9 ? 7 : 9;
|
||||||
|
const timeEnd = maxEnd > 18 ? 20 : 18;
|
||||||
|
|
||||||
|
|
||||||
|
const daySizes = Object.entries(dayIntervalLayout).map(([index, layout]) => Math.max(1, layout.length));
|
||||||
|
const dayOffsets = daySizes.map((v, i) => {
|
||||||
|
let sum = 0;
|
||||||
|
for(let j = 0; j < i; j++) {
|
||||||
|
sum += daySizes[j];
|
||||||
|
}
|
||||||
|
return sum;
|
||||||
|
});
|
||||||
|
const daysLength = daySizes[4] + dayOffsets[4];
|
||||||
|
|
||||||
|
const [currentlyHovered, setCurrentlyHovered] = useState(null)
|
||||||
|
const element = useRef()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (element.current) {
|
||||||
|
const l = e => {
|
||||||
|
const $event = e.target.closest('.event')
|
||||||
|
if ($event) {
|
||||||
|
setCurrentlyHovered($event.dataset.eventId)
|
||||||
|
} 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="work-week-grid-view" ref={element}>
|
||||||
|
<div class="grid" style={{'--days-length': daysLength, '--time-length': timeEnd - timeStart}}>
|
||||||
|
{[7, 9, 11, 14, 16, 18].map(n =>
|
||||||
|
<>
|
||||||
|
{n + 2 > timeStart && n < timeEnd && (
|
||||||
|
<div class="time" style={{'--offset': n - timeStart + 2}}>{n}-{n+2}</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div class="vline" style="--offset: 2"></div>
|
||||||
|
{[9, 11, 13, 14, 16, 18].map(n =>
|
||||||
|
<>
|
||||||
|
{n > timeStart && n < timeEnd && (
|
||||||
|
<div class="vline" style={{'--offset': n - timeStart + 2}}></div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div class="day-name" style={{'--line': 2 + dayOffsets[0]}}>Lun</div>
|
||||||
|
<div class="day-name" style={{'--line': 2 + dayOffsets[1]}}>Mar</div>
|
||||||
|
<div class="day-name" style={{'--line': 2 + dayOffsets[2]}}>Mer</div>
|
||||||
|
<div class="day-name" style={{'--line': 2 + dayOffsets[3]}}>Gio</div>
|
||||||
|
<div class="day-name" style={{'--line': 2 + dayOffsets[4]}}>Ven</div>
|
||||||
|
|
||||||
|
<div class="hline" style={{'--line': 2 + dayOffsets[0]}}></div>
|
||||||
|
<div class="hline" style={{'--line': 2 + dayOffsets[1]}}></div>
|
||||||
|
<div class="hline" style={{'--line': 2 + dayOffsets[2]}}></div>
|
||||||
|
<div class="hline" style={{'--line': 2 + dayOffsets[3]}}></div>
|
||||||
|
<div class="hline" style={{'--line': 2 + dayOffsets[4]}}></div>
|
||||||
|
|
||||||
|
{Object.entries(dayIntervalLayout).map(([index, layout]) => (
|
||||||
|
<>
|
||||||
|
{layout.map((events, stackIndex) => (
|
||||||
|
<>
|
||||||
|
{events.map(event => (
|
||||||
|
<div class={
|
||||||
|
'event' +
|
||||||
|
(currentlyHovered === event.data.id
|
||||||
|
? ' highlight'
|
||||||
|
: '') +
|
||||||
|
(selectionSet.has(event.data.id) ? ' selected' : '')
|
||||||
|
}
|
||||||
|
data-event-id={event.data.id}
|
||||||
|
style={{
|
||||||
|
'--line': 2 + dayOffsets[index-1] + stackIndex,
|
||||||
|
'--offset': event.start / 60 - timeStart + 2,
|
||||||
|
'--length': (event.end - event.start) / 60,
|
||||||
|
'--color': `var(--bubble-${colors[event.data.id][0]})`,
|
||||||
|
'--border-color': `var(--bubble-border-${colors[event.data.id][0]})`,
|
||||||
|
'--highlight-color': `var(--bubble-highlight-${colors[event.data.id][0]})`
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
if (!selectionSet.has(event.data.id))
|
||||||
|
setSelection([...selection, event.data.id])
|
||||||
|
else
|
||||||
|
setSelection(
|
||||||
|
selection.filter(id => event.data.id !== id)
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{colors[event.data.id][1] !== '' && (
|
||||||
|
<div className="distinguisher">{`(${colors[event.data.id][1]})`}</div>
|
||||||
|
)}
|
||||||
|
{event.data.aula}</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
{courses.map(course => (
|
||||||
|
<>
|
||||||
|
<div class="color"
|
||||||
|
style={{
|
||||||
|
'--color': `var(--bubble-${colors[course.id][0]})`,
|
||||||
|
'--border-color': `var(--bubble-border-${colors[course.id][0]})`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{colors[course.id][1]}
|
||||||
|
</div>
|
||||||
|
<div class="name">{normalizeCourseName(course.name)}</div>
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue