Aggiunta trasposizione

feat/schema
Francesco Baldino 8 months ago
parent a34d36257b
commit 7efb311a61

@ -1,5 +1,5 @@
import { Courses } from './view/Courses.jsx'
import { WorkWeekGrid as Schedule } from './view/WorkWeekGrid.jsx'
import { Schedule } from './view/Schedule.jsx'
export const MODE_COURSES = 'course'
export const MODE_WORKWEEK = 'work-week'
@ -12,12 +12,31 @@ const viewModeMap = {
[MODE_SCHEDULE]: Schedule,
}
export const EventsView = ({ mode, ...viewProps }) => {
const Mode = viewModeMap[mode]
// export const EventsView = ({ mode, ...viewProps }) => {
// const Mode = viewModeMap[mode]
//
// return (
// <div class="events-view">
// <Mode {...viewProps} />
// </div>
// )
// }
return (
<div class="events-view">
<Mode {...viewProps} />
</div>
)
export const EventsView = ({ mode, source, ...viewProps }) => {
// const Mode = viewModeMap[mode]
if (source === 'orario') {
return (
<div class="events-view">
<Schedule source={source} {...viewProps} />
</div>
)
} else {
return (
<div class="events-view">
<Courses source={source} {...viewProps} />
</div>
)
}
}

@ -3,7 +3,7 @@ import { MODE_COURSES, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from '
import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx'
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
export const HamburgerMenu = ({ onClose, theme, setTheme }) => {
return (
<div class="menu">
<div class="header">

@ -2,47 +2,29 @@ import { Icon } from './Icon.jsx'
export const Help = ({}) => (
<>
<h3>Selezione Corsi</h3>
<h3>Visualizzazione Corsi</h3>
<p>
Puoi selezionare dei corsi cliccandoli, e nascondere gli altri con il tasto <Icon name="visibility" /> che
comparirà in basso a destra.
Per visualizzare i corsi che ti interessano nella tabella
dell'orario, devi prima selezionarli. Puoi selezionare dei corsi
cliccandoli, cercandoli nelle sezioni Primo anno (<b>I</b>), Secondo
anno (<b>II</b>), Terzo anno (<b>III</b>), Magistrale (<b>M</b>), o
Tutti.
</p>
<p>
La selezione effettuata verrà preservata su tutte le modalità di visualizzazione disponibili, permettendo di individuare eventuali sovrapposizioni.
Una volta compiuta la selezione, è possibile vedere la tabella delle
lezioni andando nella visualizzazione Orario
</p>
<p>
I corsi sono raggruppati per: primo, secondo, terzo anno e magistrale (rispettivamente <b>I</b>, <b>II</b>, <b>III</b> ed <b>M</b> su mobile).
Altrimenti, puoi scegliere fra tutti i corsi disponibili cliccando su <b>Tutti</b>{' '}
(tasto <Icon name="apps" /> su mobile).
</p>
<h3>Mobile</h3>
<p>
Da mobile, ci sono tre visualizzazioni possibili:
<ul>
<li>
<Icon name="list" /> <b>Corsi</b> mostra una lista dei corsi in ordine
alfabetico con ogni lezione per corso
</li>
<li>
<Icon name="calendar_view_month" /> <b>Schema</b> mostra uno schema compatto dei
corsi selezionati
</li>
<li>
<Icon name="calendar_view_day" />
<b>Giorno</b> una visualizzazione giornaliera della settimana
</li>
</ul>
</p>
<h3>Desktop</h3>
<p>
Da desktop, si può inoltre visualizzare l'orario settimanale esteso cliccando su <b>Settimana</b>, che
mostrerà un calendario con i corsi attualmente selezionati.
Per via di eventuali preferenze personali, è possibile cambiare
l'orientazione della tabella Orario trasponendola, utilizzando il
pulsante Trasponi (
<Icon name="switch_left" style="transform: rotate(-45deg)" />)
</p>
<h3>Stampa</h3>
<p>
Da desktop puoi stampare l'orario attualmente visibile con il bottone{' '}
<Icon name="print" /> (è consigliato controllare le opzioni di stampa per ottenere un
risultato soddisfacente).
Da desktop puoi stampare l'orario attualmente visibile con il
bottone <Icon name="print" /> (è consigliato controllare le opzioni
di stampa per ottenere un risultato soddisfacente).
</p>
<h3>Bug &amp; Contatti</h3>
<p>
@ -51,8 +33,10 @@ export const Help = ({}) => (
https://git.phc.dm.unipi.it/phc/orario
</a>
, contattarci all'indirizzo{' '}
<a href="mailto:macchinisti@lists.dm.unipi.it">macchinisti@lists.dm.unipi.it</a> oppure
passare direttamente in PHC.
<a href="mailto:macchinisti@lists.dm.unipi.it">
macchinisti@lists.dm.unipi.it
</a>{' '}
oppure passare direttamente in PHC.
</p>
</>
)

@ -12,12 +12,23 @@ export const OptionBar = ({ source, setSource }) => {
{ value: 'anno-2', label: 'II' },
{ value: 'anno-3', label: 'III' },
{ value: 'magistrale', label: 'M' },
{ value: 'tutti', label: <Icon name="apps" />, icon: true },
{ value: 'tutti', label: 'Tutti' },
]}
value={source}
setValue={setSource}
/>
</div>
<CompoundButton
options={[
{
value: 'orario',
label: <Icon name="calendar_month" />,
icon: true,
},
]}
value={source}
setValue={setSource}
/>
</div>
</div>
)

@ -9,17 +9,21 @@ export const Popup = ({ title, children, onClose }) => {
class="popup-container"
ref={popupLeaveRegionRef}
onClick={e =>
popupLeaveRegionRef.current && popupLeaveRegionRef.current === e.target && onClose()
popupLeaveRegionRef.current &&
popupLeaveRegionRef.current === e.target &&
onClose()
}
>
<div class="popup">
<div class="header">
<div class="title">{title}</div>
<button class="flat icon" onClick={onClose}>
<Icon name="close" />
</button>
<div class="popup-wrapper">
<div class="popup">
<div class="header">
<div class="title">{title}</div>
<button class="flat icon" onClick={onClose}>
<Icon name="close" />
</button>
</div>
<div class="content">{children}</div>
</div>
<div class="content">{children}</div>
</div>
</div>
)

@ -4,7 +4,7 @@ import { MODE_COURSES } from './EventsView.jsx'
export const ToolOverlay = ({ mode, toggleMode, onClose }) => (
<div class="overlay">
<button class="icon primary" onClick={toggleMode}>
<Icon name={mode === MODE_COURSES ? 'calendar_view_month' : 'list'} />
<Icon name={mode === MODE_COURSES ? 'calendar_month' : 'view_list'} />
</button>
<button class="icon" onClick={onClose}>
<Icon name="close" />

@ -17,7 +17,8 @@ export const Toolbar = ({
</button>
</div>
<div class="item logo">
<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
<img src="logo-circuit-board.svg" alt="logo" /> /{' '}
<span>Orario</span>
</div>
<div class="option-group">
<div class="item option">
@ -33,6 +34,15 @@ export const Toolbar = ({
setValue={setSource}
/>
</div>
<div class="item option">
<CompoundButton
options={[
{ value: 'orario', label: 'Orario' },
]}
value={source}
setValue={setSource}
/>
</div>
</div>
<div class="option-group">
<div class="item option">
@ -43,9 +53,13 @@ export const Toolbar = ({
<div class="item option">
<button
class="icon"
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
onClick={() =>
setTheme(theme === 'dark' ? 'light' : 'dark')
}
>
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
<Icon
name={theme === 'dark' ? 'dark_mode' : 'light_mode'}
/>
</button>
</div>
<div class="item option">

@ -1,55 +1,295 @@
import { format } from 'date-fns'
import { useEffect, useRef, useState } from 'preact/hooks'
import _ from 'lodash'
import { prettyCourseName, WEEK_DAYS, withClasses } from '../../utils.jsx'
import { differenceInMinutes, startOfDay } from 'date-fns'
export const Schedule = ({ timetables, selection, setSelection }) => {
const events = timetables['tutti']
const selectionSet = new Set(selection)
import {
WEEK_DAYS_SHORT,
prettyCourseName,
usePersistentState,
} from '../../utils.jsx'
import { layoutEvents, layoutIntervals } from '../../interval-layout.js'
import { Popup } from '../Popup.jsx'
import { Icon } from '../Icon.jsx'
const TransposePopup = ({ onClose }) => {
return (
<Popup
title={
<>
<Icon name="info" /> Attenzione! La tabella è stata
trasposta!
</>
}
onClose={onClose}
>
<p>
A grande richiesta popolare abbiamo trasposto la tabella
dell'orario!
</p>
const visibleEvents = events.filter(e => selectionSet.has(e.id))
<p>
Assicurati quindi di leggerla correttamente (dall'alto verso il
basso invece che da sinistra verso destra).
</p>
<p>
Se preferisci utilizzare la versione vecchia, puoi utilizzare il
pulsante Trasponi{' '}
<Icon name="switch_left" style="transform: rotate(-45deg)" />{' '}
nell'origine della tabella per trasporla. Questa scelta verrà
salvata nei cookie e verrà ricordata in futuro
</p>
</Popup>
)
}
const NoCourseWarning = () => {
return (
<div class="no-courses-warning">
<p>Non hai ancora selezionato nessun corso.</p>
<p>
Clicca sui corsi nelle altre visuali per selezionarli e
visualizzarli nell'orario
</p>
</div>
)
}
const eventsByWeekday = _.mapValues(
_.groupBy(visibleEvents, e => e.start.getDay()),
dailyEvents => _.groupBy(dailyEvents, e => e.start.getHours())
const Layout = ({ layout, day, colors }) => {
console.log(layout)
return (
<>
{layout.map(block => (
<div
class="event-block-wrapper"
style={{
'--time-start': block.start,
'--time-end': block.end,
'--day-position': day,
}}
>
<div class="event-block">
{block.events.map((event, index) => (
<div
class="event-wrapper"
style={{
'--block-size': block.end - block.start,
'--size': event.end - event.start,
'--relative-start':
event.start - block.start,
'--index': event.index,
'--of': block.layers,
'--color': `var(--event-${
colors[event.id]
})`,
}}
>
<div class="event">
{event.aule.map(aula => (
<div>{aula.replace(/^Fib /, '')}</div>
))}
</div>
</div>
))}
</div>
</div>
))}
</>
)
}
const ScheduleGrid = ({
orientation,
setOrientation,
weekStart,
weekEnd,
dayBlocksLayout,
colors,
}) => {
return (
<div class="schedule-view">
{Object.entries(eventsByWeekday).map(([index, dailyEvents]) => (
<div
class={`grid ${orientation}`}
style={{
'--time-slots': weekEnd - weekStart,
}}
>
<div class="transpose-button">
<button
class="small"
onClick={() =>
setOrientation(
orientation === 'original'
? 'transposed'
: 'original'
)
}
>
<Icon
name="switch_left"
style="transform: rotate(-45deg)"
/>
</button>
</div>
{[1, 2, 3, 4, 5].map(n => (
<>
<div class="header giorno">
<div class="inner">{WEEK_DAYS[index]}</div>
<div class="day-label" style={`--position: ${n + 1}`}>
{WEEK_DAYS_SHORT[n]}
</div>
{Object.values(dailyEvents).map(events => (
<>
<div class="header orario">{format(events[0].start, 'H:mm')}</div>
{events.map(event => (
<div
class={withClasses([
'event',
selectionSet.has(event.id) && 'selected',
])}
onClick={() => {
if (!selectionSet.has(event.id))
setSelection([...selection, event.id])
else
setSelection(
selection.filter(selId => selId !== event.id)
)
}}
>
<div class="title">{prettyCourseName(event.name)}</div>
<div class="orario">
{format(event.start, 'H:mm')} &ndash;{' '}
{format(event.end, 'H:mm')}
</div>
<div class="aula">{event.aule.join(', ')}</div>
</div>
))}
</>
))}
<div class="day-line" style={`--position: ${n + 1}`}></div>
</>
))}
{[9, 11, 14, 16].map(n => (
<div
class="time-label"
style={{
'--position': n * 2 - weekStart,
}}
>
{n}-{n + 2}
</div>
))}
<div class="time-line" style="--position: 0"></div>
{[9, 11, 13, 14, 16, 18].map(n => (
<>
{n * 2 > weekStart && n * 2 < weekEnd && (
<div
class="time-line"
style={{
'--position': n * 2 - weekStart,
}}
></div>
)}
</>
))}
{Object.entries(dayBlocksLayout).map(([day, layout]) => (
<Layout layout={layout} day={day} colors={colors} />
))}
</div>
)
}
const ScheduleLegend = ({ courses, colors }) => {
return (
<div class="legend">
{courses.map(course => (
<>
<div
class="color"
style={{
'--color': `var(--event-${colors[course.id]})`,
}}
></div>
<div class="name">{prettyCourseName(course.name)}</div>
</>
))}
</div>
)
}
const ScheduleCard = ({
orientation,
setOrientation,
weekStart,
weekEnd,
dayBlocksLayout,
courses,
colors,
}) => {
return (
<div class="schedule-card">
<ScheduleGrid
orientation={orientation}
setOrientation={setOrientation}
weekStart={weekStart}
weekEnd={weekEnd}
dayBlocksLayout={dayBlocksLayout}
colors={colors}
/>
<ScheduleLegend courses={courses} colors={colors} />
</div>
)
}
export const Schedule = ({ timetables, selection, setSelection }) => {
const [hasSeenTranspose, setHasSeenTranspose] = usePersistentState(
'transpose_info',
'false'
)
const [orientation, setOrientation] = usePersistentState(
'orientation',
'original'
)
const colorList = [
'red',
'purple',
'blue',
'yellow',
'green',
'orange',
'lightblue',
]
const allEvents = timetables['tutti']
const selectionSet = new Set(selection)
const events = allEvents
.filter(e => selectionSet.has(e.id))
.map(e => ({
...e,
day: e.start.getDay(),
start: differenceInMinutes(e.start, startOfDay(e.start)),
end: differenceInMinutes(e.end, startOfDay(e.start)),
}))
const weekStart = Math.min(...events.map(e => e.start), 9 * 60) / 30
const weekEnd = Math.max(...events.map(e => e.end), 18 * 60) / 30
const relativeEvents = events.map(e => ({
...e,
start: Math.round(e.start / 30 - weekStart),
end: Math.round(e.end / 30 - weekStart),
}))
const courses = _.uniqBy(events, event => event.id)
const colors = Object.fromEntries(
courses.map((course, index) => {
return [course.id, colorList[index % colorList.length]]
})
)
const base = {
1: [],
2: [],
3: [],
4: [],
5: [],
}
const eventsByWeekday = {
...base,
..._.groupBy(relativeEvents, event => event.day),
}
const dayBlocksLayout = _.mapValues(eventsByWeekday, dayEvents =>
layoutEvents(dayEvents)
)
return (
<>
{hasSeenTranspose === 'false' && (
<TransposePopup onClose={() => setHasSeenTranspose('true')} />
)}
<div class="schedule-view">
{selection.length === 0 && <NoCourseWarning />}
<ScheduleCard
orientation={orientation}
setOrientation={setOrientation}
weekStart={weekStart}
weekEnd={weekEnd}
dayBlocksLayout={dayBlocksLayout}
courses={courses}
colors={colors}
/>
</div>
</>
)
}

@ -1,157 +0,0 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import _ from 'lodash'
import { differenceInMinutes, startOfDay } from 'date-fns'
import { hashString, prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
import { layoutIntervals } from '../../interval-layout.js'
export const WorkWeek = ({ events, selection, setSelection, hideOtherCourses }) => {
const selectionSet = new Set(selection)
const eventsByWeekday = _.groupBy(
!hideOtherCourses ? events : events.filter(e => selectionSet.has(e.id)),
event => event.start.getDay()
)
// const dayIntervalLayout = _.mapValues(Object.assign(base, eventsByWeekday), events =>
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 [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-v-view" ref={element}>
<div class="pivot"></div>
<div class="left-header">
<div class="blocks">
<div
class="block skip-border"
style={{
'--start': 2 * (9 - 7),
'--size': 4,
}}
>
9:00 &ndash; 11:00
</div>
<div
class="block"
style={{
'--start': 2 * (11 - 7),
'--size': 4,
}}
>
11:00 &ndash; 13:00
</div>
<div
class="block skip-border"
style={{
'--start': 2 * (14 - 7),
'--size': 4,
}}
>
14:00 &ndash; 16:00
</div>
<div
class="block"
style={{
'--start': 2 * (16 - 7),
'--size': 4,
}}
>
16:00 &ndash; 18:00
</div>
<div
class="block"
style={{
'--start': 2 * (18 - 7),
'--size': 4,
}}
>
18:00 &ndash; 20:00
</div>
</div>
</div>
{Object.entries(dayIntervalLayout).map(([index, layout]) => (
<div class="day" style={{ '--size': Math.max(1, layout.length) }}>
<div class="top-header">{WEEK_DAYS[parseInt(index)]}</div>
<div class="events">
{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={{
'--start': event.start / 30 - 14,
'--stack': stackIndex + 1,
'--size': (event.end - event.start) / 30,
'--hue':
(Math.abs(hashString('seed3' + event.data.id)) %
360) +
'deg',
}}
onClick={() => {
if (!selectionSet.has(event.data.id))
setSelection([...selection, event.data.id])
else
setSelection(
selection.filter(id => event.data.id !== id)
)
}}
>
<div class="title">{prettyCourseName(event.data.name)}</div>
<div class="aula">{event.data.aule.join(', ')}</div>
</div>
))}
</>
))}
{/* Grid Tracks */}
{[4, 8, 12].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div>
))}
{[14, 18, 22].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div>
))}
</div>
</div>
))}
</div>
)
}

@ -1,227 +0,0 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import _ from 'lodash'
import { differenceInMinutes, startOfDay } from 'date-fns'
import { prettyCourseName } from '../../utils.jsx'
import { layoutIntervals } from '../../interval-layout.js'
export const WorkWeekGrid = ({ timetables, selection, setSelection }) => {
const events = timetables['tutti']
const selectionSet = new Set(selection)
const colorList = ['red', 'purple', 'blue', 'yellow', 'green', 'orange', 'lightblue']
const courses = _.uniqBy(
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(
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.aule.join(', ')}
</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">{prettyCourseName(course.name)}</div>
</>
))}
</div>
</div>
)
}

@ -1,104 +0,0 @@
import { useEffect, useRef } from 'preact/hooks'
import _ from 'lodash'
import { differenceInMinutes, startOfDay } from 'date-fns'
import { hashString, prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
import { layoutIntervals } from '../../interval-layout.js'
export const WorkWeekTranspose = ({ events }) => {
const eventsByWeekday = _.groupBy(events, event => event.start.getDay())
// For each weekday compute the interval layout
const rowLayouts = _.mapValues(eventsByWeekday, events =>
layoutIntervals(
events.map(e => ({
start: differenceInMinutes(e.start, startOfDay(e.start)),
end: differenceInMinutes(e.end, startOfDay(e.start)),
data: e,
}))
)
)
return (
<div class="work-week-h-view">
<div class="week">
{WEEK_DAYS.slice(1, 6).map((label, index) => (
<div class="day" style={{ '--size': rowLayouts[index + 1]?.length ?? 0 }}>
{label}
</div>
))}
</div>
<div class="events">
<div class="header">
<div class="label" style={{ 'grid-column': '2 / span 2' }}>
9:00 &ndash; 11:00
</div>
<div class="label" style={{ 'grid-column': '4 / span 2' }}>
11:00 &ndash; 13:00
</div>
<div class="label" style={{ 'grid-column': '7 / span 2' }}>
14:00 &ndash; 16:00
</div>
<div class="label" style={{ 'grid-column': '9 / span 2' }}>
16:00 &ndash; 18:00
</div>
</div>
<div class="days">
{Object.values(rowLayouts).map(layout => (
<div class="day" style={{ '--size': layout.length }}>
{layout.map((events, rowIndex) =>
events.map(event => {
const Local = () => {
const eventRef = useRef()
const updateMinWidth = () => {
eventRef.current.style.minWidth =
eventRef.current.offsetWidth + 'px'
}
useEffect(() => {
if (eventRef.current) {
setTimeout(updateMinWidth, 100)
window.addEventListener('resize', updateMinWidth)
return () => {
window.removeEventListener(
'resize',
updateMinWidth
)
}
}
}, [eventRef.current])
return (
<div
class="event"
style={{
'--row': rowIndex + 1,
'--start': event.start / 60 - 7,
'--size': (event.end - event.start) / 60,
'--hue':
(Math.abs(
hashString('seed3' + event.data.id)
) %
360) +
'deg',
}}
ref={eventRef}
>
{prettyCourseName(event.data.name)}
</div>
)
}
return <Local />
})
)}
</div>
))}
</div>
</div>
</div>
)
}

@ -34,6 +34,62 @@ export function layoutIntervals(intervals, { tight } = {}) {
return stack.map(({ intervals }) => intervals)
}
function layoutBlockEvents(events) {
events.sort((a, b) => a.start - b.start)
let result = []
for (const event of events) {
let viableIndex = 0
while (
result.filter(
e =>
e.index === viableIndex &&
e.start < event.end &&
event.start < e.end
).length !== 0
) {
viableIndex += 1
}
result.push({ ...event, index: viableIndex })
}
return result
}
export function layoutEvents(events) {
const overlap = (event, block) =>
event.start < block.end && block.start < event.end
events.sort((a, b) => a.start - b.start)
let layout = []
for (const event of events) {
const blocks = layout.filter(block => overlap(event, block))
if (blocks.length > 0) {
layout = layout.filter(block => !overlap(event, block))
layout.push({
start: Math.min(
event.start,
...blocks.map(block => block.start)
),
end: Math.max(event.end, ...blocks.map(block => block.end)),
events: blocks.flatMap(block => block.events).concat([event]),
})
} else {
layout.push({ start: event.start, end: event.end, events: [event] })
}
}
return layout.map(block => {
const events = layoutBlockEvents(block.events)
return {
...block,
layers: Math.max(...events.map(event => event.index)) + 1,
events: events,
}
})
}
// //
// // Testing...
// //

@ -1,43 +1,44 @@
import _ from 'lodash'
import { render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import { ToolOverlay } from './components/CourseVisibility.jsx'
import { EventsView, MODE_COURSES, MODE_SCHEDULE } from './components/EventsView.jsx'
// import { ToolOverlay } from './components/ToolOverlay.jsx'
//
// import {
// EventsView,
// MODE_COURSES,
// MODE_SCHEDULE,
// } from './components/EventsView.jsx'
import { Courses } from './components/view/Courses.jsx'
import { Schedule } from './components/view/Schedule.jsx'
import { HamburgerMenu } from './components/HamburgerMenu.jsx'
import { Help } from './components/Help.jsx'
import { Icon } from './components/Icon.jsx'
import { Popup } from './components/Popup.jsx'
import { Toolbar } from './components/Toolbar.jsx'
import { OptionBar } from './components/OptionBar.jsx'
import { prettyAulaName, prettyProfName, usePersistentState } from './utils.jsx'
import {
prettyAulaName,
prettyProfName,
clearOldPersistentStates,
usePersistentState,
} from './utils.jsx'
// Che fanno queste due righe?
window._ = _
window.dataBuffer = {}
const CALENDAR_IDS = {
'anno-1': ['64a7c1c651f079001d52e9c8'],
'anno-2': ['6308e2dc09352a0208fefdd9'],
'anno-3': ['6308e42a1df5cb026699ced4'],
'magistrale': ['64a7c7091ab813002c5d9ede'],
'tutti': [
'64a7c1c651f079001d52e9c8',
'6308e2dc09352a0208fefdd9',
'6308e42a1df5cb026699ced4',
'64a7c7091ab813002c5d9ede',
],
}
const TIMETABLE_IDS = {
'anno-1': '64a7c1c651f079001d52e9c8',
'anno-2': '6308e2dc09352a0208fefdd9',
'anno-3': '6308e42a1df5cb026699ced4',
'anno-1': '64a7c1c651f079001d52e9c8',
'anno-2': '6308e2dc09352a0208fefdd9',
'anno-3': '6308e42a1df5cb026699ced4',
'magistrale': '64a7c7091ab813002c5d9ede',
}
const DEFAULT_DATE_RANGE = {
from: '2023-10-02T00:00:00.000Z',
to: '2023-10-07T00:00:00.000Z',
from: '2023-10-09T00:00:00.000Z',
to: '2023-10-14T00:00:00.000Z',
}
const DATE_RANGES = {
@ -51,7 +52,10 @@ function specialEventPatches(eventi) {
// Il laboratorio del primo anno in realtà è in due canali separati
let i = 1
eventi.forEach(evento => {
if (evento.nome === 'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE') {
if (
evento.nome ===
'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE'
) {
evento.nome += ` (${i})`
i++
}
@ -61,18 +65,18 @@ function specialEventPatches(eventi) {
}
function formatEvents(timetable) {
return timetable.map(
({ nome, dataInizio, dataFine, docenti, aule }) => {
return {
id: nome,
name: _.split(nome, '-', 1)[0].trim(),
start: new Date(dataInizio),
end: new Date(dataFine),
docenti: docenti.map(({ nome, cognome }) => prettyProfName(nome, cognome)),
aule: aule.map(aula => prettyAulaName(aula.codice)),
}
return timetable.map(({ nome, dataInizio, dataFine, docenti, aule }) => {
return {
id: nome,
name: _.split(nome, '-', 1)[0].trim(),
start: new Date(dataInizio),
end: new Date(dataFine),
docenti: docenti.map(({ nome, cognome }) =>
prettyProfName(nome, cognome)
),
aule: aule.map(aula => prettyAulaName(aula.codice)),
}
)
})
}
async function loadCalendari() {
@ -112,31 +116,43 @@ async function loadCalendari() {
req(TIMETABLE_IDS['magistrale']),
]
const results = await Promise.all(requests)
const timetablesRaw = results.map(timetable => specialEventPatches(_.uniqBy(timetable, 'id')))
const timetablesRaw = results.map(timetable =>
specialEventPatches(_.uniqBy(timetable, 'id'))
)
const allRaw = specialEventPatches(_.uniqBy(_.concat(...results), 'id'))
return {
'anno-1': formatEvents(timetablesRaw[0]),
'anno-2': formatEvents(timetablesRaw[1]),
'anno-3': formatEvents(timetablesRaw[2]),
'anno-1': formatEvents(timetablesRaw[0]),
'anno-2': formatEvents(timetablesRaw[1]),
'anno-3': formatEvents(timetablesRaw[2]),
'magistrale': formatEvents(timetablesRaw[3]),
'tutti': formatEvents(allRaw)
'tutti': formatEvents(allRaw),
}
}
const App = ({}) => {
// Clear persistent states unless state_token corresponds to the one passed
// as the argument. Useful with breaking updates. Change this token if your
// (breaking) update needs a reset of persistent states to avoid crashes.
//
// Use any random string of your choice
clearOldPersistentStates('e73cba02')
// Data Sources
const [source, setSource] = usePersistentState('orario.source', 'magistrale')
const [source, setSource] = usePersistentState('source', 'magistrale')
const [timetables, setTimetables] = useState(null)
useEffect(async () => {
setTimetables(await loadCalendari())
}, [])
// View Modes
const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
// const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
// Selection
const [selectedCourses, setSelectedCourses] = usePersistentState('orario.selection', [])
const [selectedCourses, setSelectedCourses] = usePersistentState(
'selection',
[]
)
// Menus
const [helpVisible, setHelpVisible] = useState(false)
@ -146,8 +162,11 @@ const App = ({}) => {
const toolOverlayVisible = selectedCourses.length > 0
const [theme, setTheme] = usePersistentState(
'orario.theme',
window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
'theme',
'light'
// window.matchMedia('(prefers-color-scheme: dark)').matches
// ? 'dark'
// : 'light'
)
document.body.classList.toggle('dark-mode', theme === 'dark')
@ -156,8 +175,6 @@ const App = ({}) => {
<>
<Toolbar
{...{
mode,
setMode,
source,
setSource,
onShowMenu: () => setShowMobileMenu(true),
@ -166,44 +183,53 @@ const App = ({}) => {
setTheme,
}}
/>
{mode === MODE_COURSES && (
<OptionBar
{...{
mode,
setMode,
source,
setSource,
onHelp: () => setHelpVisible(true),
}}orizzontale
/>
)}
<OptionBar
{...{
source,
setSource,
onHelp: () => setHelpVisible(true),
}}
orizzontale
/>
{timetables && (
<EventsView
mode={mode}