From 3068939b4bbeebf56a4dcb92ca22cd9935e1e9cd Mon Sep 17 00:00:00 2001
From: Adrian Santo Pasqualini <aspasqua@edu.uwaterloo.ca>
Date: Sun, 21 Feb 2021 22:16:33 -0500
Subject: [PATCH 1/3] Add Upload Tab

---
 package-lock.json                             | 257 ++++++++++++++++++
 package.json                                  |   1 +
 src/components/Cards/CourseCard.vue           |   1 +
 .../CourseSelectionPage/CoursePlan.vue        |   4 +-
 src/components/UploadPage/UploadPlanPage.vue  |  61 ++++-
 src/store/modules/courseSelection.js          |  22 +-
 src/views/CourseSelectionPage.vue             |  54 +++-
 7 files changed, 383 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9598409..ec050d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "vuetify": "^2.2.11",
         "vuex": "^3.4.0",
         "vuex-persistedstate": "^3.1.0",
+        "xlsx": "^0.16.9",
         "zingtouch": "^1.0.6"
       },
       "devDependencies": {
@@ -2127,6 +2128,21 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "adler32": "bin/adler32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/aggregate-error": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -3249,6 +3265,19 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "node_modules/cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3625,6 +3654,26 @@
         "node": ">= 4.0"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "dependencies": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "bin": {
+        "codepage": "bin/codepage.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage/node_modules/commander": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -4058,6 +4107,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "dependencies": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      },
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -5549,6 +5613,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -5881,6 +5953,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -6128,6 +6205,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -15465,6 +15550,17 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
+      "bin": {
+        "printj": "bin/printj.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -16960,6 +17056,17 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -19153,6 +19260,22 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -19243,6 +19366,34 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.16.9",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz",
+      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
+      "dependencies": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx/node_modules/commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -21416,6 +21567,15 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "aggregate-error": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -22387,6 +22547,16 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -22691,6 +22861,22 @@
         "q": "^1.1.2"
       }
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -23065,6 +23251,15 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -24302,6 +24497,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -24592,6 +24792,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -24799,6 +25004,11 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -32115,6 +32325,11 @@
         "utila": "~0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -33401,6 +33616,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -35253,6 +35476,16 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -35330,6 +35563,30 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xlsx": {
+      "version": "0.16.9",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz",
+      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 4913d96..a562836 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "vuetify": "^2.2.11",
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^3.1.0",
+    "xlsx": "^0.16.9",
     "zingtouch": "^1.0.6"
   },
   "devDependencies": {
diff --git a/src/components/Cards/CourseCard.vue b/src/components/Cards/CourseCard.vue
index ee0545a..bf96046 100644
--- a/src/components/Cards/CourseCard.vue
+++ b/src/components/Cards/CourseCard.vue
@@ -43,6 +43,7 @@
                   <v-chip
                     color="light-green"
                     label
+                    x-small
                     text-color="white"
                     class="chip"
                     v-bind="attrs"
diff --git a/src/components/CourseSelectionPage/CoursePlan.vue b/src/components/CourseSelectionPage/CoursePlan.vue
index ba7e229..69f016a 100644
--- a/src/components/CourseSelectionPage/CoursePlan.vue
+++ b/src/components/CourseSelectionPage/CoursePlan.vue
@@ -114,11 +114,11 @@ export default {
       this.sortRequirements();
     },
     change(event) {
+      //we only check add events
+      if (!event.added) return;
       this.updateCacheTime();
       this.validateCourses();
       this.updateChecklist();
-      //we only check add events
-      if (!event.added) return;
       let changedReq = event.added.element;
       if (changedReq.number_of_courses > 1 && changedReq.inRequirementBar) {
         changedReq.number_of_courses = 1;
diff --git a/src/components/UploadPage/UploadPlanPage.vue b/src/components/UploadPage/UploadPlanPage.vue
index 1bcb78c..152be5d 100644
--- a/src/components/UploadPage/UploadPlanPage.vue
+++ b/src/components/UploadPage/UploadPlanPage.vue
@@ -6,13 +6,15 @@
       v-model="selectedFile"
     >
     </v-file-input>
-    <v-btn v-on:click="uploadCSV">
+    <v-btn v-on:click="handleFile">
       Import Plan
     </v-btn>
   </div> 
 </template>
 <script>
-  import csv from 'csvtojson';
+  import XLSX from 'xlsx';
+  import { CourseRequirement } from "../../models/courseRequirementModel";
+  import { mapActions } from "vuex";
 
   export default {
     name: "UploadPlanPage",    
@@ -22,15 +24,58 @@
       };
     },
     methods: {
+      ...mapActions(["addTableRequirements"]),
       validateFile(e) {
         this.selectedFile = e;
       },
-      uploadCSV() {
-        csv()
-        .fromStream(this.selectedFile)
-        .then(planJson => {
-            console.log(planJson);
-        });
+      parseGroup(code) {
+        let group = "";
+        if (
+          code === "SCIENCE" ||
+          code === "MATH" ||
+          code === "LANGUAGE" ||
+          code === "NON-MATH" ||
+          (code !== "Program Elective" && code.includes("Elective"))
+        )
+          group = code;
+        return group;
+      },
+      handleFile() {
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          // Open and parse worksheet
+          var data = new Uint8Array(e.target.result);
+          const workbook = XLSX.read(data, {type: 'array'});
+          const worksheet = workbook.Sheets[workbook.SheetNames[0]];
+          const parsedWorksheet = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+
+          // Create course requirments to add to table
+          let tableAdditions = [];
+          for (let c = 0; c < parsedWorksheet[1].length; c++) {
+            let term = [];
+            for (let r = 1; r < parsedWorksheet.length; r++) {
+              if (parsedWorksheet[r][c]) {
+                let code = parsedWorksheet[r][c].toUpperCase();
+                if (code.startsWith("1 OF")) {
+                  code = code.slice(5);
+                }
+                let parsed_requirement = {
+                  course_codes_raw: code,
+                  number_of_courses: 1,
+                  inRequirementBar: false,
+                  group: this.parseGroup(code),
+                };
+                let parsed_req_obj = new CourseRequirement(parsed_requirement);
+                term.push(parsed_req_obj);
+              }
+            }
+            tableAdditions.push(term);
+          }
+
+          // Add Courses To Table
+          this.addTableRequirements({ tableAdditions });
+        };
+        reader.readAsArrayBuffer(this.selectedFile);
       },
     },
   };
diff --git a/src/store/modules/courseSelection.js b/src/store/modules/courseSelection.js
index 783dfcc..1e744b1 100644
--- a/src/store/modules/courseSelection.js
+++ b/src/store/modules/courseSelection.js
@@ -301,7 +301,8 @@ const state = {
   checklistMajorRequirements: {},
   checklistMinorRequirements: {},
   checklistOptionRequirements: {},
-  cacheTime: 0
+  cacheTime: 0,
+  needsRefresh: false,
 };
 
 const getters = {
@@ -312,7 +313,8 @@ const getters = {
   getCourse: state => (termIndex, courseIndex) => {
     return state.table[termIndex].courses[courseIndex];
   },
-  cacheTime: state => state.cacheTime
+  cacheTime: state => state.cacheTime,
+  needsRefresh: state => state.needsRefresh
 };
 
 function getRequirementFulfillmentSize(req_course_codes) {
@@ -794,7 +796,7 @@ function getCoursesTable(state) {
     let t = [];
     for (let j = 0; j < state.table[i].courses.length; j++) {
       let courses = [];
-      courses.push(state.table[i].courses[j].course_codes_raw);
+      courses.push("1 of " + state.table[i].courses[j].course_codes_raw);
       if (!state.table[i].courses[j].selected_course) {
         courses.push("WAITING");
       } else {
@@ -1112,7 +1114,10 @@ const actions = {
     } else {
       commit("setChecklistOptionRequirements", {});
     }
-  }
+  },
+  addTableRequirements: ({ commit }, { tableAdditions }) => {
+    commit("addTableRequirements", { tableAdditions });
+  },
 };
 
 const mutations = {
@@ -1121,6 +1126,15 @@ const mutations = {
       termIndex
     ].courses[courseIndex].overridden;
   },
+  setNeedsRefresh: (state, { needsRefresh }) => {
+    state.needsRefresh = needsRefresh;
+  },
+  addTableRequirements: (state, { tableAdditions }) => {
+    state.needsRefresh = true;
+    for (let i = 0; i < tableAdditions.length; i++) {
+      state.table[i].courses = state.table[i].courses.concat(tableAdditions[i]);
+    }
+  },
   addChecklistRequirement: (
     state,
     { newRequirement, program, programType }
diff --git a/src/views/CourseSelectionPage.vue b/src/views/CourseSelectionPage.vue
index 6e40df2..2af5d77 100644
--- a/src/views/CourseSelectionPage.vue
+++ b/src/views/CourseSelectionPage.vue
@@ -50,6 +50,20 @@
         <span>Download plan to CSV</span>
       </v-tooltip>
 
+      <v-tooltip right open-delay="300" max-width="250px">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            class="tab-icon tab-button"
+            v-bind="attrs"
+            v-on="on"
+            @click="scrollUpload()"
+          >
+            <v-icon x-large>mdi-upload-outline</v-icon>
+          </v-btn>
+        </template>
+        <span>Upload plan from spreadsheet</span>
+      </v-tooltip>
+
       <v-spacer></v-spacer>
 
       <v-tooltip right open-delay="300" max-width="250px">
@@ -78,11 +92,16 @@
             <course-plan :allCourses="allCourses" />
           </v-col>
         </v-row>
-        <v-row v-show="!inTable" class="main-row" id="checklist-row">
+        <v-row v-show="inChecklist" class="main-row" id="checklist-row">
           <v-col class="main-panel">
             <program-checklist />
           </v-col>
         </v-row>
+        <v-row v-show="inUpload" class="main-row" id="checklist-row">
+          <v-col class="main-panel">
+            <upload-plan-page />
+          </v-col>
+        </v-row>
       </v-tab-item>
     </v-tabs>
     <v-dialog v-model="openBugModal" max-width="800">
@@ -95,13 +114,14 @@
 import CoursePlan from "../components/CourseSelectionPage/CoursePlan.vue";
 import ProgramSelectionBar from "../components/CourseSelectionPage/ProgramSelectionBar.vue";
 import ProgramChecklist from "../components/ProgramChecklistPage/ProgramChecklist.vue";
+import UploadPlanPage from "../components/UploadPage/UploadPlanPage.vue";
 import TroubleShootModalContent from "../components/Modals/TroubleShootModalContent.vue";
 import { CourseInfo } from "../models/courseInfoModel";
 import SideBar from "../components/CourseSelectionPage/SideBar.vue";
 import TrieSearch from "trie-search";
 import axios from "axios";
 import { backend_api } from "../backendAPI";
-import { mapActions } from "vuex";
+import { mapActions, mapMutations, mapGetters } from "vuex";
 
 export default {
   name: "CourseSelection",
@@ -110,10 +130,13 @@ export default {
     ProgramSelectionBar,
     SideBar,
     ProgramChecklist,
+    UploadPlanPage,
     TroubleShootModalContent
   },
   data: () => ({
     inTable: true,
+    inChecklist: false,
+    inUpload: false,
     openBugModal: false,
     allCourses: new TrieSearch(["course_code", "course_number"], {
       idFieldOrFunction: function(course) {
@@ -121,8 +144,12 @@ export default {
       }
     })
   }),
+  computed: {
+    ...mapGetters(["needsRefresh"]),
+  },
   methods: {
-    ...mapActions(["export"]),
+    ...mapMutations(["validateCourses", "setNeedsRefresh"]),
+    ...mapActions(["export", "updateChecklist"]),
     exportPDF() {
       this.export({ PDF: true, XLS: false });
     },
@@ -134,9 +161,30 @@ export default {
     },
     scrollTable() {
       this.inTable = true;
+      this.inChecklist = false;
+      this.inUpload = false;
+      // Update checklist and validate courses
+      if (this.needsRefresh) {
+        this.updateChecklist();
+        this.validateCourses();
+        this.setNeedsRefresh({ needsRefresh: false });
+      }
     },
     scrollChecklist() {
       this.inTable = false;
+      this.inChecklist = true;
+      this.inUpload = false;
+      // Update checklist and validate courses
+      if (this.needsRefresh) {
+        this.updateChecklist();
+        this.validateCourses();
+        this.setNeedsRefresh({ needsRefresh: false });
+      }
+    },
+    scrollUpload() {
+      this.inTable = false;
+      this.inChecklist = false;
+      this.inUpload = true;
     },
     openBugTroubleshootModal() {
       this.openBugModal = true;

From 999bddd0fe66979446e7c01983b515a99bfc2b42 Mon Sep 17 00:00:00 2001
From: Adrian Santo Pasqualini <aspasqua@edu.uwaterloo.ca>
Date: Mon, 22 Feb 2021 19:49:23 -0500
Subject: [PATCH 2/3] Add Text To Upload Page

---
 src/components/UploadPage/UploadPlanPage.vue | 182 +++++++++++--------
 src/store/modules/courseSelection.js         |   4 +-
 src/views/CourseSelectionPage.vue            |   2 +-
 3 files changed, 113 insertions(+), 75 deletions(-)

diff --git a/src/components/UploadPage/UploadPlanPage.vue b/src/components/UploadPage/UploadPlanPage.vue
index 152be5d..210bac1 100644
--- a/src/components/UploadPage/UploadPlanPage.vue
+++ b/src/components/UploadPage/UploadPlanPage.vue
@@ -1,85 +1,123 @@
 <template>
-  <div>
-    <v-file-input
-      chips
-      v-on:change="validateFile"
-      v-model="selectedFile"
-    >
-    </v-file-input>
-    <v-btn v-on:click="handleFile">
-      Import Plan
-    </v-btn>
-  </div> 
+  <div class="upload-page-container">
+    <h2>Plan Upload</h2>
+    <div class="upload-page-body">
+      <p>
+        UW Path saves your work for you within your browser, so when you come
+        back to the site your plan will still be here.
+      </p>
+      <p>
+        However, you may also want to download your plan to a spreadsheet file
+        (via the download icon in the left menu) for more permanent storage,
+        since clearing your browser's data will cause your work on UW Path to be
+        lost.
+      </p>
+      <p>
+        If that happens, then you can upload your spreadsheet file below to
+        repopulate your course plan!
+      </p>
+      <p>
+        This should save you from having to do the same work twice for now, but
+        getting user accounts up and running is our next top priority so that
+        even this will be unnecessary.
+      </p>
+    </div>
+    <div class="upload-page-inputs">
+      <v-file-input
+        chips
+        v-model="selectedFile"
+        placeholder="Select a CSV file"
+        accept="text/csv"
+      >
+      </v-file-input>
+      <v-btn class="import-button" v-on:click="handleFile">
+        Import Plan
+      </v-btn>
+    </div>
+  </div>
 </template>
 <script>
-  import XLSX from 'xlsx';
-  import { CourseRequirement } from "../../models/courseRequirementModel";
-  import { mapActions } from "vuex";
+import XLSX from "xlsx";
+import { CourseRequirement } from "../../models/courseRequirementModel";
+import { mapActions } from "vuex";
 
-  export default {
-    name: "UploadPlanPage",    
-    data() {
-      return {
-        selectedFile: undefined,
-      };
+export default {
+  name: "UploadPlanPage",
+  data() {
+    return {
+      selectedFile: undefined
+    };
+  },
+  methods: {
+    ...mapActions(["addTableRequirements"]),
+    parseGroup(code) {
+      let group = "";
+      if (
+        code === "SCIENCE" ||
+        code === "MATH" ||
+        code === "LANGUAGE" ||
+        code === "NON-MATH" ||
+        (code !== "Program Elective" && code.includes("Elective"))
+      )
+        group = code;
+      return group;
     },
-    methods: {
-      ...mapActions(["addTableRequirements"]),
-      validateFile(e) {
-        this.selectedFile = e;
-      },
-      parseGroup(code) {
-        let group = "";
-        if (
-          code === "SCIENCE" ||
-          code === "MATH" ||
-          code === "LANGUAGE" ||
-          code === "NON-MATH" ||
-          (code !== "Program Elective" && code.includes("Elective"))
-        )
-          group = code;
-        return group;
-      },
-      handleFile() {
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          // Open and parse worksheet
-          var data = new Uint8Array(e.target.result);
-          const workbook = XLSX.read(data, {type: 'array'});
-          const worksheet = workbook.Sheets[workbook.SheetNames[0]];
-          const parsedWorksheet = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+    handleFile() {
+      var reader = new FileReader();
+      reader.onload = e => {
+        // Open and parse worksheet
+        var data = new Uint8Array(e.target.result);
+        const workbook = XLSX.read(data, { type: "array" });
+        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
+        const parsedWorksheet = XLSX.utils.sheet_to_json(worksheet, {
+          header: 1
+        });
 
-          // Create course requirments to add to table
-          let tableAdditions = [];
-          for (let c = 0; c < parsedWorksheet[1].length; c++) {
-            let term = [];
-            for (let r = 1; r < parsedWorksheet.length; r++) {
-              if (parsedWorksheet[r][c]) {
-                let code = parsedWorksheet[r][c].toUpperCase();
-                if (code.startsWith("1 OF")) {
-                  code = code.slice(5);
-                }
-                let parsed_requirement = {
-                  course_codes_raw: code,
-                  number_of_courses: 1,
-                  inRequirementBar: false,
-                  group: this.parseGroup(code),
-                };
-                let parsed_req_obj = new CourseRequirement(parsed_requirement);
-                term.push(parsed_req_obj);
+        // Create course requirments to add to table
+        let tableAdditions = [];
+        for (let c = 0; c < parsedWorksheet[1].length; c++) {
+          let term = [];
+          for (let r = 1; r < parsedWorksheet.length; r++) {
+            if (parsedWorksheet[r][c]) {
+              let code = parsedWorksheet[r][c].toUpperCase();
+              if (code.startsWith("1 OF")) {
+                code = code.slice(5);
               }
+              let parsed_requirement = {
+                course_codes_raw: code,
+                number_of_courses: 1,
+                inRequirementBar: false,
+                group: this.parseGroup(code)
+              };
+              let parsed_req_obj = new CourseRequirement(parsed_requirement);
+              term.push(parsed_req_obj);
             }
-            tableAdditions.push(term);
           }
+          tableAdditions.push(term);
+        }
 
-          // Add Courses To Table
-          this.addTableRequirements({ tableAdditions });
-        };
-        reader.readAsArrayBuffer(this.selectedFile);
-      },
-    },
-  };
+        // Add Courses To Table
+        this.addTableRequirements({ tableAdditions });
+      };
+      reader.readAsArrayBuffer(this.selectedFile);
+    }
+  }
+};
 </script>
 <style scoped>
-
+.upload-page-container {
+  text-align: left;
+  padding: 2%;
+}
+.upload-page-body {
+  text-align: left;
+  margin-top: 1%;
+}
+.upload-page-inputs {
+  display: flex;
+  align-items: center;
+}
+.import-button {
+  margin-left: 2%;
+}
 </style>
diff --git a/src/store/modules/courseSelection.js b/src/store/modules/courseSelection.js
index 1e744b1..c4332ce 100644
--- a/src/store/modules/courseSelection.js
+++ b/src/store/modules/courseSelection.js
@@ -302,7 +302,7 @@ const state = {
   checklistMinorRequirements: {},
   checklistOptionRequirements: {},
   cacheTime: 0,
-  needsRefresh: false,
+  needsRefresh: false
 };
 
 const getters = {
@@ -1117,7 +1117,7 @@ const actions = {
   },
   addTableRequirements: ({ commit }, { tableAdditions }) => {
     commit("addTableRequirements", { tableAdditions });
-  },
+  }
 };
 
 const mutations = {
diff --git a/src/views/CourseSelectionPage.vue b/src/views/CourseSelectionPage.vue
index 2af5d77..859be5d 100644
--- a/src/views/CourseSelectionPage.vue
+++ b/src/views/CourseSelectionPage.vue
@@ -145,7 +145,7 @@ export default {
     })
   }),
   computed: {
-    ...mapGetters(["needsRefresh"]),
+    ...mapGetters(["needsRefresh"])
   },
   methods: {
     ...mapMutations(["validateCourses", "setNeedsRefresh"]),

From 43ef72cab658d99bf633391fd68cec094641c68e Mon Sep 17 00:00:00 2001
From: Adrian Santo Pasqualini <aspasqua@edu.uwaterloo.ca>
Date: Mon, 22 Feb 2021 20:08:12 -0500
Subject: [PATCH 3/3] Fix a Program Selection Bug

---
 src/components/Modals/ProgramSelectionModal.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Modals/ProgramSelectionModal.vue b/src/components/Modals/ProgramSelectionModal.vue
index b560a4e..1ed70bd 100644
--- a/src/components/Modals/ProgramSelectionModal.vue
+++ b/src/components/Modals/ProgramSelectionModal.vue
@@ -168,7 +168,7 @@ export default {
         })
         .then(response => {
           this.selectedMajor = major;
-          this.selectedSpec = "";
+          this.selectedSpec = this.noProgram;
           this.selectedMinors = [];
           this.newMinorsList = response.data["minor_list"].map(minor => {
             return new ProgramInfo(minor);
@@ -223,6 +223,11 @@ export default {
         );
       }
     },
+    findOptionByProgram: function(program) {
+      return this.newSpecList.find(obj => {
+        return program === obj.program_name;
+      });
+    },
     confirmSelection: function() {
       let changeMajor =
         this.selectedMajor !== this.noProgram &&
@@ -328,7 +333,6 @@ export default {
     "allSpecializations",
     "findMajorByProgram",
     "findMinorByProgram",
-    "findOptionByProgram",
     "majorRequirements",
     "minorRequirements",
     "specRequirements"