|
|
|
@ -3,7 +3,11 @@ import { useEffect, useRef, useState } from 'preact/hooks'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import { differenceInMinutes, startOfDay } from 'date-fns'
|
|
|
|
import { differenceInMinutes, startOfDay } from 'date-fns'
|
|
|
|
|
|
|
|
|
|
|
|
import { WEEK_DAYS_SHORT, prettyCourseName, usePersistentState } from '../../utils.jsx'
|
|
|
|
import {
|
|
|
|
|
|
|
|
WEEK_DAYS_SHORT,
|
|
|
|
|
|
|
|
prettyCourseName,
|
|
|
|
|
|
|
|
usePersistentState,
|
|
|
|
|
|
|
|
} from '../../utils.jsx'
|
|
|
|
import { layoutEvents, layoutIntervals } from '../../interval-layout.js'
|
|
|
|
import { layoutEvents, layoutIntervals } from '../../interval-layout.js'
|
|
|
|
import { Popup } from '../Popup.jsx'
|
|
|
|
import { Popup } from '../Popup.jsx'
|
|
|
|
import { Icon } from '../Icon.jsx'
|
|
|
|
import { Icon } from '../Icon.jsx'
|
|
|
|
@ -13,23 +17,28 @@ const TransposePopup = ({ onClose }) => {
|
|
|
|
<Popup
|
|
|
|
<Popup
|
|
|
|
title={
|
|
|
|
title={
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<Icon name="info" /> Attenzione! La tabella è stata trasposta!
|
|
|
|
<Icon name="info" /> Attenzione! La tabella è stata
|
|
|
|
|
|
|
|
trasposta!
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
onClose={onClose}
|
|
|
|
onClose={onClose}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<p>A grande richiesta popolare abbiamo trasposto la tabella dell'orario!</p>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
A grande richiesta popolare abbiamo trasposto la tabella
|
|
|
|
|
|
|
|
dell'orario!
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
Assicurati quindi di leggerla correttamente (dall'alto verso il basso
|
|
|
|
Assicurati quindi di leggerla correttamente (dall'alto verso il
|
|
|
|
invece che da sinistra verso destra).
|
|
|
|
basso invece che da sinistra verso destra).
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
Se preferisci utilizzare la versione vecchia, puoi utilizzare il pulsante
|
|
|
|
Se preferisci utilizzare la versione vecchia, puoi utilizzare il
|
|
|
|
Trasponi <Icon name="switch_left" style="transform: rotate(-45deg)" />{' '}
|
|
|
|
pulsante Trasponi{' '}
|
|
|
|
nell'origine della tabella per trasporla. Questa scelta verrà salvata nei
|
|
|
|
<Icon name="switch_left" style="transform: rotate(-45deg)" />{' '}
|
|
|
|
cookie e verrà ricordata in futuro
|
|
|
|
nell'origine della tabella per trasporla. Questa scelta verrà
|
|
|
|
|
|
|
|
salvata nei cookie e verrà ricordata in futuro
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</Popup>
|
|
|
|
</Popup>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
@ -40,8 +49,8 @@ const NoCourseWarning = () => {
|
|
|
|
<div class="warning">
|
|
|
|
<div class="warning">
|
|
|
|
<p>Non hai ancora selezionato nessun corso.</p>
|
|
|
|
<p>Non hai ancora selezionato nessun corso.</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
Clicca sui corsi nelle altre visuali per selezionarli e visualizzarli
|
|
|
|
Clicca sui corsi nelle altre visuali per selezionarli e
|
|
|
|
nell'orario
|
|
|
|
visualizzarli nell'orario
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
@ -66,10 +75,13 @@ const Layout = ({ layout, day, colors }) => {
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
'--block-size': block.end - block.start,
|
|
|
|
'--block-size': block.end - block.start,
|
|
|
|
'--size': event.end - event.start,
|
|
|
|
'--size': event.end - event.start,
|
|
|
|
'--relative-start': event.start - block.start,
|
|
|
|
'--relative-start':
|
|
|
|
|
|
|
|
event.start - block.start,
|
|
|
|
'--index': event.index,
|
|
|
|
'--index': event.index,
|
|
|
|
'--of': block.layers,
|
|
|
|
'--of': block.layers,
|
|
|
|
'--color': `var(--event-${colors[event.id]})`,
|
|
|
|
'--color': `var(--event-${
|
|
|
|
|
|
|
|
colors[event.id]
|
|
|
|
|
|
|
|
})`,
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="event">
|
|
|
|
<div class="event">
|
|
|
|
@ -106,11 +118,16 @@ const ScheduleGrid = ({
|
|
|
|
class="small"
|
|
|
|
class="small"
|
|
|
|
onClick={() =>
|
|
|
|
onClick={() =>
|
|
|
|
setOrientation(
|
|
|
|
setOrientation(
|
|
|
|
orientation === 'original' ? 'transposed' : 'original'
|
|
|
|
orientation === 'original'
|
|
|
|
|
|
|
|
? 'transposed'
|
|
|
|
|
|
|
|
: 'original'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<Icon name="switch_left" style="transform: rotate(-45deg)" />
|
|
|
|
<Icon
|
|
|
|
|
|
|
|
name="switch_left"
|
|
|
|
|
|
|
|
style="transform: rotate(-45deg)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{[1, 2, 3, 4, 5].map(n => (
|
|
|
|
{[1, 2, 3, 4, 5].map(n => (
|
|
|
|
@ -198,9 +215,20 @@ export const Schedule = ({ timetables, selection }) => {
|
|
|
|
'transpose_info',
|
|
|
|
'transpose_info',
|
|
|
|
'false'
|
|
|
|
'false'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
const [orientation, setOrientation] = usePersistentState('orientation', 'original')
|
|
|
|
const [orientation, setOrientation] = usePersistentState(
|
|
|
|
|
|
|
|
'orientation',
|
|
|
|
|
|
|
|
'original'
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const colorList = ['red', 'purple', 'blue', 'yellow', 'green', 'orange', 'lightblue']
|
|
|
|
const colorList = [
|
|
|
|
|
|
|
|
'red',
|
|
|
|
|
|
|
|
'purple',
|
|
|
|
|
|
|
|
'blue',
|
|
|
|
|
|
|
|
'yellow',
|
|
|
|
|
|
|
|
'green',
|
|
|
|
|
|
|
|
'orange',
|
|
|
|
|
|
|
|
'lightblue',
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
const allEvents = timetables['tutti']
|
|
|
|
const allEvents = timetables['tutti']
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
const selectionSet = new Set(selection)
|
|
|
|
|