[M] Move deploy script

[F] Enable third quarter
[U] Release v0.5.3.1373
2020-01-27 16:49:48 -05:00 · 2020-01-27 16:49:38 -05:00 · 2020-01-27 16:45:09 -05:00 · 2020-01-27 16:38:08 -05:00 · 2020-01-27 16:37:48 -05:00 · 2020-01-27 16:37:10 -05:00
52 changed files with 4567 additions and 3167 deletions
@@ -1,5 +1,8 @@
 #!/usr/bin/env bash
 #echo "Switch to production database settings"
 #exit
 # abort on errors
 set -e
@@ -9,25 +9,27 @@
  },
  "dependencies": {
    "@types/chroma-js": "^1.4.3",
    "@types/md5": "^2.1.33",
    "chroma-js": "^2.1.0",
-    "core-js": "^2.6.5",
+    "core-js": "^2.6.10",
-    "echarts": "^4.2.1",
+    "echarts": "^4.5.0",
-    "element-ui": "^2.11.1",
+    "element-ui": "^2.13.0",
    "md5": "^2.2.1",
    "moment": "^2.24.0",
    "p-wait-for": "^3.1.0",
    "v-charts": "^1.19.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-cookies": "^1.5.13",
-    "vue-property-decorator": "^8.1.0"
+    "vue-property-decorator": "^8.3.0"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-typescript": "^3.10.0",
+    "@vue/cli-plugin-typescript": "^3.12.1",
-    "@vue/cli-service": "^3.10.0",
+    "@vue/cli-service": "^4.1.1",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.13.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^7.3.1",
-    "typescript": "^3.4.3",
+    "typescript": "^3.7.3",
    "vue-template-compiler": "^2.6.10"
  },
  "postcss": {
@@ -24,7 +24,9 @@
        <!-- ElementUI -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet">
    </body>
    <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Redirecting...</title>
    <meta http-equiv = "refresh" content = "0; url = https://vera.hydev.org/#info" />
 </head>
 <body>
 Redirecting to (<a href="https://vera.hydev.org/#info">https://vera.hydev.org/#info</a>)...
 <script>
    window.location.href = 'https://vera.hydev.org/#info';
 </script>
 </body>
 </html>
@@ -25,7 +25,10 @@
    --assignment-type-3: #ff9900;
    --assignment-type-4: #b02b02;
-    --font: 'Avenir', Helvetica, Arial, sans-serif;
+    //--font: 'Avenir', Helvetica, Arial, sans-serif;
    --font: -apple-system, Nunito Sans, Avenir, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;
 }
 .dark
@@ -54,16 +57,17 @@
    }
    // Overall
-    #overall, #overall-course, .overall-span, #app-content
+    #app-inner, #overall, #overall-course, .overall-span, #app-content
    {
        background: var(--dark-layer-1) !important;
    }
    // Course card
-    .entry-box, .none .unread-number {background: #a1a1a1 !important}
+    .entry-box, .none .unread-number {background: #797979 !important}
    .entry-box.max {background-color: #949494 !important}
    .entry-box.percent {background-color: #a7a490 !important}
    .course-name {color: #cffff6 !important}
    #block-grade #updates.none #unread-number {background: #757575 !important}
    .course-card-content.expand, .assignment-entry, .unread-row,
    .unread-row .el-col, #assignment-type-head, .course-page-graph.el-col
@@ -71,14 +75,8 @@
        background-color: var(--dark-layer-3) !important;
    }
-    .overall-span.el-col, .course-page-graph.el-col
+    // Nav bar
-    {
+    .el-menu--horizontal>.el-menu-item.is-active {color: var(--dark-foreground) !important;}
        div, span
        {
            background: #f9f9f9 !important;
            color: var(--dark-layer-1) !important;
        }
    }
 }
 // ##############
@@ -136,3 +134,14 @@ div.el-card.course-card > div.el-card__body
    -ms-user-select: none;
    user-select: none;
 }
 .el-dropdown-menu__item
 {
    font-family: Nunito Sans, Helvetica Neue, Microsoft YaHei, "微软雅黑", Arial, sans-serif;
 }
 // Fix word breaking
 .el-dialog__body
 {
    word-break: unset !important;
 }
@@ -5,65 +5,79 @@ import Overall from '@/pages/overall/overall.vue';
 import Constants from '@/constants';
 import pWaitFor from 'p-wait-for';
 import {HttpUtils} from '@/logic/utils/http-utils';
-import {GPAUtils} from '@/logic/utils/gpa-utils';
+import Loading from '@/components/overlays/loading.vue';
 import Loading from '@/components/loading/loading.vue';
 import CoursePage from '@/pages/course/course-page.vue';
 import Course from '@/logic/course';
-
+import LoginUser from '@/logic/login-user';
 import NavController from '@/logic/nav-controller';
 import Info from '@/statics/Info.vue';
@Component({
-    components: {Login, Navigation, Overall, Loading, CoursePage},
+    components: {Login, Navigation, Overall, Loading, CoursePage, Info},
 })
 export default class App extends Vue
 {
    // Is the login panel shown
-    public showLogin: boolean = true;
+    showLogin: boolean = true;
    // List of course that the student takes
-    public courses: Course[] = [];
+    courses: Course[] = [];
-
+    gradedCourses: Course[] = [];
    // List of course that should be displayed
    public filteredCourses: Course[] = [];
    // Currently selected tab
    public selectedTab: string = 'overall';
    // Are the course assignments loaded from the server.
-    public assignmentsReady: boolean = false;
+    assignmentsReady: boolean = false;
    // Token
-    public token: string = '';
+    user: LoginUser = null as any;
    // Loading text
-    public loading: string = '';
+    loading: string = '';
    // Loading error
-    public loadingError: boolean = false;
+    loadingError: boolean = false;
    // Navigation controller
    nav: NavController = new NavController();
    // Http Client
-    public static http: HttpUtils = new HttpUtils();
+    static http: HttpUtils = new HttpUtils();
    // Instance
-    public static instance: App;
+    static instance: App;
    // Static page
    staticPage: string = '';
    // Dark mode
    darkMode: boolean = false;
    /**
     * This is called when the instance is created.
     */
-    public created()
+    created()
    {
        // Show splash
        console.log(Constants.SPLASH);
        // Update instance
        App.instance = this;
        // Check location
        if (window.location.hash == '#info')
        {
            this.staticPage = 'info';
        }
        // Dark mode
        this.darkMode = this.$cookies.isKey('dark');
    }
    /**
     * This is called when the user logs in.
     *
-     * @param token Authorization token
+     * @param user Authorization user
     */
-    public onLogin(token: string)
+    onLogin(user: LoginUser)
    {
        // Hide login bar
        this.showLogin = false;
@@ -71,20 +85,20 @@ export default class App extends Vue
        // Show loading message
        this.logLoading('1. Logging in...');
-        // Store token
+        // Store user
-        this.token = token;
+        this.user = user;
-        // Assign token to http client
+        // Assign user to http client
-        App.http.token = token;
+        App.http.user = user;
        // Load data
        this.loadCoursesAfterLogin();
    }
    /**
-     * Load courses data after login.
+     * Load courses data after logging in.
     */
-    public loadCoursesAfterLogin()
+    loadCoursesAfterLogin()
    {
        // Show loading message
        this.logLoading('2. Loading courses...');
@@ -109,7 +123,7 @@ export default class App extends Vue
    /**
     * Load the assignments of the courses
     */
-    public loadAssignments()
+    loadAssignments()
    {
        // Show loading message
        this.logLoading('3. Loading assignments...');
@@ -134,7 +148,7 @@ export default class App extends Vue
        pWaitFor(() => this.courses.every(c => c.rawAssignments != null)).then(() =>
        {
            // Filter courses
-            this.filteredCourses = this.courses.filter(c => c.isGraded);
+            this.gradedCourses = this.courses.filter(c => c.isGraded);
            // Check grading algorithms
            this.checkGradingAlgorithms();
@@ -144,42 +158,50 @@ export default class App extends Vue
    /**
     * Check the courses' grading algorithms. (Total-mean or percent-type)
     */
-    private checkGradingAlgorithms()
+    checkGradingAlgorithms()
    {
        // Show loading message
        this.logLoading('4. Checking grading algorithms...');
        // Loop through all the courses
-        for (const course of this.filteredCourses)
+        for (const course of this.gradedCourses)
        {
-            let termGrade = +GPAUtils.getTotalMeanAverage(course.computed.termAssignments[Constants.CURRENT_TERM]).toFixed(2);
+            for (const i of [0, 1, 2, 3])
            {
                const cookieIndex = `va.grading.${i}.${course.assignmentsId}`;
-            // Check if total-average grade is the same with percent-type grade
+                // Check if already exist in cookies
-            if (course.rawNumericGrade == termGrade)
+                if (this.$cookies.isKey(cookieIndex))
-            {
+                {
-                course.grading = {method: 'TOTAL_MEAN', weightingMap: {}};
+                    course.termGrading[i] = {method: 'TOTAL_MEAN', weightingMap: {}};
-            }
+                    continue;
-            else
+                }
-            {
+
-                // Request grading scheme for this course
+                // Request grading scheme for this course at this grading period
-                App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
+                App.http.post('/grading/term', {assignmentsId: course.assignmentsId, term: i}).then(resp =>
                {
                    // Check success
-                    if (response.success)
+                    if (resp.success)
                    {
                        // Add it to course
-                        course.grading = response.data;
+                        course.termGrading[i] = resp.data;
                        // If it's total_mean, cache it to cookies
                        // This is because only percent_type can update over time
                        if (course.termGrading[i].method == 'TOTAL_MEAN')
                        {
                            this.$cookies.set(cookieIndex, 'TOTAL_MEAN', 'd');
                        }
                    }
-                    else throw new Error(response.data);
+                    else throw new Error(resp.data);
                })
                .catch(e => this.showError(`Error: Grading data failed to load.\n(${e})`))
            }
        }
        // Wait for done
-        pWaitFor(() => this.filteredCourses.every(c => c.grading != undefined)).then(() =>
+        pWaitFor(() => this.gradedCourses.every(c => c.termGrading.every(g => g != null))).then(() =>
        {
            // When the assignments are ready
            this.assignmentsReady = true;
            // Remove loading
@@ -192,7 +214,7 @@ export default class App extends Vue
     *
     * @param message Message
     */
-    private logLoading(message: string)
+    logLoading(message: string)
    {
        if (message == '') this.loading = '';
        else this.loading += '\n' + message;
@@ -203,7 +225,7 @@ export default class App extends Vue
     *
     * @param message Error message
     */
-    private showError(message: string)
+    showError(message: string)
    {
        this.loadingError = true;
        this.loading = message;
@@ -212,7 +234,7 @@ export default class App extends Vue
    /**
     * Sign out
     */
-    public signOut()
+    signOut()
    {
        // Clear all cookies
        this.$cookies.keys().forEach(key => this.$cookies.remove(key));
@@ -226,7 +248,7 @@ export default class App extends Vue
     *
     * @param code
     */
-    public selectTime(code: number)
+    selectTime(code: number)
    {
        // TODO: Optimize
        window.location.reload();
@@ -1,23 +1,29 @@
 <template>
    <div id="app" class="theme-default">
-        <login v-if="showLogin" v-on:login:token="onLogin"></login>
+        <div id="app-inner" v-if="staticPage === ''" :class="{dark: darkMode}">
-        <navigation :courses="filteredCourses"
+            <login v-if="showLogin" v-on:login:user="onLogin"/>
-                    :activeIndex.sync="selectedTab"
+            <navigation v-if="user != null"
-                    @sign-out="signOut" @select-time="selectTime">
+                        :courses="gradedCourses"
-        </navigation>
+                        :user="user"
                        :nav="nav"
                        @sign-out="signOut" @select-time="selectTime">
            </navigation>
-        <div id="app-content" v-if="assignmentsReady && loading === ''">
+            <div id="app-content" v-if="assignmentsReady && loading === ''">
-            <overall v-if="selectedTab === 'overall'"
+                <overall v-if="nav.id === 'overall'"
-                     :courses="filteredCourses">
+                         :courses="gradedCourses">
-            </overall>
+                </overall>
-            <course-page v-if="selectedTab.split('/')[0] === 'course'"
+                <course-page v-if="nav.id === 'course'"
-                         :course="filteredCourses.find(c => +c.id === +selectedTab.split('/')[1])">
+                             :course="gradedCourses.find(c => +c.id === +nav.info.id)">
-            </course-page>
+                </course-page>
            </div>
            <loading v-if="loading !== ''" :text="loading" :error="loadingError"/>
        </div>
-        <loading v-if="loading !== ''" :text="loading" :error="loadingError"></loading>
+        <Info v-if="staticPage === 'info'"/>
    </div>
 </template>
 <script src="./app.ts" lang="ts"></script>
-<style src="./app.scss" lang="scss"></style>
+<style src="./app.scss" lang="scss"/>
@@ -2,48 +2,44 @@ import {Component, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
 import App from '@/components/app/app';
 import VersionUtils from '@/logic/utils/version-utils';
 import LoginUser from '@/logic/login-user';
 import Maintenance from '@/components/overlays/maintenance.vue';
 /**
 * This component handles user login, and obtains data from the server.
 */
-@Component({
+@Component({components: {Maintenance}})
    components: {},
 })
 export default class Login extends Vue
 {
-    public username: string = '';
+    username = '';
-    public password: string = '';
+    password = '';
-    public loading: boolean = false;
+    loading = false;
-    public error: string = '';
+    error = '';
    disableInput = false;
    maintenance = '';
    /**
     * This is called when the instance is created.
     */
-    public created()
+    created()
    {
        // Check login cookies
        if (this.$cookies.isKey('va.token'))
        {
            // Check cookies version
-            if (this.needToUpdateCookies())
+            if (this.needToUpdateCookies()) this.clearCookies();
            {
                console.log('Version Updated! Clearing cookies...');
                // Clear all cookies
                this.$cookies.keys().forEach(key => this.$cookies.remove(key));
            }
            else
            {
-                // Already contains valid token / TODO: Validate
+                // Show loading
-                // TODO: Update token each access
+                this.disableInput = this.loading = true;
-                this.$emit('login:token', this.$cookies.get('va.token'));
+
                // Login with token
                this.login('/login/token', {token: this.$cookies.get('va.token')});
            }
        }
        else
        {
            console.log('Cookies doesn\'t exist');
        }
    }
    /**
@@ -51,7 +47,7 @@ export default class Login extends Vue
     *
     * @returns boolean Need to clear cookies or not
     */
-    public needToUpdateCookies(): boolean
+    needToUpdateCookies(): boolean
    {
        // Version doesn't exist
        if (!this.$cookies.isKey('va.version')) return true;
@@ -61,9 +57,9 @@ export default class Login extends Vue
    }
    /**
-     * On click, sends username and password to the server.
+     * When the user clicks, send the username and password to the server.
     */
-    public onLoginClick()
+    onLoginClick()
    {
        // Make login button loading
        this.loading = true;
@@ -71,43 +67,73 @@ export default class Login extends Vue
        // Format it
        this.username = this.username.toLowerCase().replace(/ /g, '').replace(/@.*/g, '');
        // Login
        this.login('/login', {username: this.username, password: this.password});
    }
    /**
     * Actually post the login request and process the response
     *
     * @param url Posting url
     * @param data Data to be posted
     */
    login(url: string, data: any)
    {
        // Fetch request
-        App.http.post('/login', {username: this.username, password: this.password})
+        App.http.post(url, data)
        .then(response =>
        {
            // Check success
            if (response.success)
            {
                // Maintenance
                if (response.data.maintenance)
                {
                    this.maintenance = response.data.maintenance;
                    return;
                }
                // Save token to cookies
-                this.$cookies.set('va.token', response.data, '27d');
+                this.$cookies.set('va.token', response.data.user.token, '27d');
                this.$cookies.set('va.version', Constants.VERSION, '27d');
-                // Call custom event with token
+                // Call a custom event with the token
-                this.$emit('login:token', response.data);
+                this.$emit('login:user', new LoginUser(response.data.user));
            }
            else
            {
-                // Show error message
+                // Login expired -> clear cookies
-                this.error = response.data;
+                if (response.data == 'Error: Login expired')
                {
                    this.clearCookies();
                }
-                // Allow the user to retry
+                // Show error message & allow user to retry
-                this.loading = false;
+                this.error = response.data;
                this.disableInput = this.loading = false;
            }
        })
        .catch(err =>
        {
-            alert(err);
+            // Show error message & allow user to retry
-
+            this.error = err;
-            // Allow the user to retry
+            this.disableInput = this.loading = false;
            this.loading = false;
        });
    }
    /**
-     * This is called when the user hits enter in the input boxes.
+     * This is called when the user hits enter on the input boxes.
     */
-    public onEnter()
+    onEnter()
    {
        this.onLoginClick();
    }
    /**
     * Clear cookies
     */
    clearCookies()
    {
        this.$cookies.keys().forEach(key => this.$cookies.remove(key));
    }
 }
@@ -9,6 +9,7 @@
                    <el-input v-model="username"
                              placeholder="SJP Username (Eg. flast21)"
                              :class="{'input-error': error !== ''}"
                              v-if="!disableInput"
                              @keyup.enter.native="onEnter">
                    </el-input>
@@ -16,6 +17,7 @@
                              placeholder="SJP Password"
                              show-password=""
                              :class="{'input-error': error !== ''}"
                              v-if="!disableInput"
                              @keyup.enter.native="onEnter">
                    </el-input>
@@ -25,8 +27,10 @@
                </form>
            </div>
        </div>
        <Maintenance v-if="maintenance" :message="maintenance"/>
    </div>
 </template>
 <script src="./login.ts" lang="ts"></script>
-<style src="./login.scss" lang="scss"></style>
+<style src="./login.scss" lang="scss"/>
@@ -16,6 +16,13 @@
    }
 }
 #nav-avatar
 {
    position: absolute;
    right: 0;
    margin: 10px 20px;
 }
 #sign-out-button
 {
    // Float right
@@ -31,7 +38,7 @@
 {
    // Float right
    position: absolute;
-    right: 110px;
+    right: 80px;
    // Margins
    margin-top: 12px;
@@ -83,6 +90,14 @@
        -webkit-text-fill-color: transparent !important;
        -webkit-background-clip: text !important;
    }
    #nav-logo-version
    {
        color: #a7a7a7;
        margin-left: 5px;
        margin-top: 8px;
        font-size: 10px;
    }
 }
 #next-course
@@ -1,31 +1,29 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import App from '@/components/app/app';
 import {CourseUtils} from '@/logic/utils/course-utils';
 import {FormatUtils} from '@/logic/utils/format-utils';
 import pWaitFor from 'p-wait-for';
 import Course from '@/logic/course';
 import Constants from '@/constants';
 import LoginUser from '@/logic/login-user';
 import NavController from '@/logic/nav-controller';
 import App from '@/components/app/app';
 /**
 * This component is the top navigation bar
 */
-@Component({
+@Component
    components: {},
 })
 export default class Navigation extends Vue
 {
-    @Prop({required: true}) activeIndex: string;
+    @Prop({required: true}) nav: NavController;
    @Prop({required: true}) courses: Course[];
    @Prop({required: true}) user: LoginUser;
    private gradingPeriod: string = 'All Year';
    // Instance
-    public static instance: Navigation;
+    static instance: Navigation;
    /**
     * This is called when the instance is created.
     */
-    public created()
+    created()
    {
        // Check selected time
        if (!this.$cookies.isKey('va.grading-period'))
@@ -38,37 +36,9 @@ export default class Navigation extends Vue
    /**
     * This is called when the instance is loaded.
     */
-    public mounted()
+    mounted()
    {
        // Set instance
        Navigation.instance = this;
        // Set history state
        let url = '/' + window.location.hash;
        if (url == '/' || url == '') url = '/#overall';
        window.history.replaceState({lastTab: url.substring(1)}, '', url);
        // Update initial index after loading is done
        pWaitFor(() => this.courses.length > 1 && App.instance.loading != '').then(() =>
        {
            this.updateIndex(url.substring(2), false);
        });
        // Create history state listener
        window.onpopstate = e =>
        {
            if (e.state)
            {
                // Restore previous tab
                console.log(`onPopState: Current: ${this.activeIndex}, Previous: ${e.state.lastTab}`);
                this.updateIndex(e.state.lastTab, false);
            }
        };
    }
    public formatCourseIndex(course: Course)
    {
        return CourseUtils.formatTabIndex(course);
    }
    /**
@@ -77,55 +47,19 @@ export default class Navigation extends Vue
     * @param index The index selected
     * @param indexPath The path of the index
     */
-    public onSelect(index: string, indexPath: string)
+    onSelect(index: string, indexPath: string)
    {
        // Update active index
-        this.updateIndex(index);
+        try
    }
    /**
     * Update index
     *
     * @param newIndex New index
     * @param history Record in history or not (Default true)
     */
    public updateIndex(newIndex: string, history?: boolean)
    {
        // Call custom event
        this.$emit('update:activeIndex', newIndex);
        // Record or not
        if (history == null || history)
        {
-            // Check url
+            // Is json
-            let url = `/#${newIndex}`;
+            this.nav.updateIndex(JSON.parse(index))
            // Push history state
            window.history.pushState({lastTab: newIndex}, '', url);
        }
-
+        catch (e)
        // Update title
        document.title = 'Veracross Analyzer - ' + this.getTitle(newIndex);
        // Scroll to top
        window.scrollTo(0, 0);
    }
    /**
     * Get title for index
     *
     * @param index Index
     */
    public getTitle(index: string)
    {
        // Course
        if (index.startsWith('course'))
        {
-            return this.findCourse(index.split('/')[1], 0).name;
+            // Not json
            this.nav.updateIndex(index);
        }
        // Others
        return FormatUtils.toTitleCase(index);
    }
    /**
@@ -133,10 +67,10 @@ export default class Navigation extends Vue
     *
     * @param indexOffset Index offset (Eg. 1 for next)
     */
-    public nextCourse(indexOffset: number)
+    nextCourse(indexOffset: number)
    {
        // Set tab to the next index
-        this.updateIndex(CourseUtils.formatTabIndex(this.findNextCourse(indexOffset)))
+        this.nav.updateIndex(this.findNextCourse(indexOffset).urlIndex)
    }
    /**
@@ -144,9 +78,9 @@ export default class Navigation extends Vue
     *
     * @param indexOffset Index offset (Eg. 1 for next)
     */
-    public findNextCourse(indexOffset: number)
+    findNextCourse(indexOffset: number)
    {
-        return this.findCourse(this.activeIndex.split('/')[1], indexOffset);
+        return this.findCourse(this.nav.info.id, indexOffset);
    }
    /**
@@ -155,7 +89,7 @@ export default class Navigation extends Vue
     * @param courseId Course ID
     * @param indexOffset Index offset (Eg. 1 for next)
     */
-    public findCourse(courseId: string, indexOffset: number)
+    findCourse(courseId: string, indexOffset: number)
    {
        // Find current course index
        let courseIndex = this.courses.findIndex(c => c.id == +courseId);
@@ -169,21 +103,54 @@ export default class Navigation extends Vue
     *
     * @param command Term 1, Term 2, All Year, etc.
     */
-    public selectGradingPeriod(command: string)
+    selectGradingPeriod(command: string)
    {
        this.gradingPeriod = command;
        this.$cookies.set('va.grading-period', command, '10y');
        // Call event
-        this.$emit('select-time', this.getSelectedGradingPeriod());
+        this.$emit('select-time', this.getSelectedTerm());
    }
    /**
     * Get code for selected time
     */
-    public getSelectedGradingPeriod(): number
+    getSelectedTerm(): number
    {
        if (this.gradingPeriod == 'All Year') return -1;
        else return +this.gradingPeriod.replace('Term ', '') - 1;
    }
    /**
     * Avatar dropdown menu event
     *
     * @param cmd Command: sign-out
     */
    onAvatarMenu(cmd: string)
    {
        switch (cmd)
        {
            case 'sign-out':
            {
                this.$emit('sign-out');
                break
            }
            case 'switch-dark':
            {
                App.instance.darkMode = !App.instance.darkMode;
                if (this.isDark()) this.$cookies.set('dark', true);
                else this.$cookies.remove('dark');
                break
            }
        }
    }
    isDark()
    {
        return App.instance.darkMode;
    }
    get version() {return Constants.VERSION}
 }
@@ -1,55 +1,68 @@
 <template>
    <div id="navigation">
        <el-menu style="margin-bottom: 10px;" class="centered" mode="horizontal"
-                 :default-active="activeIndex" @select="onSelect">
+                 :default-active="nav.id" @select="onSelect">
            <div id="nav-title">
                <img id="nav-logo" alt="logo" src="../../assets/logo.png">
                <span id="nav-logo-text" class="logo-text">Veracross Analyzer</span>
                <span id="nav-logo-version">v{{version}}</span>
            </div>
            <el-menu-item index="overall">Overall</el-menu-item>
-            <el-submenu index="courses">
+            <el-submenu index="">
                <template slot="title">Courses</template>
                <el-menu-item v-for="course in courses"
-                              :index="formatCourseIndex(course)"
+                              :index="JSON.stringify(course.urlIndex)"
-                              :key="course.name">{{course.name}}</el-menu-item>
+                              :key="course.id">{{course.name}}</el-menu-item>
            </el-submenu>
            <!-- Grading period selection -->
            <el-dropdown id="nav-grading-period" @command="selectGradingPeriod">
                <el-button type="primary" size="medium">
-                    {{gradingPeriod}}<i class="el-icon-arrow-down el-icon--right"></i>
+                    {{gradingPeriod}}<i class="el-icon-arrow-down el-icon--right"/>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="Term 1">Term 1</el-dropdown-item>
                    <el-dropdown-item command="Term 2">Term 2</el-dropdown-item>
-                    <el-dropdown-item command="Term 3" disabled>Term 3</el-dropdown-item>
+                    <el-dropdown-item command="Term 3">Term 3</el-dropdown-item>
                    <el-dropdown-item command="Term 4" disabled>Term 4</el-dropdown-item>
 <!--                    TODO: Auto enable / disable quarters -->
                    <el-dropdown-item command="All Year" divided>All Year</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
-            <el-button @click="$emit('sign-out')" id="sign-out-button" type="text">Sign Out</el-button>
+            <!-- User avatar -->
            <el-dropdown id="nav-avatar" trigger="click" @command="onAvatarMenu">
                <el-avatar :src="user.avatarUrl"/>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="text-align: center">{{user.nickname}}</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-sunrise" command="switch-dark" divided>{{!isDark() ? 'Dark Mode (Unfinished)' : 'Light Mode'}}</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" command="sign-out" divided>Sign Out</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu>
        <!-- Previous course / Next course (Only when the page is courses) -->
-        <div v-if="activeIndex.includes('course') && findNextCourse(-1) != null"
+        <div v-if="nav.id === 'course' && findNextCourse(-1) != null"
             @click="nextCourse(-1)" id="prev-course" class="nav-course-operations unselectable">
            ▲ PREVIOUS COURSE ▲
        </div>
        <footer>
-            <div v-if="activeIndex.includes('course') && findNextCourse(1) != null"
+            <div v-if="nav.id === 'course' && findNextCourse(1) != null"
                 @click="nextCourse(1)" id="next-course" class="nav-course-operations unselectable">
                ▼ NEXT COURSE ▼
            </div>
        </footer>
        <!-- Back to top -->
-        <el-backtop style="box-shadow: rgba(0, 0, 0, 0.23) 0 3px 11px 0;"></el-backtop>
+        <el-backtop style="box-shadow: rgba(0, 0, 0, 0.23) 0 3px 11px 0;"/>
    </div>
 </template>
 <script src="./navigation.ts" lang="ts"></script>
-<style src="./navigation.scss" lang="scss"></style>
+<style src="./navigation.scss" lang="scss"/>
@@ -1,7 +1,7 @@
 <template>
    <div id="loading">
-        <div id="text" :class="message()">
+        <div id="text" :class="message">
-            {{message()}}
+            {{message}}
            <div v-if="!error" class="el-loading-spinner">
                <svg viewBox="25 25 50 50" class="circular">
@@ -10,7 +10,7 @@
            </div>
            <div v-if="error" id="error-details">
-                <span v-for="(line, index) in getText()" :style="`font-size: ${-index === 0 ? 16 : 12}px;`">
+                <span v-for="(line, index) in split" :style="`font-size: ${-index === 0 ? 16 : 12}px;`">
                    {{line}}
                    <br>
                </span>
@@ -18,7 +18,7 @@
        </div>
        <div v-if="!error" id="details">
-            <span v-for="(line, index) in getText()" :style="`font-size: ${16 - getText().length + index}px;`">
+            <span v-for="(line, index) in split" :style="`font-size: ${16 - split.length + index}px;`">
                {{line}}
                <br>
            </span>
@@ -29,21 +29,19 @@
 <script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
-    @Component({
+    @Component
        components: {}
    })
    export default class Loading extends Vue
    {
        @Prop({required: true}) text: string;
        @Prop({required: true}) error: boolean;
-        getText()
+        get split()
        {
            return this.text.split('\n');
        }
-        message()
+        get message()
        {
            return this.error ? 'Error' : 'Loading';
        }
@@ -0,0 +1,63 @@
 <template>
    <div id="maintenance">
        <div id="maintenance-content">
            <h1>We&rsquo;ll be back soon!</h1>
            <div>
                <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
                    We&rsquo;ll be back online shortly!</p>
                <p>What went wrong: {{json.reason}}</p>
                <p>Estimated fix: {{json.eta}}</p>
                <p>&mdash; An Average SJP Junior</p>
            </div>
        </div>
    </div>
 </template>
 <script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    @Component
    export default class Maintenance extends Vue
    {
        @Prop({required: true}) message: any;
        get json()
        {
            return JSON.parse(this.message);
        }
    }
 </script>
 <style lang="scss" scoped>
    #maintenance
    {
        z-index: 1000;
        background: white;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        #maintenance-content
        {
            font: 20px Helvetica, sans-serif;
            color: #333;
            display: block;
            text-align: left;
            margin: 150px;
            h1
            {
                font-size: 50px;
            }
            a {color: #dc8100; text-decoration: none;}
            a:hover {color: #333; text-decoration: none;}
        }
    }
 </style>
@@ -1,20 +1,23 @@
 /**
 * This class stores the static constants.
 */
 import {findLastIndex} from '@/logic/utils/general-utils';
 export default class Constants
 {
    /** Base url for api access */
-    public static API_URL: string = 'https://va.hydev.org/api';
+    static API_URL: string = 'https://va.hydev.org/api';
    // static API_URL: string = 'http://localhost:24021/api';
    /** Current version */
-    public static VERSION: string = '0.4.6.1087';
+    static VERSION: string = '0.5.3.1373';
-    /** Minimum version that still supports the same cookies */
+    /** The minimum version that still supports the same cookies */
-    public static MIN_SUPPORTED_VERSION: string = '0.3.4.561';
+    static MIN_SUPPORTED_VERSION: string = '0.4.6.1087';
-    public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
+    static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
-    public static SPLASH: string =
+    static SPLASH: string =
        '.    ,        ,---.          |                        \n' +
        '|    |.  ,    |---|,---.,---.|    ,   .,---,,---.,---.\n' +
        ' \\  /  ><     |   ||   |,---||    |   | .-\' |---\'|    \n' +
@@ -24,7 +27,7 @@ export default class Constants
        ` Github: ${Constants.GITHUB}`;
    // Graph Theme
-    public static THEME =
+    static THEME =
    {
        // Colors
        colors:
@@ -56,7 +59,7 @@ export default class Constants
    };
    // Terms (TODO: Actually get the terms dynamically
-    public static TERMS =
+    static TERMS =
    [
        new Date('Sep 04 2019'),
        new Date('Nov 03 2019'),
@@ -64,5 +67,15 @@ export default class Constants
        new Date('Mar 22 2020'),
        new Date('Jun 05 2020'),
    ];
-    public static CURRENT_TERM = 1;
+    static CURRENT_TERM = Constants.getTerm(new Date());
    /**
     * Find out the specified date is in which term
     *
     * @param date
     */
    static getTerm(date: Date)
    {
        return findLastIndex(Constants.TERMS, d => d <= date);
    }
 }
@@ -1,30 +1,129 @@
 import JsonUtils from '@/logic/utils/json-utils';
 import {FormatUtils} from '@/logic/utils/format-utils';
 import {CourseUtils} from '@/logic/utils/course-utils';
 import Navigation from '@/components/navigation/navigation';
 import {GPAUtils} from '@/logic/utils/gpa-utils';
 import CacheUtils from '@/logic/utils/cache-utils';
 import Constants from '@/constants';
 import {Index} from '@/logic/nav-controller';
 import App from '@/components/app/app';
 /**
 * Objects of this interface represent assignment grades.
 */
-export interface Assignment
+export class Assignment
 {
-    id: number
+    id: number;
-    scoreId: number
+    scoreId: number;
-    type: string
+    type: string;
-    typeId: number
+    typeId: number;
-    description: string
+    description: string;
-    time: number
+    time: number;
-    complete: string
+    complete: string;
-    include: boolean
+    include: boolean;
-    display: boolean
+    display: boolean;
-    unread: boolean
+    unread: boolean;
-    scoreMax: number
+    scoreMax: number;
-    score: number
+    score: number;
-    gradingPeriod: number
+    gradingPeriod: number;
    // Callbacks when this object updates
    private updateCallbacks: (() => void)[] = [];
    /**
     * Construct assignment with json object
     *
     * @param json Json object
     */
    constructor(json: any)
    {
        this.id =  json.assignment_id;
        this.scoreId =  json.score_id;
        this.type =  json.assignment_type;
        this.typeId =  json.assignment_type_id;
        this.description =  json.assignment_description;
        this.time =  new Date(json._date).getTime();
        this.complete =  json.completion_status;
        this.include =  json.include_in_calculated_grade == 1;
        this.display =  json.display_grade == 1;
        this.unread =  json.is_unread == 1;
        this.scoreMax =  json.maximum_score;
        this.score =  +json.raw_score;
        this.gradingPeriod =  +json.grading_period.replace('Quarter ', '') - 1;
    }
    /**
     * Graded or not
     */
    get graded()
    {
        // TODO: Add more cases
        return this.include && (this.complete == 'Complete' || this.complete == 'Late' || this.complete == 'NREQ');
    }
    /**
     * What is the problem with this assignment
     *
     * @return string Empty string if complete, otherwise return problem.
     */
    get problem()
    {
        switch (this.complete)
        {
            case 'Complete': return '';
            case 'Late': return 'Late';
            case 'NREQ': return 'Dropped';
        }
    }
    /**
     * Get the text color of the problem
     */
    get problemColor()
    {
        switch (this.complete)
        {
            case 'Late': return '#ff0036';
            case 'NREQ': return '#41b141';
        }
    }
    /**
     * Add callback
     *
     * @param callback
     */
    addCallback(callback: () => void)
    {
        this.updateCallbacks.push(callback);
    }
    /**
     * Mark as read
     */
    markAsRead(): Promise<void>
    {
        return new Promise((resolve, reject) => {
            App.http.post('/mark-as-read', {scoreId: this.scoreId})
            .then(response =>
            {
                // Check success
                if (response.success)
                {
                    this.unread = false;
                    this.updateCallbacks.forEach(callback => callback());
                    resolve();
                }
                else reject(response.data);
            })
            .catch(reject)
        })
    }
 }
 export interface AssignmentType
@@ -39,6 +138,12 @@ export interface AssignmentType
    assignmentCount: number
 }
 export interface Grading
 {
    method: string
    weightingMap: {[index: string]: number}
 }
 export default class Course
 {
    id: number;
@@ -54,17 +159,10 @@ export default class Course
    level: string;
    scaleUp: number;
-    grading:
+    termGrading: Grading[];
-    {
+    termAssignments: Assignment[][];
        method: string
        weightingMap: {[index: string]: number}
    };
-    computed:
+    cache: CacheUtils = new CacheUtils();
    {
        termAssignments: Assignment[][]
        allYearGrade: number
    };
    /**
     * Construct a course with a course json object
@@ -98,7 +196,7 @@ export default class Course
        }
        else this.level = 'Unknown';
-        this.grading = courseJson.grading;
+        this.termGrading = new Array(4).fill(null);
    }
    /**
@@ -110,20 +208,16 @@ export default class Course
    {
        // Load assignments
        // Parse json and filter it
-        this.rawAssignments = JsonUtils.filterAssignments(data);
+        this.rawAssignments = data.assignments.map((a: any) => new Assignment(a));
        // Sort by date (Latest is at 0)
        this.rawAssignments.sort((a, b) => b.time - a.time);
        // Filter assignments into terms
-        let termAssignments: Assignment[][] = [[], [], [], []];
+        this.termAssignments = [[], [], [], []];
        let currentTerm = 0;
        // Loop through it by time order
-        this.rawAssignments.forEach(a => termAssignments[a.gradingPeriod].push(a));
+        this.rawAssignments.forEach(a => this.termAssignments[a.gradingPeriod].push(a));
        // Set computed data
        this.computed = {termAssignments: termAssignments, allYearGrade: -1};
    }
    /**
@@ -148,90 +242,124 @@ export default class Course
    }
    /**
-     * Get assignments of the selected time
+     * Get currently selected grading periods
     */
-    get rawSelectedAssignments(): Assignment[]
+    get gradingPeriods(): number[]
    {
-        let timeCode = Navigation.instance.getSelectedGradingPeriod();
+        return this.cache.get('GradingPeriods', () =>
        // All year
        if (timeCode == -1)
        {
-            return this.rawAssignments;
+            return (this.rawSelectedTerm == -1 ? [0, 1, 2, 3] : [this.rawSelectedTerm]).filter(term =>
-        }
+                this.termAssignments[term].filter(a => a.graded).length != 0);
-
+        })
        // Specific time
        return this.computed.termAssignments[timeCode];
    }
-    private _cacheAssignments: Assignment[];
+    /**
     * Get currently selected grading periods
     */
    get allGradingPeriods(): number[]
    {
        return this.cache.get('AllGradingPeriods', () =>
        {
            return [0, 1, 2, 3].filter(term => this.termAssignments[term].filter(a => a.graded).length != 0);
        })
    }
    /**
-     * Get graded assignments
+     * Get assignments of the selected grading periods
     */
    get assignments(): Assignment[]
    {
-        if (this._cacheAssignments == null)
+        return this.gradingPeriods
-           this._cacheAssignments = this.rawSelectedAssignments.filter(a => a.complete == 'Complete');
+            .flatMap(term => this.termAssignments[term])
-
+            .filter(a => a.graded)
-        return this._cacheAssignments;
+            .sort((a, b) => b.time - a.time);
    }
-    private _cacheLetterGrade: string;
+    /**
     * Get assignments before a certain date
     *
     * @param time
     */
    getAssignmentsBefore(time: number): {term: number, assignments: Assignment[]}
    {
        let term = Constants.getTerm(new Date(time));
        let assignments = this.assignments.filter(a => a.gradingPeriod == term && a.time <= time);
        return {term: term, assignments: assignments}
    }
    /**
     * Get letter grade
     */
    get letterGrade(): string
    {
-        if (this._cacheLetterGrade == null)
+        return this.cache.get('LetterGrade', () =>
        {
            // Get scale
            let scale = GPAUtils.findScale(this.numericGrade);
            // Scale not found
-            if (scale == undefined) return this._cacheLetterGrade = '--';
+            return scale == undefined ? '--' : scale.letter;
-
+        })
            // Cache
            this._cacheLetterGrade = scale.letter;
        }
        return this._cacheLetterGrade;
    }
-    private _cacheNumericGrade: number;
+    /**
     * Get letter grade by term
     *
     * @param term
     */
    letterGradeTerm(term: number): string
    {
        return this.cache.get('LetterGrade' + term, () =>
        {
            // Get scale
            let scale = GPAUtils.findScale(this.numericGradeTerm(term));
            // Scale not found
            return scale == undefined ? '--' : scale.letter;
        })
    }
    /**
     * Get numeric grade
     */
-    get numericGrade(): number
+    get numericGrade()
    {
-        // Cached
+        return this.cache.get('NumericGrade', () =>
        if (this._cacheNumericGrade == null)
        {
-            // Calculate
+            return this.gradingPeriods.map(term => this.numericGradeTerm(term))
-            if (this.grading.method == 'PERCENT_TYPE')
+                    .reduce((p, v) => p + v) / this.gradingPeriods.length
-            {
+        })
                this._cacheNumericGrade = GPAUtils.getPercentTypeAverage(this, this.assignments);
            }
            else if (this.grading.method == 'TOTAL_MEAN')
            {
                this._cacheNumericGrade = GPAUtils.getTotalMeanAverage(this.assignments);
            }
            else this._cacheNumericGrade = -1;
        }
        return this._cacheNumericGrade;
    }
-    private _cacheAssignmentTypes: AssignmentType[];
+    /**
     * Get numeric grade by term
     *
     * @param term
     */
    numericGradeTerm(term: number): number
    {
        return this.cache.get('NumericGrade' + term, () =>
        {
            // Calculate
            if (this.termGrading[term].method == 'PERCENT_TYPE')
            {
                return GPAUtils.getPercentTypeAverage(this.termGrading[term], this.termAssignments[term]);
            }
            else if (this.termGrading[term].method == 'TOTAL_MEAN')
            {
                return GPAUtils.getTotalMeanAverage(this.termAssignments[term]);
            }
            else return -1;
        })
    }
    /**
     * Get assignment types
     */
    get assignmentTypes(): AssignmentType[]
    {
-        if (this._cacheAssignmentTypes == null)
+        return this.cache.get('AssignmentTypes', () =>
        {
            // Get all types
            let types = this.assignments.map(a => a.type);
@@ -243,7 +371,7 @@ export default class Course
            let totalScoreMax = this.assignments.reduce((sum, a) => sum + a.scoreMax, 0);
            // For every type...
-            this._cacheAssignmentTypes = types.map(type =>
+            return types.map(type =>
            {
                // Get assignments of the type
                let typeAssignments = this.assignments.filter(a => a.type == type);
@@ -253,16 +381,38 @@ export default class Course
                let scoreMax = typeAssignments.reduce((sum, a) => sum + a.scoreMax, 0);
                // Calculate weight
-                let weight = this.grading.method == 'PERCENT_TYPE'
+                let weight = this.termGrading[0].method == 'PERCENT_TYPE'
-                    ? this.grading.weightingMap[type] : scoreMax / totalScoreMax;
+                    ? this.termGrading[0].weightingMap[type] : scoreMax / totalScoreMax;
                // Return
                return {name: type, id: typeAssignments[0].typeId, weight: +(weight * 100).toFixed(2),
                    scoreMax: scoreMax, score: score, percent: +(score / scoreMax * 100).toFixed(2),
                    assignmentCount: typeAssignments.length}
            })
-        }
+        })
    }
-        return this._cacheAssignmentTypes;
+    /**
     * Get url hash code
     */
    get urlHash(): string
    {
        return `course/${this.id}`
    }
    /**
     * Get navigation index
     */
    get urlIndex(): Index
    {
        return {hash: this.urlHash, title: this.name, identifier: 'course', info: {id: this.id}}
    }
    /**
     * Selected term
     */
    get rawSelectedTerm(): number
    {
        return Navigation.instance.getSelectedTerm()
    }
 }
@@ -0,0 +1,46 @@
 const md5 = require('md5');
 export default class LoginUser
 {
    id: number;
    schoolPersonPk: number;
    username: string;
    lastLogin: Date;
    firstLogin: Date;
    firstName: string;
    lastName: string;
    nickname: string;
    graduationYear: string;
    groups: string;
    emails: string[];
    classes: string[];
    birthday: string;
    avatarUrl: string;
    token: string;
    constructor(json: any)
    {
        this.id = json.id;
        this.schoolPersonPk = json.schoolPersonPk;
        this.username = json.username;
        this.lastLogin = new Date(json.lastLogin);
        this.firstLogin = new Date(json.firstLogin);
        this.firstName = json.firstName;
        this.lastName = json.lastName;
        this.nickname = json.nickname;
        this.graduationYear = json.graduationYear;
        this.groups = json.groups;
        this.emails = json.emails.split('|').map((e: any) => e.toLowerCase().trim());
        this.classes = json.classes.split('|');
        this.birthday = json.birthday;
        this.avatarUrl = json.avatarUrl;
        this.token = json.token;
        // Generate default avatar
        if (this.avatarUrl == null || this.avatarUrl == '')
        {
            this.avatarUrl = `https://www.gravatar.com/avatar/${md5(this.emails[0])}?d=404` + encodeURIComponent(
                `https://ui-avatars.com/api/${this.firstName.charAt(0)}${this.lastName.charAt(0)}/128`);
        }
    }
 }
@@ -0,0 +1,160 @@
 import {FormatUtils} from '@/logic/utils/format-utils';
 import pWaitFor from 'p-wait-for';
 import App from '@/components/app/app';
 export interface Index
 {
    hash: string
    title?: string
    identifier: string
    info?: any
 }
 export default class NavController
 {
    // Current index
    index: Index;
    // Callback
    updateCallback?: () => void;
    constructor()
    {
        // Create history state listener
        window.onpopstate = (e: any) =>
        {
            if (e.state)
            {
                // Restore previous tab
                //console.log(`onPopState: Current: ${this.index.hash}, Previous: ${e.state.hash}`);
                this.updateIndex(e.state, false);
            }
        };
        // Initialize
        this.init()
    }
    /**
     * Initialize from last location
     */
    private init()
    {
        if (window.location.hash == '#info') return;
        // Check history from last session
        if (window.history.state != undefined && window.history.state.hash != undefined)
        {
            // Last history exists
            this.index = window.history.state;
            return;
        }
        // Last history doesn't exist but hash url might exist
        let hash = window.location.hash.replace('#', '');
        // Check hash
        if (hash == '')
        {
            // No location info in url, set page to overall
            window.history.replaceState(this.convertIndex('overall'), '', '/#overall');
            this.updateIndex('overall', false);
            return;
        }
        // There is hash info in url
        let split = hash.split('/');
        // Not course -> don't know what to do with this url, so just refresh
        if (split[0] != 'course')
        {
            this.initClear();
            return;
        }
        // Is course -> Update index with placeholder title
        this.updateIndex({hash: hash, title: `Loading...`, identifier: 'course', info: {id: +split[1]}}, false);
        // Wait for courses to finish loading
        pWaitFor(() => App.instance != undefined && App.instance.assignmentsReady).then(() =>
        {
            // Find course
            let course = App.instance.courses.find(c => c.id == +split[1]);
            // This person has no such course, refresh to overall
            if (course == null)
            {
                this.initClear();
                return;
            }
            window.history.replaceState(course.urlIndex, '', '/#' + course.urlHash);
            this.updateIndex(course.urlIndex, false);
        })
    }
    private initClear()
    {
        window.location.hash = '';
        window.location.reload();
    }
    /**
     * Update index
     *
     * @param index Hash and title | Hash only
     * @param history Record in history or not (Default true)
     */
    updateIndex(index: Index | string, history: boolean = true)
    {
        index = this.convertIndex(index);
        // Call custom event
        if (this.updateCallback != null) this.updateCallback();
        // Record history or not
        if (history)
        {
            //console.log(`history: Current: ${this.index.hash}, New: ${index.hash}`);
            // Check url
            let url = `/#${index.hash}`;
            // Push history state
            window.history.pushState(index, '', url);
        }
        // Update title
        document.title = 'Veracross Analyzer - ' + index.title;
        // Scroll to top
        window.scrollTo(0, 0);
        // Update selected index
        this.index = index;
    }
    /**
     * Check index conversion
     *
     * @param index Hash and title | Hash only
     * @return Index Hash and title
     */
    private convertIndex(index: Index | string): Index
    {
        // Convert index format if it is hash only
        if (typeof index == 'string') index = {hash: index, identifier: index};
        if (index.title == null) index.title = FormatUtils.toTitleCase(index.hash);
        return index;
    }
    get id(): string
    {
        return this.index.identifier
    }
    get info(): any
    {
        return this.index.info
    }
 }
@@ -0,0 +1,20 @@
 export default class CacheUtils
 {
    map: Map<string, any> = new Map();
    /**
     * Get a cached value, or if not cached, cache it.
     *
     * @param name Name of the cached value
     * @param callback Callback function
     */
    public get(name: string, callback: () => any)
    {
        if (!this.map.has(name))
        {
            this.map.set(name, callback());
        }
        return this.map.get(name);
    }
 }
@@ -1,4 +1,3 @@
 import Course from '@/logic/course';
 import Navigation from '@/components/navigation/navigation';
 import Constants from '@/constants';
@@ -20,17 +19,6 @@ UNKNOWN_COURSE_LIST.set('Painting', LEVEL_CP);
 export class CourseUtils
 {
    /**
     * Format course to tab index string
     *
     * @param course Course object
     * @return string Tab index
     */
    public static formatTabIndex(course: Course): string
    {
        return `course/${course.id}/${course.name.toLowerCase().split(' ').join('-')}`;
    }
    /**
     * Detect course level based on course name
     *
@@ -72,7 +60,7 @@ export class CourseUtils
     */
    static getTermBeginDate()
    {
-        let selected = Navigation.instance.getSelectedGradingPeriod();
+        let selected = Navigation.instance.getSelectedTerm();
        return selected == -1 ? Constants.TERMS[0] : Constants.TERMS[selected];
    }
@@ -82,8 +70,8 @@ export class CourseUtils
     */
    static getTermEndDate()
    {
-        let selected = Navigation.instance.getSelectedGradingPeriod();
+        let selected = Navigation.instance.getSelectedTerm();
-        return selected == -1 ? Constants.TERMS[3] : Constants.TERMS[selected + 1];
+        return selected == -1 ? Constants.TERMS[4] : Constants.TERMS[selected + 1];
    }
 }
@@ -1,5 +1,3 @@
 import moment from 'moment';
 export class FormatUtils
 {
    /**
@@ -0,0 +1,7 @@
 export function findLastIndex<T>(array: T[], callback: (v: T) => boolean): number
 {
    let arr2 = array.slice().reverse();
    let result = arr2.findIndex(callback);
    return result == -1 ? -1 : arr2.length - result - 1;
 }
@@ -1,4 +1,4 @@
-import Course, {Assignment} from '@/logic/course';
+import Course, {Assignment, Grading} from '@/logic/course';
 export interface Scale
 {
@@ -48,7 +48,7 @@ export class GPAUtils
            {
                accurate = false;
            }
-            else if (course.level != 'none')
+            else if (course.level != 'none' && !isNaN(course.numericGrade))
            {
                courses.push(course);
            }
@@ -65,7 +65,7 @@ export class GPAUtils
        let maxTotal = 0;
        courses.forEach(course =>
        {
-            totalGPA += this.getGP(course, course.letterGrade);
+            totalGPA += this.getGP(course, course.numericGrade);
            maxTotal += this.getGP(course, 'A+');
        });
@@ -83,7 +83,7 @@ export class GPAUtils
     * @param course Course
     * @param letterGrade Letter grade
     */
-    public static getGP(course: Course, letterGrade: string): number
+    public static getGP(course: Course, letterGrade: string | number): number
    {
        // Get scale
        let scale = this.findScale(letterGrade);
@@ -140,12 +140,11 @@ export class GPAUtils
    /**
     * Calculate the percent type
     * TODO: Combine it with overall-line
     *
-     * @param course
+     * @param grading
     * @param assignments
     */
-    public static getPercentTypeAverage(course: Course, assignments: Assignment[])
+    public static getPercentTypeAverage(grading: Grading, assignments: Assignment[])
    {
        let typeScores: {[index: string]: any} = {};
        let typeCounts: {[index: string]: any} = {};
@@ -168,11 +167,11 @@ export class GPAUtils
        // Eg. If HW = 25% and Quiz = 75%, I have 1 hw and 0 quiz
        // Without total percentage, the avg grade I get is 25%.
        let totalPercentage = 0;
-        for (let type in course.grading.weightingMap)
+        for (let type in grading.weightingMap)
        {
            if (typeScores[type] != undefined)
            {
-                totalPercentage += course.grading.weightingMap[type];
+                totalPercentage += grading.weightingMap[type];
            }
        }
@@ -180,7 +179,7 @@ export class GPAUtils
        let score = 0;
        for (let type in typeScores)
        {
-            let typeFactor = course.grading.weightingMap[type] / totalPercentage;
+            let typeFactor = grading.weightingMap[type] / totalPercentage;
            score += typeScores[type] * typeFactor / typeCounts[type];
        }
@@ -1,4 +1,5 @@
 import Constants from '@/constants';
 import App from '@/components/app/app';
 export default class GraphUtils
 {
@@ -54,6 +55,9 @@ export default class GraphUtils
     */
    static getGradeMarkAreas(opacity: number)
    {
        // TODO: Auto update after switching dark mode (possibly by refreshing)
        opacity = App.instance.darkMode ? 0.1 : opacity;
        return {
            silent: true,
            data:
@@ -1,13 +1,14 @@
 import Constants from '@/constants';
 import LoginUser from '@/logic/login-user';
 export class HttpUtils
 {
-    public token: string = '';
+    public user: LoginUser;
    public post(node: string, body: any): Promise<any>
    {
        // Add token
-        if (this.token != '') body['token'] = this.token;
+        if (this.user != null) body['token'] = this.user.token;
        // Create promise
        return new Promise<any>((resolve, reject) =>
@@ -1,35 +0,0 @@
 import {Assignment} from '@/logic/course';
 export default class JsonUtils
 {
    /**
     * This method filters the information provided in an assignments json.
     *
     * @param assignments Assignments object
     * @returns Assignment[] Filtered assignment grade object list
     */
    public static filterAssignments(assignments: any): Assignment[]
    {
        return assignments.assignments.map((assignment: any) =>
        {
            return {
                id: assignment.assignment_id,
                scoreId: assignment.score_id,
                type: assignment.assignment_type,
                typeId: assignment.assignment_type_id,
                description: assignment.assignment_description,
                time: new Date(assignment._date).getTime(),
                complete: assignment.completion_status,
                include: assignment.include_in_calculated_grade == 1,
                display: assignment.display_grade == 1,
                unread: assignment.is_unread == 1,
                scoreMax: assignment.maximum_score,
                score: +assignment.raw_score,
                gradingPeriod: +assignment.grading_period.replace('Quarter ', '') - 1
            }
        });
    }
 }
@@ -1,12 +1,12 @@
 <template>
    <el-card id="course-card" class="course-card">
-        <course-head :clickable="false" :course="course" :unread="countUnread()"></course-head>
+        <course-head :clickable="false" :course="course" :unread="countUnread()"/>
        <div class="course-card-content expand">
            <el-row>
                <el-col :span="24" class="course-page-graph">
                    <el-card class="large overall-line-card vertical-center">
-                        <course-scatter :course="course"></course-scatter>
+                        <course-scatter :course="course"/>
                    </el-card>
                </el-col>
            </el-row>
@@ -15,13 +15,13 @@
                <el-col :span="12" class="course-page-graph">
                    <el-card class="large overall-line-card vertical-center type-graph"
                             body-style="padding: 0">
-                        <TypeRadar :course="course"></TypeRadar>
+                        <TypeRadar :course="course"/>
                    </el-card>
                </el-col>
                <el-col :span="12" class="course-page-graph">
                    <el-card class="large overall-line-card vertical-center type-graph"
                             body-style="padding: 0">
-                        <TypePie :course="course"></TypePie>
+                        <TypePie :course="course"/>
                    </el-card>
                </el-col>
            </el-row>
@@ -68,4 +68,4 @@
    }
 </script>
-<style src="./course-page.scss" lang="scss" scoped></style>
+<style src="./course-page.scss" lang="scss" scoped/>
@@ -6,8 +6,7 @@ import Course, {Assignment} from '@/logic/course';
 import GraphUtils from '@/logic/utils/graph-utils';
 import chroma from 'chroma-js';
-@Component({
+@Component
 })
 export default class CourseScatter extends Vue
 {
    @Prop({required: true}) course: Course;
@@ -70,8 +69,8 @@ export default class CourseScatter extends Vue
                    type: 'cross'
                },
                formatter: (ps: any[]) => moment(ps[0].data[0]).format('MMM DD, YYYY') + '<br>' + ps.map(p =>
-                    `${GraphUtils.DOT.replace('{color}', p.color)}
+                        `${GraphUtils.DOT.replace('{color}', p.color.colorStops[1].color)}
-                    ${FormatUtils.limit(p.data[2].description, 22)}: ${p.data[1]}%<br>`).join('')
+                        ${FormatUtils.limit(p.data[2].description, 22)}: ${p.data[1]}%<br>`).join('')
            },
            // Legend
@@ -1,8 +1,7 @@
 <template>
    <div id="course-scatter">
-        <ve-scatter height="450px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"></ve-scatter>
+        <ve-scatter height="450px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"/>
    </div>
 </template>
 <script src="./course-scatter.ts" lang="ts"></script>
 <style lang="scss" scoped></style>
@@ -1,8 +1,6 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
-import {FormatUtils} from '@/logic/utils/format-utils';
+import Course from '@/logic/course';
 import moment from 'moment';
 import Course, {Assignment} from '@/logic/course';
 import GraphUtils from '@/logic/utils/graph-utils';
@Component
@@ -31,8 +29,6 @@ export default class TypePie extends Vue
            ...GraphUtils.getBaseSettings('Assignment Type Weight',
                'How much each type of assignment affect your average'),
            tooltip: GraphUtils.tooltipCssShadow(),
            // Data
            series:
            {
@@ -1,8 +1,6 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
-import {FormatUtils} from '@/logic/utils/format-utils';
+import Course from '@/logic/course';
 import moment from 'moment';
 import Course, {Assignment} from '@/logic/course';
 import GraphUtils from '@/logic/utils/graph-utils';
@Component
@@ -66,8 +64,6 @@ export default class TypeRadar extends Vue
                center: ['50%', '55%']
            },
            tooltip: GraphUtils.tooltipCssShadow(),
            // Data
            series:
            {
@@ -1,8 +1,7 @@
 <template>
    <div id="type-radar">
-        <ve-radar height="420px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"></ve-radar>
+        <ve-radar height="420px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"/>
    </div>
 </template>
 <script src="./type-radar.ts" lang="ts"></script>
 <style lang="scss" scoped></style>
@@ -4,8 +4,7 @@ import {GPAUtils} from '@/logic/utils/gpa-utils';
 import Constants from '@/constants';
 import {FormatUtils} from '@/logic/utils/format-utils';
-@Component({
+@Component
 })
 export default class OverallBar extends Vue
 {
    @Prop({required: true}) courses: Course[];
@@ -1,7 +1,6 @@
 <template>
    <div id="overall-bar">
-        <ve-bar height="450px" class="graph"
+        <ve-bar height="450px" class="graph" :extend="chartSettings"/>
                :extend="chartSettings"></ve-bar>
    </div>
 </template>
@@ -57,6 +57,13 @@
        text-align: right;
        float: right;
        // Status / Problems
        span.status
        {
            margin-right: 8px;
        }
        // Percentage score
        span.percent
        {
            font-style: italic;
@@ -18,6 +18,9 @@
            </el-col>
            <el-col :span="6" class="grade">
                <span v-if="assignment.problem" class="status entry-box" :style="{color: assignment.problemColor}">
                    {{assignment.problem}}
                </span>
                <span class="percent entry-box">
                    {{(assignment.score / assignment.scoreMax * 100).toFixed(1)}}
                    <span class="symbol">%</span>
@@ -68,4 +71,4 @@
        }
    }
 </script>
-<style src="./assignment-entry.scss" lang="scss" scoped></style>
+<style src="./assignment-entry.scss" lang="scss" scoped/>
@@ -1,27 +1,30 @@
 // Main card content
 .course-card-content.main
 {
    padding: 0 20px 0 20px;
    height: 90px;
    // Main color
    background: white;
    // Alignment
    display: block;
    padding: 20px;
    height: 50px;
 }
-.course-col-name
+#block-info
 {
    // Align left
    text-align: left;
    float: left;
-    .course-name
+    #name
    {
        overflow: hidden;
        font-size: 22px;
        color: var(--main);
    }
-    .course-teacher
+    #teacher
    {
        font-size: 12px;
        color: #999999;
@@ -29,7 +32,7 @@
    }
 }
-.course-col-grade
+#block-grade
 {
    // Align right
    text-align: right;
@@ -37,17 +40,18 @@
    // Adjust position
    margin-top: -2px;
    margin-left: 10px;
-    .course-grade
+    #grade
    {
        font-size: 21px;
    }
-    .course-updates
+    #updates
    {
        font-size: 14px;
-        .unread-number
+        #unread-number
        {
            display: inline-block;
            width: 20px;
@@ -60,33 +64,53 @@
            margin-right: 3px;
        }
-        .unread-text
+        #unread-text
        {
            font-style: italic;
        }
    }
-    .course-updates.unread
+    #updates.unread
    {
-        .unread-number
+        #unread-number
        {
            background: var(--unread);
            color: white;
        }
-        .unread-text
+        #unread-text
        {
            color: var(--unread);
        }
    }
-    .course-updates.none
+    #updates.none
    {
        color: #999999;
-
+        #unread-number
        .unread-number
        {
            background: #eeeeee;
        }
    }
 }
 #block-term-grades
 {
    // Align right
    width: auto;
    float: right;
    margin-right: 10px;
    color: gray;
    #term, #term-numeric
    {
        font-size: 11px;
        color: #b3b3b3;
    }
    #term-letter
    {
        font-size: 14px;
    }
 }
@@ -1,33 +1,34 @@
 <template>
-    <div id="course-head" class="course-card-content main vertical-center" @click="redirect">
+    <div id="course-head" class="course-card-content main vertical-center"
-        <el-row>
+         :class="clickable ? 'clickable' : ''" @click="redirect">
-            <el-col :span="12" class="course-col-name">
+        <div id="block-info">
-                <div v-if="clickable" class="course-name clickable" @click="redirect">{{course.name}}</div>
+            <div id="name">{{course.name}}</div>
-                <div v-if="!clickable" class="course-name">{{course.name}}</div>
+            <div id="teacher">{{course.teacherName}}</div>
-                <div class="course-teacher">{{course.teacherName}}</div>
+        </div>
-            </el-col>
+        <div id="block-grade">
-            <el-col :span="12" class="course-col-grade">
+            <div id="grade">
-                <div class="course-grade">
+                <span id="letter">{{course.letterGrade}} </span>
-                    <span class="letter">{{course.letterGrade}} </span>
+                <span id="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
-                    <span class="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
+                <span id="percent" v-if="course.numericGrade !== undefined">%</span>
-                    <span class="percent" v-if="course.numericGrade !== undefined">%</span>
+            </div>
-                </div>
+            <div id="updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
-                <div class="course-updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
+                <span id="unread-number">{{unread}}</span>
-                    <span class="unread-number">{{unread}}</span>
+                <span id="unread-text" :class="clickable ? 'clickable' : ''">new update{{unread >= 2 ? 's' : ''}}</span>
-                    <span class="unread-text" :class="clickable ? 'clickable' : ''">
+            </div>
-                        new update{{unread >= 2 ? 's' : ''}}
+        </div>
-                    </span>
+        <div id="block-term-grades" v-if="course.rawSelectedTerm === -1"
-                </div>
+             v-for="term in course.allGradingPeriods.slice().reverse()">
-            </el-col>
+            <div id="term">Term {{term + 1}}</div>
-        </el-row>
+            <div id="term-letter">{{course.letterGradeTerm(term)}}</div>
            <div id="term-numeric">{{course.numericGradeTerm(term).toFixed(1)}}%</div>
        </div>
    </div>
 </template>
 <script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import Course from '@/logic/course';
-    import {CourseUtils} from '@/logic/utils/course-utils';
+    import App from '@/components/app/app';
    import Navigation from '@/components/navigation/navigation';
    @Component
    export default class CourseHead extends Vue
@@ -44,9 +45,9 @@
        redirect()
        {
            if (!this.clickable) return;
-            Navigation.instance.updateIndex(CourseUtils.formatTabIndex(this.course));
+            App.instance.nav.updateIndex(this.course.urlIndex);
        }
    }
 </script>
-<style src="./course-head.scss" lang="scss"></style>
+<style src="./course-head.scss" lang="scss" scoped/>
@@ -1,51 +0,0 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import App from '@/components/app/app';
 import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
 import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
 import Course, {Assignment} from '@/logic/course';
@Component({
    components: {UnreadEntry: AssignmentEntry, CourseHead}
 })
 export default class OverallCourse extends Vue
 {
    @Prop({required: true}) course: Course;
    private unread: number = -1;
    private unreadAssignments: Assignment[] = [];
    /**
     * Count the number of unread assignments with cache
     */
    countUnread(): number
    {
        if (this.unread == -1)
        {
            this.unreadAssignments = this.course.assignments.filter(a => a.unread);
            return this.unread = this.unreadAssignments.length;
        }
        else return this.unread;
    }
    /**
     * Mark an assignment as read
     */
    markAsRead(assignment: Assignment)
    {
        App.http.post('/mark-as-read', {scoreId: assignment.scoreId})
        .then(response =>
        {
            // Check success
            if (response.success)
            {
                this.unreadAssignments = this.unreadAssignments.filter(a => a != assignment);
                this.unread = this.unreadAssignments.length;
            }
            else
            {
                // Show error message TODO: Show it properly
                alert(response.data)
            }
        })
    }
 }
@@ -1,19 +1,47 @@
 <template>
    <div id="overall-course">
        <el-card class="course-card">
-            <course-head :clickable="true" :course="course" :unread="countUnread()"></course-head>
+            <course-head :clickable="true" :course="course" :unread="unread()"/>
            <div class="course-card-content expand"
-                 v-if="countUnread() !== 0">
+                 v-if="unread() !== 0">
-                <unread-entry v-for="assignment in unreadAssignments"
+                <assignment-entry v-for="assignment in unreadAssignments()"
                              :assignment="assignment"
                              :key="assignment.id"
                              unread="true"
-                              v-on:mark-as-read="markAsRead">
+                              v-on:mark-as-read="assignment.markAsRead()">
-                </unread-entry>
+                </assignment-entry>
            </div>
        </el-card>
    </div>
 </template>
-<script src="./overall-course.ts" lang="ts"></script>
+<script lang="ts">
-<style src="./overall-course.scss" lang="scss" scoped></style>
+    import {Component, Prop, Vue} from 'vue-property-decorator';
    import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
    import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
    import Course, {Assignment} from '@/logic/course';
    @Component({
        components: {AssignmentEntry, CourseHead}
    })
    export default class OverallCourse extends Vue
    {
        @Prop({required: true}) course: Course;
        mounted()
        {
            this.unreadAssignments().forEach(a => a.addCallback(() => this.$forceUpdate()));
        }
        unreadAssignments(): Assignment[]
        {
            return this.course.assignments.filter(a => a.unread);
        }
        unread(): number
        {
            return this.unreadAssignments().length;
        }
    }
 </script>
 <style src="./overall-course.scss" lang="scss" scoped/>
@@ -1,11 +1,11 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import moment from 'moment';
-import Course, {Assignment} from '@/logic/course';
+import Course from '@/logic/course';
 import Constants from '@/constants';
 import Navigation from '@/components/navigation/navigation';
 import {CourseUtils} from '@/logic/utils/course-utils';
 import GraphUtils from '@/logic/utils/graph-utils';
 import {GPAUtils} from '@/logic/utils/gpa-utils';
 import Constants from '@/constants';
 import Navigation from '@/components/navigation/navigation';
@Component
 export default class OverallLine extends Vue
@@ -33,8 +33,7 @@ export default class OverallLine extends Vue
            [
                {
                    type: 'slider',
-                    startValue: Math.max(moment().subtract(30, 'days').toDate().getTime(),
+                    startValue: this.getStartDate(),
                        CourseUtils.getTermBeginDate().getTime()),
                    // Minimum zoom: 1 week
                    minValueSpan: 7 * 24 * 60 * 60 * 1000
@@ -83,6 +82,20 @@ export default class OverallLine extends Vue
        return this.settings;
    }
    /**
     * Get starting date
     */
    private getStartDate()
    {
        // If it's a past term, use the term's end date, else use today.
        let selected = Navigation.instance.getSelectedTerm();
        let end = selected == Constants.CURRENT_TERM || selected == -1
            ? moment() : moment(CourseUtils.getTermEndDate());
        return Math.max(end.subtract(30, 'days').toDate().getTime(),
                CourseUtils.getTermBeginDate().getTime())
    }
    /**
     * Generate series data
     */
@@ -118,16 +131,15 @@ export default class OverallLine extends Vue
            type: 'line',
            smooth: true,
            symbol: 'circle', // circle, diamond, emptyCircle, none
-            data: this.toDateRange([...assignments.map(a => a.time)].map((time, i) =>
+            data: this.toDateRange([...new Set(assignments.map(a => a.time))].map(time =>
            {
                // Find subset before this assignment
-                let subset = assignments.filter(a => a.time <= time);
+                let subset = course.getAssignmentsBefore(time);
                // Find grade
-                if (course.grading.method == 'PERCENT_TYPE')
+                if (course.termGrading[subset.term].method == 'PERCENT_TYPE')
-                    return [time, GPAUtils.getPercentTypeAverage(course, subset)];
+                    return [time, GPAUtils.getPercentTypeAverage(course.termGrading[subset.term], subset.assignments)];
-                if (course.grading.method == 'TOTAL_MEAN')
+                else return [time, GPAUtils.getTotalMeanAverage(subset.assignments)];
                    return [time, GPAUtils.getTotalMeanAverage(subset)];
            }))
        }
    }
@@ -141,26 +153,28 @@ export default class OverallLine extends Vue
    private toDateRange(data: any[])
    {
        // Find the min date
-        let minDates = this.courses.map(course => course.assignments[course.assignments.length - 1].time);
+        let minDate: Date = new Date(data[0][0]);
        let minDate: Date = new Date(Math.min.apply(null, minDates));
        // Find the dates in between
        let now = new Date(Math.min(new Date().getTime(), CourseUtils.getTermEndDate().getTime()));
-        let dates: number[] = [];
+        let times: number[] = [];
-        for (let date = minDate; date <= now; date.setDate(date.getDate() + 1))
+        for (let date = minDate; date <= now; date.setDate(date.getDate() + 1)) times.push(date.getTime());
        {
            dates.push(new Date(date).getTime());
        }
        // Map the points
        let lastValue: any = null;
-        return dates.map(date =>
+        return times.map(time =>
        {
            // Data point on this specific date
-            let thisValue = data.find(a => a[0] == date);
+            let thisValue = data.find(a => a[0] == time);
-            // None
+            // Switching terms
-            if (thisValue == null) return [date, lastValue == null ? null : lastValue[1]];
+            if (Constants.TERMS.find(t => t.getTime() == time))
-            else return [date, (lastValue = thisValue)[1]];
+                lastValue = null;
            // Find value
            return thisValue == null
                ? lastValue == null ? null : [time, lastValue[1]]
                : [time, (lastValue = thisValue)[1]];
        });
    }
 }
@@ -1,6 +1,6 @@
 <template>
    <div id="overall-line">
-        <ve-line :extend="{a: this.courses}" :after-config="afterConfig"></ve-line>
+        <ve-line :extend="{a: this.courses}" :after-config="afterConfig"/>
    </div>
 </template>
@@ -51,3 +51,10 @@
    margin-right: 20px;
    min-width: 170px;
 }
 .dialog-checkbox
 {
    display: block;
    margin-top: 20px;
    margin-bottom: -20px;
 }
@@ -1,5 +1,19 @@
 <template>
    <div id="overall">
        <el-progress v-if="started" :text-inside="true" :percentage="progress()"
                     :stroke-width="20" status="success" style="margin: 0 20px"/>
        <el-dialog title="Notice" :visible.sync="clearUnreadPrompt"
                   width="30%" style="word-break: unset;">
            <span>You have too many new grade notifications. Clear them now?</span>
            <img src="./too-many-unread.png" alt=""/>
            <el-checkbox class="dialog-checkbox" v-model="dontAskAgain">Don't Ask Again</el-checkbox>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearUnread(false)" style="float: left">Nope</el-button>
                <el-button type="primary" @click="clearUnread(true)">Sure!</el-button>
            </span>
        </el-dialog>
        <el-row v-if="getGPA().gpa !== -1">
            <el-col :span="4" class="overall-span">
                <el-card class="large gpa-card vertical-center" body-style="padding: 0">
@@ -15,12 +29,12 @@
            </el-col>
            <el-col :span="14" class="overall-span">
                <el-card class="large overall-line-card vertical-center" body-style="padding: 0 10px">
-                    <overall-line :courses="courses"></overall-line>
+                    <overall-line :courses="courses"/>
                </el-card>
            </el-col>
            <el-col :span="6" class="overall-span">
                <el-card class="large overall-bar-card vertical-center" body-style="padding: 0 10px">
-                    <overall-bar :courses="courses"></overall-bar>
+                    <overall-bar :courses="courses"/>
                </el-card>
            </el-col>
        </el-row>
@@ -42,8 +56,8 @@
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import OverallLine from '@/pages/overall/overall-line/overall-line';
    import OverallBar from '@/pages/overall/overall-bar/overall-bar';
-    import OverallCourse from '@/pages/overall/overall-course/overall-course';
+    import OverallCourse from '@/pages/overall/overall-course/overall-course.vue';
-    import Course from '@/logic/course';
+    import Course, {Assignment} from '@/logic/course';
    import {GPAUtils} from '@/logic/utils/gpa-utils';
    @Component({
@@ -57,11 +71,73 @@
         * This function is called to get gpa since I can't import another
         * class in the Vue file.
         */
-        public getGPA()
+        getGPA()
        {
            return GPAUtils.getGPA(this.courses);
        }
        // For clear unread prompt
        unread: Assignment[];
        clearUnreadPrompt = false;
        dontAskAgain = false;
        started = false;
        /**
         * Mark as read progress
         */
        progress()
        {
            return +(this.unread.filter(a => !a.unread).length / this.unread.length * 100).toFixed(1);
        }
        /**
         * On page load - check if the user has too many notifications
         */
        mounted()
        {
            // Check unread
            if (!this.$cookies.isKey('va.ignore-unread'))
            {
                // Count unread
                this.unread = this.courses.flatMap(c => c.assignments.filter(a => a.unread));
                // Prompt clear
                if (this.unread.length > 15)
                {
                    this.clearUnreadPrompt = true;
                }
            }
        }
        /**
         * Clear unread
         *
         * @param confirmed
         */
        clearUnread(confirmed: boolean)
        {
            // Hide prompt
            this.clearUnreadPrompt = false;
            // Not confirmed, do nothing
            if (!confirmed)
            {
                if (!this.dontAskAgain) return;
                // Don't ask again
                this.$cookies.set('va.ignore-unread', true);
            }
            // Clear unread
            this.started = true;
            this.unread.forEach((a, i) =>
            {
                // Delay: 100ms per assignment
                // I don't want my server to explode lol
                setTimeout(() => a.markAsRead().then(() => this.$forceUpdate()), 100 * i);
            });
        }
    }
 </script>
-<style src="./overall.scss" lang="scss" scoped></style>
+<style src="./overall.scss" lang="scss" scoped/>
@@ -0,0 +1,45 @@
 <template>
    <div id="info">
        <div id="top">
            <div id="title">Veracross Analyzer for SJP</div>
            <div id="subtitle">Know your grades better.</div>
        </div>
    </div>
 </template>
 <script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    @Component
    export default class Info extends Vue
    {
    }
 </script>
 <style lang="scss" scoped>
    #top
    {
        padding: 40vh 0;
        // Center and scale the image nicely
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: right;
        #title
        {
            font-size: 30px;
            margin-right: 10vw;
            color: white;
        }
        #subtitle
        {
            margin-right: 10vw;
            color: white;
        }
    }
 </style>
@@ -15,9 +15,7 @@
      "webpack-env"
    ],
    "paths": {
-      "@/*": [
+      "@/*": ["src/*"]
        "src/*"
      ]
    },
    "lib": [
      "esnext",
@@ -2,7 +2,9 @@
  "defaultSeverity": "warning",
  "linterOptions": {
    "exclude": [
-      "node_modules/**"
+      "node_modules/**",
      "*.json",
      "**/*.json"
    ]
  },
  "rules": {