Add ability to adjust credits in special classes

package.json

@@ -4,10 +4,13 @@
   "private": true,
   "homepage": "https://gt-scheduler.org/",
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/material": "^5.15.1",
     "@sentry/react": "^6.12.0",
     "@sentry/tracing": "^6.12.0",
     "@types/react-map-gl": "^6.1.3",

src/components/AppDataLoader/index.tsx

@@ -1,5 +1,6 @@
 import produce, { Immutable, Draft, original, castDraft } from 'immer';
 import React, { useCallback, useMemo } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
 
 import {
   ScheduleContextValue,
@@ -293,6 +294,10 @@ function ContextProvider({
       currentVersion,
     });
 
+  const [adjustedCredits, setAdjustedCredits] = useLocalStorageState<
+    Record<string, number>
+  >('adjustedCredits', { defaultValue: {} });
+
   // Memoize the context values so that they are stable
   const scheduleContextValue = useMemo<ScheduleContextValue>(
     () => [
@@ -301,6 +306,7 @@ function ContextProvider({
         oscar,
         currentVersion,
         allVersionNames,
+        adjustedCredits,
         ...castDraft(scheduleVersion.schedule),
       },
       {
@@ -312,13 +318,15 @@ function ContextProvider({
         deleteVersion,
         renameVersion,
         cloneVersion,
+        setAdjustedCredits,
       },
     ],
     [
       currentTerm,
       oscar,
       currentVersion,
       allVersionNames,
+      adjustedCredits,
       scheduleVersion.schedule,
       setTerm,
       patchSchedule,
@@ -328,6 +336,7 @@ function ContextProvider({
       deleteVersion,
       renameVersion,
       cloneVersion,
+      setAdjustedCredits,
     ]
   );
 

src/components/Course/index.tsx

@@ -1,16 +1,19 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faAngleDown,
   faAngleUp,
   faShareAlt,
   faPalette,
+  faPencilAlt,
   faPlus,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { classes, getContentClassName } from '../../utils/misc';
 import Cancellable from '../../utils/cancellable';
-import { ActionRow, Instructor, Palette, Prerequisite } from '..';
+import { ActionRow, CreditSlider, Instructor, Palette, Prerequisite } from '..';
 import { ScheduleContext } from '../../contexts';
 import { Course as CourseBean, Section } from '../../data/beans';
 import { CourseGpa, CrawlerPrerequisites } from '../../types';
@@ -33,10 +36,18 @@ export default function Course({
   const [prereqOpen, setPrereqOpen] = useState<boolean>(false);
   const [paletteShown, setPaletteShown] = useState<boolean>(false);
   const [gpaMap, setGpaMap] = useState<CourseGpa | null>(null);
+  const [creditSliderShown, setCreditSliderShown] = useState<boolean>(false);
   const isSearching = Boolean(onAddCourse);
   const [
-    { oscar, desiredCourses, pinnedCrns, excludedCrns, colorMap },
-    { patchSchedule },
+    {
+      oscar,
+      desiredCourses,
+      pinnedCrns,
+      excludedCrns,
+      colorMap,
+      adjustedCredits,
+    },
+    { patchSchedule, setAdjustedCredits },
   ] = useContext(ScheduleContext);
 
   useEffect(() => {
@@ -132,28 +143,55 @@ export default function Course({
 
   const prereqControl = (
     nextPrereqOpen: boolean,
+    nextCreditSliderShown: boolean,
     nextExpanded: boolean
   ): void => {
     setPrereqOpen(nextPrereqOpen);
+    setCreditSliderShown(nextCreditSliderShown);
     setExpanded(nextExpanded);
   };
   const prereqAction = {
     icon: faShareAlt,
     styling: { transform: 'rotate(90deg)' },
     onClick: (): void => {
-      prereqControl(true, !prereqOpen ? true : !expanded);
+      prereqControl(
+        true,
+        false,
+        !prereqOpen || creditSliderShown ? true : !expanded
+      );
     },
     tooltip: 'View Prerequisites',
     id: `${course.id}-prerequisites`,
   };
 
+  const sliderControl = (
+    nextPrereqOpen: boolean,
+    nextCreditSliderShown: boolean,
+    nextExpanded: boolean
+  ): void => {
+    setPrereqOpen(nextPrereqOpen);
+    setCreditSliderShown(nextCreditSliderShown);
+    setExpanded(nextExpanded);
+  };
+  const handleSliderChange = (newValue: number): void => {
+    const newAdjustedCredits = {
+      ...adjustedCredits,
+      [`${course.id}-${course.term}`]: newValue,
+    };
+    setAdjustedCredits(newAdjustedCredits);
+    course.adjustedCredits = newValue;
+  };
+
   const pinnedSections = course.sections.filter((section) =>
     pinnedCrns.includes(section.crn)
   );
   const totalCredits = pinnedSections.reduce(
     (credits, section) => credits + section.credits,
     0
   );
+  const adjustableCredits = pinnedSections.some(
+    (section) => section.adjustableCredits
+  );
 
   return (
     <div
@@ -172,7 +210,7 @@ export default function Course({
             : [
                 {
                   icon: expanded ? faAngleUp : faAngleDown,
-                  onClick: (): void => prereqControl(false, !expanded),
+                  onClick: (): void => prereqControl(false, false, !expanded),
                 },
                 prereqAction,
                 {
@@ -207,7 +245,44 @@ export default function Course({
                 : 'N/A'}
             </span>
             {totalCredits > 0 && (
-              <span className="credits">{totalCredits} Credits</span>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  backgroundColor: color,
+                }}
+              >
+                <span className="credits">
+                  {adjustableCredits
+                    ? adjustedCredits[`${course.id}-${course.term}`] ?? 1
+                    : totalCredits}{' '}
+                  Credits
+                </span>
+                {adjustableCredits && (
+                  <div className="adjustable-credits">
+                    <FontAwesomeIcon
+                      className="pencil-icon"
+                      icon={faPencilAlt}
+                      id={`${course.id}-credits`}
+                      onClick={(): void => {
+                        sliderControl(
+                          false,
+                          true,
+                          prereqOpen || !creditSliderShown ? true : !expanded
+                        );
+                      }}
+                    />
+                    <ReactTooltip
+                      anchorId={`${course.id}-credits`}
+                      variant="dark"
+                      place="left"
+                      style={{ fontSize: '110%' }}
+                    >
+                      Adjust Credits
+                    </ReactTooltip>
+                  </div>
+                )}
+              </div>
             )}
           </div>
         )}
@@ -222,7 +297,7 @@ export default function Course({
           />
         )}
       </ActionRow>
-      {expanded && !prereqOpen && (
+      {expanded && !prereqOpen && !creditSliderShown && (
         <div className={classes('hover-container', 'nested')}>
           {includedInstructors.map((name) => {
             let instructorGpa: number | undefined = 0;
@@ -264,9 +339,22 @@ export default function Course({
           )}
         </div>
       )}
-      {expanded && prereqOpen && prereqs !== null && (
+      {expanded && !creditSliderShown && prereqOpen && prereqs !== null && (
         <Prerequisite course={course} prereqs={prereqs} />
       )}
+      {expanded && creditSliderShown && !prereqOpen && (
+        <div
+          className={classes('hover-container', 'nested')}
+          style={{ padding: '2px 15px 2px 15px' }}
+        >
+          <CreditSlider
+            value={adjustedCredits[`${course.id}-${course.term}`] ?? 1}
+            onChange={(_: Event, newValue: number | number[]): void => {
+              handleSliderChange(newValue as number);
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }

src/components/Course/stylesheet.scss

@@ -22,6 +22,22 @@
     }
   }
 
+  .adjustable-credits {
+    z-index: 0;
+    opacity: 0.6;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .pencil-icon {
+      padding: 0px 0px 0px 6px;
+      outline: none;
+      border: none;
+    }
+  }
+
   .palette {
     position: absolute;
     top: 0;

src/components/CreditSlider/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Slider from '@mui/material/Slider';
+
+import './stylesheet.scss';
+
+export type CreditSliderProps = {
+  value: number;
+  onChange: (event: Event, newValue: number | number[]) => void;
+};
+
+export default function CreditSlider({
+  value,
+  onChange,
+}: CreditSliderProps): React.ReactElement {
+  return (
+    <Slider
+      className="slider"
+      min={1}
+      max={12}
+      value={value}
+      valueLabelDisplay="auto"
+      onChange={onChange}
+      marks
+    />
+  );
+}

src/components/CreditSlider/stylesheet.scss

@@ -0,0 +1,21 @@
+.slider {
+  color: white !important;
+
+  .MuiSlider-mark {
+    background-color: transparent;
+  }
+
+  .MuiSlider-thumb {
+    width: 15px;
+    height: 15px;
+
+    &:hover {
+      box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  .MuiSlider-valueLabel {
+    background-color: #222;
+    opacity: 0.9;
+  }
+}

src/components/Header/index.tsx

@@ -27,7 +27,14 @@ export default function Header({
   captureRef,
 }: HeaderProps): React.ReactElement {
   const [
-    { term, oscar, pinnedCrns, allVersionNames, currentVersion },
+    {
+      term,
+      oscar,
+      pinnedCrns,
+      allVersionNames,
+      currentVersion,
+      adjustedCredits,
+    },
     {
       setTerm,
       setCurrentVersion,
@@ -40,11 +47,25 @@ export default function Header({
   const terms = useContext(TermsContext);
 
   const totalCredits = useMemo(() => {
+    const adjustedCourses = new Set();
     return pinnedCrns.reduce((credits, crn) => {
       const crnSection = oscar.findSection(crn);
-      return credits + (crnSection != null ? crnSection.credits : 0);
+      if (
+        crnSection !== undefined &&
+        crnSection.adjustableCredits &&
+        !adjustedCourses.has(`${crnSection.course.id}-${term}`)
+      ) {
+        adjustedCourses.add(`${crnSection.course.id}-${term}`);
+        return (
+          credits + (adjustedCredits[`${crnSection.course.id}-${term}`] ?? 1)
+        );
+      }
+      if (!crnSection?.adjustableCredits) {
+        return credits + (crnSection != null ? crnSection.credits : 0);
+      }
+      return credits;
     }, 0);
-  }, [pinnedCrns, oscar]);
+  }, [pinnedCrns, oscar, adjustedCredits, term]);
 
   const headerActionBarProps = useHeaderActionBarProps(captureRef);
 

src/components/HeaderDisplay/stylesheet.scss

@@ -27,6 +27,7 @@
     padding: 12px;
     display: flex;
     align-items: center;
+    min-width: 115px;
   }
 }
 

src/components/index.ts

@@ -27,3 +27,4 @@ export { default as EventBlocks } from './EventBlocks';
 export { default as Attribution } from './Attribution';
 export { default as Event } from './Event';
 export { default as CourseNavMenu } from './CourseNavMenu';
+export { default as CreditSlider } from './CreditSlider';