From c8172ad88ab9e30daae7349edb9a8b58f1c63e4a Mon Sep 17 00:00:00 2001
From: Francesco Baldino <francesco.ghog@gmail.com>
Date: Mon, 9 Oct 2023 15:29:51 +0200
Subject: [PATCH] Added warning messages when date outside of lecture period

---
 src/components/Help.jsx          |  2 +-
 src/components/OptionBar.jsx     |  2 +-
 src/components/view/Courses.jsx  |  3 ++-
 src/components/view/Schedule.jsx |  2 +-
 src/main.jsx                     | 24 +++++++++++++------
 src/styles/main.scss             | 40 ++++++++++++--------------------
 6 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/components/Help.jsx b/src/components/Help.jsx
index 97f9e52..0fff8f8 100644
--- a/src/components/Help.jsx
+++ b/src/components/Help.jsx
@@ -13,7 +13,7 @@ export const Help = ({}) => (
         <p>
             Una volta compiuta la selezione, è possibile vedere la tabella delle
             lezioni andando nella visualizzazione Orario (
-            <Icon name="calendar_month" />)
+            <Icon name="calendar_view_month" />)
         </p>
         <p>
             Per via di eventuali preferenze personali, è possibile cambiare
diff --git a/src/components/OptionBar.jsx b/src/components/OptionBar.jsx
index d8078e8..e62e488 100644
--- a/src/components/OptionBar.jsx
+++ b/src/components/OptionBar.jsx
@@ -22,7 +22,7 @@ export const OptionBar = ({ view, setView }) => {
                     options={[
                         {
                             value: 'orario',
-                            label: <Icon name="calendar_month" />,
+                            label: <Icon name="calendar_view_month" />,
                             icon: true,
                         },
                         {
diff --git a/src/components/view/Courses.jsx b/src/components/view/Courses.jsx
index e9b79e3..ecd921b 100644
--- a/src/components/view/Courses.jsx
+++ b/src/components/view/Courses.jsx
@@ -3,6 +3,7 @@ import { format } from 'date-fns'
 import _ from 'lodash'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { prettyCourseName, WEEK_DAYS } from '../../utils.jsx'
+import { Icon } from '../Icon.jsx'
 
 export const Courses = ({
     source,
@@ -53,7 +54,7 @@ export const Courses = ({
     return (
         <div class="course-view" ref={element}>
             {hideOtherCourses && selection.length === 0 && (
-                <div class="no-courses-warning">
+                <div class="warning">
                     <p>Non hai ancora selezionato nessun corso.</p>
                     <p>
                         Clicca sui corsi nelle altre visuali per selezionarli e
diff --git a/src/components/view/Schedule.jsx b/src/components/view/Schedule.jsx
index c820bd0..22eddc4 100644
--- a/src/components/view/Schedule.jsx
+++ b/src/components/view/Schedule.jsx
@@ -46,7 +46,7 @@ const TransposePopup = ({ onClose }) => {
 
 const NoCourseWarning = () => {
     return (
-        <div class="no-courses-warning">
+        <div class="warning">
             <p>Non hai ancora selezionato nessun corso.</p>
             <p>
                 Clicca sui corsi nelle altre visuali per selezionarli e
diff --git a/src/main.jsx b/src/main.jsx
index 8128d6d..c9c2667 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -92,9 +92,6 @@ async function loadCalendari(date) {
     const saturday = new Date(monday)
     saturday.setDate(monday.getDate() + 5)
 
-    console.log(monday.toISOString())
-    console.log(saturday.toISOString())
-
     async function req(id) {
         // Almost directly copy-pasted from Chrome Dev Tools
         const req = await fetch(
@@ -178,10 +175,7 @@ const App = ({}) => {
     // Use any random string of your choice
     // clearOldPersistentStates('e73cba02')
 
-    const [date, setDate] = usePersistentState(
-        'date',
-        new Date('2023-10-24').toISOString()
-    )
+    const [date, setDate] = useState(new Date().toISOString())
 
     // Data Sources
     const [view, setView] = usePersistentState('view', 'magistrale')
@@ -265,6 +259,22 @@ const App = ({}) => {
                                 },
                             }}
                         />
+                    ) : timetables['tutti'].length === 0 ? (
+                        <div class="warning">
+                            <p>
+                                Non esistono corsi per la settimana selezionata:
+                                buone vacanze! 🎉
+                            </p>
+                            <p>
+                                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 (
+                                <Icon name="menu" />)
+                            </p>
+                        </div>
                     ) : (
                         <View
                             selection={selectedCourses}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 12eb11a..303eb41 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -538,6 +538,21 @@ body {
 
     padding: 1rem 0rem;
 
+    .warning {
+        @extend .text-block;
+
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        align-items: center;
+
+        p {
+            text-align: center;
+        }
+    }
+
     .course-view {
         padding: 0rem 1rem;
 
@@ -551,19 +566,6 @@ body {
 
         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));
@@ -632,18 +634,6 @@ body {
         align-items: center;
         gap: 1rem;
 
-        .no-courses-warning {
-            width: 100%;
-
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            align-items: center;
-
-            p {
-                text-align: center;
-            }
-        }
         .schedule-card {
             width: 100%;