|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import _ from 'lodash'
|
|
|
|
|
import { render } from 'preact'
|
|
|
|
|
import { useEffect, useState } from 'preact/hooks'
|
|
|
|
|
import semesterData from './semester-data.json'
|
|
|
|
|
import { differenceInMinutes, startOfDay } from 'date-fns'
|
|
|
|
|
|
|
|
|
|
// import { ToolOverlay } from './components/ToolOverlay.jsx'
|
|
|
|
|
//
|
|
|
|
|
@ -11,24 +11,27 @@ import semesterData from './semester-data.json'
|
|
|
|
|
// 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 { OptionBar } from './components/OptionBar.jsx'
|
|
|
|
|
import { Popup } from './components/Popup.jsx'
|
|
|
|
|
import { Toolbar } from './components/Toolbar.jsx'
|
|
|
|
|
import { Courses } from './components/view/Courses.jsx'
|
|
|
|
|
import { Schedule } from './components/view/Schedule.jsx'
|
|
|
|
|
import { OptionBar } from './components/OptionBar.jsx'
|
|
|
|
|
import { prettyAulaName, prettyProfName, usePersistentState } from './utils.jsx'
|
|
|
|
|
|
|
|
|
|
import { SettingsBar } from './components/SettingsBar.jsx'
|
|
|
|
|
|
|
|
|
|
// Che fanno queste due righe?
|
|
|
|
|
window._ = _
|
|
|
|
|
window.dataBuffer = {}
|
|
|
|
|
|
|
|
|
|
// NOTA: magistrale *non* è quello con i corsi a cavallo
|
|
|
|
|
const TIMETABLE_IDS = semesterData.timetableIds
|
|
|
|
|
const TIMETABLE_IDS = {
|
|
|
|
|
'anno-1': '64a7c1c651f079001d52e9c8',
|
|
|
|
|
'anno-2': '6308e2dc09352a0208fefdd9',
|
|
|
|
|
'anno-3': '6308e42a1df5cb026699ced4',
|
|
|
|
|
'magistrale': '64a7c7091ab813002c5d9ede',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// const DEFAULT_DATE_RANGE = {
|
|
|
|
|
// from: '2023-10-09T00:00:00.000Z',
|
|
|
|
|
@ -43,19 +46,15 @@ const TIMETABLE_IDS = semesterData.timetableIds
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function specialEventPatches(eventi) {
|
|
|
|
|
// Il laboratorio del primo anno in realtà è in due gruppi separati
|
|
|
|
|
// Il laboratorio del primo anno in realtà è in due canali separati
|
|
|
|
|
let i = 1
|
|
|
|
|
eventi.forEach(evento => {
|
|
|
|
|
console.log(evento.id, evento.nome, evento.dataInizio, evento.dataFine)
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
evento.nome === 'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE'
|
|
|
|
|
evento.nome ===
|
|
|
|
|
'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE'
|
|
|
|
|
) {
|
|
|
|
|
if (evento.evento.dettagliDidattici[0].partizione.descrizione === 'CORSO A') {
|
|
|
|
|
evento.nome += ' (A)'
|
|
|
|
|
}
|
|
|
|
|
if (evento.evento.dettagliDidattici[0].partizione.descrizione === 'CORSO B') {
|
|
|
|
|
evento.nome += ' (B)'
|
|
|
|
|
}
|
|
|
|
|
evento.nome += ` (${i})`
|
|
|
|
|
i++
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
@ -64,12 +63,17 @@ function specialEventPatches(eventi) {
|
|
|
|
|
|
|
|
|
|
function formatEvents(timetable) {
|
|
|
|
|
return timetable.map(({ nome, dataInizio, dataFine, docenti, aule }) => {
|
|
|
|
|
const start = new Date(dataInizio)
|
|
|
|
|
const end = new Date(dataFine)
|
|
|
|
|
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)),
|
|
|
|
|
day: start.getDay(),
|
|
|
|
|
start: differenceInMinutes(start, startOfDay(start)),
|
|
|
|
|
end: differenceInMinutes(end, startOfDay(start)),
|
|
|
|
|
docenti: docenti.map(({ nome, cognome }) =>
|
|
|
|
|
prettyProfName(nome, cognome)
|
|
|
|
|
),
|
|
|
|
|
aule: aule.map(aula => prettyAulaName(aula.codice)),
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -110,7 +114,7 @@ async function loadCalendari(date) {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
mode: 'cors',
|
|
|
|
|
credentials: 'omit',
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return await req.json()
|
|
|
|
|
@ -124,9 +128,9 @@ async function loadCalendari(date) {
|
|
|
|
|
]
|
|
|
|
|
const results = await Promise.all(requests)
|
|
|
|
|
const timetablesRaw = results.map(timetable =>
|
|
|
|
|
specialEventPatches(_.uniqBy(timetable, 'id')),
|
|
|
|
|
specialEventPatches(_.uniqBy(timetable, 'id'))
|
|
|
|
|
)
|
|
|
|
|
const allRaw = _.uniqBy(specialEventPatches(_.concat(...results)), 'id')
|
|
|
|
|
const allRaw = specialEventPatches(_.uniqBy(_.concat(...results), 'id'))
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
'anno-1': formatEvents(timetablesRaw[0]),
|
|
|
|
|
@ -137,19 +141,50 @@ async function loadCalendari(date) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const View = ({ view, selection, setSelection, timetables }) => {
|
|
|
|
|
const View = ({
|
|
|
|
|
view,
|
|
|
|
|
selection,
|
|
|
|
|
setSelection,
|
|
|
|
|
timetables,
|
|
|
|
|
custom,
|
|
|
|
|
setCustom,
|
|
|
|
|
}) => {
|
|
|
|
|
if (view === 'orario') {
|
|
|
|
|
return <Schedule selection={selection} timetables={timetables} />
|
|
|
|
|
return (
|
|
|
|
|
<Schedule
|
|
|
|
|
selection={selection}
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
custom={custom}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
} else if (view === 'lista') {
|
|
|
|
|
return (
|
|
|
|
|
<Courses
|
|
|
|
|
selection={selection}
|
|
|
|
|
setSelection={setSelection}
|
|
|
|
|
source={'tutti'}
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
hideOtherCourses={true}
|
|
|
|
|
custom={custom}
|
|
|
|
|
isRestrictedList={true}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
} else if (view === 'custom') {
|
|
|
|
|
return (
|
|
|
|
|
<div class="custom-events-view">
|
|
|
|
|
<textarea
|
|
|
|
|
value={custom}
|
|
|
|
|
onChange={e => setCustom(e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
<p>Esempio di evento personalizzato</p>
|
|
|
|
|
<p>
|
|
|
|
|
Nome evento [label globale]:
|
|
|
|
|
<br />
|
|
|
|
|
- Lun 9-11
|
|
|
|
|
<br />
|
|
|
|
|
- Mar 9:00-11:00
|
|
|
|
|
<br />- Gio 8:00-12:00 [label locale]
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<Courses
|
|
|
|
|
@ -157,7 +192,7 @@ const View = ({ view, selection, setSelection, timetables }) => {
|
|
|
|
|
setSelection={setSelection}
|
|
|
|
|
source={view}
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
hideOtherCourses={false}
|
|
|
|
|
isRestrictedList={false}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
@ -173,25 +208,31 @@ const App = ({}) => {
|
|
|
|
|
const [date, setDate] = useState(new Date().toISOString())
|
|
|
|
|
|
|
|
|
|
// Data Sources
|
|
|
|
|
const [view, setView] = usePersistentState('view', 'tutti')
|
|
|
|
|
const [view, setView] = usePersistentState('view', 'magistrale')
|
|
|
|
|
const [timetables, setTimetables] = useState(null)
|
|
|
|
|
useEffect(async () => {
|
|
|
|
|
setTimetables(await loadCalendari(new Date(date)))
|
|
|
|
|
}, [date])
|
|
|
|
|
|
|
|
|
|
// View Modes
|
|
|
|
|
// const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
|
|
|
|
|
|
|
|
|
|
// Selection
|
|
|
|
|
const [selectedCourses, setSelectedCourses] = usePersistentState('selection', [])
|
|
|
|
|
const [selectedCourses, setSelectedCourses] = usePersistentState(
|
|
|
|
|
'selection',
|
|
|
|
|
[]
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
// Custom Events
|
|
|
|
|
const [custom, setCustom] = usePersistentState('custom', [])
|
|
|
|
|
|
|
|
|
|
// Menus
|
|
|
|
|
const [helpVisible, setHelpVisible] = useState(false)
|
|
|
|
|
const [showMobileMenu, setShowMobileMenu] = useState(false)
|
|
|
|
|
|
|
|
|
|
// const groupIds = new Set(eventi.map(e => e.nome))
|
|
|
|
|
const toolOverlayVisible = selectedCourses.length > 0
|
|
|
|
|
|
|
|
|
|
const [theme, setTheme] = usePersistentState(
|
|
|
|
|
'theme',
|
|
|
|
|
'light',
|
|
|
|
|
'light'
|
|
|
|
|
// window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
|
// ? 'dark'
|
|
|
|
|
// : 'light'
|
|
|
|
|
@ -251,29 +292,18 @@ const App = ({}) => {
|
|
|
|
|
) : timetables['tutti'].length === 0 ? (
|
|
|
|
|
<div class="warning">
|
|
|
|
|
<p>
|
|
|
|
|
Non esistono corsi per la settimana selezionata: buone
|
|
|
|
|
vacanze! 🎉
|
|
|
|
|
Non esistono corsi per la settimana selezionata:
|
|
|
|
|
buone vacanze! 🎉
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Clicca sul bottone qua sotto per vedere la prima settimana
|
|
|
|
|
completa di lezioni:
|
|
|
|
|
</p>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setDate(semesterData.firstMondayDate)
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{semesterData.buttonText}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{/* <p>
|
|
|
|
|
Per cambiare settimana puoi usare il widget Calendario (
|
|
|
|
|
Per cambiare settimana puoi usare il widget
|
|
|
|
|
Calendario (
|
|
|
|
|
<Icon name="calendar_month" />) in alto a destra
|
|
|
|
|
<br />
|
|
|
|
|
In versione mobile, il widget Calendario è situato dentro
|
|
|
|
|
il Menu (
|
|
|
|
|
In versione mobile, il widget Calendario è
|
|
|
|
|
situato dentro il Menu (
|
|
|
|
|
<Icon name="menu" />)
|
|
|
|
|
</p> */}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<View
|
|
|
|
|
@ -281,6 +311,8 @@ const App = ({}) => {
|
|
|
|
|
setSelection={setSelectedCourses}
|
|
|
|
|
view={view}
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
custom={custom}
|
|
|
|
|
setCustom={setCustom}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
|
Francesco Baldino