Feature/keyboard shortcuts

semesterly/test_utils.py

@@ -17,6 +17,7 @@
 import re
 import shutil
 import socket
+import time
 from contextlib import contextmanager
 from importlib import import_module
 
@@ -522,6 +523,7 @@ def remove_course_from_course_modal(self, n_slots_expected=None):
             (By.CLASS_NAME, "fa-check"), root=modal_header, clickable=True
         )
         remove.click()
+        time.sleep(1)
         self.assert_loader_completes()
         self.assert_invisibility((By.CLASS_NAME, "course-modal"))
         self.assert_n_elements_found(

static/css/timetable/partials/course_modal.scss

@@ -534,6 +534,91 @@
   }
 }
 
+.modal-section-hover {
+  @include theme() {
+    background-color: t("lecture-section-background-hover");
+  }
+  cursor: pointer;
+  float: left;
+  padding: 7px;
+  position: relative;
+  transition: background-color 0.2s;
+  width: 50%;
+
+
+  &:nth-child(2n + 0) {
+    clear: both;
+  }
+
+  h4 {
+    @include theme() {
+      color: t("text-color");
+    }
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0;
+
+    span {
+      display: inline-block;
+      margin-right: 3px;
+      vertical-align: middle;
+    }
+
+    i {
+      display: inline-block;
+      font-size: 14px;
+      line-height: 20px;
+      vertical-align: middle;
+    }
+  }
+
+  h5 {
+    @include theme() {
+      color: t("text-color-thin");
+    }
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+    margin: 0;
+  }
+
+  h6 {
+    @include theme() {
+      color: t("text-color-thin");
+    }
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 14px;
+    margin: 0;
+
+    .green {
+      color: $green;
+    }
+
+    .yellow {
+      color: $yellow;
+    }
+
+    .red {
+      color: $red;
+    }
+  }
+
+  .fa-lock {
+    bottom: 7px;
+    font-size: 14px;
+    line-height: 20px;
+    opacity: 0;
+    position: absolute;
+    right: 7px;
+    text-align: center;
+    transition: opacity 0.3s, visibility 0.3s;
+    visibility: hidden;
+    width: 20px;
+  }
+}
+
 .hidden-modal {
   color: rgba(52, 73, 94, 0);
 }

static/js/redux/ui/CourseModalSection.tsx

@@ -26,6 +26,7 @@ type CourseModalSectionProps = {
   lockOrUnlock: Function;
   hoverSection: Function;
   unHoverSection: Function;
+  isHovered: boolean;
 };
 
 // A. MadooeiP. Simari -> A. Madooei, P. Simari
@@ -65,11 +66,15 @@ const CourseModalSection = (props: CourseModalSectionProps) => {
   } else if (seats < sizeDisplay / 10) {
     benchmark = "yellow";
   }
+
+  const style = props.isHovered ? "modal-section-hover" : "modal-section";
+
   return (
     <div
-      className={classnames("modal-section", {
+      className={classnames(style, {
         locked: props.locked,
         "on-active-timetable": props.isOnActiveTimetable,
+        "bg-lecture-section-background-hover": props.isHovered,
       })}
       onMouseDown={() => props.lockOrUnlock()}
       onMouseEnter={() => props.hoverSection()}

static/js/redux/ui/modals/CourseModalBody.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import isEmpty from "lodash/isEmpty";
 import Reaction from "../reaction";
 import REACTION_MAP from "../../constants/reactions";
@@ -87,6 +87,77 @@ const CourseModalBody = (props: CourseModalBodyProps) => {
     });
   }, []);
 
+  // Code to detect if arrow keys were hit. When detected, will hover over section times
+  // Current goal: just use left/right keys to index forwards or backwards
+
+  // State to store information about which section is being hovered by arrow keys
+  const [currentHoveredSection, setCurrentHoveredSection] = useState(-1);
+  const [currentHoveredSectionObj, setCurrentHoveredSectionObj] =
+    useState<Section | null>(null);
+
+  // Stores all available sections into one list
+  const sectionList: Section[] = [];
+  Object.keys(sectionTypeToSections)
+    .sort()
+    .forEach((sType) => {
+      const sections = sectionTypeToSections[sType];
+      sections.forEach((currentSection: Section) => {
+        sectionList.push(currentSection);
+      });
+    });
+
+  const handleKeyPress = useCallback(
+    (e) => {
+      if (e.key === "ArrowRight") {
+        setCurrentHoveredSection((prevSection) =>
+          prevSection < sectionList.length - 1 ? prevSection + 1 : prevSection
+        );
+      } else if (e.key === "ArrowLeft") {
+        setCurrentHoveredSection((prevSection) =>
+          prevSection >= 0 ? prevSection - 1 : prevSection
+        );
+      } else if (e.key === "Enter") {
+        if (currentHoveredSection >= 0 && currentHoveredSection < sectionList.length) {
+          dispatch(
+            addOrRemoveCourse(
+              props.course?.id,
+              sectionList[currentHoveredSection].meeting_section
+            )
+          );
+          props.hideModal();
+        }
+      } else if (e.key === "Escape") {
+        setCurrentHoveredSection(-1);
+        props.hideModal();
+      }
+    },
+    [currentHoveredSection]
+  );
+
+  // detects change in currentHoveredSection and (for now) just logs the hovered index
+  useEffect(() => {
+    if (currentHoveredSection !== -1) {
+      dispatch(
+        timetablesActions.hoverSection({
+          course: props.course,
+          section: sectionList[currentHoveredSection],
+        })
+      );
+      setCurrentHoveredSectionObj(sectionList[currentHoveredSection]);
+    } else {
+      dispatch(timetablesActions.unhoverSection());
+      setCurrentHoveredSectionObj(null);
+    }
+  }, [currentHoveredSection]);
+
+  // attaches/unattaches event listener to document
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyPress);
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
   const dispatch = useAppDispatch();
 
   const sendReact = (cid: number, title: string) => {
@@ -132,6 +203,10 @@ const CourseModalBody = (props: CourseModalBodyProps) => {
           dispatch(timetablesActions.hoverSection({ course: props.course, section }))
         }
         unHoverSection={() => dispatch(timetablesActions.unhoverSection())}
+        isHovered={
+          currentHoveredSectionObj &&
+          currentHoveredSectionObj.course_section_id === section.course_section_id
+        }
       />
     ));