Merge pull request #104 from NIAEFEUP/feature/disable-import-temp

Disable import schedule temporarily
NIAEFEUP · Sep 22, 2022 · 4c580cf · 4c580cf
2 parents 715aaa1 + 268c26f
commit 4c580cf
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 101 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,7 @@ import { AboutPage, ProfilePage, FeupExchangePage, TimeTableSchedulerPage, NotFo
 import { getPath, config } from './utils'
 import './app.css'
 
-// Configures the path for pages. 
+// Configures the path for pages.
 const pages = [
   { path: getPath(config.paths.about), location: 'About', element: AboutPage, liquid: true },
   { path: getPath(config.paths.profile), location: 'Profile', element: ProfilePage, liquid: true },
@@ -16,11 +16,10 @@ const pages = [
 
 const redirects = [
   { from: config.pathPrefix, to: getPath(config.paths.planner) },
-  { from: config.pathPrefix.slice(0,-1) , to: getPath(config.paths.planner) },
+  { from: config.pathPrefix.slice(0, -1), to: getPath(config.paths.planner) },
   { from: getPath(config.paths.home), to: getPath(config.paths.about) },
 ]
 
-
 const App = () => (
   <BrowserRouter>
     <Routes>

diff --git a/src/app.css b/src/app.css
@@ -63,7 +63,7 @@ button {
 }
 
 .checkboxes {
-  @apply mx-auto flex flex-wrap items-center justify-center gap-y-4 gap-x-4 md:flex-row md:items-start md:gap-y-6 md:gap-x-12;
+  @apply mx-auto flex flex-wrap items-center justify-center gap-y-2 gap-x-4 md:flex-row md:items-start lg:gap-y-6 lg:gap-x-12;
   margin-top: 1.5rem !important;
 }
 

diff --git a/src/components/home/HeroPlanner.tsx b/src/components/home/HeroPlanner.tsx
@@ -37,7 +37,10 @@ const HeroPlanner = () => {
             <strong>Universidade do Porto</strong>, o <strong>NIAEFEUP</strong> desenvolveu o TTS, uma ferramenta de uso
             fácil, com uma interface simples e polida, que permite aos estudantes preparar as suas opções de horário.
             Tens dúvidas sobre a plataforma? A{' '}
-            <Link className="font-medium text-primary transition-all hover:underline hover:opacity-80" to={getPath(config.paths.faqs)}>
+            <Link
+              className="font-medium text-primary transition-all hover:underline hover:opacity-80"
+              to={getPath(config.paths.faqs)}
+            >
               página das FAQs
             </Link>{' '}
             esclarece as dúvidas mais comuns.
@@ -85,7 +88,7 @@ const HeroPlanner = () => {
             contempla também grandes melhoramentos a nível de acessibilidade e usabilidade, começando pelo adição do
             tema claro ou escuro. Para mais informação detalhada sobre novas funcionalidades, consulta a secção do{' '}
             <Link
-              to={getPath(config.paths.faqs) + "#planner"}
+              to={getPath(config.paths.faqs) + '#planner'}
               className="font-medium text-primary transition-all hover:underline hover:opacity-80"
             >
               TTS na página de FAQs

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -14,11 +14,31 @@ import {
 } from '@heroicons/react/outline'
 
 const navigation = [
-  { title: 'Planner', location: getPath(config.paths.planner), icon: <CollectionIcon className="h-5 w-5" />, wip: false },
-  { title: 'Exchange', location: getPath(config.paths.exchange), icon: <SwitchHorizontalIcon className="h-5 w-5" />, wip: true },
-  { title: 'Profile', location: getPath(config.paths.profile), icon: <UserCircleIcon className="h-5 w-5" />, wip: true },
+  {
+    title: 'Planner',
+    location: getPath(config.paths.planner),
+    icon: <CollectionIcon className="h-5 w-5" />,
+    wip: false,
+  },
+  {
+    title: 'Exchange',
+    location: getPath(config.paths.exchange),
+    icon: <SwitchHorizontalIcon className="h-5 w-5" />,
+    wip: true,
+  },
+  {
+    title: 'Profile',
+    location: getPath(config.paths.profile),
+    icon: <UserCircleIcon className="h-5 w-5" />,
+    wip: true,
+  },
   { title: 'About', location: getPath(config.paths.about), icon: <AtSymbolIcon className="h-5 w-5" />, wip: false },
-  { title: 'FAQs', location: getPath(config.paths.faqs), icon: <QuestionMarkCircleIcon className="h-5 w-5" />, wip: false },
+  {
+    title: 'FAQs',
+    location: getPath(config.paths.faqs),
+    icon: <QuestionMarkCircleIcon className="h-5 w-5" />,
+    wip: false,
+  },
 ]
 
 type Props = {
@@ -30,7 +50,7 @@ const Header = ({ siteTitle, location }: Props) => {
   return (
     <Disclosure
       as="nav"
-      className="sticky top-0 z-20 space-x-4 bg-light px-3 py-2 text-gray-800 dark:bg-darkest dark:text-white md:py-0 md:px-3"
+      className="sticky top-0 z-50 space-x-4 bg-light px-3 py-2 text-gray-800 dark:bg-darkest dark:text-white md:py-0 md:px-3"
     >
       {({ open }) => {
         return (
@@ -61,10 +81,11 @@ const Header = ({ siteTitle, location }: Props) => {
                       <Link to={link.location} key={`nav-${index}`} className="relative py-1">
                         <button
                           type="button"
-                          className={`flex h-12 items-center justify-center font-medium capitalize tracking-wide transition ${location === link.title
+                          className={`flex h-12 items-center justify-center font-medium capitalize tracking-wide transition ${
+                            location === link.title
                               ? 'text-primary dark:text-white'
                               : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white'
-                            }`}
+                          }`}
                         >
                           <span className="flex items-center justify-center space-x-1.5">
                             <span>{link.icon}</span>
@@ -99,10 +120,11 @@ type HamburgerProps = {
 
 const Hamburger = ({ open }: HamburgerProps) => (
   <div
-    className={`z-50 md:hidden ${open
+    className={`z-50 md:hidden ${
+      open
         ? 'absolute top-2 right-2 my-auto flex h-6 items-center justify-end space-x-2'
         : 'flex w-full items-center justify-between'
-      }`}
+    }`}
   >
     <Link to={config.pathPrefix}>
       {open ? (
@@ -152,10 +174,11 @@ const Mobile = ({ location }: MobileProps) => (
         <Link to={link.location} className="relative h-auto" key={`mobile-nav-${index}`}>
           <button
             type="button"
-            className={`flex h-auto items-center justify-center font-medium capitalize tracking-wide transition ${location === link.title
+            className={`flex h-auto items-center justify-center font-medium capitalize tracking-wide transition ${
+              location === link.title
                 ? 'text-primary dark:text-white'
                 : 'text-gray-800/70 hover:text-gray-800 dark:text-white/60 dark:hover:text-white'
-              }`}
+            }`}
           >
             <span className="flex items-center justify-center space-x-2">
               <span>{link.icon}</span>

diff --git a/src/components/planner/ClassesTypeCheckboxes.tsx b/src/components/planner/ClassesTypeCheckboxes.tsx
@@ -16,11 +16,11 @@ const ClassesTypeCheckboxes = ({ classesTHook, classesTPHook }: Props) => {
         <input
           type="checkbox"
           id="checkbox-classesT"
-          className="checkbox"
+          className="checkbox-small"
           checked={classesT}
           onChange={(event) => setClassesT(event.target.checked)}
         />
-        <label className="cursor-pointer text-sm font-medium capitalize tracking-tight" htmlFor="checkbox-classesT">
+        <label className="cursor-pointer text-xs font-medium capitalize tracking-tight" htmlFor="checkbox-classesT">
           <span>Teóricas</span>
         </label>
       </div>
@@ -31,11 +31,11 @@ const ClassesTypeCheckboxes = ({ classesTHook, classesTPHook }: Props) => {
         <input
           type="checkbox"
           id="checkbox-classesTP"
-          className="checkbox"
+          className="checkbox-small"
           checked={classesTP}
           onChange={(event) => setClassesTP(event.target.checked)}
         />
-        <label className="cursor-pointer text-sm font-medium capitalize tracking-tight" htmlFor="checkbox-classesTP">
+        <label className="cursor-pointer text-xs font-medium capitalize tracking-tight" htmlFor="checkbox-classesTP">
           <span>Práticas</span>
         </label>
       </div>

diff --git a/src/components/planner/HelpModal.tsx b/src/components/planner/HelpModal.tsx
@@ -20,15 +20,15 @@ const HelpModal = () => {
       <button
         onClick={openModal}
         title="Limpar memória de opções de horário"
-        className="inline-flex w-full items-center justify-center gap-1.5 rounded bg-tertiary p-2 text-center 
-          text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+        className="inline-flex w-full items-center justify-center gap-1.5 whitespace-nowrap rounded bg-tertiary p-2 
+        text-center text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
       >
         <span className="truncate">Preciso de ajuda</span>
         <SupportIcon className="h-5 w-5" />
       </button>
 
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+        <Dialog as="div" className="relative z-10 text-sm" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -130,7 +130,7 @@ const HelpModal = () => {
                         Se persistirem dúvidas sobre como funciona o Time Table Selector, a{' '}
                         <Link
                           className="font-bold text-tertiary transition-all hover:underline hover:opacity-80"
-                          to={getPath(config.paths.faqs) + "#planner"}
+                          to={getPath(config.paths.faqs) + '#planner'}
                         >
                           página de FAQs
                         </Link>{' '}

diff --git a/src/components/planner/LessonTypesModal.tsx b/src/components/planner/LessonTypesModal.tsx
@@ -19,8 +19,8 @@ const LessonTypesModal = () => {
         <button
           type="button"
           onClick={openModal}
-          className="inline-flex w-full items-center justify-center gap-1.5 rounded bg-secondary p-2 text-center 
-          text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex w-full items-center justify-center gap-1.5 whitespace-nowrap rounded bg-secondary p-2 
+          text-center text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <span>Tipos de aula</span>
           <LightBulbIcon className="h-5 w-5" />

diff --git a/src/components/planner/MoreActionsButton.tsx b/src/components/planner/MoreActionsButton.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import StorageAPI from '../../api/storage'
 import { Fragment, useRef } from 'react'
 import { Menu, Transition } from '@headlessui/react'
@@ -18,6 +19,7 @@ type Props = {
 }
 
 const MoreActionsButton = ({ schedule, showGridHook, multipleOptionsHook }: Props) => {
+  const importDisabled = true
   const buttonRef = useRef(null)
   const [showGrid, setShowGrid] = showGridHook
   const [multipleOptions, setMultipleOptions] = multipleOptionsHook
@@ -90,10 +92,10 @@ const MoreActionsButton = ({ schedule, showGridHook, multipleOptionsHook }: Prop
         ref={buttonRef}
         title="Mais opções"
         className="flex h-auto w-full items-center justify-center space-x-2 rounded border-2 border-transparent bg-primary px-2 
-        py-3 text-xs font-medium text-white transition hover:opacity-80 lg:text-sm xl:w-min xl:space-x-0 xl:px-4"
+        py-2 text-xs font-medium text-white transition hover:opacity-80 lg:text-sm xl:w-min xl:space-x-0 xl:px-3"
       >
         <span className="flex xl:hidden">Mais Opções</span>
-        <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
+        <DotsHorizontalIcon className="h-4 w-4" aria-hidden="true" />
       </Menu.Button>
 
       <Transition
@@ -131,32 +133,41 @@ const MoreActionsButton = ({ schedule, showGridHook, multipleOptionsHook }: Prop
             {/* <Menu.Item> is not used here since it prevents input from being triggered */}
             <label
               htmlFor="schedule-upload"
-              title="Importar horário individual JSON (previamente exportado pela platforma)"
-              className="group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm
-            text-gray-900 hover:bg-secondary hover:text-white"
+              title="Importar horário JSON (previamente exportado pela platforma)"
+              className={classNames(
+                'group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-900',
+                importDisabled ? 'opacity-50 hover:cursor-not-allowed' : 'hover:bg-secondary hover:text-white'
+              )}
             >
-              <UploadIcon className="h-5 w-5 text-secondary group-hover:text-white" />
+              <UploadIcon
+                className={classNames('h-5 w-5 text-secondary', importDisabled ? '' : 'group-hover:text-white')}
+              />
               <span>Importar Horário</span>
               <input
                 type="file"
                 accept=".json"
                 className="sr-only"
                 id="schedule-upload"
                 name="schedule-upload"
+                disabled={importDisabled}
                 onChange={(e) => importJSON(e)}
               />
             </label>
 
             <Menu.Item>
               {({ active, disabled }) => (
                 <button
-                  disabled={disabled}
+                  disabled={importDisabled}
                   onClick={() => exportJSON()}
-                  title="Exportar horário individual JSON (pode ser importado futuramente)"
-                  className="group flex w-full items-center gap-2 rounded-md px-2 py-2 
-                  text-sm text-gray-900 hover:bg-secondary hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+                  title="Exportar horário JSON (pode ser importado futuramente)"
+                  className={classNames(
+                    'group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-900',
+                    importDisabled ? 'opacity-50 hover:cursor-not-allowed' : 'hover:bg-secondary hover:text-white'
+                  )}
                 >
-                  <DownloadIcon className="h-5 w-5 text-secondary group-hover:text-white" />
+                  <DownloadIcon
+                    className={classNames('h-5 w-5 text-secondary', importDisabled ? '' : 'group-hover:text-white')}
+                  />
                   <span>Exportar Horário</span>
                 </button>
               )}

diff --git a/src/components/planner/OptionsController.tsx b/src/components/planner/OptionsController.tsx
@@ -36,22 +36,22 @@ const OptionsController = ({ multipleOptionsHook }: Props) => {
   }
 
   return (
-    <div className="flex w-full rounded">
+    <div className="flex w-full rounded text-xs">
       <button
         disabled={options.index === 0}
         onClick={setPreviousOptionIndex}
         title="Ver opção de horário anterior"
-        className="w-min items-center justify-center gap-1.5 rounded-l border-2 border-transparent bg-secondary px-3 py-2
-        text-center text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-min items-center justify-center gap-1.5 rounded-l border-2 border-transparent bg-secondary px-2 py-2
+        text-center font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
       >
-        <ChevronLeftIcon className="h-5 w-5" />
+        <ChevronLeftIcon className="h-4 w-4" />
       </button>
 
       <Menu as="div" className="relative inline-block w-full text-left">
         <Menu.Button
           title="Escolher uma opção de horário"
-          className="flex h-auto w-full items-center justify-center space-x-2 border-2 border-secondary bg-secondary px-2 py-3 text-xs 
-          font-medium text-white transition hover:opacity-80 dark:bg-secondary lg:text-sm"
+          className="flex h-auto w-full items-center justify-center space-x-2 border-2 border-secondary bg-secondary px-2 py-2 
+          font-medium text-white transition hover:opacity-80 dark:bg-secondary"
         >
           <span>Horário #{options.index + 1}</span>
         </Menu.Button>
@@ -76,11 +76,11 @@ const OptionsController = ({ multipleOptionsHook }: Props) => {
                     className={`
                       ${active ? 'bg-secondary text-white' : ''}
                       ${index === options.index ? 'bg-secondary text-white hover:opacity-90' : !active && ''}
-                      group relative flex w-full cursor-pointer select-none items-center gap-2 rounded py-2 px-3 text-sm transition-all
+                      group relative flex w-full cursor-pointer select-none items-center gap-2 rounded py-2 px-3 transition-all
                     `}
                   >
                     <span>Horário {index + 1}</span>
-                    {index === options.index && <CheckIcon className="h-5 w-5" />}
+                    {index === options.index && <CheckIcon className="h-4 w-4" />}
                   </button>
                 )}
               </Menu.Item>
@@ -93,10 +93,10 @@ const OptionsController = ({ multipleOptionsHook }: Props) => {
         disabled={options.index === 9}
         onClick={setNextOptionIndex}
         title="Ver opção de horário seguinte"
-        className="w-min items-center justify-center gap-1.5 rounded-r border-2 border-transparent bg-secondary px-3 py-2
-        text-center text-sm font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-min items-center justify-center gap-1.5 rounded-r border-2 border-transparent bg-secondary px-2 py-2
+        text-center font-normal text-white transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
       >
-        <ChevronRightIcon className="h-5 w-5" />
+        <ChevronRightIcon className="h-4 w-4" />
       </button>
     </div>
   )

diff --git a/src/components/planner/Schedule.tsx b/src/components/planner/Schedule.tsx
@@ -19,22 +19,21 @@ const Schedule = ({ courseOptions, activeClassesT, activeClassesTP, showGrid }:
   const subjects = useMemo(() => {
     const classes = courseOptions.filter((item) => item.option !== null)
 
-    const chosenSubjects =  classes.map((subject, subjectIdx) => ({
+    const chosenSubjects = classes.map((subject, subjectIdx) => ({
       shown: subject.shown,
       course: subject.course.info,
       // A course schedule, may have more than one practical class.
-      practicalLesson: classes.map((item) => 
+      practicalLesson: classes.map((item) =>
         item.schedules.filter((elem) => elem.lesson_type !== 'T' && elem.class_name === subject.option.class_name)
       )[subjectIdx],
-      // A course schedule, may have more than one theoretical class. 
+      // A course schedule, may have more than one theoretical class.
       theoreticalLessons: classes.map((item) =>
         item.schedules.filter((elem) => elem.lesson_type === 'T' && elem.class_name === subject.option.class_name)
       )[subjectIdx],
     }))
-    return chosenSubjects;
+    return chosenSubjects
   }, [courseOptions])
 
-
   const lessons = useMemo(() => {
     let lessonsAcc: Lesson[] = []
 
@@ -44,7 +43,7 @@ const Schedule = ({ courseOptions, activeClassesT, activeClassesTP, showGrid }:
       }
 
       if (subject.shown.TP) {
-        subject.practicalLesson.forEach((lesson) => lessonsAcc.push({ course: subject.course, schedule: lesson}))
+        subject.practicalLesson.forEach((lesson) => lessonsAcc.push({ course: subject.course, schedule: lesson }))
       }
     })