[U] Release v0.4.1.895

[S] Emphesize the title more
[S] Set font size
2019-11-06 22:34:08 -05:00 · 2019-11-06 22:29:03 -05:00 · 2019-11-06 22:25:03 -05:00 · 2019-11-06 22:24:56 -05:00 · 2019-11-06 22:24:46 -05:00 · 2019-11-06 22:19:29 -05:00
47 changed files with 1917 additions and 561 deletions
@@ -6935,6 +6935,11 @@
        }
      }
    },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
    "move-concurrently": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -11,6 +11,7 @@
    "core-js": "^2.6.5",
    "echarts": "^4.2.1",
    "element-ui": "^2.11.1",
+    "moment": "^2.24.0",
    "p-wait-for": "^3.1.0",
    "v-charts": "^1.19.0",
    "vue": "^2.6.10",
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>404: Redirecting...</title>
+    <meta http-equiv = "refresh" content = "0; url = https://vera.hydev.org/" />
+</head>
+<body>
+    404 Not Found! Redirecting to (<a href="https://vera.hydev.org">https://vera.hydev.org</a>)...
+    <script>
+        window.location.href = 'https://vera.hydev.org';
+    </script>
+</body>
+</html>
@@ -25,4 +25,14 @@
        <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>
    </body>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q615K1KFLC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-Q615K1KFLC');
+    </script>
 </html>
@@ -1,14 +1,85 @@
 #app
 {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
+    margin-bottom: 100px;
+}
+
+#app-content
+{
+    // Limit max width
+    max-width: 1300px;
+    text-align: center;
+    margin: auto;
 }

 .theme-default
 {
    --unread: #ff6c00;
    --main: #0c6dad;
+
+    --assignment-type-2: #3f991e;
+    --assignment-type-3: #ff9900;
+    --assignment-type-4: #b02b02;
+
+    --font: 'Avenir', Helvetica, Arial, sans-serif;
+}
+
+// ##############
+// # Global CSS #
+// ##############
+
+.el-card
+{
+    margin: 10px;
+    padding: 0;
+}
+
+.el-card.large
+{
+    height: 494px;
+}
+
+// Fix padding
+.el-card__body
+{
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+// Vertical centering
+.vertical-center
+{
+    // Vertical center
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+// Remove card padding for styling issues
+div.el-card.course-card > div.el-card__body
+{
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+}
+
+// Clickable text
+.clickable:hover
+{
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+// Non-selectable text
+.unselectable
+{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
@@ -1,61 +1,44 @@
 import {Component, Vue} from 'vue-property-decorator';
 import Login from '@/components/login/login';
 import Navigation from '@/components/navigation/navigation';
-import Overall from '@/pages/overall/overall';
+import Overall from '@/pages/overall/overall.vue';
 import Constants from '@/constants';
 import JsonUtils from '@/utils/json-utils';
 import pWaitFor from 'p-wait-for';
 import {HttpUtils} from '@/utils/http-utils';
 import {CourseUtils} from '@/utils/course-utils';
 import {GPAUtils} from '@/utils/gpa-utils';
+import Loading from '@/components/loading/loading.vue';
+import CoursePage from '@/pages/course/course-page.vue';
+import {FormatUtils} from '@/utils/format-utils';
+import Course from '@/logic/course';
+

 /**
 * Objects of this interface represent assignment grades.
 */
 export interface Assignment
 {
-    id: number,
-    type: string,
-    description: string,
-    date: string,
-    complete: string,
-    include: boolean,
-    display: boolean,
+    id: number
+    scoreId: number
+    type: string
+    typeId: number
+    description: string
+    date: Date
+    complete: string
+    include: boolean
+    display: boolean

-    unread: boolean,
+    unread: boolean

-    scoreMax: number,
+    scoreMax: number
    score: number
-}

-/**
- * A course
- */
-export interface Course
-{
-    assignmentsId: number,
-    id: number,
-    name: string,
-    teacherName: string,
-    status: string,
-
-    letterGrade?: string,
-    numericGrade?: number,
-
-    level: string,
-    scaleUp: number,
-
-    grading:
-    {
-        method: string,
-        weightingMap: {[index: string]: number}
-    }
-
-    assignments: Assignment[]
+    gradingPeriod: number
 }

@Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading, CoursePage},
 })
 export default class App extends Vue
 {
@@ -77,8 +60,17 @@ export default class App extends Vue
    // Token
    public token: string = '';

+    // Loading text
+    public loading: string = '';
+
+    // Loading error
+    public loadingError: boolean = false;
+
    // Http Client
-    public http: HttpUtils = new HttpUtils('');
+    public static http: HttpUtils = new HttpUtils();
+
+    // Instance
+    public static instance: App;

    /**
     * This is called when the instance is created.
@@ -87,6 +79,9 @@ export default class App extends Vue
    {
        // Show splash
        console.log(Constants.SPLASH);
+
+        // Update instance
+        App.instance = this;
    }

    /**
@@ -99,11 +94,14 @@ export default class App extends Vue
        // Hide login bar
        this.showLogin = false;

+        // Show loading message
+        this.logLoading('1. Logging in...');
+
        // Store token
        this.token = token;

        // Assign token to http client
-        this.http.token = token;
+        App.http.token = token;

        // Load data
        this.loadCoursesAfterLogin();
@@ -114,24 +112,24 @@ export default class App extends Vue
     */
    public loadCoursesAfterLogin()
    {
-        this.http.post('/courses', {}).then(response =>
+        // Show loading message
+        this.logLoading('2. Loading courses...');
+
+        // Post request
+        App.http.post('/courses', {}).then(response =>
        {
            // Check success
            if (response.success)
            {
                // Save courses
-                this.courses = response.data;
+                this.courses = response.data.map((courseJson: any) => new Course(courseJson));

                // Load assignments
                this.loadAssignments();
            }
-            else
-            {
-                // Show error message TODO: Show it properly
-                alert(response.data);
-            }
+            else throw new Error(response.data);
        })
-        .catch(alert);
+        .catch(e => this.showError(`Error: Course data failed to load.\n(${e})`));
    }

    /**
@@ -139,33 +137,30 @@ export default class App extends Vue
     */
    public loadAssignments()
    {
+        // Show loading message
+        this.logLoading('3. Loading assignments...');
+
        // Get assignments for all the courses
        this.courses.forEach(course =>
        {
            // Send request to get assignments
-            this.http.post('/assignments', {id: course.assignmentsId}).then(response =>
+            App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
            {
                // Check success
                if (response.success)
                {
-                    // Load assignments
-                    // Parse json and filter it
-                    course.assignments = JsonUtils.filterAssignments(response.data);
-                }
-                else
-                {
-                    // Show error message TODO: Show it properly
-                    alert(response.data);
+                    course.loadAssignments(response.data);
                }
+                else throw new Error(response.data);
            })
-            .catch(alert);
+            .catch(e => this.showError(`Error: Assignments data failed to load.\n(${e})`));
        });

        // Wait for assignments to be ready.
-        pWaitFor(() => this.isAssignmentsReady()).then(() =>
+        pWaitFor(() => this.courses.every(c => c.rawAssignments != null)).then(() =>
        {
            // Filter courses
-            this.filteredCourses = CourseUtils.getGradedCourses(this.courses);
+            this.filteredCourses = this.courses.filter(c => c.isGraded);

            // Check grading algorithms
            this.checkGradingAlgorithms();
@@ -173,37 +168,27 @@ export default class App extends Vue
    }

    /**
-     * Are assignments ready or not
-     *
-     * @returns boolean Ready or not
-     */
-    private isAssignmentsReady(): boolean
-    {
-        for (const course of this.courses)
-        {
-            if (course.assignments == null) return false;
-        }
-
-        return true;
-    }
-
-    /**
-     * Check the courses' grading algorithms. (Total-average or percent-type)
+     * Check the courses' grading algorithms. (Total-mean or percent-type)
     */
    private checkGradingAlgorithms()
    {
+        // Show loading message
+        this.logLoading('4. Checking grading algorithms...');
+
        // Loop through all the courses
        for (const course of this.filteredCourses)
        {
+            let termGrade = +GPAUtils.getTotalMeanAverage(course.computed.termAssignments[Constants.CURRENT_TERM]).toFixed(2);
+
            // Check if total-average grade is the same with percent-type grade
-            if (course.numericGrade == GPAUtils.getTotalMeanAverage(course))
+            if (course.rawNumericGrade == termGrade)
            {
-                course.grading = {method: 'TOTAL_AVERAGE', weightingMap: {}};
+                course.grading = {method: 'TOTAL_MEAN', weightingMap: {}};
            }
            else
            {
                // Request grading scheme for this course
-                this.http.post('/grading', {'assignment_id': course.assignmentsId}).then(response =>
+                App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
                {
                    // Check success
                    if (response.success)
@@ -211,55 +196,43 @@ export default class App extends Vue
                        // Add it to course
                        course.grading = response.data;
                    }
-                    else
-                    {
-                        // Show error message TODO: Show it properly
-                        alert(response.data)
-                    }
+                    else throw new Error(response.data);
                })
-                .catch(alert)
+                .catch(e => this.showError(`Error: Grading data failed to load.\n(${e})`))
            }
        }

        // Wait for done
-        pWaitFor(() => this.isGradingReady()).then(() =>
+        pWaitFor(() => this.filteredCourses.every(c => c.grading != undefined)).then(() =>
        {
            // When the assignments are ready
-            // TODO: Display loading
            this.assignmentsReady = true;
+
+            // Remove loading
+            this.logLoading('');
        })
    }

    /**
-     * Are grading algorithms ready or not.
+     * Log a message to loading screen
     *
-     * @returns boolean Ready or not
+     * @param message Message
     */
-    private isGradingReady(): boolean
+    private logLoading(message: string)
    {
-        for (const course of this.filteredCourses)
-        {
-            if (course.grading == undefined)
-            {
-                return false;
-            }
-        }
-
-        return true;
+        if (message == '') this.loading = '';
+        else this.loading += '\n' + message;
    }

    /**
-     * This is called when a navigation tab is clicked
+     * Show error message on loading screen
     *
-     * @param tab Tab name
+     * @param message Error message
     */
-    public onNavigate(tab: string)
+    private showError(message: string)
    {
-        // Debug output TODO: Remove this
-        console.log(tab);
-
-        // Update selected tab
-        this.selectedTab = tab;
+        this.loadingError = true;
+        this.loading = message;
    }

    /**
@@ -273,4 +246,15 @@ export default class App extends Vue
        // Refresh
        window.location.reload();
    }
+
+    /**
+     * Select time (Eg. Term 1, Term 2, All Year, etc.)
+     *
+     * @param code
+     */
+    public selectTime(code: number)
+    {
+        // TODO: Optimize
+        window.location.reload();
+    }
 }
@@ -1,16 +1,21 @@
 <template>
    <div id="app" class="theme-default">
-        <login v-if="showLogin" v-on:login:token="onLogin" :http="http"></login>
+        <login v-if="showLogin" v-on:login:token="onLogin"></login>
        <navigation :courses="filteredCourses"
-                    v-on:sign-out="signOut()"
-                    v-on:navigation:select="onNavigate">
+                    :activeIndex.sync="selectedTab"
+                    @sign-out="signOut" @select-time="selectTime">
        </navigation>

-        <div id="app-content">
-            <overall :courses="filteredCourses"
-                     v-if="selectedTab === 'overall' && assignmentsReady">
+        <div id="app-content" v-if="assignmentsReady && loading === ''">
+            <overall v-if="selectedTab === 'overall'"
+                     :courses="filteredCourses">
            </overall>
+            <course-page v-if="selectedTab.split('/')[0] === 'course'"
+                         :course="filteredCourses.find(c => +c.id === +selectedTab.split('/')[1])">
+            </course-page>
        </div>
+
+        <loading v-if="loading !== ''" :text="loading" :error="loadingError"></loading>
    </div>
 </template>

@@ -0,0 +1,114 @@
+<template>
+    <div id="loading">
+        <div id="text" :class="message()">
+            {{message()}}
+
+            <div v-if="!error" class="el-loading-spinner">
+                <svg viewBox="25 25 50 50" class="circular">
+                    <circle cx="50" cy="50" r="20" fill="none" class="path" />
+                </svg>
+            </div>
+
+            <div v-if="error" id="error-details">
+                <span v-for="(line, index) in getText()" :style="`font-size: ${-index === 0 ? 16 : 12}px;`">
+                    {{line}}
+                    <br>
+                </span>
+            </div>
+        </div>
+
+        <div v-if="!error" id="details">
+            <span v-for="(line, index) in getText()" :style="`font-size: ${16 - getText().length + index}px;`">
+                {{line}}
+                <br>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+
+    @Component({
+        components: {}
+    })
+    export default class Loading extends Vue
+    {
+        @Prop({required: true}) text: string;
+
+        @Prop({required: true}) error: boolean;
+
+        getText()
+        {
+            return this.text.split('\n');
+        }
+
+        message()
+        {
+            return this.error ? 'Error' : 'Loading';
+        }
+    }
+</script>
+
+<style scoped>
+    #loading
+    {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: inset 0 0 1px 1px rgba(0,0,0,.1);
+        background: -webkit-linear-gradient(left, rgba(95, 18, 72, 0.4), rgba(42, 81, 117, 0.4) 100%);
+
+        text-align: center;
+    }
+
+    .Error
+    {
+        color: #ffdddd !important;
+    }
+
+    #text
+    {
+        color: white;
+
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        font-size: 46px;
+    }
+
+    #details
+    {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        margin-top: -5px;
+        font-size: 16px;
+        color: #f9f9f9;
+    }
+
+    #error-details
+    {
+        font-size: 16px;
+    }
+
+    .el-loading-spinner
+    {
+        top: unset !important;
+        margin-top: 0 !important;
+        width: unset !important;
+        position: unset !important;
+    }
+
+    .el-loading-spinner .path
+    {
+        stroke: white;
+    }
+</style>
@@ -1,10 +1,10 @@
-import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Component, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
-import {HttpUtils} from '@/utils/http-utils';
+import App from '@/components/app/app';
+import VersionUtils from '@/utils/version-utils';

 /**
 * This component handles user login, and obtains data from the server.
- * TODO: Press enter to login
 */
@Component({
    components: {},
@@ -17,9 +17,6 @@ export default class Login extends Vue
    public loading: boolean = false;
    public error: String = '';

-    @Prop()
-    public http?: HttpUtils;
-
    /**
     * This is called when the instance is created.
     */
@@ -28,9 +25,39 @@ export default class Login extends Vue
        // Check login cookies
        if (this.$cookies.isKey('va.token'))
        {
-            // Already contains valid token / TODO: Validate
-            this.$emit('login:token', this.$cookies.get('va.token'));
+            // Check cookies version
+            if (this.needToUpdateCookies())
+            {
+                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
+                // TODO: Update token each access
+                this.$emit('login:token', this.$cookies.get('va.token'));
+            }
        }
+        else
+        {
+            console.log('Cookies doesn\'t exist');
+        }
+    }
+
+    /**
+     * Check version number
+     *
+     * @returns boolean Need to clear cookies or not
+     */
+    public needToUpdateCookies(): boolean
+    {
+        // Version doesn't exist
+        if (!this.$cookies.isKey('va.version')) return true;
+
+        // If the current version is less than the min supported version
+        return VersionUtils.compare(this.$cookies.get('va.version'), Constants.MIN_SUPPORTED_VERSION) == -1;
    }

    /**
@@ -42,14 +69,15 @@ export default class Login extends Vue
        this.loading = true;

        // Fetch request
-        (<HttpUtils> this.http).post('/login', {username: this.username, password: this.password})
+        App.http.post('/login', {username: this.username, password: this.password})
        .then(response =>
        {
            // Check success
            if (response.success)
            {
                // Save token to cookies
-                this.$cookies.set('va.token', response.data, '7d');
+                this.$cookies.set('va.token', response.data, '27d');
+                this.$cookies.set('va.version', Constants.VERSION, '27d');

                // Call custom event with token
                this.$emit('login:token', response.data);
@@ -5,23 +5,24 @@
                <img alt="Vue logo" src="../../assets/logo.png">

                <h1>Veracross Analyzer</h1>
+                <form id="login-form">
+                    <el-input v-model="username"
+                              placeholder="School Username"
+                              :class="{'input-error': error !== ''}"
+                              @keyup.enter.native="onEnter">
+                    </el-input>

-                <el-input v-model="username"
-                          placeholder="School Username"
-                          :class="{'input-error': error !== ''}"
-                          @keyup.enter.native="onEnter">
-                </el-input>
+                    <el-input v-model="password"
+                              placeholder="Veracross Password"
+                              show-password=""
+                              :class="{'input-error': error !== ''}"
+                              @keyup.enter.native="onEnter">
+                    </el-input>

-                <el-input v-model="password"
-                          placeholder="Veracross Password"
-                          show-password=""
-                          :class="{'input-error': error !== ''}"
-                          @keyup.enter.native="onEnter">
-                </el-input>
+                    <div class="el-form-item__error custom">{{error}}</div>

-                <div class="el-form-item__error custom">{{error}}</div>
-
-                <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                    <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                </form>
            </div>
        </div>
    </div>
@@ -27,6 +27,17 @@
    width: 110px;
 }

+#nav-grading-period
+{
+    // Float right
+    position: absolute;
+    right: 110px;
+
+    // Margins
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
 #nav-title
 {
    // Float left
@@ -40,11 +51,63 @@
    align-items: center;

    // Margins
-    margin-left: 14px;
+    margin-left: 20px;
    margin-right: 8px;

    // Font
-    font-size: 1.25rem;
+    font: bold 16px arial;
    display: inline-flex;

+    // Shadow effect
+    -webkit-background-clip: text;
+    background-color: #b1b1b1;
+    color: transparent;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.85);
+
+    // Make it non-clickable
+    pointer-events: none;
+}
+
+#next-course
+{
+    // Down center
+    width: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    padding-top: 2px;
+    box-shadow: 0 -2px 9px 0 #ecebeb;
+}
+
+footer
+{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+#prev-course
+{
+    // Up center
+    width: 50%;
+    position: absolute;
+    top: 61px;
+    left: 25%;
+    padding-bottom: 2px;
+    box-shadow: 0 2px 9px 0 #ecebeb;
+}
+
+.nav-course-operations
+{
+    // Background
+    background-color: rgba(214, 214, 214, 0.67);
+    opacity: 0.85;
+
+    // Font
+    font-size: 14px;
+    color: #ab8585;
+
+    // Cursor
+    cursor: pointer;
 }
@@ -1,5 +1,9 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import Constants from '@/constants';
+import App from '@/components/app/app';
+import {CourseUtils} from '@/utils/course-utils';
+import {FormatUtils} from '@/utils/format-utils';
+import pWaitFor from 'p-wait-for';
+import Course from '@/logic/course';

 /**
 * This component is the top navigation bar
@@ -9,9 +13,63 @@ import Constants from '@/constants';
 })
 export default class Navigation extends Vue
 {
-    public activeIndex: string = 'overall';
+    @Prop({required: true}) activeIndex: string;

-    @Prop() courses: any;
+    @Prop({required: true}) courses: Course[];
+
+    private gradingPeriod: string = 'All Year';
+
+    // Instance
+    public static instance: Navigation;
+
+    /**
+     * This is called when the instance is created.
+     */
+    public created()
+    {
+        // Check selected time
+        if (!this.$cookies.isKey('va.grading-period'))
+        {
+            this.$cookies.set('va.grading-period', this.gradingPeriod, '10y');
+        }
+        this.gradingPeriod = this.$cookies.get('va.grading-period');
+    }
+
+    /**
+     * This is called when the instance is loaded.
+     */
+    public 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);
+    }

    /**
     * This function is called when the selection changes.
@@ -22,18 +80,107 @@ export default class Navigation extends Vue
    public onSelect(index: string, indexPath: string)
    {
        // Update active index
-        this.activeIndex = index;
-
-        // Call custom event
-        this.$emit('navigation:select', this.activeIndex);
+        this.updateIndex(index);
    }

    /**
-     * This function is called when the sign out button is clicked.
+     * Update index
+     *
+     * @param newIndex New index
+     * @param history Record in history or not (Default true)
     */
-    public signOut()
+    public updateIndex(newIndex: string, history?: boolean)
    {
        // Call custom event
-        this.$emit('sign-out');
+        this.$emit('update:activeIndex', newIndex);
+
+        // Record or not
+        if (history == null || history)
+        {
+            // Check url
+            let url = `/#${newIndex}`;
+
+            // Push history state
+            window.history.pushState({lastTab: newIndex}, '', url);
+        }
+
+        // Update title
+        document.title = 'Veracross Analyzer - ' + this.getTitle(newIndex);
+    }
+
+    /**
+     * Get title for index
+     *
+     * @param index Index
+     */
+    public getTitle(index: string)
+    {
+        // Course
+        if (index.startsWith('course'))
+        {
+            return this.findCourse(index.split('/')[1], 0).name;
+        }
+
+        // Others
+        return FormatUtils.toTitleCase(index);
+    }
+
+    /**
+     * Move to the next course
+     *
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public nextCourse(indexOffset: number)
+    {
+        // Set tab to the next index
+        this.updateIndex(CourseUtils.formatTabIndex(this.findNextCourse(indexOffset)))
+    }
+
+    /**
+     * Find the next course
+     *
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public findNextCourse(indexOffset: number)
+    {
+        return this.findCourse(this.activeIndex.split('/')[1], indexOffset);
+    }
+
+    /**
+     * Find course
+     *
+     * @param courseId Course ID
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public findCourse(courseId: string, indexOffset: number)
+    {
+        // Find current course index
+        let courseIndex = this.courses.findIndex(c => c.id == +courseId);
+
+        // Find next course
+        return this.courses[courseIndex + indexOffset];
+    }
+
+    /**
+     * Select grading period
+     *
+     * @param command Term 1, Term 2, All Year, etc.
+     */
+    public selectGradingPeriod(command: string)
+    {
+        this.gradingPeriod = command;
+        this.$cookies.set('va.grading-period', command, '10y');
+
+        // Call event
+        this.$emit('select-time', this.getSelectedGradingPeriod());
+    }
+
+    /**
+     * Get code for selected time
+     */
+    public getSelectedGradingPeriod(): number
+    {
+        if (this.gradingPeriod == 'All Year') return -1;
+        else return +this.gradingPeriod.replace('Term ', '') - 1;
    }
 }
@@ -1,24 +1,49 @@
 <template>
    <div id="navigation">
-        <el-menu style="margin-bottom: 10px;"
-                 class="centered" :default-active="activeIndex" mode="horizontal" @select="onSelect">
+        <el-menu style="margin-bottom: 10px;" class="centered" mode="horizontal"
+                 :default-active="activeIndex" @select="onSelect">

-            <!--div id="nav-title">
+            <div id="nav-title">
                Veracross Analyzer
-            </div-->
+            </div>

            <el-menu-item index="overall">Overall</el-menu-item>

            <el-submenu index="courses">
                <template slot="title">Courses</template>
                <el-menu-item v-for="course in courses"
-                              :index="`course-${course.name}`"
+                              :index="formatCourseIndex(course)"
                              :key="course.name">{{course.name}}</el-menu-item>
            </el-submenu>

-            <el-button @click="signOut" id="sign-out-button" type="text">Sign Out</el-button>
+            <!-- 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>
+                </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 4" disabled>Term 4</el-dropdown-item>
+                    <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>
        </el-menu>
-        <div class="line"></div>
+
+        <!-- Previous course / Next course (Only when the page is courses) -->
+        <div v-if="activeIndex.includes('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"
+                 @click="nextCourse(1)" id="next-course" class="nav-course-operations unselectable">
+                ▼ NEXT COURSE ▼
+            </div>
+        </footer>
    </div>
 </template>

@@ -3,12 +3,14 @@
 */
 export default class Constants
 {
-    /**
-     * Base url for api access
-     */
+    /** Base url for api access */
    public static API_URL: string = 'https://va.hydev.org/api';

-    public static VERSION: string = '0.3.1.382';
+    /** Current version */
+    public static VERSION: string = '0.4.1.895';
+
+    /** Minimum version that still supports the same cookies */
+    public static MIN_SUPPORTED_VERSION: string = '0.3.4.561';

    public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';

@@ -27,13 +29,19 @@ export default class Constants
        // Colors
        colors:
        [
-            '#18cea5',
-            '#4fa8ed',
-            '#f9627b',
-            '#ffb075',
-            '#005c9c',
-            '#bcabe0',
-            '#d36e75',
+            '#19d4ae',
+            '#5ab1ef',
+            '#fa6e86',
+            '#ffb980',
+            '#0067a6',
+            '#c4b4e4',
+            '#d87a80',
+            '#9cbbff',
+            '#d9d0c7',
+            '#87a997',
+            '#d49ea2',
+            '#5b4947',
+            '#7ba3a8',
            '#fc97af',
            '#919e8b',
            '#d7ab82',
@@ -45,5 +53,9 @@ export default class Constants
            '#724e58',
            '#4b565b'
        ]
-    }
+    };
+
+    // Terms (TODO: Actually get the terms dynamically
+    public static TERMS = [new Date('Sep 04 2019'), new Date('Nov 01 2019'), new Date('Feb 02 2020')];
+    public static CURRENT_TERM = 1;
 }
@@ -0,0 +1,167 @@
+import App, {Assignment} from '@/components/app/app';
+import JsonUtils from '@/utils/json-utils';
+import Constants from '@/constants';
+import {FormatUtils} from '@/utils/format-utils';
+import {CourseUtils} from '@/utils/course-utils';
+import Navigation from '@/components/navigation/navigation';
+import {GPAUtils} from '@/utils/gpa-utils';
+
+export default class Course
+{
+    id: number;
+    assignmentsId: number;
+    name: string;
+    teacherName: string;
+    status: string;
+    rawAssignments: Assignment[];
+
+    rawLetterGrade?: string;
+    rawNumericGrade?: number;
+
+    level: string;
+    scaleUp: number;
+
+    grading:
+    {
+        method: string
+        weightingMap: {[index: string]: number}
+    };
+
+    computed:
+    {
+        termAssignments: Assignment[][]
+        allYearGrade: number
+    };
+
+    /**
+     * Construct a course with a course json object
+     *
+     * @param courseJson Course json object
+     */
+    constructor(courseJson: any)
+    {
+        this.id = courseJson.id;
+        this.assignmentsId = courseJson.assignmentsId;
+        this.name = FormatUtils.parseText(courseJson.name).trim();
+        this.teacherName = courseJson.teacherName;
+        this.status = courseJson.status;
+
+        this.rawLetterGrade = courseJson.letterGrade;
+        this.rawNumericGrade = courseJson.numericGrade;
+
+        // Level and scaleUp
+        let level = CourseUtils.detectLevel(this.name);
+        if (level != undefined)
+        {
+            this.level = level.level;
+            this.scaleUp = level.scaleUp;
+        }
+        else this.level = 'Unknown';
+
+        this.grading = courseJson.grading;
+    }
+
+    /**
+     * Load in assignments data
+     *
+     * @param data Assignments data
+     */
+    loadAssignments(data: any)
+    {
+        // Load assignments
+        // Parse json and filter it
+        this.rawAssignments = JsonUtils.filterAssignments(data);
+
+        // Sort by date (Latest is at 0)
+        this.rawAssignments.sort((a, b) => b.date.getTime() - a.date.getTime());
+
+        // Filter assignments into terms
+        let termAssignments: Assignment[][] = [[], [], [], []];
+        let currentTerm = 0;
+
+        // Loop through it by time order
+        this.rawAssignments.forEach(a => termAssignments[a.gradingPeriod].push(a));
+
+        // Set computed data
+        this.computed = {termAssignments: termAssignments, allYearGrade: -1};
+    }
+
+    /**
+     * Is graded or not
+     */
+    get isGraded(): boolean
+    {
+        // Skip future or past courses
+        if (this.status != 'active') return false;
+
+        // Skip courses without levels TODO: Ask for user input
+        if (this.level == 'None' || this.level == 'Unknown' || this.scaleUp == -1) return false;
+
+        // Skip courses without graded assignments
+        if (this.assignments.filter(a => a.complete == 'Complete').length == 0) return false;
+
+        // Skip if there are no grading scale
+        // if (course.grading.method == 'NOT_GRADED') return;
+
+        // Is graded
+        return true;
+    }
+
+    /**
+     * Get assignments of the selected time
+     */
+    get assignments(): Assignment[]
+    {
+        let timeCode = Navigation.instance.getSelectedGradingPeriod();
+
+        // All year
+        if (timeCode == -1)
+        {
+            return this.rawAssignments;
+        }
+
+        // Specific time
+        return this.computed.termAssignments[timeCode];
+    }
+
+    /**
+     * Get letter grade
+     */
+    get letterGrade(): string
+    {
+        // Cached
+        if (this.rawLetterGrade != undefined)
+            return this.rawLetterGrade;
+
+        // Get scale
+        let scale = GPAUtils.findScale(this.numericGrade);
+
+        // Scale not found
+        if (scale == undefined) return this.rawLetterGrade = '--';
+
+        // Return
+        return this.rawLetterGrade = scale.letter;
+    }
+
+    /**
+     * Get numeric grade
+     */
+    get numericGrade(): number
+    {
+        // Cached
+        if (this.rawNumericGrade != undefined)
+            return this.rawNumericGrade;
+
+        // Calculate
+        if (this.grading.method == 'PERCENT_TYPE')
+        {
+            return this.rawNumericGrade = GPAUtils.getPercentTypeAverage(this, this.assignments);
+        }
+        if (this.grading.method == 'TOTAL_MEAN')
+        {
+            return this.rawNumericGrade = GPAUtils.getTotalMeanAverage(this.assignments);
+        }
+
+        return -1;
+    }
+}
@@ -1,10 +1,10 @@
 import Vue from 'vue';
 import ElementUI from 'element-ui';
-const VCharts = require('v-charts');
-
 import App from './components/app/app.vue';
 import VueCookies from 'vue-cookies';

+const VCharts = require('v-charts');
+
 Vue.config.productionTip = false;

 // Use Element UI
@@ -0,0 +1,85 @@
+<template>
+    <div id="assignment-type-head">
+        <el-card :body-style="{padding: '0px'}">
+            <div id="type-info-card">
+                <span id="type-name">{{typeName}}</span>
+                <span id="type-average">Average: {{average.toFixed(2)}}%</span>
+            </div>
+
+            <AssignmentEntry v-for="assignment of filteredAssignments" :key="assignment.id"
+                             :assignment="assignment" :unread="false"
+                             backgroundColor="#ffffff" narrow="true">
+            </AssignmentEntry>
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import {Assignment} from '@/components/app/app';
+    import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
+
+    @Component({
+        components: {AssignmentEntry}
+    })
+    export default class AssignmentTypeHead extends Vue
+    {
+        @Prop({required: true}) typeName: string;
+        @Prop({required: true}) assignments: Assignment[];
+
+        filteredAssignments: Assignment[];
+
+        /**
+         * Called when this component is created
+         */
+        created()
+        {
+            // Filter assignments to only this type
+            this.filteredAssignments = this.assignments.filter(a => a.type == this.typeName);
+        }
+
+        get average()
+        {
+            return this.filteredAssignments.reduce((a, b) => a + b.score, 0) /
+                this.filteredAssignments.reduce((a, b) => a + b.scoreMax, 0) * 100;
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    #type-info-card
+    {
+        height: 60px;
+    }
+
+    #type-name
+    {
+        // Font
+        font-size: 22px;
+        color: var(--main);
+
+        // Center
+        height: 60px;
+        line-height: 60px;
+
+        // Alignment
+        padding-left: 20px;
+        float: left;
+    }
+
+    #type-average
+    {
+        // Font
+        font-size: 14px;
+        color: #8db3e4;
+
+        // Center
+        height: 60px;
+        line-height: 64px;
+
+        // Alignment
+        float: left;
+        margin-left: 15px;
+        display: inline-block;
+    }
+</style>
@@ -0,0 +1,20 @@
+// Card
+.el-card.course-card
+{
+    // Margins
+    margin-right: 20px;
+    margin-left: 20px;
+
+    // Limit name length
+    white-space: nowrap;
+
+    // Expansion color
+    background: #f4f6f9;
+}
+
+.course-card-content.expand
+{
+    // Top shadow
+    // https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side
+    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.1);
+}
@@ -0,0 +1,73 @@
+<template>
+    <el-card id="course-card" class="course-card">
+        <course-head :clickable="false" :course="course" :unread="countUnread()"></course-head>
+
+        <div class="course-card-content expand">
+            <el-row>
+                <el-col :span="24">
+                    <el-card class="large overall-line-card vertical-center">
+                        <course-scatter :course="course"></course-scatter>
+                    </el-card>
+                </el-col>
+                <el-col :span="0">
+
+                </el-col>
+            </el-row>
+
+            <AssignmentTypeHead v-for="type in getAssignmentTypes()" :key="type"
+                                :type-name="type" :assignments="course.assignments">
+            </AssignmentTypeHead>
+        </div>
+    </el-card>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import {Assignment} from '@/components/app/app';
+    import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
+    import CourseScatter from '@/pages/course/course-scatter/course-scatter';
+    import AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
+    import AssignmentTypeHead from '@/pages/course/assignment-type-head/assignment-type-head.vue';
+    import Course from '@/logic/course';
+
+    @Component({
+        components: {AssignmentEntry, CourseHead, CourseScatter, AssignmentTypeHead}
+    })
+    export default class CoursePage 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;
+        }
+
+        /**
+         * Get all the types of the assignments.
+         */
+        getAssignmentTypes(): string[]
+        {
+            // Get all types
+            let types = this.course.assignments.map(a => a.type);
+
+            // Remove duplicates
+            types = types.filter((type, i, a) => a.indexOf(type) == i);
+
+            // Return it
+            return types;
+        }
+    }
+</script>
+
+<style src="./course-page.scss" lang="scss" scoped></style>
@@ -0,0 +1,163 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Assignment} from '@/components/app/app';
+import Constants from '@/constants';
+import {FormatUtils} from '@/utils/format-utils';
+import moment from 'moment';
+import Course from '@/logic/course';
+
+@Component({
+})
+export default class CourseScatter extends Vue
+{
+    private static DOT = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:{color}"></span>';
+
+    @Prop({required: true}) course: Course;
+
+    /**
+     * Override options
+     *
+     * @param options Original options (Unused)
+     */
+    afterConfig(options: any)
+    {
+        return this.chartSettings;
+    }
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        // Map assignments
+        let map = this.mapAssignments();
+
+        // Scatter data point style
+        let itemStyle =
+        {
+            normal:
+            {
+                opacity: 0.8,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.2)'
+            }
+        };
+
+        // Create settings
+        let settings =
+        {
+            // Color
+            color: Constants.THEME.colors,
+
+            // Title
+            title:
+            {
+                show: true,
+                textStyle:
+                {
+                    fontSize: 13
+                },
+                text: 'Assignments',
+                subtext: 'Assignment scores for ' + this.course.name,
+                x: 'center'
+            },
+
+            // X axis represents course names
+            xAxis:
+            {
+                type: 'time',
+                axisLabel:
+                {
+                    formatter: (name: any) => moment(name).format('MMM DD')
+                },
+                max: FormatUtils.toChartDate(new Date())
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'value',
+                name: 'Percentage Score',
+                nameLocation: 'center',
+                nameGap: 38,
+                axisLabel:
+                {
+                    formatter: (name: any) => name + '%'
+                },
+                max: 100,
+                min: (value: any) => Math.floor(value.min) - 5
+            },
+
+            // Tooltip
+            tooltip:
+            {
+                trigger: 'axis',
+                axisPointer:
+                {
+                    type: 'cross'
+                },
+                formatter: (ps: any[]) => ps[0].data[0] + '<br>' + ps.map(p =>
+                    `${CourseScatter.DOT.replace('{color}', p.color)}
+                    ${FormatUtils.limit(p.data[2], 22)}: ${p.data[1]}%<br>`).join('')
+            },
+
+            // Legend
+            legend:
+            {
+                bottom: 24,
+                itemWidth: 14,
+                textStyle:
+                {
+                    color: '#777',
+                    fontSize: 11
+                }
+            },
+
+            // Data
+            series: Array.from(map, ([type, assignments]) =>
+            {
+                return {
+                    type: 'scatter',
+                    name: type,
+                    data: CourseScatter.assignmentsData(assignments),
+                    itemStyle: itemStyle
+                }
+            })
+        };
+
+        return settings;
+    }
+
+    /**
+     * Map assignments to {assignmentType, [assignment]} format.
+     */
+    private mapAssignments(): Map<string, Assignment[]>
+    {
+        // Define map
+        let map = new Map();
+
+        // Move data to map
+        this.course.assignments.forEach(a =>
+        {
+            // Null case, create empty array
+            if (!map.has(a.type)) map.set(a.type, []);
+
+            // Put data
+            map.get(a.type).push(a);
+        });
+
+        return map;
+    }
+
+    /**
+     * Convert assignments to series data
+     *
+     * @param assignments Assignments
+     */
+    private static assignmentsData(assignments: Assignment[])
+    {
+        return assignments.filter(a => a.complete == 'Complete')
+            .map(a => [FormatUtils.toChartDate(a.date), (a.score / a.scoreMax * 100).toFixed(2), a.description]);
+    }
+}
@@ -0,0 +1,16 @@
+<template>
+    <div id="course-scatter">
+        <ve-scatter height="450px" class="graph" :extend="{heyIUsedCourseObject: this.course.name}" :after-config="afterConfig"></ve-scatter>
+    </div>
+</template>
+
+<script src="./course-scatter.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>
@@ -1,7 +0,0 @@
-#overall-bar
-{
-    .graph
-    {
-        margin-top: 50px;
-    }
-}
@@ -1,13 +1,13 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import {Course} from '@/components/app/app';
+import Course from '@/logic/course';
 import {GPAUtils} from '@/utils/gpa-utils';
 import Constants from '@/constants';
+import {FormatUtils} from '@/utils/format-utils';

@Component({
 })
 export default class OverallBar extends Vue
 {
-    // @ts-ignore
    @Prop({required: true}) courses: Course[];

    /**
@@ -40,7 +40,7 @@ export default class OverallBar extends Vue
                    rotate: 90,

                    // Truncate text length
-                    formatter: (value: string) => value.length <= 16 ? value : value.substr(0, 14) + '...'
+                    formatter: (value: string) => FormatUtils.limit(value, 16)
                },
            },

@@ -53,15 +53,16 @@ export default class OverallBar extends Vue
            // Data
            series:
            [
+                // Max GP
                {
                    type: 'bar',
                    barGap: '-100%',
                    data: this.courses.map(course =>
                    {
-                        return {value: [course.name, GPAUtils.getGP(course, 'A+')],
-                            itemStyle: {color: '#d8d8d8'}}
+                        return {value: [course.name, GPAUtils.getGP(course, 'A+')], itemStyle: {color: '#d8d8d8'}}
                    }),
                },
+                // Current GP
                {
                    type: 'bar',
                    barGap: '-100%',
@@ -92,14 +93,21 @@ export default class OverallBar extends Vue
    {
        let data: any = [];

-        this.courses.forEach(course =>
+        this.courses.forEach((course, index) =>
        {
+            // Get GP
+            let gp = GPAUtils.getGP(course, course.letterGrade);
+
+            // No grade cases
+            if (gp == -1) return;
+
+            // Push data
            data.push(
            {
-                value: [course.name, GPAUtils.getGP(course, course.letterGrade)],
+                value: [course.name, gp],
                itemStyle:
                {
-                    color: Constants.THEME.colors[data.length]
+                    color: Constants.THEME.colors[index]
                }
            });
        });
@@ -6,4 +6,12 @@
 </template>

 <script src="./overall-bar.ts" lang="ts"></script>
-<style src="./overall-bar.scss" lang="scss"></style>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>
@@ -0,0 +1,142 @@
+
+// Row
+.assignment-entry
+{
+    height: 40px;
+    padding: 0 10px 0 20px;
+    background: #f5f7fa;
+
+    text-align: left;
+
+    // Date
+    .el-col.date
+    {
+        min-width: 130px;
+
+        span.month
+        {
+            margin-right: 5px;
+
+            // Unified width
+            display: inline-block;
+            min-width: 50px;
+        }
+
+        span.now
+        {
+            font-size: 11px;
+            color: #888;
+        }
+    }
+
+    // Description
+    .el-col.description
+    {
+        width: unset;
+
+        span.type
+        {
+            display: inline-block;
+
+            font-size: 13px;
+            font-weight: 700;
+
+            background: #eee;
+            border-left: 2px solid #000;
+
+            height: 22px;
+            line-height: 22px;
+
+            margin-right: 8px;
+        }
+    }
+
+    // Grade
+    .el-col.grade
+    {
+        text-align: right;
+        float: right;
+
+        span.percent
+        {
+            font-style: italic;
+            background: #ffc;
+            color: #555;
+
+            margin-right: 8px;
+
+            .symbol
+            {
+                padding: 0 1px;
+            }
+        }
+
+        // Score you got
+        span.score
+        {
+            background: #f2f2f2;
+            color: #555;
+        }
+
+        // Max score
+        span.max
+        {
+            background: #ddd;
+            color: #333;
+        }
+
+        // Mark as read
+        button.mark-as-read
+        {
+            margin-left: 8px;
+            color: #aaa;
+            padding: 4px;
+        }
+    }
+
+    .entry-box
+    {
+        height: 22px;
+        padding: 0 5px;
+    }
+
+    // Unified width
+    .entry-box.score, .entry-box.max
+    {
+        min-width: 30px;
+        display: inline-block;
+        text-align: center;
+    }
+
+    // Unified width
+    .entry-box.percent
+    {
+        min-width: 60px;
+        display: inline-block;
+        text-align: right;
+    }
+}
+
+// Narrow layout
+.assignment-entry.narrow
+{
+    height: 34px;
+}
+
+// Unread
+.no-unread
+{
+    visibility: hidden !important;
+    width: 0 !important;
+    margin-left: 0 !important;
+    padding: 0 0 0 10px !important;
+}
+
+.assignment-entry:first-child
+{
+    padding-top: 3px;
+
+    // Top shadow
+    // https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side
+    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.1);
+}
@@ -0,0 +1,71 @@
+<template>
+    <div class="assignment-entry vertical-center"
+         :class="narrow ? 'narrow' : ''"
+         :style="`background: ${backgroundColor}`">
+
+        <el-row class="unread-row">
+            <el-col :span="3" class="date">
+                <span class="month">{{getMoment(assignment.date).format("MMM D")}}</span>
+                <span class="now">({{getMoment(assignment.date).fromNow()}})</span>
+            </el-col>
+
+            <el-col :span="15" class="description">
+                <span class="type entry-box"
+                      :style="`border-color: var(--assignment-type-${assignment.typeId})`">
+                    {{assignment.type}}
+                </span>
+                <span class="text">{{assignment.description}}</span>
+            </el-col>
+
+            <el-col :span="6" class="grade">
+                <span class="percent entry-box">
+                    {{(assignment.score / assignment.scoreMax * 100).toFixed(1)}}
+                    <span class="symbol">%</span>
+                </span>
+                <span class="score entry-box">{{assignment.score}}</span>
+                <span class="max entry-box">{{assignment.scoreMax}}</span>
+
+                <el-button class="mark-as-read" :class="unread ? 'unread' : 'no-unread'"
+                           size="mini" type="text" icon="el-icon-close"
+                           @click="markAsRead">
+                </el-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import {Assignment} from '@/components/app/app';
+    import moment from 'moment';
+
+    @Component
+    export default class AssignmentEntry extends Vue
+    {
+        @Prop({required: true}) assignment: Assignment;
+
+        @Prop({default: false}) unread: boolean;
+        @Prop({default: '#f5f7fa'}) backgroundColor: string;
+        @Prop({default: false}) narrow: boolean;
+
+        /**
+         * Format a date to the displayed format
+         *
+         * @param date Date
+         */
+        getMoment(date: string)
+        {
+            return moment(new Date(date));
+        }
+
+        /**
+         * Mark this unread assignment as read
+         */
+        markAsRead()
+        {
+            // Call custom event
+            this.$emit('mark-as-read', this.assignment)
+        }
+    }
+</script>
+<style src="./assignment-entry.scss" lang="scss" scoped></style>
@@ -0,0 +1,92 @@
+// Main card content
+.course-card-content.main
+{
+    padding: 0 20px 0 20px;
+    height: 90px;
+
+    // Main color
+    background: white;
+}
+
+.course-col-name
+{
+    // Align left
+    text-align: left;
+    float: left;
+
+    .course-name
+    {
+        overflow: hidden;
+        font-size: 22px;
+        color: var(--main);
+    }
+
+    .course-teacher
+    {
+        font-size: 12px;
+        color: #999999;
+        font-style: italic;
+    }
+}
+
+.course-col-grade
+{
+    // Align right
+    text-align: right;
+    float: right;
+
+    // Adjust position
+    margin-top: -2px;
+
+    .course-grade
+    {
+        font-size: 21px;
+    }
+
+    .course-updates
+    {
+        font-size: 14px;
+
+        .unread-number
+        {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            border-radius: 5px;
+
+            padding-left: 3px;
+            padding-right: 3px;
+
+            margin-right: 3px;
+        }
+
+        .unread-text
+        {
+            font-style: italic;
+        }
+    }
+
+    .course-updates.unread
+    {
+        .unread-number
+        {
+            background: var(--unread);
+            color: white;
+        }
+
+        .unread-text
+        {
+            color: var(--unread);
+        }
+    }
+
+    .course-updates.none
+    {
+        color: #999999;
+
+        .unread-number
+        {
+            background: #eeeeee;
+        }
+    }
+}
@@ -0,0 +1,52 @@
+<template>
+    <div id="course-head" class="course-card-content main vertical-center">
+        <el-row>
+            <el-col :span="12" class="course-col-name">
+                <div v-if="clickable" class="course-name clickable" @click="redirect">{{course.name}}</div>
+                <div v-if="!clickable" class="course-name">{{course.name}}</div>
+                <div class="course-teacher">{{course.teacherName}}</div>
+            </el-col>
+            <el-col :span="12" class="course-col-grade">
+                <div class="course-grade">
+                    <span class="letter">{{course.letterGrade}} </span>
+                    <span class="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
+                    <span class="percent" v-if="course.numericGrade !== undefined">%</span>
+                </div>
+                <div class="course-updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
+                    <span class="unread-number">{{unread}}</span>
+                    <span class="unread-text" :class="clickable ? 'clickable' : ''">
+                        new update{{unread >= 2 ? 's' : ''}}
+                    </span>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import Course from '@/logic/course';
+    import {CourseUtils} from '@/utils/course-utils';
+    import Navigation from '@/components/navigation/navigation';
+
+    @Component
+    export default class CourseHead extends Vue
+    {
+        @Prop({required: true}) unread: number;
+
+        @Prop({required: true}) course: Course;
+
+        @Prop({required: true}) clickable: boolean;
+
+        /**
+         * Redirect to the course page
+         */
+        redirect()
+        {
+            if (!this.clickable) return;
+            Navigation.instance.updateIndex(CourseUtils.formatTabIndex(this.course));
+        }
+    }
+</script>
+
+<style src="./course-head.scss" lang="scss"></style>
@@ -6,101 +6,11 @@
    margin-left: 20px;

    // Height limit
-    max-height: 90px;
+    max-height: 250px;

    // Limit name length
    white-space: nowrap;
-}
-
-.course-col-name
-{
-    // Align left
-    text-align: left;
-    float: left;
-
-    .course-name
-    {
-        overflow: hidden;
-        font-size: 22px;
-        color: var(--main);
-    }
-
-    .course-name:hover
-    {
-        text-decoration: underline;
-    }
-
-    .course-teacher
-    {
-        font-size: 12px;
-        color: #999999;
-        font-style: italic;
-    }
-}
-
-.course-col-grade
-{
-    // Align right
-    text-align: right;
-    float: right;
-
-    // Adjust position
-    margin-top: -2px;
-
-    .course-grade
-    {
-        font-size: 21px;
-    }
-
-    .course-updates
-    {
-        font-size: 14px;
-
-        .unread-number
-        {
-            display: inline-block;
-            width: 20px;
-            text-align: center;
-            border-radius: 5px;
-
-            padding-left: 3px;
-            padding-right: 3px;
-
-            margin-right: 3px;
-        }
-
-        .unread-text
-        {
-            font-style: italic;
-        }
-    }
-
-    .course-updates.unread
-    {
-        .unread-number
-        {
-            background: var(--unread);
-            color: white;
-        }
-
-        .unread-text
-        {
-            color: var(--unread);
-        }
-    }
-
-    .course-updates.none
-    {
-        color: #999999;
-
-        .unread-number
-        {
-            background: #eeeeee;
-        }
-    }
-}
-
-.el-card__body
-{
-    margin: auto 0;
+
+    // Expansion color
+    background: #f4f6f9;
 }
@@ -1,16 +1,18 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import {Course} from '@/components/app/app';
-import {GPAUtils} from '@/utils/gpa-utils';
-import Constants from '@/constants';
+import App, {Assignment} 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 from '@/logic/course';

@Component({
+    components: {UnreadEntry: AssignmentEntry, CourseHead}
 })
 export default class OverallCourse extends Vue
 {
-    // @ts-ignore
    @Prop({required: true}) course: Course;

    private unread: number = -1;
+    private unreadAssignments: Assignment[] = [];

    /**
     * Count the number of unread assignments with cache
@@ -19,8 +21,31 @@ export default class OverallCourse extends Vue
    {
        if (this.unread == -1)
        {
-            return this.unread = this.course.assignments.filter(a => a.unread).length;
+            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,37 +1,19 @@
 <template>
    <div id="overall-course">
        <el-card class="course-card">
-            <el-row>
-                <el-col :span="6" class="course-col-name">
-                    <div class="course-name">
-                        {{course.name}}
-                    </div>
-                    <div class="course-teacher">
-                        {{course.teacherName}}
-                    </div>
-                </el-col>
-                <el-col :span="12">
-                    &nbsp;
-                </el-col>
-                <el-col :span="6" class="course-col-grade">
-                    <div class="course-grade">
-                        <span class="letter">{{course.letterGrade}} </span>
-                        <span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
-                        <span class="percent">%</span>
-                    </div>
-                    <div class="course-updates" :class="countUnread() === 0 ? 'none' : 'unread'">
-                        <span class="unread-number">
-                            {{countUnread()}}
-                        </span>
-                        <span class="unread-text">
-                            new update{{countUnread() >= 2 ? 's' : ''}}
-                        </span>
-                    </div>
-                </el-col>
-            </el-row>
+            <course-head :clickable="true" :course="course" :unread="countUnread()"></course-head>
+            <div class="course-card-content expand"
+                 v-if="countUnread() !== 0">
+                <unread-entry v-for="assignment in unreadAssignments"
+                              :assignment="assignment"
+                              :key="assignment.id"
+                              unread="true"
+                              v-on:mark-as-read="markAsRead">
+                </unread-entry>
+            </div>
        </el-card>
    </div>
 </template>

 <script src="./overall-course.ts" lang="ts"></script>
-<style src="./overall-course.scss" lang="scss"></style>
+<style src="./overall-course.scss" lang="scss" scoped></style>
@@ -1,11 +1,11 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import {Course} from '@/components/app/app';
+import moment from 'moment';
+import Course from '@/logic/course';

@Component({
 })
 export default class OverallLine extends Vue
 {
-    // @ts-ignore
    @Prop({required: true}) courses: Course[];

    private settings =
@@ -26,9 +26,6 @@ export default class OverallLine extends Vue
        legend:
        {
            show: false,
-            //left: 'auto',
-            //align: 'left',
-            //orient: 'vertical'
            textStyle:
            {
                fontSize: 11
@@ -38,9 +35,8 @@ export default class OverallLine extends Vue
        // Zoom bar
        dataZoom:
        [
-            // TODO: Calculate real value for startValue
            {
-                startValue: '9/13/2019'
+                startValue: moment().subtract(30, 'days').format('M/D/YYYY')
            },
            {
                type: 'inside'
@@ -56,23 +52,29 @@ export default class OverallLine extends Vue
        },
        yAxis:
        {
-            min: (value: any) => value.min - 10
+            min: (value: any) => Math.floor(value.min),
+            max: (value: any) => value.max
        }
    };

+    chartCache: any;
+
    /**
     * Convert assignments list to a graph dataset.
     */
    get convertChart()
    {
-        let courses = this.courses;
+        // Caching
+        if (this.chartCache != undefined) return this.chartCache;
+
+        let courses = this.courses.filter(c => c.assignments.length > 0);

        // Compute the column names
        let columns = courses.map(course => course.name);
        columns.unshift('date');

        // Find the min date
-        let minDates = courses.map(course => new Date(course.assignments[course.assignments.length - 1].date).getTime());
+        let minDates = courses.map(course => course.assignments[course.assignments.length - 1].date.getTime());
        let minDate: Date = new Date(Math.min.apply(null, minDates));

        // Find the dates in between
@@ -106,8 +108,7 @@ export default class OverallLine extends Vue
                        if (assignment.complete != 'Complete') return;

                        // Date is being looked at
-                        let assignmentDate = new Date(assignment.date);
-                        if (assignmentDate.getTime() < date.getTime())
+                        if (assignment.date.getTime() < date.getTime())
                        {
                            // Record scores
                            score += assignment.score;
@@ -130,8 +131,7 @@ export default class OverallLine extends Vue
                        if (assignment.complete != 'Complete') return;

                        // Date is being looked at
-                        let assignmentDate = new Date(assignment.date);
-                        if (assignmentDate.getTime() < date.getTime())
+                        if (assignment.date.getTime() < date.getTime())
                        {
                            // Record scores
                            if (typeScores[assignment.type] == undefined) typeScores[assignment.type] = 0;
@@ -171,7 +171,8 @@ export default class OverallLine extends Vue
            rows.push(row);
        });

-        return {
+        return this.chartCache =
+        {
            columns: columns,
            rows: rows
        }
@@ -5,4 +5,6 @@
 </template>

 <script src="./overall-line.ts" lang="ts"></script>
-<style src="./overall-line.scss" lang="scss"></style>
+<style lang="scss" scoped>
+    
+</style>
@@ -1,17 +1,4 @@

-// Add some margins
-.el-card
-{
-    margin: 10px;
-    height: 494px;
-    padding: 0;
-
-    // Vertical center
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-}
-
 .gpa-card
 {
    margin-left: 20px;
@@ -31,7 +18,7 @@
 .gpa.text
 {
    font-size: 35px;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
 }

 .gpa.max
@@ -53,10 +40,3 @@
    margin-right: 20px;
    min-width: 170px;
 }
-
-// Fix padding
-.el-card__body
-{
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-}
@@ -1,24 +0,0 @@
-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 {Course} from '@/components/app/app';
-import {GPAUtils} from '@/utils/gpa-utils';
-
-@Component({
-    components: {OverallLine, OverallBar, OverallCourse}
-})
-export default class Overall extends Vue
-{
-    // @ts-ignore
-    @Prop({required: true}) courses: Course[];
-
-    /**
-     * This function is called to get gpa since I can't import another
-     * class in the Vue file.
-     */
-    public getGPA()
-    {
-        return GPAUtils.getGPA(this.courses);
-    }
-}
@@ -2,7 +2,7 @@
    <div id="overall">
        <el-row>
            <el-col :span="4">
-                <el-card class="gpa-card">
+                <el-card class="large gpa-card vertical-center">
                    <div style="padding: 14px;">
                        <span class="gpa header">GPA:</span>
                        <span class="gpa text">{{getGPA().gpa}}</span>
@@ -14,20 +14,48 @@
                </el-card>
            </el-col>
            <el-col :span="14">
-                <el-card class="overall-line-card">
+                <el-card class="large overall-line-card vertical-center">
                    <overall-line :courses="courses"></overall-line>
                </el-card>
            </el-col>
            <el-col :span="6">
-                <el-card class="overall-bar-card">
+                <el-card class="large overall-bar-card vertical-center">
                    <overall-bar :courses="courses"></overall-bar>
                </el-card>
            </el-col>
        </el-row>

-        <overall-course v-for="course in courses" :course="course"></overall-course>
+        <overall-course v-for="course in courses"
+                        :course="course"
+                        :key="course.id">
+        </overall-course>
    </div>
 </template>

-<script src="./overall.ts" lang="ts"></script>
-<style src="./overall.scss" lang="scss"></style>
+<script lang="ts">
+    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 Course from '@/logic/course';
+    import {GPAUtils} from '@/utils/gpa-utils';
+
+    @Component({
+        components: {OverallLine, OverallBar, OverallCourse}
+    })
+    export default class Overall extends Vue
+    {
+        @Prop({required: true}) courses: Course[];
+
+        /**
+         * This function is called to get gpa since I can't import another
+         * class in the Vue file.
+         */
+        public getGPA()
+        {
+            return GPAUtils.getGPA(this.courses);
+        }
+    }
+</script>
+
+<style src="./overall.scss" lang="scss" scoped></style>
@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import Vue, {VNode} from 'vue';

 declare global {
  namespace JSX {
@@ -1,4 +1,5 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+declare module '*.vue'
+{
+    import Vue from 'vue';
+    export default Vue;
 }
@@ -1,37 +1,68 @@
-import {Course} from '@/components/app/app';
+import {FormatUtils} from '@/utils/format-utils';
+import Course from '@/logic/course';
+
+const LEVEL_AP = {level: 'AP', scaleUp: 1};
+const LEVEL_H = {level: 'H', scaleUp: 0.75};
+const LEVEL_A = {level: 'A', scaleUp: 0.5};
+const LEVEL_CP = {level: 'CP', scaleUp: 0.25};
+const LEVEL_CLUB = {level: 'Club', scaleUp: -1};
+
+const UNKNOWN_COURSE_LIST = new Map();
+UNKNOWN_COURSE_LIST.set('Piano Masterclass', LEVEL_H);
+UNKNOWN_COURSE_LIST.set('Multivariable Calculus with Differential Equations', LEVEL_H);
+UNKNOWN_COURSE_LIST.set('Introduction to Algorithmic Thinking and Computational Technologies', LEVEL_A);
+UNKNOWN_COURSE_LIST.set('Ceramics 1', LEVEL_CP);
+UNKNOWN_COURSE_LIST.set('Ceramics 2', LEVEL_A);
+UNKNOWN_COURSE_LIST.set('Sculpture', LEVEL_CP);
+UNKNOWN_COURSE_LIST.set('Drawing', LEVEL_CP);
+UNKNOWN_COURSE_LIST.set('Painting', LEVEL_CP);

 export class CourseUtils
 {
    /**
-     * Return a list of courses that are graphed
+     * Format course to tab index string
     *
-     * @param original Original course list
-     * @return Course[] Filtered course list
+     * @param course Course object
+     * @return string Tab index
     */
-    public static getGradedCourses(original: Course[]): Course[]
+    public static formatTabIndex(course: Course): string
    {
-        // Define result
-        let result: Course[] = [];
+        return `course/${course.id}/${course.name.toLowerCase().split(' ').join('-')}`;
+    }

-        // Filter through courses
-        original.forEach(course =>
-        {
-            // Skip future or past courses
-            if (course.status != 'active') return;
+    /**
+     * Detect course level based on course name
+     *
+     * @param name Course name
+     */
+    static detectLevel(name: string)
+    {
+        // Common ones
+        if (name.startsWith('AP')) return LEVEL_AP;
+        if (name.endsWith(' H')) return LEVEL_H;
+        if (name.endsWith(' A')) return LEVEL_A;
+        if (name.endsWith(' CP')) return LEVEL_CP;
+        if (name.startsWith('HS ')) return LEVEL_CLUB;
+        if (name.startsWith('MS ')) return LEVEL_CLUB;

-            // Skip courses without levels
-            if (course.level == 'None') return;
+        // Uncommon ones
+        let lower = name.toLowerCase();

-            // Skip courses without assignments
-            if (course.assignments.length == 0) return;
-            
-            // Skip if there are no grading scale
-            // if (course.grading.method == 'NOT_GRADED') return;
+        if (name.startsWith('Pre-AP')) return LEVEL_AP;
+        if (lower.endsWith(' acc')) return LEVEL_A;
+        if (name.endsWith('H')) return LEVEL_H;
+        if (name.endsWith('A')) return LEVEL_A;
+        if (name.endsWith('CP')) return LEVEL_CP;

-            // Add it to the list
-            result.push(course);
-        });
+        // Even more uncommon
+        if (lower.includes('honors')) return LEVEL_H;
+        if (lower.includes('accelerated')) return LEVEL_A;
+        if (name.includes('Advanced')) return LEVEL_A;

-        return result;
+        // Unknown course list
+        if (UNKNOWN_COURSE_LIST.has(name)) return UNKNOWN_COURSE_LIST.get(name);
+
+        // Really unknown
+        return undefined;
    }
 }
@@ -1,100 +0,0 @@
-        // Initialize course specific variables
-        let courseScores: {[index: string]: any} = {};
-        let courseMaxScores: {[index: string]: any} = {};
-        let courseIndexes: {[index: string]: any} = {};
-        courses.forEach(course =>
-        {
-            courseScores[course.name] = 0;
-            courseMaxScores[course.name] = 0;
-            courseIndexes[course.name] = course.assignments.length - 1;
-        });
-
-        // Compute the rows data
-        let rows: {[index: string]: any}[] = [];
-        dates.forEach(date =>
-        {
-            // Define row object
-            let row: {[index: string]:any} = {'date': date.toLocaleDateString('en-US')};
-
-            // Loop through courses
-            courses.forEach(course =>
-            {
-                // Reversed loop through the assignments
-                for (let r = courseIndexes[course.name]; r >= 0; r--)
-                {
-                    let assignment = course.assignments[r];
-
-                    // If assignment should be displayed
-                    if (assignment.complete != 'Complete') continue;
-
-                    // Date is being looked at
-                    let assignmentDate = new Date(assignment.date);
-                    if (assignmentDate.getTime() == date.getTime())
-                    {
-                        // Detect grading method and record scores
-                        if (course.grading.method == 'TOTAL_MEAN')
-                        {
-                            courseScores[course.name] += assignment.score;
-                            courseMaxScores[course.name] += assignment.scoreMax;
-                        }
-                        else if (course.grading.method == 'PERCENT_TYPE')
-                        {
-                            let scale = course.grading.weightingMap[assignment.type];
-                            courseScores[course.name] += assignment.score * scale;
-                            courseMaxScores[course.name] += assignment.scoreMax * scale;
-                        }
-                    }
-
-                    // Not now
-                    else if (assignmentDate > date)
-                    {
-                        courseIndexes[course.name] = r;
-                        break;
-                    }
-                }
-
-                // Add average to the row
-                row[course.name] = courseScores[course.name] / courseMaxScores[course.name] * 100;
-            });
-
-            // Add it to the array
-            rows.push(row);
-        });
-
-
-                else if (course.grading.method == 'PERCENT_TYPE')
-                {
-                    let typeScores: {[index: string]: any} = {};
-                    let typeCounts: {[index: string]: any} = {};
-
-                    // Loop through assignments
-                    course.assignments.forEach(assignment =>
-                    {
-                        // If assignment should be displayed
-                        if (assignment.complete != 'Complete') return;
-
-                        // Date is being looked at
-                        let assignmentDate = new Date(assignment.date);
-                        if (assignmentDate.getTime() < date.getTime())
-                        {
-                            // Record scores
-                            if (typeScores[assignment.type] == undefined) typeScores[assignment.type] = 0;
-                            typeScores[assignment.type] += assignment.score / assignment.scoreMax;
-
-                            if (typeCounts[assignment.type] == undefined) typeCounts[assignment.type] = 0;
-                            typeCounts[assignment.type] ++;
-                        }
-                    });
-
-                    let score = 0;
-
-                    // Count
-                    for (let type in typeScores)
-                    {
-                        score += typeScores[type] * course.grading.weightingMap[type] / typeCounts[type];
-                        console.log(type);
-                    }
-
-                    // Add average to the row
-                    row[course.name] = score * 100;
-                }
@@ -0,0 +1,50 @@
+import moment from 'moment';
+
+export class FormatUtils
+{
+    /**
+     * Convert date format to yyyy-mm-dd
+     *
+     * @param _date Date
+     */
+    public static toChartDate(_date: string | Date)
+    {
+        // Convert to Date
+        let date: Date = _date instanceof Date ? _date : new Date(_date);
+
+        // Convert to yyyy-mm-dd
+        return moment(date).format('YYYY-MM-DD');
+    }
+
+    /**
+     * Limit string length
+     *
+     * @param str String
+     * @param length Max length
+     */
+    public static limit(str: string, length: number): string
+    {
+        return str.length <= length ? str : str.substr(0, length - 2) + '...'
+    }
+
+    /**
+     * To Title Case
+     *
+     * @param str oRigInAL sTrING
+     * @return string Original String
+     */
+    public static toTitleCase(str: string)
+    {
+        return str.replace(/\w\S*/g, s => s.charAt(0).toUpperCase() + s.substr(1).toLowerCase())
+    }
+
+    /**
+     * Parse html text
+     *
+     * @param str
+     */
+    public static parseText(str: string): string
+    {
+        return str.replace(/&amp;/g, '&');
+    }
+}
@@ -1,31 +1,35 @@
+
+import Course from '@/logic/course';
+import {Assignment} from '@/components/app/app';
+
+export interface Scale
+{
+    min: number
+    letter: string
+    gp: number
+}
+
 /**
 * This is an utility class to calculate GPA.
 */
-import {Course} from '@/components/app/app';
-
 export class GPAUtils
 {
    // [[Min score, Letter grade, Base GPA], ...]
-    public static SCALE =
+    public static SCALE: Scale[] =
    [
-        [96.5, 'A+', 4.00],
-        [92.5, 'A' , 3.75],
-        [89.5, 'A-', 3.50],
-        [86.5, 'B+', 3.25],
-        [82.5, 'B' , 3.00],
-        [79.5, 'B-', 2.75],
-        [76.5, 'C+', 2.50],
-        [72.5, 'C' , 2.25],
-        [70.5, 'C-', 2.00],
-        [69.5, 'D' , 1.00],
-        [0   , 'F' , 0.00]
+        {min: 96.5, letter: 'A+', gp: 4.00},
+        {min: 92.5, letter: 'A' , gp: 3.75},
+        {min: 89.5, letter: 'A-', gp: 3.50},
+        {min: 86.5, letter: 'B+', gp: 3.25},
+        {min: 82.5, letter: 'B' , gp: 3.00},
+        {min: 79.5, letter: 'B-', gp: 2.75},
+        {min: 76.5, letter: 'C+', gp: 2.50},
+        {min: 72.5, letter: 'C' , gp: 2.25},
+        {min: 70.5, letter: 'C-', gp: 2.00},
+        {min: 69.5, letter: 'D' , gp: 1.00},
+        {min: 0   , letter: 'F' , gp: 0.00}
    ];

-    // Keywords
-    public static MIN = 0;
-    public static LETTER = 1;
-    public static GPA = 2;
-
    /**
     * Calculate GPA for a list of couses
     *
@@ -81,40 +85,48 @@ 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
    {
-        // Find the GPA for this course.
-        for (let scale of this.SCALE)
+        // Get scale
+        let scale = this.findScale(letterGrade);
+
+        // No scale
+        if (scale == undefined) return -1;
+
+        // Add scaleUp if not failed.
+        return scale.gp == 0 ? 0 : scale.gp + course.scaleUp;
+
+    }
+
+    /**
+     * Find the scale for a grade
+     *
+     * @param grade Letter grade or numeric grade
+     */
+    public static findScale(grade: string | number): Scale | undefined
+    {
+        // Letter grade
+        if (typeof grade == 'string')
        {
-            // Letter grades are the same
-            if (scale[this.LETTER] == letterGrade)
-            {
-                // Get grade and add it
-                let grade = <number> scale[this.GPA];
-
-                // Add scaleUp if not failed.
-                if (grade != 0) grade += course.scaleUp;
-
-                // That's it
-                return grade;
-            }
+            return this.SCALE.find(scale => scale.letter == grade);
        }

-        return -1;
+        // Numeric grade
+        return this.SCALE.find(scale => grade >= scale.min);
    }

    /**
     * Calculate the total-mean (total/max) average
     *
-     * @param course Course
+     * @param assignments
     */
-    public static getTotalMeanAverage(course: Course)
+    public static getTotalMeanAverage(assignments: Assignment[])
    {
        let score = 0;
        let max = 0;

        // Loop through assignments
-        course.assignments.forEach(assignment =>
+        assignments.forEach(assignment =>
        {
            // If assignment should be displayed
            if (assignment.complete != 'Complete') return;
@@ -127,4 +139,54 @@ export class GPAUtils
        // Return
        return score / max * 100;
    }
+
+    /**
+     * Calculate the percent type
+     * TODO: Combine it with overall-line
+     *
+     * @param course
+     * @param assignments
+     */
+    public static getPercentTypeAverage(course: Course, assignments: Assignment[])
+    {
+        let typeScores: {[index: string]: any} = {};
+        let typeCounts: {[index: string]: any} = {};
+
+        // Loop through assignments
+        assignments.forEach(assignment =>
+        {
+            // If assignment should be displayed
+            if (assignment.complete != 'Complete') return;
+
+            // Record scores
+            if (typeScores[assignment.type] == undefined) typeScores[assignment.type] = 0;
+            typeScores[assignment.type] += assignment.score / assignment.scoreMax;
+
+            if (typeCounts[assignment.type] == undefined) typeCounts[assignment.type] = 0;
+            typeCounts[assignment.type] ++;
+        });
+
+        // Count total percentage (This is to avoid less than expected cases)
+        // 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)
+        {
+            if (typeScores[type] != undefined)
+            {
+                totalPercentage += course.grading.weightingMap[type];
+            }
+        }
+
+        // Count
+        let score = 0;
+        for (let type in typeScores)
+        {
+            let typeFactor = course.grading.weightingMap[type] / totalPercentage;
+            score += typeScores[type] * typeFactor / typeCounts[type];
+        }
+
+        // Add average to the row
+        return score * 100;
+    }
 }
@@ -4,11 +4,6 @@ export class HttpUtils
 {
    public token: string = '';

-    constructor (token: string)
-    {
-        this.token = token;
-    }
-
    public post(node: string, body: any): Promise<any>
    {
        // Add token
@@ -10,16 +10,15 @@ export default class JsonUtils
     */
    public static filterAssignments(assignments: any): Assignment[]
    {
-        let result: Assignment[] = [];
-
-        assignments.assignments.forEach((assignment: any) =>
+        return assignments.assignments.map((assignment: any) =>
        {
-            result.push(
-            {
+            return {
                id: assignment.assignment_id,
+                scoreId: assignment.score_id,
                type: assignment.assignment_type,
+                typeId: assignment.assignment_type_id,
                description: assignment.assignment_description,
-                date: assignment._date,
+                date: new Date(assignment._date),
                complete: assignment.completion_status,
                include: assignment.include_in_calculated_grade == 1,
                display: assignment.display_grade == 1,
@@ -27,10 +26,10 @@ export default class JsonUtils
                unread: assignment.is_unread == 1,

                scoreMax: assignment.maximum_score,
-                score: +assignment.raw_score
-            });
-        });
+                score: +assignment.raw_score,

-        return result;
+                gradingPeriod: +assignment.grading_period.replace('Quarter ', '') - 1
+            }
+        });
    }
 }
@@ -0,0 +1,41 @@
+export default class VersionUtils
+{
+    /**
+     * Compare two version numbers
+     *
+     * Eg.
+     *   compare('0.1.2', '0.1.3') = -1
+     *   compare('1.0.0', '0.1.3') = 1
+     *   compare('0.0.1', '0.0.1') = 0
+     *
+     * @param ver1 Version 1
+     * @param ver2 Version 2
+     * @return number (-1 if ver1 < ver2), (1 if ver1 > ver2), (0 if equal)
+     */
+    public static compare(ver1: string, ver2: string): number
+    {
+        // Equal case
+        if (ver1 == ver2) return 0;
+
+        // Split
+        let split1 = ver1.split('.');
+        let split2 = ver2.split('.');
+
+        // Detect each number
+        for (let i in split1)
+        {
+            // Get numbers
+            let num1 = split1[i];
+            let num2 = split2[i];
+
+            // Current number is equal
+            if (num1 == num2) continue;
+
+            // Current number is different
+            return +num1 < +num2 ? -1 : 1;
+        }
+
+        // Equal
+        return 0;
+    }
+}
@@ -24,7 +24,10 @@
      "dom",
      "dom.iterable",
      "scripthost"
-    ]
+    ],
+
+    // Custom
+    "strictPropertyInitialization": false
  },
  "include": [
    "src/**/*.ts",