Fran314
/
orario
forked from phc/orario
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fiexed a bug

Browse Source
compressed-week-view
Antonio De Lucreziis 2 years ago
parent 01fa4b16e2
commit 0f0bc1c52a
4 changed files with 34 additions and 44 deletions
Show Stats Download Patch File Download Diff File

18
src/components/view/Course.jsx
Unescape Escape View File

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

26
src/components/view/WorkWeek.jsx
Unescape Escape View File

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

2
src/components/view/WorkWeekTranspose.jsx
Unescape Escape View File

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

28
src/main.jsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save