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

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

@ -9,41 +9,40 @@ 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(
const colorList = ['red', 'purple', 'blue', 'yellow', 'green', 'orange', 'lightblue']
const courses = _.uniqBy(
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
event => event.start.getDay()
)
}
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(
@ -54,36 +53,39 @@ 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 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 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()
@ -111,56 +113,76 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
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' : '')
}
<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]})`
}}
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])
@ -169,32 +191,36 @@ export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses
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>
>
{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>
)
}

Write Preview
Loading…
Cancel
Save