diff --git a/src/components/HamburgerMenu.jsx b/src/components/HamburgerMenu.jsx index 5f9ff71..e3df2d2 100644 --- a/src/components/HamburgerMenu.jsx +++ b/src/components/HamburgerMenu.jsx @@ -4,57 +4,57 @@ import { Help } from './Help.jsx' import { Icon } from './Icon.jsx' export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => { - return ( -
-
-
- - -
- -
-
-
Gruppo Corsi
- -
Visualizzazione
- +
+
+ + +
+ +
+ {/*
+
Gruppo Corsi
+ +
Visualizzazione
+ -
-
-
-

- - Guida -

- -
-
- ) + ]} + /> +
+
*/} +
+

+ + Guida +

+ +
+ + ) } diff --git a/src/components/Optionbar.jsx b/src/components/Optionbar.jsx new file mode 100644 index 0000000..8333016 --- /dev/null +++ b/src/components/Optionbar.jsx @@ -0,0 +1,41 @@ +import { CompoundButton } from './CompoundButton.jsx' +import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx' +import { Icon } from './Icon.jsx' + +export const Optionbar = ({ mode, setMode, source, setSource, onHelp }) => { + return ( +
+
+
+ }, + ]} + value={source} + setValue={setSource} + /> +
+
+
+
+ }, + { + value: MODE_WORKWEEK_GRID, + label: , + }, + { value: MODE_SCHEDULE, label: }, + ]} + value={mode} + setValue={setMode} + /> +
+
+
+ ) +} diff --git a/src/main.jsx b/src/main.jsx index 5f54f47..590696f 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -9,182 +9,221 @@ 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' window._ = _ window.dataBuffer = {} const CALENDAR_IDS = { - 'anno-1': ['6308cfcb1df5cb026699ce32'], - 'anno-2': ['6308e2dc09352a0208fefdd9'], - 'anno-3': ['6308e42a1df5cb026699ced4'], - 'magistrale': ['6308e8ea0c34e703bb1f7e85'], - 'tutti': [ - '6308cfcb1df5cb026699ce32', - '6308e2dc09352a0208fefdd9', - '6308e42a1df5cb026699ced4', - '6308e8ea0c34e703bb1f7e85', - ], + 'anno-1': ['6308cfcb1df5cb026699ce32'], + 'anno-2': ['6308e2dc09352a0208fefdd9'], + 'anno-3': ['6308e42a1df5cb026699ced4'], + 'magistrale': ['6308e8ea0c34e703bb1f7e85'], + 'tutti': [ + '6308cfcb1df5cb026699ce32', + '6308e2dc09352a0208fefdd9', + '6308e42a1df5cb026699ced4', + '6308e8ea0c34e703bb1f7e85', + ], } async function loadEventi(ids) { - const calendari = await Promise.all( - ids.map(async id => { - // Almost directly copy-pasted from Chrome Dev Tools - const req = await fetch( - 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', - { - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'sec-fetch-dest': 'empty', - 'sec-fetch-mode': 'cors', - 'sec-fetch-site': 'same-site', - }, - body: JSON.stringify({ - mostraImpegniAnnullati: true, - mostraIndisponibilitaTotali: false, - linkCalendarioId: id, - clienteId: '628de8b9b63679f193b87046', - pianificazioneTemplate: false, - dataInizio: '2022-10-02T22:00:00.000Z', - dataFine: '2022-10-07T22:00:00.000Z', - }), - method: 'POST', - mode: 'cors', - credentials: 'omit', - } - ) - - return await req.json() - }) - ) - + const calendari = await Promise.all( + ids.map(async id => { + // Almost directly copy-pasted from Chrome Dev Tools + const req = await fetch( + 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', + { + headers: { + 'content-type': 'application/json;charset=UTF-8', + 'sec-fetch-dest': 'empty', + 'sec-fetch-mode': 'cors', + 'sec-fetch-site': 'same-site', + }, + body: JSON.stringify({ + mostraImpegniAnnullati: true, + mostraIndisponibilitaTotali: false, + linkCalendarioId: id, + clienteId: '628de8b9b63679f193b87046', + pianificazioneTemplate: false, + dataInizio: '2022-10-02T22:00:00.000Z', + dataFine: '2022-10-07T22:00:00.000Z', + }), + method: 'POST', + mode: 'cors', + credentials: 'omit', + } + ) + + return await req.json() + }) + ) + +<<<<<<< HEAD if (ids.length === 1) { return calendari[0] } +======= + // console.log(calendari) + + if (ids.length === 1) { + return calendari[0] + } +>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a - return _.uniqBy(_.concat(...calendari), 'id') + return _.uniqBy(_.concat(...calendari), 'id') } const App = ({}) => { +<<<<<<< HEAD // Data Sources const [source, setSource] = useState('magistrale') const [eventi, setEventi] = useState([]) // View Modes const [mode, setMode] = useState(MODE_COURSE) +======= + // Data Sources + const [source, setSource] = useState('anno-1') + const [eventi, setEventi] = useState([]) - // Selection - const [selectedCourses, setSelectedCourses] = useState([]) - const [hideOtherCourses, setHideOtherCourses] = useState(false) + // View Modes + const [mode, setMode] = useState(MODE_WORKWEEK_GRID) +>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a - // Menus - const [helpVisible, setHelpVisible] = useState(false) - const [showMobileMenu, setShowMobileMenu] = useState(false) + // Selection + const [selectedCourses, setSelectedCourses] = useState([]) + const [hideOtherCourses, setHideOtherCourses] = useState(false) + // Menus + const [helpVisible, setHelpVisible] = useState(false) + const [showMobileMenu, setShowMobileMenu] = useState(false) + +<<<<<<< HEAD useEffect(async () => { const eventi = await loadEventi(CALENDAR_IDS[source]) +======= + useEffect(async () => { + console.log('source changed') + const eventi = await loadEventi(CALENDAR_IDS[source]) +>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a - window.dataBuffer[source] = eventi + window.dataBuffer[source] = eventi - setEventi(eventi) - }, [source]) + setEventi(eventi) + }, [source]) - const groupIds = new Set(eventi.map(e => e.nome)) - const toolOverlayVisible = - selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0 + const groupIds = new Set(eventi.map(e => e.nome)) + const toolOverlayVisible = + selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0 +<<<<<<< HEAD useEffect(() => { const groupIds = new Set(eventi.map(e => e.nome)) - - if ( - selectedCourses.length === 0 || - selectedCourses.filter(id => groupIds.has(id)).length === 0 - ) { - setHideOtherCourses(false) - } - }, [eventi, selectedCourses.length]) - - const [theme, setTheme] = useState( - localStorage.getItem('theme') ?? - (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') - ) - - document.body.classList.toggle('dark-mode', theme === 'dark') - localStorage.setItem('theme', theme) - - return ( - <> - setShowMobileMenu(true), - onHelp: () => setHelpVisible(true), - theme, - setTheme, - }} - /> - ({ - id: nome, - name: _.split(nome, '-', 1)[0].trim(), - start: new Date(dataInizio), - end: new Date(dataFine), - docenti: docenti.map(({ nome, cognome }) => - _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome)) - ), - aula: _.startCase(aule[0].codice.toLowerCase()).replace( - /([A-Z]) ([1-9])/, - '$1$2' - ), - }))} - /> - {toolOverlayVisible && ( - setHideOtherCourses(s => !s)} - onClose={() => { - setSelectedCourses([]) - setHideOtherCourses(false) - }} - /> - )} - {showMobileMenu && ( - { - setShowMobileMenu(false) - }, - }} - /> - )} - {helpVisible && ( - - Guida - - } - onClose={() => setHelpVisible(false)} - > - - - )} - - ) +======= + useEffect(() => { + console.log('course length changed') + const groupIds = new Set(eventi.map(e => e.nome)) +>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a + + if ( + selectedCourses.length === 0 || + selectedCourses.filter(id => groupIds.has(id)).length === 0 + ) { + setHideOtherCourses(false) + } + }, [eventi, selectedCourses.length]) + + const [theme, setTheme] = useState( + localStorage.getItem('theme') ?? + (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') + ) + + document.body.classList.toggle('dark-mode', theme === 'dark') + localStorage.setItem('theme', theme) + + return ( + <> + setShowMobileMenu(true), + onHelp: () => setHelpVisible(true), + theme, + setTheme, + }} + /> + setHelpVisible(true), + }} + /> + ({ + id: nome, + name: _.split(nome, '-', 1)[0].trim(), + start: new Date(dataInizio), + end: new Date(dataFine), + docenti: docenti.map(({ nome, cognome }) => + _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome)) + ), + aula: _.startCase(aule[0].codice.toLowerCase()).replace( + /([A-Z]) ([1-9])/, + '$1$2' + ), + }))} + /> + {toolOverlayVisible && ( + setHideOtherCourses(s => !s)} + onClose={() => { + setSelectedCourses([]) + setHideOtherCourses(false) + }} + /> + )} + {showMobileMenu && ( + { + setShowMobileMenu(false) + }, + }} + /> + )} + {helpVisible && ( + + Guida + + } + onClose={() => setHelpVisible(false)} + > + + + )} + + ) } render(, document.body) diff --git a/src/styles/main.scss b/src/styles/main.scss index 8985063..1f22c81 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -448,9 +448,38 @@ body { } } } +.optionbar { + @extend .panel; + + padding: 1rem 0.75rem 1rem 1rem; + + border-radius: 0; + border: none; + border-bottom: 1px solid var(--border-500); + + height: 4rem; + + display: none; + align-items: center; + justify-content: space-between; + + @media screen and (max-width: $device-s-width), (pointer: coarse) { + display: flex; + } + + .option-group { + display: flex; + align-items: center; + + gap: 0.75rem; + } +} .events-view { height: calc(100vh - 4rem); + @media screen and (max-width: $device-s-width), (pointer: coarse) { + height: calc(100vh - 8rem); + } .course-view { padding: 1rem;