reintrodotta visualizzazione lista rimossa nel commit precedente

pull/7/head
Francesco Baldino 9 months ago
parent 7efb311a61
commit af41177561

@ -12,7 +12,8 @@ export const Help = ({}) => (
</p>
<p>
Una volta compiuta la selezione, è possibile vedere la tabella delle
lezioni andando nella visualizzazione Orario
lezioni andando nella visualizzazione Orario (
<Icon name="calendar_month" />)
</p>
<p>
Per via di eventuali preferenze personali, è possibile cambiare
@ -20,6 +21,11 @@ export const Help = ({}) => (
pulsante Trasponi (
<Icon name="switch_left" style="transform: rotate(-45deg)" />)
</p>
<p>
È anche possibile visualizzare in uno specchietto riassuntivo
soltanto i corsi selezionati, andando nella visualizzazione Lista (
<Icon name="list" />)
</p>
<h3>Stampa</h3>
<p>
Da desktop puoi stampare l'orario attualmente visibile con il

@ -25,6 +25,11 @@ export const OptionBar = ({ source, setSource }) => {
label: <Icon name="calendar_month" />,
icon: true,
},
{
value: 'lista',
label: <Icon name="list" />,
icon: true,
},
]}
value={source}
setValue={setSource}

@ -38,6 +38,7 @@ export const Toolbar = ({
<CompoundButton
options={[
{ value: 'orario', label: 'Orario' },
{ value: 'lista', label: 'Lista' },
]}
value={source}
setValue={setSource}

@ -4,11 +4,21 @@ import _ from 'lodash'
import { useEffect, useRef, useState } from 'preact/hooks'
import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
export const Courses = ({ source, timetables, selection, setSelection }) => {
export const Courses = ({
source,
timetables,
selection,
setSelection,
hideOtherCourses,
}) => {
const events = timetables[source]
const selectionSet = new Set(selection)
const eventsByCourse = _.groupBy(_.sortBy(events, 'id'), 'id')
const visibleEvents = hideOtherCourses
? events.filter(e => selectionSet.has(e.id))
: events
const eventsByCourse = _.groupBy(_.sortBy(visibleEvents, 'id'), 'id')
const profsPerCourse = _.mapValues(eventsByCourse, events =>
_.uniq(events.flatMap(event => event.docenti))
@ -42,6 +52,15 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
return (
<div class="course-view" ref={element}>
{hideOtherCourses && selection.length === 0 && (
<div class="no-courses-warning">
<p>Non hai ancora selezionato nessun corso.</p>
<p>
Clicca sui corsi nelle altre visuali per selezionarli e
visualizzarli nella lista
</p>
</div>
)}
<div class="wrap-container">
{Object.entries(eventsByCourse).map(([id, courseEvents]) => (
<div
@ -52,18 +71,27 @@ export const Courses = ({ source, timetables, selection, setSelection }) => {
}
data-course-id={id}
onClick={() => {
if (!selectionSet.has(id)) setSelection([...selection, id])
else setSelection(selection.filter(selId => selId !== id))
if (!selectionSet.has(id))
setSelection([...selection, id])
else
setSelection(
selection.filter(selId => selId !== id)
)
}}
>
<div class="title">{prettyCourseName(courseEvents[0].name)}</div>
<div class="docenti">{profsPerCourse[id].join(', ')}</div>
<div class="title">
{prettyCourseName(courseEvents[0].name)}
</div>
<div class="docenti">
{profsPerCourse[id].join(', ')}
</div>
<div class="events">
{courseEvents.map(course => (
<div>
{WEEK_DAYS[course.start.getDay()]}{' '}
{format(course.start, 'H:mm')}&ndash;
{format(course.end, 'H:mm')} {course.aule.join(', ')}
{format(course.end, 'H:mm')}{' '}
{course.aule.join(', ')}
</div>
))}
</div>

@ -211,7 +211,7 @@ const ScheduleCard = ({
)
}
export const Schedule = ({ timetables, selection, setSelection }) => {
export const Schedule = ({ timetables, selection }) => {
const [hasSeenTranspose, setHasSeenTranspose] = usePersistentState(
'transpose_info',
'false'

@ -130,16 +130,41 @@ async function loadCalendari() {
}
}
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 = ({}) => {
// Clear persistent states unless state_token corresponds to the one passed
// as the argument. Useful with breaking updates. Change this token if your
// (breaking) update needs a reset of persistent states to avoid crashes.
//
// Use any random string of your choice
clearOldPersistentStates('e73cba02')
// clearOldPersistentStates('e73cba02')
// Data Sources
const [source, setSource] = usePersistentState('source', 'magistrale')
const [view, setView] = usePersistentState('view', 'magistrale')
const [timetables, setTimetables] = useState(null)
useEffect(async () => {
setTimetables(await loadCalendari())
@ -175,8 +200,8 @@ const App = ({}) => {
<>
<Toolbar
{...{
source,
setSource,
source: view,
setSource: setView,
onShowMenu: () => setShowMobileMenu(true),
onHelp: () => setHelpVisible(true),
theme,
@ -185,8 +210,8 @@ const App = ({}) => {
/>
<OptionBar
{...{
source,
setSource,
source: view,
setSource: setView,
onHelp: () => setHelpVisible(true),
}}
orizzontale
@ -194,39 +219,15 @@ const App = ({}) => {
{timetables && (
<div class="content">
{source === 'orario' ? (
<Schedule
selection={selectedCourses}
setSelection={setSelectedCourses}
start={new Date(2022, 10, 3)}
source={source}
timetables={timetables}
/>
) : (
<Courses
selection={selectedCourses}
setSelection={setSelectedCourses}
start={new Date(2022, 10, 3)}
source={source}
timetables={timetables}
/>
)}
<View
selection={selectedCourses}
setSelection={setSelectedCourses}
view={view}
timetables={timetables}
/>
</div>
)}
{/* toolOverlayVisible && (
<ToolOverlay
mode={mode}
toggleMode={() =>
setMode(
mode === MODE_COURSES ? MODE_SCHEDULE : MODE_COURSES
)
}
onClose={() => {
setSelectedCourses([])
setMode(MODE_COURSES)
}}
/>
) */}
{showMobileMenu && (
<HamburgerMenu
{...{

@ -494,6 +494,23 @@ body {
overflow-y: scroll;
text-align: center;
gap: 1rem;
.no-courses-warning {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
p {
text-align: center;
}
}
.wrap-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

Loading…
Cancel
Save