Merge pull request #211 from NIAEFEUP/schedule__toggle

Update Classes Types on Schedule Caption #206

package.json

@@ -40,7 +40,7 @@
     "react-dom": "^18.1.0",
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-sortablejs": "^6.0.0",
     "react-toastify": "^9.1.1",
     "tailwind-merge": "^2.2.0",
@@ -78,7 +78,6 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.1",
     "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
     "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.10",
     "tailwindcss": "^3.4.1"

src/@types/new_index.d.ts

@@ -33,8 +33,9 @@ export type CourseInfo = {
 
 export type Class = {
     // course_unit_id: number, // é mesmo necessário ??
+    // composed_name: string,
+    id: number,
     name: string
-    composed_name: string,
     slots: Array<Slot>
 }
 
@@ -64,11 +65,12 @@ export type CourseOption = {
     course_id: number,
     picked_class_id: number,
     locked: boolean,
-    filteredTeachers: Array<ProfessorInformation>,
+    filteredTeachers: Array<number>,
     hide: Array<lesson_type>,
 }
 
 export type ProfessorInformation = {
+    id: number
     acronym: string
     name: string
 }

src/api/storage.ts

@@ -1,4 +1,5 @@
 import { MultipleOptions } from '../@types'
+import { CourseInfo, Major } from '../@types/new_index'
 import { getCourseTeachers } from '../utils'
 import API from './backend'
 
@@ -27,42 +28,52 @@ const writeStorageInvalid = (key: string, INITIAL_VALUE?: any) => {
   localStorage.setItem(key + '.fetch-date', null)
 }
 
-const getOptionsStorage = (): MultipleOptions => {
-  const key = 'niaefeup-tts.options'
-  try {
-    if (isStorageValid(key, 7)) {
-      const courseOptions: MultipleOptions = JSON.parse(localStorage.getItem(key))
-
-      for (let i = 0; i < courseOptions.options.length; i++) {
-        for (let j = 0; j < courseOptions.options[i].length; j++) {
-          if (courseOptions.options[i][j].teachers === undefined) {
-            courseOptions.options[i][j].teachers = getCourseTeachers(courseOptions.options[i][j])
-          }
-          if (courseOptions.options[i][j].filteredTeachers === undefined) {
-            courseOptions.options[i][j].filteredTeachers = getCourseTeachers(courseOptions.options[i][j])
-          }
-        }
-      }
-
-      for (let i = 0; i < courseOptions.selected.length; i++) {
-          if (courseOptions.selected[i].teachers === undefined) {
-            courseOptions.selected[i].teachers = getCourseTeachers(courseOptions.selected[i])
-          }
-          if (courseOptions.selected[i].filteredTeachers === undefined) {
-            courseOptions.selected[i].filteredTeachers = getCourseTeachers(courseOptions.selected[i])
-          }
-      }
-
-      return courseOptions
-
-    } else {
-      writeStorageInvalid(key, INITIAL_VALUE)
-      return INITIAL_VALUE
-    }
-  } catch (error) {
-    console.warn(error)
-    return INITIAL_VALUE
-  }
+// const getOptionsStorage = (): MultipleOptions => {
+//   const key = 'niaefeup-tts.options'
+//   try {
+//     if (isStorageValid(key, 7)) {
+//       const courseOptions: MultipleOptions = JSON.parse(localStorage.getItem(key))
+
+//       for (let i = 0; i < courseOptions.options.length; i++) {
+//         for (let j = 0; j < courseOptions.options[i].length; j++) {
+//           if (courseOptions.options[i][j].teachers === undefined) {
+//             courseOptions.options[i][j].teachers = getCourseTeachers(courseOptions.options[i][j])
+//           }
+//           if (courseOptions.options[i][j].filteredTeachers === undefined) {
+//             courseOptions.options[i][j].filteredTeachers = getCourseTeachers(courseOptions.options[i][j])
+//           }
+//         }
+//       }
+
+//       for (let i = 0; i < courseOptions.selected.length; i++) {
+//           if (courseOptions.selected[i].teachers === undefined) {
+//             courseOptions.selected[i].teachers = getCourseTeachers(courseOptions.selected[i])
+//           }
+//           if (courseOptions.selected[i].filteredTeachers === undefined) {
+//             courseOptions.selected[i].filteredTeachers = getCourseTeachers(courseOptions.selected[i])
+//           }
+//       }
+
+//       return courseOptions
+
+//     } else {
+//       writeStorageInvalid(key, INITIAL_VALUE)
+//       return INITIAL_VALUE
+//     }
+//   } catch (error) {
+//     console.warn(error)
+//     return INITIAL_VALUE
+//   }
+// }
+
+const setMajorsStorage = (majors : Major[]) => {
+  const key = 'niaefeup-tts.majors'
+  writeStorage(key, majors)
+}
+
+const getMajorsStorage = () => {
+  const key = 'niaefeup-tts.majors'
+  return JSON.parse(localStorage.getItem(key))
 }
 
 const setOptionsStorage = (courseOptions: MultipleOptions): void => {
@@ -92,7 +103,9 @@ const updateScrappeInfo = async () => {
 }
 
 const StorageAPI = {
-  getOptionsStorage,
+  // getOptionsStorage,
+  setMajorsStorage,
+  getMajorsStorage,
   setOptionsStorage,
   deleteOptionsStorage,
   updateScrappeInfo,

src/app.css

@@ -67,6 +67,46 @@ button {
   --epr-category-label-bg-color: rgb(242, 244, 247);
 }
 
+
+.stamp {
+  @apply w-10 h-5 inline-block p-10 mt-5 bg-white relative text-center filter drop-shadow-md;
+  background: radial-gradient(
+    transparent 0px,     
+    transparent 4px, 
+    white 4px,
+    white
+  );
+  background-size: 20px 20px;
+  background-position: -10px -10px;
+}
+
+.stamp::after {
+  @apply absolute left-5 top-5 right-5 bottom-5 z-[-1];
+  content: '';
+}
+
+.stamp::before {
+  @apply absolute bottom-0 left-0 font-bold text-white opacity-75 text-4xl leading-normal p-5;
+  content: 'CSS3';
+}
+
+.stamp-card-inner {
+  transition: transform 0.5s;
+  transform-style: preserve-3d;
+}
+
+.stamp-card:hover .stamp-card-inner {
+  transform: rotateY(180deg);
+}
+
+.stamp-card-front, .stamp-card-back {
+  -webkit-backface-visibility: hidden; 
+}
+
+.stamp-card-back {
+  transform: rotateY(180deg);
+}
+
 #option-header .EmojiPickerReact.epr-dark-theme {
   --epr-bg-color: rgb(26, 28, 35);
   --epr-category-label-bg-color: rgb(26, 28, 35);

src/components/home/FeatureCards.tsx

@@ -0,0 +1,58 @@
+import { Button } from '../ui/button'
+import { BoltIcon, FunnelIcon, CameraIcon, ShareIcon, HashtagIcon, PencilIcon } from '@heroicons/react/24/outline'
+
+// Define features with title, description, and the Icon component
+const features = [
+  {
+    title: 'Reordenar e personalizar as opções de horário',
+    description:
+      'Dá-te controlo total para ajustar e personalizar as tuas opções de horário conforme a tua disponibilidade e necessidade.',
+    Icon: PencilIcon,
+  },
+  {
+    title: 'Partilhar horários com amigos',
+    description:
+      'Permite que compartilhes facilmente o teu horário de modo a que escolhas as mesmas turmas que os teus amigos.',
+    Icon: ShareIcon,
+  },
+  {
+    title: 'Definir até 10 opções de horários',
+    description:
+      'Oferece a flexibilidade de gerir múltiplas opções de horários conforme a definido nos parâmetros do SIGARRA.',
+    Icon: HashtagIcon,
+  },
+  {
+    title: 'Completar o horário com cadeiras aleatórias',
+    description:
+      'No caso de indecisão, preenche automaticamente o teu horário com cadeiras aleatórias para explorar as diferentes possibilidades.',
+    Icon: BoltIcon,
+  },
+  {
+    title: 'Tirar print ao horário',
+    description: 'Permite que guardes ou imprimas o teu horário para referência rápida.',
+    Icon: CameraIcon,
+  },
+  {
+    title: 'Filtrar as opções de horários pelos professores',
+    description: 'Facilita a escolha de horários com base nos teus professores preferidos.',
+    Icon: FunnelIcon,
+  },
+]
+
+const FeatureCards = () => {
+  return (
+    <div className="m-4 grid grid-cols-1 gap-4 sm:m-8 sm:grid-cols-2 sm:gap-6 lg:m-12 lg:grid-cols-3 lg:gap-12">
+      {features.map((feature, index) => (
+        <div key={index} className="rounded-lg bg-white p-4 text-center shadow-lg dark:bg-dark sm:p-5">
+          <Button className="relative left-0 top-0 mx-auto h-16 w-16 flex-grow cursor-default rounded-full border-4 border-primary bg-inherit text-primary hover:bg-secondary dark:bg-inherit dark:text-primary sm:h-20 sm:w-20">
+            <feature.Icon className="sm:h-15 sm:w-15 mx-auto h-10 w-10" />
+          </Button>
+          <h3 className="sm:text-md py-2 text-sm font-bold">{feature.title}</h3>
+          <p className="text-xs sm:text-sm">{feature.description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FeatureCards

src/components/planner/Schedule.tsx

@@ -7,6 +7,7 @@ import { minHour, maxHour, convertHour, convertWeekdayLong, timesCollide } from
 import { useShowGrid } from '../../hooks'
 import ToggleScheduleGrid from './schedule/ToggleScheduleGrid'
 import PrintSchedule from './schedule/PrintSchedule'
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
 
 type Props = {
   courseOptions: CourseOption[]
@@ -206,7 +207,10 @@ const Schedule = ({ courseOptions }: Props) => {
         <div className="flex justify-between gap-5 pl-16">
           <div className="flex flex-wrap gap-4 gap-y-1 text-sm text-gray-600 dark:text-white 2xl:gap-y-2 2xl:text-base">
             {lessonTypes.map((lessonType: string) => (
-              <label className="inline-flex items-center gap-1.5 lg:gap-1" key={`lesson-type-${lessonType}`}>
+              <label
+                className="group relative flex items-center gap-1.5 overflow-x-hidden rounded-lg hover:cursor-pointer lg:gap-1"
+                key={`lesson-type-${lessonType}`}
+              >
                 <input
                   type="checkbox"
                   className="peer hidden"
@@ -219,13 +223,25 @@ const Schedule = ({ courseOptions }: Props) => {
                     }
                   }}
                 />
+
                 <span
-                  className={`h-3.5 w-3.5 rounded shadow 2xl:h-4 2xl:w-4 
-                  ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}`}
-                />
+                  className={`flex h-4 w-4 items-center justify-center rounded 2xl:h-4 2xl:w-4 
+                ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}`}
+                  style={{ marginRight: '5px' }}
+                >
+                  {hiddenLessonsTypes.find((lesson) => lesson === lessonType) ? (
+                    <EyeSlashIcon className={`h-3 w-3 text-white`} />
+                  ) : (
+                    <EyeIcon className={`h-3 w-3 text-white`} />
+                  )}
+                </span>
+
                 <span className="cursor-pointer select-none peer-checked:line-through">
                   {lessonTypesDic[lessonType]}
                 </span>
+
+                {/* Shine box */}
+                <div className="z-5 absolute -inset-full top-0 block h-full w-1/2 -skew-x-12 transform bg-gradient-to-r from-transparent to-white opacity-40 group-hover:animate-shine" />
               </label>
             ))}
           </div>
@@ -237,11 +253,13 @@ const Schedule = ({ courseOptions }: Props) => {
       </div>
 
       {/* Schedule Mobile */}
-      <div className="flex h-full w-full flex-col items-center justify-start space-y-2 lg:hidden">
+      <div className="flex h-full w-full flex-col items-center justify-start gap-2 space-y-2 lg:hidden">
         {lessonsGroupedByDays.length > 0 ? (
           lessonsGroupedByDays.map((lessons: Lesson[], dayNumber: number) => (
             <div className="flex w-full items-center justify-start gap-2" key={`responsive-lesson-row-${dayNumber}`}>
-              <div className="h-full w-1 rounded bg-primary" />
+              <div className="flex h-full rounded bg-primary p-1">
+                <strong className="text-xl text-white">{convertWeekdayLong(dayNumber)[0]}</strong>
+              </div>
               <div className="flex w-full flex-row flex-wrap items-center justify-start gap-2">
                 {lessons.map(
                   (lesson: Lesson, lessonIdx: number) =>

src/components/planner/schedules/ResponsiveLessonBox.tsx

@@ -21,9 +21,28 @@ const ResponsiveLessonBox = ({ lesson, conflict }: Props) => {
       <div
         className={classNames(
           'p-2 text-sm leading-none tracking-tighter text-white',
-          'flex h-full w-full flex-col items-center justify-between gap-6'
+          'flex h-full w-full flex-col items-center justify-between gap-4'
         )}
       >
+        <div className='flex w-full justify-between gap-2'>
+          <strong title="Sigla da Unidade Curricular" className='text-lg'>{lesson.course.acronym}</strong>
+          <span title={getLessonTypeLongName(lessonType)} className='text-lg'>{lessonType}</span>
+        </div>
+
+        <div className="flex flex-col">
+          <span title="Duração">{getLessonBoxTime(lesson.schedule)}</span>
+          <span title="Nome da Turma">
+            {lesson.schedule.composed_class_name ? lesson.schedule.composed_class_name : lesson.schedule.class_name}
+          </span>
+        </div>
+
+        <div className='flex w-full justify-between'>
+          <span title="Sala">{lesson.schedule.location}</span>
+          <span title="Professor(es)" className="whitespace-nowrap">
+            {lesson.schedule.professor_information.map((prof_info) => prof_info.acronym).join(', ')}
+          </span>
+        </div>
+        {/*
         <div className="flex w-full flex-col justify-between gap-2">
           <span className="flex w-full items-center justify-between">
             <strong title="Dia">{convertWeekdayLong(lesson.schedule.day)}</strong>
@@ -45,6 +64,8 @@ const ResponsiveLessonBox = ({ lesson, conflict }: Props) => {
             {lesson.schedule.professor_information.map((prof_info) => prof_info.acronym).join(', ')}
           </span>
         </div>
+        */}
+
       </div>
     </div>
   )