Fiexed a bug

compressed-week-view
Antonio De Lucreziis 2 years ago
parent 01fa4b16e2
commit 0f0bc1c52a

@ -7,9 +7,9 @@ import { normalizeCourseName, WEEK_DAYS } from '../../utils.jsx'
export const Course = ({ events, selection, setSelection, hideOtherCourses }) => {
const selectionSet = new Set(selection)
const visibleEvents = !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name))
const visibleEvents = !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id))
const eventsByCourse = _.groupBy(_.sortBy(visibleEvents, 'name'), 'name')
const eventsByCourse = _.groupBy(_.sortBy(visibleEvents, 'id'), 'id')
const [currentlyHovered, setCurrentlyHovered] = useState(null)
const element = useRef()
@ -38,20 +38,20 @@ export const Course = ({ events, selection, setSelection, hideOtherCourses }) =>
return (
<div class="course-view" ref={element}>
<div class="wrap-container">
{Object.entries(eventsByCourse).map(([name, courseEvents]) => (
{Object.entries(eventsByCourse).map(([id, courseEvents]) => (
<div
class={
'course' +
(currentlyHovered === name ? ' highlight' : '') +
(selectionSet.has(name) ? ' selected' : '')
(currentlyHovered === id ? ' highlight' : '') +
(selectionSet.has(id) ? ' selected' : '')
}
data-course-id={name}
data-course-id={id}
onClick={() => {
if (!selectionSet.has(name)) setSelection([...selection, name])
else setSelection(selection.filter(n => n !== name))
if (!selectionSet.has(id)) setSelection([...selection, id])
else setSelection(selection.filter(selId => selId !== id))
}}
>
<div class="title">{normalizeCourseName(name)}</div>
<div class="title">{normalizeCourseName(courseEvents[0].name)}</div>
<div class="docenti">{courseEvents[0].docenti.join(', ')}</div>
<div class="events">
{courseEvents.map(course => (

@ -9,16 +9,8 @@ import { layoutIntervals } from '../../interval-layout.js'
export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses }) => {
const selectionSet = new Set(selection)
// const base = {
// 1: [],
// 2: [],
// 3: [],
// 4: [],
// 5: [],
// }
const eventsByWeekday = _.groupBy(
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name)),
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
event => event.start.getDay()
)
@ -110,29 +102,27 @@ export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses })
<div
class={
'event' +
(currentlyHovered === event.data.name
(currentlyHovered === event.data.id
? ' highlight'
: '') +
(selectionSet.has(event.data.name) ? ' selected' : '')
(selectionSet.has(event.data.id) ? ' selected' : '')
}
data-event-id={event.data.name}
data-event-id={event.data.id}
style={{
'--start': event.start / 60 - 7,
'--stack': stackIndex + 1,
'--size': (event.end - event.start) / 60,
'--hue':
(Math.abs(hashString('seed3' + event.data.name)) %
(Math.abs(hashString('seed3' + event.data.id)) %
360) +
'deg',
}}
onClick={() => {
if (!selectionSet.has(event.data.name))
setSelection([...selection, event.data.name])
if (!selectionSet.has(event.data.id))
setSelection([...selection, event.data.id])
else
setSelection(
selection.filter(
name => event.data.name !== name
)
selection.filter(id => event.data.id !== id)
)
}}
>

@ -80,7 +80,7 @@ export const WorkWeekTranspose = ({ events }) => {
'--size': (event.end - event.start) / 60,
'--hue':
(Math.abs(
hashString('seed3' + event.data.name)
hashString('seed3' + event.data.id)
) %
360) +
'deg',

@ -84,6 +84,7 @@ const App = ({}) => {
const [showMobileMenu, setShowMobileMenu] = useState(false)
useEffect(async () => {
console.log('source changed')
const eventi = await loadEventi(CALENDAR_IDS[source])
window.dataBuffer[source] = eventi
@ -91,23 +92,21 @@ const App = ({}) => {
setEventi(eventi)
}, [source])
useEffect(() => {
setSelectedCourses(selectedCourses => {
const nextCoursesGroup = new Set(eventi.map(e => e.nome))
// Here the filter is on "selection" because most of the times |selection| <= |nextCoursesGroup|
const intersectionSize = selectedCourses.filter(nome =>
nextCoursesGroup.has(nome)
).length
const groupIds = new Set(eventi.map(e => e.nome))
const toolOverlayVisible =
selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0
return intersectionSize === 0 ? [] : selectedCourses
})
}, [eventi, selectedCourses])
useEffect(() => {
console.log('course length changed')
const groupIds = new Set(eventi.map(e => e.nome))
// TODO: Should wrap in "useEffect"?
if (selectedCourses.length === 0) {
setHideOtherCourses(false)
}
if (
selectedCourses.length === 0 ||
selectedCourses.filter(id => groupIds.has(id)).length === 0
) {
setHideOtherCourses(false)
}
}, [eventi, selectedCourses.length])
const [theme, setTheme] = useState(
localStorage.getItem('theme') ??
@ -138,6 +137,7 @@ const App = ({}) => {
hideOtherCourses={hideOtherCourses}
start={new Date(2022, 10, 3)}
events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
id: nome,
name: _.split(nome, '-', 1)[0].trim(),
start: new Date(dataInizio),
end: new Date(dataFine),
@ -150,7 +150,7 @@ const App = ({}) => {
),
}))}
/>
{selectedCourses.length > 0 && (
{toolOverlayVisible && (
<ToolOverlay
visibility={hideOtherCourses}
toggleVisibility={() => setHideOtherCourses(s => !s)}

Loading…
Cancel
Save