|
|
|
@ -1,7 +1,6 @@
|
|
|
|
import _ from 'lodash'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import { render } from 'preact'
|
|
|
|
import { render } from 'preact'
|
|
|
|
import { useEffect, useState } from 'preact/hooks'
|
|
|
|
import { useEffect, useState } from 'preact/hooks'
|
|
|
|
import semesterData from './semester-data.json'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// import { ToolOverlay } from './components/ToolOverlay.jsx'
|
|
|
|
// import { ToolOverlay } from './components/ToolOverlay.jsx'
|
|
|
|
//
|
|
|
|
//
|
|
|
|
@ -11,51 +10,54 @@ import semesterData from './semester-data.json'
|
|
|
|
// MODE_SCHEDULE,
|
|
|
|
// MODE_SCHEDULE,
|
|
|
|
// } from './components/EventsView.jsx'
|
|
|
|
// } 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 { HamburgerMenu } from './components/HamburgerMenu.jsx'
|
|
|
|
import { Help } from './components/Help.jsx'
|
|
|
|
import { Help } from './components/Help.jsx'
|
|
|
|
import { Icon } from './components/Icon.jsx'
|
|
|
|
import { Icon } from './components/Icon.jsx'
|
|
|
|
import { OptionBar } from './components/OptionBar.jsx'
|
|
|
|
|
|
|
|
import { Popup } from './components/Popup.jsx'
|
|
|
|
import { Popup } from './components/Popup.jsx'
|
|
|
|
import { Toolbar } from './components/Toolbar.jsx'
|
|
|
|
import { Toolbar } from './components/Toolbar.jsx'
|
|
|
|
import { Courses } from './components/view/Courses.jsx'
|
|
|
|
import { OptionBar } from './components/OptionBar.jsx'
|
|
|
|
import { Schedule } from './components/view/Schedule.jsx'
|
|
|
|
import {
|
|
|
|
import { prettyAulaName, prettyProfName, usePersistentState } from './utils.jsx'
|
|
|
|
prettyAulaName,
|
|
|
|
|
|
|
|
prettyProfName,
|
|
|
|
import { SettingsBar } from './components/SettingsBar.jsx'
|
|
|
|
clearOldPersistentStates,
|
|
|
|
|
|
|
|
usePersistentState,
|
|
|
|
|
|
|
|
} from './utils.jsx'
|
|
|
|
|
|
|
|
|
|
|
|
// Che fanno queste due righe?
|
|
|
|
// Che fanno queste due righe?
|
|
|
|
window._ = _
|
|
|
|
window._ = _
|
|
|
|
window.dataBuffer = {}
|
|
|
|
window.dataBuffer = {}
|
|
|
|
|
|
|
|
|
|
|
|
// NOTA: magistrale *non* è quello con i corsi a cavallo
|
|
|
|
const TIMETABLE_IDS = {
|
|
|
|
const TIMETABLE_IDS = semesterData.timetableIds
|
|
|
|
'anno-1': '64a7c1c651f079001d52e9c8',
|
|
|
|
|
|
|
|
'anno-2': '6308e2dc09352a0208fefdd9',
|
|
|
|
|
|
|
|
'anno-3': '6308e42a1df5cb026699ced4',
|
|
|
|
|
|
|
|
'magistrale': '64a7c7091ab813002c5d9ede',
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// const DEFAULT_DATE_RANGE = {
|
|
|
|
const DEFAULT_DATE_RANGE = {
|
|
|
|
// from: '2023-10-09T00:00:00.000Z',
|
|
|
|
from: '2023-10-09T00:00:00.000Z',
|
|
|
|
// to: '2023-10-14T00:00:00.000Z',
|
|
|
|
to: '2023-10-14T00:00:00.000Z',
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// const DATE_RANGES = {
|
|
|
|
const DATE_RANGES = {
|
|
|
|
// '64a7c1c651f079001d52e9c8': DEFAULT_DATE_RANGE,
|
|
|
|
'64a7c1c651f079001d52e9c8': DEFAULT_DATE_RANGE,
|
|
|
|
// '6308e2dc09352a0208fefdd9': DEFAULT_DATE_RANGE,
|
|
|
|
'6308e2dc09352a0208fefdd9': DEFAULT_DATE_RANGE,
|
|
|
|
// '6308e42a1df5cb026699ced4': DEFAULT_DATE_RANGE,
|
|
|
|
'6308e42a1df5cb026699ced4': DEFAULT_DATE_RANGE,
|
|
|
|
// '64a7c7091ab813002c5d9ede': DEFAULT_DATE_RANGE,
|
|
|
|
'64a7c7091ab813002c5d9ede': DEFAULT_DATE_RANGE,
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function specialEventPatches(eventi) {
|
|
|
|
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 => {
|
|
|
|
eventi.forEach(evento => {
|
|
|
|
console.log(evento.id, evento.nome, evento.dataInizio, evento.dataFine)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
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 += ` (${i})`
|
|
|
|
evento.nome += ' (A)'
|
|
|
|
i++
|
|
|
|
}
|
|
|
|
|
|
|
|
if (evento.evento.dettagliDidattici[0].partizione.descrizione === 'CORSO B') {
|
|
|
|
|
|
|
|
evento.nome += ' (B)'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
@ -69,24 +71,15 @@ function formatEvents(timetable) {
|
|
|
|
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),
|
|
|
|
docenti: docenti.map(({ nome, cognome }) => prettyProfName(nome, cognome)),
|
|
|
|
docenti: docenti.map(({ nome, cognome }) =>
|
|
|
|
|
|
|
|
prettyProfName(nome, cognome)
|
|
|
|
|
|
|
|
),
|
|
|
|
aule: aule.map(aula => prettyAulaName(aula.codice)),
|
|
|
|
aule: aule.map(aula => prettyAulaName(aula.codice)),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function loadCalendari(date) {
|
|
|
|
async function loadCalendari() {
|
|
|
|
function getMonday(d) {
|
|
|
|
|
|
|
|
const day = d.getDay()
|
|
|
|
|
|
|
|
const diff = d.getDate() - day + (day === 0 ? -6 : 1)
|
|
|
|
|
|
|
|
const monday = new Date(d.setDate(diff))
|
|
|
|
|
|
|
|
monday.setUTCHours(0, 0, 0, 0)
|
|
|
|
|
|
|
|
return monday
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const monday = getMonday(date)
|
|
|
|
|
|
|
|
const saturday = new Date(monday)
|
|
|
|
|
|
|
|
saturday.setDate(monday.getDate() + 5)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function req(id) {
|
|
|
|
async function req(id) {
|
|
|
|
// Almost directly copy-pasted from Chrome Dev Tools
|
|
|
|
// Almost directly copy-pasted from Chrome Dev Tools
|
|
|
|
const req = await fetch(
|
|
|
|
const req = await fetch(
|
|
|
|
@ -104,13 +97,13 @@ async function loadCalendari(date) {
|
|
|
|
linkCalendarioId: id,
|
|
|
|
linkCalendarioId: id,
|
|
|
|
clienteId: '628de8b9b63679f193b87046',
|
|
|
|
clienteId: '628de8b9b63679f193b87046',
|
|
|
|
pianificazioneTemplate: false,
|
|
|
|
pianificazioneTemplate: false,
|
|
|
|
dataInizio: monday.toISOString(),
|
|
|
|
dataInizio: DATE_RANGES[id].from,
|
|
|
|
dataFine: saturday.toISOString(),
|
|
|
|
dataFine: DATE_RANGES[id].to,
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
method: 'POST',
|
|
|
|
method: 'POST',
|
|
|
|
mode: 'cors',
|
|
|
|
mode: 'cors',
|
|
|
|
credentials: 'omit',
|
|
|
|
credentials: 'omit',
|
|
|
|
},
|
|
|
|
}
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
return await req.json()
|
|
|
|
return await req.json()
|
|
|
|
@ -124,9 +117,9 @@ async function loadCalendari(date) {
|
|
|
|
]
|
|
|
|
]
|
|
|
|
const results = await Promise.all(requests)
|
|
|
|
const results = await Promise.all(requests)
|
|
|
|
const timetablesRaw = results.map(timetable =>
|
|
|
|
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 {
|
|
|
|
return {
|
|
|
|
'anno-1': formatEvents(timetablesRaw[0]),
|
|
|
|
'anno-1': formatEvents(timetablesRaw[0]),
|
|
|
|
@ -137,61 +130,40 @@ async function loadCalendari(date) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const View = ({ view, selection, setSelection, timetables }) => {
|
|
|
|
|
|
|
|
if (view === 'orario') {
|
|
|
|
|
|
|
|
return <Schedule selection={selection} timetables={timetables} />
|
|
|
|
|
|
|
|
} else if (view === 'lista') {
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<Courses
|
|
|
|
|
|
|
|
selection={selection}
|
|
|
|
|
|
|
|
setSelection={setSelection}
|
|
|
|
|
|
|
|
source={'tutti'}
|
|
|
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
|
|
|
hideOtherCourses={true}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<Courses
|
|
|
|
|
|
|
|
selection={selection}
|
|
|
|
|
|
|
|
setSelection={setSelection}
|
|
|
|
|
|
|
|
source={view}
|
|
|
|
|
|
|
|
timetables={timetables}
|
|
|
|
|
|
|
|
hideOtherCourses={false}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const App = ({}) => {
|
|
|
|
const App = ({}) => {
|
|
|
|
// Clear persistent states unless state_token corresponds to the one passed
|
|
|
|
// Clear persistent states unless state_token corresponds to the one passed
|
|
|
|
// as the argument. Useful with breaking updates. Change this token if your
|
|
|
|
// as the argument. Useful with breaking updates. Change this token if your
|
|
|
|
// (breaking) update needs a reset of persistent states to avoid crashes.
|
|
|
|
// (breaking) update needs a reset of persistent states to avoid crashes.
|
|
|
|
//
|
|
|
|
//
|
|
|
|
// Use any random string of your choice
|
|
|
|
// Use any random string of your choice
|
|
|
|
// clearOldPersistentStates('e73cba02')
|
|
|
|
clearOldPersistentStates('e73cba02')
|
|
|
|
|
|
|
|
|
|
|
|
const [date, setDate] = useState(new Date().toISOString())
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Data Sources
|
|
|
|
// Data Sources
|
|
|
|
const [view, setView] = usePersistentState('view', 'tutti')
|
|
|
|
const [source, setSource] = usePersistentState('source', 'magistrale')
|
|
|
|
const [timetables, setTimetables] = useState(null)
|
|
|
|
const [timetables, setTimetables] = useState(null)
|
|
|
|
useEffect(async () => {
|
|
|
|
useEffect(async () => {
|
|
|
|
setTimetables(await loadCalendari(new Date(date)))
|
|
|
|
setTimetables(await loadCalendari())
|
|
|
|
}, [date])
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
// View Modes
|
|
|
|
// View Modes
|
|
|
|
// const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
|
|
|
|
// const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
|
|
|
|
|
|
|
|
|
|
|
|
// Selection
|
|
|
|
// Selection
|
|
|
|
const [selectedCourses, setSelectedCourses] = usePersistentState('selection', [])
|
|
|
|
const [selectedCourses, setSelectedCourses] = usePersistentState(
|
|
|
|
|
|
|
|
'selection',
|
|
|
|
|
|
|
|
[]
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
// Menus
|
|
|
|
// Menus
|
|
|
|
const [helpVisible, setHelpVisible] = useState(false)
|
|
|
|
const [helpVisible, setHelpVisible] = useState(false)
|
|
|
|
const [showMobileMenu, setShowMobileMenu] = 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(
|
|
|
|
const [theme, setTheme] = usePersistentState(
|
|
|
|
'theme',
|
|
|
|
'theme',
|
|
|
|
'light',
|
|
|
|
'light'
|
|
|
|
// window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
// window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
// ? 'dark'
|
|
|
|
// ? 'dark'
|
|
|
|
// : 'light'
|
|
|
|
// : 'light'
|
|
|
|
@ -203,90 +175,69 @@ const App = ({}) => {
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<Toolbar
|
|
|
|
<Toolbar
|
|
|
|
{...{
|
|
|
|
{...{
|
|
|
|
source: view,
|
|
|
|
source,
|
|
|
|
setSource: setView,
|
|
|
|
setSource,
|
|
|
|
date: date,
|
|
|
|
onShowMenu: () => setShowMobileMenu(true),
|
|
|
|
setDate: setDate,
|
|
|
|
|
|
|
|
showMobileMenu: showMobileMenu,
|
|
|
|
|
|
|
|
setShowMobileMenu: setShowMobileMenu,
|
|
|
|
|
|
|
|
onHelp: () => setHelpVisible(true),
|
|
|
|
onHelp: () => setHelpVisible(true),
|
|
|
|
theme,
|
|
|
|
theme,
|
|
|
|
setTheme,
|
|
|
|
setTheme,
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
{showMobileMenu ? (
|
|
|
|
<OptionBar
|
|
|
|
<SettingsBar
|
|
|
|
{...{
|
|
|
|
{...{
|
|
|
|
source,
|
|
|
|
theme,
|
|
|
|
setSource,
|
|
|
|
setTheme,
|
|
|
|
onHelp: () => setHelpVisible(true),
|
|
|
|
date,
|
|
|
|
}}
|
|
|
|
setDate,
|
|
|
|
orizzontale
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<OptionBar
|
|
|
|
|
|
|
|
{...{
|
|
|
|
|
|
|
|
view: view,
|
|
|
|
|
|
|
|
setView: setView,
|
|
|
|
|
|
|
|
onHelp: () => setHelpVisible(true),
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
orizzontale
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
{timetables && (
|
|
|
|
{timetables &&
|
|
|
|
<div class="content">
|
|
|
|
(showMobileMenu ? (
|
|
|
|
{source === 'orario' ? (
|
|
|
|
<HamburgerMenu
|
|
|
|
<Schedule
|
|
|
|
{...{
|
|
|
|
selection={selectedCourses}
|
|
|
|
date,
|
|
|
|
setSelection={setSelectedCourses}
|
|
|
|
setDate,
|
|
|
|
start={new Date(2022, 10, 3)}
|
|
|
|
theme,
|
|
|
|
source={source}
|
|
|
|
setTheme,
|
|
|
|
timetables={timetables}
|
|
|
|
onClose: () => {
|
|
|
|
|
|
|
|
setShowMobileMenu(false)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
) : timetables['tutti'].length === 0 ? (
|
|
|
|
|
|
|
|
<div class="warning">
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
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 (
|
|
|
|
|
|
|
|
<Icon name="calendar_month" />) in alto a destra
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
In versione mobile, il widget Calendario è situato dentro
|
|
|
|
|
|
|
|
il Menu (
|
|
|
|
|
|
|
|
<Icon name="menu" />)
|
|
|
|
|
|
|
|
</p> */}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<View
|
|
|
|
<Courses
|
|
|
|
selection={selectedCourses}
|
|
|
|
selection={selectedCourses}
|
|
|
|
setSelection={setSelectedCourses}
|
|
|
|
setSelection={setSelectedCourses}
|
|
|
|
view={view}
|
|
|
|
start={new Date(2022, 10, 3)}
|
|
|
|
|
|
|
|
source={source}
|
|
|
|
timetables={timetables}
|
|
|
|
timetables={timetables}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
{/* showMobileMenu && (
|
|
|
|
{/* toolOverlayVisible && (
|
|
|
|
|
|
|
|
<ToolOverlay
|
|
|
|
|
|
|
|
mode={mode}
|
|
|
|
|
|
|
|
toggleMode={() =>
|
|
|
|
|
|
|
|
setMode(
|
|
|
|
|
|
|
|
mode === MODE_COURSES ? MODE_SCHEDULE : MODE_COURSES
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
onClose={() => {
|
|
|
|
|
|
|
|
setSelectedCourses([])
|
|
|
|
|
|
|
|
setMode(MODE_COURSES)
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
) */}
|
|
|
|
) */}
|
|
|
|
|
|
|
|
{showMobileMenu && (
|
|
|
|
|
|
|
|
<HamburgerMenu
|
|
|
|
|
|
|
|
{...{
|
|
|
|
|
|
|
|
theme,
|
|
|
|
|
|
|
|
setTheme,
|
|
|
|
|
|
|
|
onClose: () => {
|
|
|
|
|
|
|
|
setShowMobileMenu(false)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
{helpVisible && (
|
|
|
|
{helpVisible && (
|
|
|
|
<Popup
|
|
|
|
<Popup
|
|
|
|
title={
|
|
|
|
title={
|
|
|
|
|