Custom modules

website/src/actions/timetables.ts

@@ -18,6 +18,7 @@
 // Actions that should not be used directly outside of thunks
 export const SET_TIMETABLE = 'SET_TIMETABLE' as const;
 export const ADD_MODULE = 'ADD_MODULE' as const;
+export const ADD_CUSTOM_MODULE = 'ADD_CUSTOM_MODULE' as const;
 export const Internal = {
   setTimetable(
     semester: Semester,
@@ -40,13 +41,29 @@
       },
     };
   },
+
+  addCustomModule(
+    semester: Semester,
+    moduleCode: ModuleCode,
+    moduleLessonConfig: ModuleLessonConfig,
+    module: Module,
+  ) {
+    return {
+      type: ADD_CUSTOM_MODULE,
+      payload: {
+        semester,
+        moduleCode,
+        moduleLessonConfig,
+        module,
+      },
+    };
+  },
 };
 
 export function addModule(semester: Semester, moduleCode: ModuleCode) {
   return (dispatch: Function, getState: GetState) =>
     dispatch(fetchModule(moduleCode)).then(() => {
       const module: Module = getState().moduleBank.modules[moduleCode];
-
       if (!module) {
         dispatch(
           openNotification(`Cannot load ${moduleCode}`, {
@@ -67,6 +84,47 @@
     });
 }
 
+export function addCustomModule(semester: Semester, moduleCode: ModuleCode, module: Module) {
+  return (dispatch: Function, getState: GetState) => {
+    const { modules } = getState().moduleBank;
+    if (Object.keys(modules).includes(moduleCode)) {
+      if (modules[moduleCode].title !== module.title) {
+        dispatch(
+          openNotification(`Module ${moduleCode.slice(0, -1)} exist with a different title`, {
+            action: {
+              text: '',
+              handler: () => dispatch(addCustomModule(semester, moduleCode, module)),
+            },
+          }),
+        );
+        return;
+      }
+    }
+
+    let customModule = module;
+
+    if (Object.keys(modules).includes(moduleCode)) {
+      const storedModule = modules[moduleCode];
+      const selectedSemester = getState().app.activeSemester;
+      const modifiedCurrentSemesterData = storedModule.semesterData.map((currentSemesterData) =>
+        currentSemesterData.semester === selectedSemester
+          ? {
+              ...currentSemesterData,
+              timetable: [
+                ...currentSemesterData.timetable,
+                customModule.semesterData[0].timetable[0],
+              ],
+            }
+          : currentSemesterData,
+      );
+      customModule = { ...storedModule, semesterData: modifiedCurrentSemesterData };
+    }
+    const lessons = getModuleTimetable(customModule, semester);
+    const moduleLessonConfig = randomModuleLessonConfig(lessons);
+    dispatch(Internal.addCustomModule(semester, moduleCode, moduleLessonConfig, customModule));
+  };
+}
+
 export const REMOVE_MODULE = 'REMOVE_MODULE' as const;
 export function removeModule(semester: Semester, moduleCode: ModuleCode) {
   return {

website/src/reducers/moduleBank.ts

@@ -9,6 +9,7 @@
   UPDATE_MODULE_TIMESTAMP,
   SET_EXPORTED_DATA,
 } from 'actions/constants';
+import { ADD_CUSTOM_MODULE } from 'actions/timetables';
 import { createMigrate, REHYDRATE } from 'redux-persist';
 import { Module } from 'types/modules';
 import { ModuleBank, ModuleList } from 'types/reducers';
@@ -53,6 +54,15 @@
         },
       };
 
+    case ADD_CUSTOM_MODULE:
+      return {
+        ...state,
+        modules: {
+          ...state.modules,
+          [action.payload.moduleCode]: { ...action.payload.module, timestamp: Date.now() },
+        },
+      };
+
     case UPDATE_MODULE_TIMESTAMP:
       return {
         ...state,

website/src/reducers/timetables.ts

@@ -10,6 +10,7 @@ import { ColorMapping, TimetablesState } from 'types/reducers';
 import config from 'config';
 import {
   ADD_MODULE,
+  ADD_CUSTOM_MODULE,
   CHANGE_LESSON,
   HIDE_LESSON_IN_TIMETABLE,
   REMOVE_MODULE,
@@ -104,6 +105,7 @@ function semTimetable(
 
   switch (action.type) {
     case ADD_MODULE:
+    case ADD_CUSTOM_MODULE:
       return {
         ...state,
         [moduleCode]: action.payload.moduleLessonConfig,
@@ -129,6 +131,7 @@ function semColors(state: ColorMapping = defaultSemColorMap, action: Actions): C
 
   switch (action.type) {
     case ADD_MODULE:
+    case ADD_CUSTOM_MODULE:
       return {
         ...state,
         [moduleCode]: getNewColor(values(state)),
@@ -154,7 +157,6 @@ function semHiddenModules(state = defaultHiddenState, action: Actions) {
   if (!action.payload) {
     return state;
   }
-
   switch (action.type) {
     case HIDE_LESSON_IN_TIMETABLE:
       return [action.payload.moduleCode, ...state];
@@ -194,14 +196,14 @@ function timetables(
     }
 
     case ADD_MODULE:
+    case ADD_CUSTOM_MODULE:
     case REMOVE_MODULE:
     case SELECT_MODULE_COLOR:
     case CHANGE_LESSON:
     case SET_LESSON_CONFIG:
     case HIDE_LESSON_IN_TIMETABLE:
     case SHOW_LESSON_IN_TIMETABLE: {
       const { semester } = action.payload;
-
       return produce(state, (draft) => {
         draft.lessons[semester] = semTimetable(draft.lessons[semester], action);
         draft.colors[semester] = semColors(state.colors[semester], action);

website/src/types/modules.ts

@@ -38,6 +38,16 @@ export type Day =
   | 'Saturday'
   | 'Sunday';
 
+export const Days: readonly Day[] = [
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
+];
+
 export const WorkingDays: readonly Day[] = [
   'Monday',
   'Tuesday',

website/src/views/timetable/CustomModulesContainer.scss

@@ -0,0 +1,6 @@
+@import '~styles/utils/modules-entry';
+
+.titleBtn {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}

website/src/views/timetable/CustomModulesContainer.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+import CustomModulesForm from 'views/timetable/CustomModulesForm';
+import styles from './CustomModulesContainer.scss';
+
+type OwnProps = {
+  // Own props
+  semester: number;
+};
+
+type Props = OwnProps;
+
+type State = {
+  showCustomModulesForm: boolean;
+};
+
+class CustomModulesAddContainer extends React.Component<Props, State> {
+  state = {
+    showCustomModulesForm: false,
+  };
+
+  onChange = () => {
+    if (this.state.showCustomModulesForm === true) {
+      this.setState({ showCustomModulesForm: false });
+    } else {
+      this.setState({ showCustomModulesForm: true });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <button
+          type="button"
+          className={classnames(styles.titleBtn, 'btn-outline-primary btn btn-svg')}
+          onClick={this.onChange}
+        >
+          Add custom module to timetable
+        </button>
+        {this.state.showCustomModulesForm && <CustomModulesForm />}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps() {
+  return {};
+}
+
+export default connect(mapStateToProps, {})(CustomModulesAddContainer);

website/src/views/timetable/CustomModulesForm.scss

@@ -0,0 +1,131 @@
+@import "./_variables.scss";
+@import '~styles/utils/modules-entry';
+
+$input-height: 2.75rem;
+$module-list-height: 13.5rem;
+$item-padding-vertical: 0.6rem;
+$btn-margin: 0.5rem;
+
+
+.titleIcon {
+  composes: svg svg-small from global;
+}
+
+.input {
+  composes: form-control from global;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+
+  &:not(:disabled) {
+    box-shadow: inset 2px 2px 4px rgba(#000, 0.1);
+
+    @include night-mode {
+      box-shadow: inset 2px 2px 4px rgba(#000, 0.9);
+    }
+  }
+}
+
+.submitBtn {
+  margin-top: 1rem;
+}
+
+.formGroup {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-left: -$btn-margin; // Negate childrens' left margins
+
+  > * {
+    flex: 0 1 calc(33.333% - 1rem);
+    flex-grow: 1;
+    margin-bottom: $btn-margin;
+    margin-left: $btn-margin;
+  }
+
+  @include media-breakpoint-down(sm) {
+    > * {
+      flex: 0 1 calc(50% - 1rem);
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    > * {
+      flex: 0 1 100%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    :global(.btn) {
+      padding: 0.25rem 0.75rem;
+      //font-size: $font-size-sm;
+    }
+  }
+
+  @include vertical-mode {
+    @include media-breakpoint-down(lg) {
+      > * {
+        flex: 0 1 calc(50% - 1rem);
+      }
+    }
+  }
+
+}
+
+// Two layout forms:
+//
+// 1. Left and right on one row, with space between two groups
+//   - md and above for horizontal
+//
+// 2. Left and right on 2 rows, full width (fullWidthGroup)
+//   - any size in vertical
+//   - sm and below for horizontal
+@mixin fullWidthGroup {
+  .buttonGroup {
+    width: calc(100% + #{$btn-margin}); // Make full width and negate the left shifting caused by our margin-left
+  }
+}
+
+:global(.verticalMode) {
+  @include fullWidthGroup;
+}
+
+@include media-breakpoint-down(sm) {
+  @include fullWidthGroup;
+}
+
+.search {
+  label {
+    margin-bottom: 0;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-s;
+  }
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  margin: 0;
+  font-size: $font-size-xs;
+
+  &,
+  label,
+  input {
+    cursor: pointer;
+  }
+
+  &.enabled {
+    font-weight: bold;
+    color: theme-color();
+  }
+
+  :global(.text-muted) {
+    font-weight: normal;
+  }
+
+  @include touchscreen-only {
+    font-size: $font-size-sm;
+  }
+}