Merge pull request 'Fixed iOS date picker bug' (#14) from dev into main

Reviewed-on: #14

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "printWidth": 90,
+    "singleQuote": true,
+    "quoteProps": "consistent",
+    "tabWidth": 4,
+    "semi": false,
+    "arrowParens": "avoid",
+    "proseWrap": "always"
+}

src/components/DatePicker.jsx

@@ -1,12 +1,19 @@
 import { useRef } from 'preact/hooks'
 import { Icon } from './Icon.jsx'
 
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
 export const DatePicker = ({ date, setDate }) => {
     const input = useRef()
 
     const [year, month, day] = date.split('T')[0].split('-')
     return (
-        <div class="date-picker" onClick={() => input.current.showPicker()}>
+        <div
+            class="date-picker"
+            onClick={() =>
+                isSafari ? input.current.focus() : input.current.showPicker()
+            }
+        >
             <input
                 ref={input}
                 type="date"

src/components/EventsView.jsx

@@ -24,7 +24,6 @@ const viewModeMap = {
 
 export const EventsView = ({ mode, source, ...viewProps }) => {
     // const Mode = viewModeMap[mode]
-    
 
     if (source === 'orario') {
         return (

src/components/Help.jsx

@@ -4,33 +4,31 @@ export const Help = ({}) => (
     <>
         <h3>Visualizzazione Corsi</h3>
         <p>
-            Per visualizzare i corsi che ti interessano nella tabella
-            dell'orario, devi prima selezionarli. Puoi selezionare dei corsi
-            cliccandoli, cercandoli nelle sezioni Primo anno (<b>I</b>), Secondo
-            anno (<b>II</b>), Terzo anno (<b>III</b>), Magistrale (<b>M</b>), o
-            Tutti.
+            Per visualizzare i corsi che ti interessano nella tabella dell'orario, devi
+            prima selezionarli. Puoi selezionare dei corsi cliccandoli, cercandoli nelle
+            sezioni Primo anno (<b>I</b>), Secondo anno (<b>II</b>), Terzo anno (
+            <b>III</b>), Magistrale (<b>M</b>), o Tutti.
         </p>
         <p>
-            Una volta compiuta la selezione, è possibile vedere la tabella delle
-            lezioni andando nella visualizzazione Orario (
+            Una volta compiuta la selezione, è possibile vedere la tabella delle lezioni
+            andando nella visualizzazione Orario (
             <Icon name="calendar_view_month" />)
         </p>
         <p>
-            Per via di eventuali preferenze personali, è possibile cambiare
-            l'orientazione della tabella Orario trasponendola, utilizzando il
-            pulsante Trasponi (
+            Per via di eventuali preferenze personali, è possibile cambiare l'orientazione
+            della tabella Orario trasponendola, utilizzando il 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 (
+            È 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
-            bottone <Icon name="print" /> (è consigliato controllare le opzioni
-            di stampa per ottenere un risultato soddisfacente).
+            Da desktop puoi stampare l'orario attualmente visibile con il bottone{' '}
+            <Icon name="print" /> (è consigliato controllare le opzioni di stampa per
+            ottenere un risultato soddisfacente).
         </p>
         <h3>Bug &amp; Contatti</h3>
         <p>

src/components/SettingsBar.jsx

@@ -7,13 +7,9 @@ export const SettingsBar = ({ theme, setTheme, date, setDate }) => {
             <div class="settings-group">
                 <button
                     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>
                 <DatePicker date={date} setDate={setDate} />
             </div>

src/components/Toolbar.jsx

@@ -24,8 +24,7 @@ export const Toolbar = ({
                 </button>
             </div>
             <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 class="option-group">
                 <div class="item option">
@@ -64,13 +63,9 @@ export const Toolbar = ({
                 <div class="item option">
                     <button
                         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>
                 </div>
                 <div class="item option">

src/components/view/Courses.jsx

@@ -72,27 +72,18 @@ export const Courses = ({
                         }
                         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>

src/components/view/Schedule.jsx

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

src/interval-layout.js

@@ -42,10 +42,7 @@ function layoutBlockEvents(events) {
         let viableIndex = 0
         while (
             result.filter(
-                e =>
-                    e.index === viableIndex &&
-                    e.start < event.end &&
-                    event.start < e.end
+                e => e.index === viableIndex && e.start < event.end && event.start < e.end
             ).length !== 0
         ) {
             viableIndex += 1
@@ -57,8 +54,7 @@ function layoutBlockEvents(events) {
     return result
 }
 export function layoutEvents(events) {
-    const overlap = (event, block) =>
-        event.start < block.end && block.start < event.end
+    const overlap = (event, block) => event.start < block.end && block.start < event.end
 
     events.sort((a, b) => a.start - b.start)
 
@@ -68,10 +64,7 @@ export function layoutEvents(events) {
         if (blocks.length > 0) {
             layout = layout.filter(block => !overlap(event, block))
             layout.push({
-                start: Math.min(
-                    event.start,
-                    ...blocks.map(block => block.start)
-                ),
+                start: Math.min(event.start, ...blocks.map(block => block.start)),
                 end: Math.max(event.end, ...blocks.map(block => block.end)),
                 events: blocks.flatMap(block => block.events).concat([event]),
             })

src/main.jsx

@@ -53,8 +53,7 @@ function specialEventPatches(eventi) {
     // Il laboratorio del primo anno in realtà è in due gruppi separati
     eventi.forEach(evento => {
         if (
-            evento.nome ===
-            'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE'
+            evento.nome === 'LABORATORIO DI INTRODUZIONE ALLA MATEMATICA COMPUTAZIONALE'
         ) {
             if (evento.docenti[0].nome === 'GIOVANNI') {
                 evento.nome += ' (A)'
@@ -75,9 +74,7 @@ function formatEvents(timetable) {
             name: _.split(nome, '-', 1)[0].trim(),
             start: new Date(dataInizio),
             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)),
         }
     })
@@ -191,10 +188,7 @@ const App = ({}) => {
     // const [mode, setMode] = usePersistentState('orario.mode', MODE_COURSES)
 
     // Selection
-    const [selectedCourses, setSelectedCourses] = usePersistentState(
-        'selection',
-        []
-    )
+    const [selectedCourses, setSelectedCourses] = usePersistentState('selection', [])
 
     // Menus
     const [helpVisible, setHelpVisible] = useState(false)
@@ -265,16 +259,15 @@ const App = ({}) => {
                     ) : timetables['tutti'].length === 0 ? (
                         <div class="warning">
                             <p>
-                                Non esistono corsi per la settimana selezionata:
-                                buone vacanze! 🎉
+                                Non esistono corsi per la settimana selezionata: buone
+                                vacanze! 🎉
                             </p>
                             <p>
-                                Per cambiare settimana puoi usare il widget
-                                Calendario (
+                                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 (
+                                In versione mobile, il widget Calendario è situato dentro
+                                il Menu (
                                 <Icon name="menu" />)
                             </p>
                         </div>

src/styles/main.scss

@@ -644,8 +644,7 @@ body {
                 border: 1px solid var(--border-600);
                 border-radius: 10px 10px 0 0;
 
-                @media screen and (max-width: $device-s-width),
-                    (pointer: coarse) {
+                @media screen and (max-width: $device-s-width), (pointer: coarse) {
                     font-size: 12px;
                 }
 
@@ -700,10 +699,7 @@ body {
 
                 &.original {
                     grid-template-columns: auto repeat(5, 1fr);
-                    grid-template-rows: min-content repeat(
-                            var(--time-slots),
-                            1fr
-                        );
+                    grid-template-rows: min-content repeat(var(--time-slots), 1fr);
 
                     .transpose-button,
                     .day-label {
@@ -730,22 +726,16 @@ body {
                     }
 
                     .event-block-wrapper {
-                        grid-row: calc(var(--time-start) + 2) /
-                            calc(var(--time-end) + 2);
+                        grid-row: calc(var(--time-start) + 2) / calc(var(--time-end) + 2);
                         grid-column: calc(var(--day-position) + 1);
 
                         .event-block {
                             .event-wrapper {
                                 width: calc(100% / var(--of));
-                                height: calc(
-                                    100% * var(--size) / var(--block-size)
-                                );
+                                height: calc(100% * var(--size) / var(--block-size));
                                 transform: translateX(calc(100% * var(--index)))
                                     translateY(
-                                        calc(
-                                            100% * var(--relative-start) /
-                                                var(--size)
-                                        )
+                                        calc(100% * var(--relative-start) / var(--size))
                                     );
                             }
                         }
@@ -753,10 +743,7 @@ body {
                 }
                 &.transposed {
                     grid-template-rows: auto repeat(5, 1fr);
-                    grid-template-columns: min-content repeat(
-                            var(--time-slots),
-                            1fr
-                        );
+                    grid-template-columns: min-content repeat(var(--time-slots), 1fr);
 
                     .transpose-button,
                     .day-label {
@@ -792,15 +779,10 @@ body {
                         .event-block {
                             .event-wrapper {
                                 height: calc(100% / var(--of));
-                                width: calc(
-                                    100% * var(--size) / var(--block-size)
-                                );
+                                width: calc(100% * var(--size) / var(--block-size));
                                 transform: translateY(calc(100% * var(--index)))
                                     translateX(
-                                        calc(
-                                            100% * var(--relative-start) /
-                                                var(--size)
-                                        )
+                                        calc(100% * var(--relative-start) / var(--size))
                                     );
                             }
                         }

src/utils.jsx

@@ -12,15 +12,7 @@ export const WEEK_DAYS = [
     'Sabato',
 ]
 
-export const WEEK_DAYS_SHORT = [
-    'Dom',
-    'Lun',
-    'Mar',
-    'Mer',
-    'Gio',
-    'Ven',
-    'Sab'
-]
+export const WEEK_DAYS_SHORT = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
 
 // Hashing
 
@@ -32,12 +24,8 @@ export function hashString(str, seed = 0) {
         h1 = Math.imul(h1 ^ ch, 2654435761)
         h2 = Math.imul(h2 ^ ch, 1597334677)
     }
-    h1 =
-        Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
-        Math.imul(h2 ^ (h2 >>> 13), 3266489909)
-    h2 =
-        Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
-        Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
     return 4294967296 * (2097151 & h2) + (h1 >>> 0)
 }
 
@@ -50,9 +38,7 @@ export function prettyCourseName(name) {
         .map(word => {
             if (word.trim().length === 0) return word
 
-            return /(^del|^nel|^di$|^dei$|^con$|^alla$|^per$|^e$|^la$)/.test(
-                word
-            )
+            return /(^del|^nel|^di$|^dei$|^con$|^alla$|^per$|^e$|^la$)/.test(word)
                 ? word
                 : word[0].toUpperCase() + word.slice(1)
         })
@@ -61,7 +47,7 @@ export function prettyCourseName(name) {
         .replaceAll('IIi', 'III')
         .replaceAll('Iii', 'III')
         .replaceAll(/'(.)/g, ({}, letter) => "'" + letter.toUpperCase())
-        .replaceAll(/\((a|b)\)/g, ({}, letter) => "(" + letter.toUpperCase() + ")")
+        .replaceAll(/\((a|b)\)/g, ({}, letter) => '(' + letter.toUpperCase() + ')')
 }
 
 export function prettyAulaName(name) {