phc
/
orario
6
2
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merged conflicts

Browse Source
pull/4/head
Antonio De Lucreziis 2 years ago
parent 22aa06ebf6 41195462f1
commit 0b1dbaebbd
4 changed files with 305 additions and 196 deletions
Show Stats Download Patch File Download Diff File

104
src/components/HamburgerMenu.jsx
Unescape Escape View File

@ -4,57 +4,57 @@ import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx' import { Icon } from './Icon.jsx'
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => { export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
return ( return (
<div class="menu"> <div class="menu">
<div class="header"> <div class="header">
<div class="option-group"> <div class="option-group">
<button class="flat icon" onClick={onClose}> <button class="flat icon" onClick={onClose}>
<Icon name="close" /> <Icon name="close" />
</button> </button>
<button <button
class="icon" 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> </button>
</div> </div>
<div class="item logo"> <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>
</div> </div>
<div class="options"> {/* <div class="options">
<div class="label">Gruppo Corsi</div> <div class="label">Gruppo Corsi</div>
<ComboBox <ComboBox
value={source} value={source}
setValue={setSource} setValue={setSource}
options={[ options={[
{ value: 'anno-1', label: 'I' }, { value: 'anno-1', label: 'I' },
{ value: 'anno-2', label: 'II' }, { value: 'anno-2', label: 'II' },
{ value: 'anno-3', label: 'III' }, { value: 'anno-3', label: 'III' },
{ value: 'magistrale', label: 'Magistrale' }, { value: 'magistrale', label: 'Magistrale' },
{ value: 'tutti', label: 'Tutti' }, { value: 'tutti', label: 'Tutti' },
]} ]}
/> />
<div class="label">Visualizzazione</div> <div class="label">Visualizzazione</div>
<ComboBox <ComboBox
value={mode} value={mode}
setValue={setMode} setValue={setMode}
options={[ options={[
{ value: MODE_COURSE, label: 'Corsi' }, { value: MODE_COURSE, label: 'Corsi' },
{ value: MODE_SCHEDULE, label: 'Giornaliera' }, { value: MODE_SCHEDULE, label: 'Giornaliera' },
{ value: MODE_WORKWEEK, label: 'Settimana' }, { value: MODE_WORKWEEK, label: 'Settimana' },
{ value: MODE_WORKWEEK_GRID, label: 'Schema' }, { value: MODE_WORKWEEK_GRID, label: 'Schema' },
]} ]}
/> />
</div> </div>
<hr /> <hr /> */}
<div class="help"> <div class="help">
<h2> <h2>
<Icon name="info" /> <Icon name="info" />
Guida Guida
</h2> </h2>
<Help /> <Help />
</div> </div>
</div> </div>
) )
} }

41
src/components/Optionbar.jsx
Unescape Escape View File

@ -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 (
<div class="optionbar">
<div class="option-group">
<div class="item option">
<CompoundButton
options={[
{ value: 'anno-1', label: 'I' },
{ value: 'anno-2', label: 'II' },
{ value: 'anno-3', label: 'III' },
{ value: 'magistrale', label: 'M' },
{ value: 'tutti', label: <Icon name="apps" /> },
]}
value={source}
setValue={setSource}
/>
</div>
</div>
<div class="option-group">
<div class="item option">
<CompoundButton
options={[
{ value: MODE_COURSE, label: <Icon name="list" /> },
{
value: MODE_WORKWEEK_GRID,
label: <Icon name="calendar_view_month" />,
},
{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
]}
value={mode}
setValue={setMode}
/>
</div>
</div>
</div>
)
}

327
src/main.jsx
Unescape Escape View File

@ -9,182 +9,221 @@ import { Help } from './components/Help.jsx'
import { Icon } from './components/Icon.jsx' import { Icon } from './components/Icon.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 { Optionbar } from './components/Optionbar.jsx'
window._ = _ window._ = _
window.dataBuffer = {} window.dataBuffer = {}
const CALENDAR_IDS = { const CALENDAR_IDS = {
'anno-1': ['6308cfcb1df5cb026699ce32'], 'anno-1': ['6308cfcb1df5cb026699ce32'],
'anno-2': ['6308e2dc09352a0208fefdd9'], 'anno-2': ['6308e2dc09352a0208fefdd9'],
'anno-3': ['6308e42a1df5cb026699ced4'], 'anno-3': ['6308e42a1df5cb026699ced4'],
'magistrale': ['6308e8ea0c34e703bb1f7e85'], 'magistrale': ['6308e8ea0c34e703bb1f7e85'],
'tutti': [ 'tutti': [
'6308cfcb1df5cb026699ce32', '6308cfcb1df5cb026699ce32',
'6308e2dc09352a0208fefdd9', '6308e2dc09352a0208fefdd9',
'6308e42a1df5cb026699ced4', '6308e42a1df5cb026699ced4',
'6308e8ea0c34e703bb1f7e85', '6308e8ea0c34e703bb1f7e85',
], ],
} }
async function loadEventi(ids) { async function loadEventi(ids) {
const calendari = await Promise.all( const calendari = await Promise.all(
ids.map(async id => { ids.map(async 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(
'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico',
{ {
headers: { headers: {
'content-type': 'application/json;charset=UTF-8', 'content-type': 'application/json;charset=UTF-8',
'sec-fetch-dest': 'empty', 'sec-fetch-dest': 'empty',
'sec-fetch-mode': 'cors', 'sec-fetch-mode': 'cors',
'sec-fetch-site': 'same-site', 'sec-fetch-site': 'same-site',
}, },
body: JSON.stringify({ body: JSON.stringify({
mostraImpegniAnnullati: true, mostraImpegniAnnullati: true,
mostraIndisponibilitaTotali: false, mostraIndisponibilitaTotali: false,
linkCalendarioId: id, linkCalendarioId: id,
clienteId: '628de8b9b63679f193b87046', clienteId: '628de8b9b63679f193b87046',
pianificazioneTemplate: false, pianificazioneTemplate: false,
dataInizio: '2022-10-02T22:00:00.000Z', dataInizio: '2022-10-02T22:00:00.000Z',
dataFine: '2022-10-07T22:00:00.000Z', dataFine: '2022-10-07T22:00:00.000Z',
}), }),
method: 'POST', method: 'POST',
mode: 'cors', mode: 'cors',
credentials: 'omit', credentials: 'omit',
} }
) )
return await req.json() return await req.json()
}) })
) )
<<<<<<< HEAD
if (ids.length === 1) { if (ids.length === 1) {
return calendari[0] 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 = ({}) => { const App = ({}) => {
<<<<<<< HEAD
// Data Sources // Data Sources
const [source, setSource] = useState('magistrale') const [source, setSource] = useState('magistrale')
const [eventi, setEventi] = useState([]) const [eventi, setEventi] = useState([])
// View Modes // View Modes
const [mode, setMode] = useState(MODE_COURSE) const [mode, setMode] = useState(MODE_COURSE)
=======
// Data Sources
const [source, setSource] = useState('anno-1')
const [eventi, setEventi] = useState([])
// Selection // View Modes
const [selectedCourses, setSelectedCourses] = useState([]) const [mode, setMode] = useState(MODE_WORKWEEK_GRID)
const [hideOtherCourses, setHideOtherCourses] = useState(false) >>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
// Menus // Selection
const [helpVisible, setHelpVisible] = useState(false) const [selectedCourses, setSelectedCourses] = useState([])
const [showMobileMenu, setShowMobileMenu] = useState(false) const [hideOtherCourses, setHideOtherCourses] = useState(false)
// Menus
const [helpVisible, setHelpVisible] = useState(false)
const [showMobileMenu, setShowMobileMenu] = useState(false)
<<<<<<< HEAD
useEffect(async () => { useEffect(async () => {
const eventi = await loadEventi(CALENDAR_IDS[source]) 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) setEventi(eventi)
}, [source]) }, [source])
const groupIds = new Set(eventi.map(e => e.nome)) const groupIds = new Set(eventi.map(e => e.nome))
const toolOverlayVisible = const toolOverlayVisible =
selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0 selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0
<<<<<<< HEAD
useEffect(() => { useEffect(() => {
const groupIds = new Set(eventi.map(e => e.nome)) const groupIds = new Set(eventi.map(e => e.nome))
=======
if ( useEffect(() => {
selectedCourses.length === 0 || console.log('course length changed')
selectedCourses.filter(id => groupIds.has(id)).length === 0 const groupIds = new Set(eventi.map(e => e.nome))
) { >>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
setHideOtherCourses(false)
} if (
}, [eventi, selectedCourses.length]) selectedCourses.length === 0 ||
selectedCourses.filter(id => groupIds.has(id)).length === 0
const [theme, setTheme] = useState( ) {
localStorage.getItem('theme') ?? setHideOtherCourses(false)
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') }
) }, [eventi, selectedCourses.length])
document.body.classList.toggle('dark-mode', theme === 'dark') const [theme, setTheme] = useState(
localStorage.setItem('theme', theme) localStorage.getItem('theme') ??
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
return ( )
<>
<Toolbar document.body.classList.toggle('dark-mode', theme === 'dark')
{...{ localStorage.setItem('theme', theme)
mode,
setMode, return (
source, <>
setSource, <Toolbar
onShowMenu: () => setShowMobileMenu(true), {...{
onHelp: () => setHelpVisible(true), mode,
theme, setMode,
setTheme, source,
}} setSource,
/> onShowMenu: () => setShowMobileMenu(true),
<EventsView onHelp: () => setHelpVisible(true),
mode={mode} theme,
selection={selectedCourses} setTheme,
setSelection={setSelectedCourses} }}
hideOtherCourses={hideOtherCourses} />
start={new Date(2022, 10, 3)} <Optionbar
events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({ {...{
id: nome, mode,
name: _.split(nome, '-', 1)[0].trim(), setMode,
start: new Date(dataInizio), source,
end: new Date(dataFine), setSource,
docenti: docenti.map(({ nome, cognome }) => onHelp: () => setHelpVisible(true),
_.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome)) }}
), />
aula: _.startCase(aule[0].codice.toLowerCase()).replace( <EventsView
/([A-Z]) ([1-9])/, mode={mode}
'$1$2' selection={selectedCourses}
), setSelection={setSelectedCourses}
}))} hideOtherCourses={hideOtherCourses}
/> start={new Date(2022, 10, 3)}
{toolOverlayVisible && ( events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
<ToolOverlay id: nome,
visibility={hideOtherCourses} name: _.split(nome, '-', 1)[0].trim(),
toggleVisibility={() => setHideOtherCourses(s => !s)} start: new Date(dataInizio),
onClose={() => { end: new Date(dataFine),
setSelectedCourses([]) docenti: docenti.map(({ nome, cognome }) =>
setHideOtherCourses(false) _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome))
}} ),
/> aula: _.startCase(aule[0].codice.toLowerCase()).replace(
)} /([A-Z]) ([1-9])/,
{showMobileMenu && ( '$1$2'
<HamburgerMenu ),
{...{ }))}
mode, />
setMode, {toolOverlayVisible && (
source, <ToolOverlay
setSource, visibility={hideOtherCourses}
theme, toggleVisibility={() => setHideOtherCourses(s => !s)}
setTheme, onClose={() => {
onClose: () => { setSelectedCourses([])
setShowMobileMenu(false) setHideOtherCourses(false)
}, }}
}} />
/> )}
)} {showMobileMenu && (
{helpVisible && ( <HamburgerMenu
<Popup {...{
title={ mode,
<> setMode,
<Icon name="info" /> Guida source,
</> setSource,
} theme,
onClose={() => setHelpVisible(false)} setTheme,
> onClose: () => {
<Help /> setShowMobileMenu(false)
</Popup> },
)} }}
</> />
) )}
{helpVisible && (
<Popup
title={
<>
<Icon name="info" /> Guida
</>
}
onClose={() => setHelpVisible(false)}
>
<Help />
</Popup>
)}
</>
)
} }
render(<App />, document.body) render(<App />, document.body)

29
src/styles/main.scss
Unescape Escape View File

@ -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 { .events-view {
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
@media screen and (max-width: $device-s-width), (pointer: coarse) {
height: calc(100vh - 8rem);
}
.course-view { .course-view {
padding: 1rem; padding: 1rem;

Write Preview
Loading…
Cancel
Save