phc
/
orario
6
2
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Formatting

Browse Source
pull/4/head
Antonio De Lucreziis 2 years ago
parent 16233adcf1
commit 4a5994210e
1 changed files with 165 additions and 139 deletions
Show Stats Download Patch File Download Diff File

138
src/components/view/WorkWeekGrid.jsx
Unescape Escape View File

@ -9,26 +9,25 @@ import { layoutIntervals } from '../../interval-layout.js'
export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses }) => { export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses }) => {
const selectionSet = new Set(selection) const selectionSet = new Set(selection)
const colorList = [ const colorList = ['red', 'purple', 'blue', 'yellow', 'green', 'orange', 'lightblue']
'red',
'purple', const courses = _.uniqBy(
'blue', !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
'yellow', event => event.id
'green', )
'orange', const colors = Object.fromEntries(
'lightblue', courses.map((course, index) => {
];
const courses = _.uniqBy(!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)), event => event.id);
const colors = Object.fromEntries(courses.map((course, index) => {
return [ return [
course.id, course.id,
[ [
colorList[index % colorList.length], colorList[index % colorList.length],
courses.length <= colorList.length ? '' : String.fromCharCode(65 + Math.floor(index / colorList.length)) courses.length <= colorList.length
? ''
: String.fromCharCode(65 + Math.floor(index / colorList.length)),
],
] ]
]; })
})); )
const base = { const base = {
1: [], 1: [],
@ -38,11 +37,11 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
5: [], 5: [],
} }
const eventsByWeekday = { const eventsByWeekday = {
... base, ...base,
... _.groupBy( ..._.groupBy(
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)), !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
event => event.start.getDay() event => event.start.getDay()
) ),
} }
const dayIntervalLayout = _.mapValues(eventsByWeekday, events => const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
@ -54,9 +53,11 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
})) }))
) )
) )
const startsAndEnds = Object.entries(dayIntervalLayout).flatMap(([index, layout]) => layout.flatMap(events => events.map(event => [event.start, event.end]))); const startsAndEnds = Object.entries(dayIntervalLayout).flatMap(([index, layout]) =>
const minStart = Math.min(...startsAndEnds.map(([s, e]) => s)) / 60; layout.flatMap(events => events.map(event => [event.start, event.end]))
const maxEnd = Math.max(...startsAndEnds.map(([s, e]) => e)) / 60; )
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 : // const timeStart = minStart < 9 ? 7 :
// minStart < 11 ? 9 : // minStart < 11 ? 9 :
// minStart < 13 ? 11 : // minStart < 13 ? 11 :
@ -71,19 +72,20 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
// maxEnd > 11 ? 13 : // maxEnd > 11 ? 13 :
// maxEnd > 9 ? 11 : // maxEnd > 9 ? 11 :
// 9; // 9;
const timeStart = minStart < 9 ? 7 : 9; const timeStart = minStart < 9 ? 7 : 9
const timeEnd = maxEnd > 18 ? 20 : 18; const timeEnd = maxEnd > 18 ? 20 : 18
const daySizes = Object.entries(dayIntervalLayout).map(([index, layout]) => Math.max(1, layout.length)); const daySizes = Object.entries(dayIntervalLayout).map(([index, layout]) =>
Math.max(1, layout.length)
)
const dayOffsets = daySizes.map((v, i) => { const dayOffsets = daySizes.map((v, i) => {
let sum = 0; let sum = 0
for(let j = 0; j < i; j++) { for (let j = 0; j < i; j++) {
sum += daySizes[j]; sum += daySizes[j]
} }
return sum; return sum
}); })
const daysLength = daySizes[4] + dayOffsets[4]; const daysLength = daySizes[4] + dayOffsets[4]
const [currentlyHovered, setCurrentlyHovered] = useState(null) const [currentlyHovered, setCurrentlyHovered] = useState(null)
const element = useRef() const element = useRef()
@ -111,41 +113,57 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
return ( return (
<div class="work-week-grid-view" ref={element}> <div class="work-week-grid-view" ref={element}>
<div class="grid" style={{'--days-length': daysLength, '--time-length': timeEnd - timeStart}}> <div
{[7, 9, 11, 14, 16, 18].map(n => class="grid"
style={{ '--days-length': daysLength, '--time-length': timeEnd - timeStart }}
>
{[7, 9, 11, 14, 16, 18].map(n => (
<> <>
{n + 2 > timeStart && n < timeEnd && ( {n + 2 > timeStart && n < timeEnd && (
<div class="time" style={{'--offset': n - timeStart + 2}}>{n}-{n+2}</div> <div class="time" style={{ '--offset': n - timeStart + 2 }}>
{n}-{n + 2}
</div>
)} )}
</> </>
)} ))}
<div class="vline" style="--offset: 2"></div> <div class="vline" style="--offset: 2"></div>
{[9, 11, 13, 14, 16, 18].map(n => {[9, 11, 13, 14, 16, 18].map(n => (
<> <>
{n > timeStart && n < timeEnd && ( {n > timeStart && n < timeEnd && (
<div class="vline" style={{'--offset': n - timeStart + 2}}></div> <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[0] }}>
<div class="day-name" style={{'--line': 2 + dayOffsets[1]}}>Mar</div> Lun
<div class="day-name" style={{'--line': 2 + dayOffsets[2]}}>Mer</div> </div>
<div class="day-name" style={{'--line': 2 + dayOffsets[3]}}>Gio</div> <div class="day-name" style={{ '--line': 2 + dayOffsets[1] }}>
<div class="day-name" style={{'--line': 2 + dayOffsets[4]}}>Ven</div> 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[0] }}></div>
<div class="hline" style={{'--line': 2 + dayOffsets[1]}}></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[2] }}></div>
<div class="hline" style={{'--line': 2 + dayOffsets[3]}}></div> <div class="hline" style={{ '--line': 2 + dayOffsets[3] }}></div>
<div class="hline" style={{'--line': 2 + dayOffsets[4]}}></div> <div class="hline" style={{ '--line': 2 + dayOffsets[4] }}></div>
{Object.entries(dayIntervalLayout).map(([index, layout]) => ( {Object.entries(dayIntervalLayout).map(([index, layout]) => (
<> <>
{layout.map((events, stackIndex) => ( {layout.map((events, stackIndex) => (
<> <>
{events.map(event => ( {events.map(event => (
<div class={ <div
class={
'event' + 'event' +
(currentlyHovered === event.data.id (currentlyHovered === event.data.id
? ' highlight' ? ' highlight'
@ -154,12 +172,16 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
} }
data-event-id={event.data.id} data-event-id={event.data.id}
style={{ style={{
'--line': 2 + dayOffsets[index-1] + stackIndex, '--line': 2 + dayOffsets[index - 1] + stackIndex,
'--offset': event.start / 60 - timeStart + 2, '--offset': event.start / 60 - timeStart + 2,
'--length': (event.end - event.start) / 60, '--length': (event.end - event.start) / 60,
'--color': `var(--bubble-${colors[event.data.id][0]})`, '--color': `var(--bubble-${colors[event.data.id][0]})`,
'--border-color': `var(--bubble-border-${colors[event.data.id][0]})`, '--border-color': `var(--bubble-border-${
'--highlight-color': `var(--bubble-highlight-${colors[event.data.id][0]})` colors[event.data.id][0]
})`,
'--highlight-color': `var(--bubble-highlight-${
colors[event.data.id][0]
})`,
}} }}
onClick={() => { onClick={() => {
if (!selectionSet.has(event.data.id)) if (!selectionSet.has(event.data.id))
@ -171,9 +193,12 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
}} }}
> >
{colors[event.data.id][1] !== '' && ( {colors[event.data.id][1] !== '' && (
<div className="distinguisher">{`(${colors[event.data.id][1]})`}</div> <div className="distinguisher">{`(${
colors[event.data.id][1]
})`}</div>
)} )}
{event.data.aula}</div> {event.data.aula}
</div>
))} ))}
</> </>
))} ))}
@ -183,10 +208,11 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
<div class="legend"> <div class="legend">
{courses.map(course => ( {courses.map(course => (
<> <>
<div class="color" <div
class="color"
style={{ style={{
'--color': `var(--bubble-${colors[course.id][0]})`, '--color': `var(--bubble-${colors[course.id][0]})`,
'--border-color': `var(--bubble-border-${colors[course.id][0]})` '--border-color': `var(--bubble-border-${colors[course.id][0]})`,
}} }}
> >
{colors[course.id][1]} {colors[course.id][1]}

Write Preview
Loading…
Cancel
Save