[U] Release v0.4.3.1006

This reverts commit f1089dbdf5.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 HyDEV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,38 @@
-# veracross-analyzer
+<h1 align="center"><br><br>
+  VeracrossAnalyzer UI
+</h1>
 
-## Project setup
+<h4 align="center">
+  A Website, A Visual Representation of Students' Grade Data on Veracross
+</h4>
+
+<h5 align="center">
+  <a href="#intro">Introduction</a>&nbsp;&nbsp;
+  <a href="#setup">Project Setup</a>&nbsp;&nbsp;
+  <a href="#license">License</a>
+</h5><br><br><br>
+
+
+
+<a name="intro"></a>
+Introduction:
+--------
+
+This is a website that generates visual representation of students' grade data on Veracross. Currently there is only one graph and one numerical data representing the GPA. But also it just released yesterday! (Yay!) What do you expect this soon lol?
+
+**Here's how it looks like right now:** *(Now all of you know my grades ;-;)*
+
+![](https://user-images.githubusercontent.com/22280294/65841599-155ead00-e2f2-11e9-9d9f-c2f23c45d9a4.png)
+
+<br>
+
+<a name="setup"></a>
+Project Setup:
+--------
+
+TODO: Actually write a project setup tutorial that's not generated by Vue on initialization ;-;.
+
+### Install
 ```
 npm install
 ```
@@ -15,15 +47,10 @@ npm run serve
 npm run build
 ```
 
-### Run your tests
-```
-npm run test
-```
+<br>
 
-### Lints and fixes files
-```
-npm run lint
-```
+<a name="license"></a>
+License: [MIT](https://choosealicense.com/licenses/mit/)
+--------
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+The MIT license basically means that this project is open-soucred and you can do whatever you want with it, as long as you include a copy of this license in your distribution. You don't have to ask for permissions to use or anything. However, if you do bad things with it, I'm not responsible.

package-lock.json

@@ -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",
@@ -7546,8 +7551,7 @@
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/p-finally/download/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-is-promise": {
       "version": "2.1.0",
@@ -7588,12 +7592,28 @@
         "retry": "^0.12.0"
       }
     },
+    "p-timeout": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.1.0.tgz",
+      "integrity": "sha512-C27DYI+tCroT8J8cTEyySGydl2B7FlxrGNF5/wmMbl1V+jeehUCzEE/BVgzRebdm2K3ZitKOKx8YbdFumDyYmw==",
+      "requires": {
+        "p-finally": "^1.0.0"
+      }
+    },
     "p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-1.0.0.tgz",
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
       "dev": true
     },
+    "p-wait-for": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-wait-for/-/p-wait-for-3.1.0.tgz",
+      "integrity": "sha512-0Uy19uhxbssHelu9ynDMcON6BmMk6pH8551CvxROhiz3Vx+yC4RqxjyIDk2V4ll0g9177RKT++PK4zcV58uJ7A==",
+      "requires": {
+        "p-timeout": "^3.0.0"
+      }
+    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npm.taobao.org/pako/download/pako-1.0.10.tgz",
@@ -10833,6 +10853,11 @@
       "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.1.0.tgz",
       "integrity": "sha1-sz78sQ4XI21oT3Cx6W8ZRux5Poc="
     },
+    "vue-cookies": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.5.13.tgz",
+      "integrity": "sha512-8pjpXnvbNWx1Lft0t3MJnW+ylv0Wa2Tb6Ch617u/pQah3+SfXUZZdkh3EL3bSpe/Sw2Wdw3+DhycgQsKANSxXg=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.3.tgz",

package.json

@@ -11,9 +11,12 @@
     "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",
     "vue-class-component": "^7.0.2",
+    "vue-cookies": "^1.5.13",
     "vue-property-decorator": "^8.1.0"
   },
   "devDependencies": {

public/404.html

@@ -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>

public/index.html

@@ -3,7 +3,8 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <!--meta name="viewport" content="width=device-width,initial-scale=1.0"-->
+        <meta name="viewport" content="width=1024">
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
         <title>Veracross Analyzer</title>
@@ -25,4 +26,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>

run/deploy.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+# abort on errors
+set -e
+
+# build
+npm run build
+
+# navigate into the build output directory
+cd dist
+
+# if you are deploying to a custom domain
+echo 'vera.hydev.org' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f git@github.com:HyDevelop/VeracrossAnalyzer.Client.git master:gh-pages
+
+cd -

src/components/app/app.scss

@@ -1,8 +1,85 @@
 #app
 {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+    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;
 }

src/components/app/app.ts

@@ -1,47 +1,234 @@
 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 pWaitFor from 'p-wait-for';
+import {HttpUtils} from '@/logic/utils/http-utils';
+import {GPAUtils} from '@/logic/utils/gpa-utils';
+import Loading from '@/components/loading/loading.vue';
+import CoursePage from '@/pages/course/course-page.vue';
+import Course from '@/logic/course';
+
 
 @Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading, CoursePage},
 })
 export default class App extends Vue
 {
+    // Is the login panel shown
     public showLogin: boolean = true;
 
-    public courses = null;
+    // List of course that the student takes
+    public courses: Course[] = [];
 
-    public selectedTab: string = "overall";
+    // 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;
+
+    // Token
+    public token: string = '';
+
+    // Loading text
+    public loading: string = '';
+
+    // Loading error
+    public loadingError: boolean = false;
+
+    // Http Client
+    public static http: HttpUtils = new HttpUtils();
+
+    // Instance
+    public static instance: App;
+
+    /**
+     * This is called when the instance is created.
+     */
+    public created()
+    {
+        // Show splash
+        console.log(Constants.SPLASH);
+
+        // Update instance
+        App.instance = this;
+    }
 
     /**
      * This is called when the user logs in.
      *
-     * @param courses Courses Json
+     * @param token Authorization token
      */
-    public onLogin(courses: any)
+    public onLogin(token: string)
     {
         // Hide login bar
         this.showLogin = false;
 
-        // Assign courses
-        this.courses = courses;
+        // Show loading message
+        this.logLoading('1. Logging in...');
 
-        // Debug output TODO: Remove this
-        console.log(courses);
+        // Store token
+        this.token = token;
+
+        // Assign token to http client
+        App.http.token = token;
+
+        // Load data
+        this.loadCoursesAfterLogin();
     }
 
     /**
-     * This is called when a navigation tab is clicked
-     *
-     * @param tab Tab name
+     * Load courses data after login.
      */
-    public onNavigate(tab: string)
+    public loadCoursesAfterLogin()
     {
-        // Debug output TODO: Remove this
-        console.log(tab);
+        // Show loading message
+        this.logLoading('2. Loading courses...');
 
-        // Update selected tab
-        this.selectedTab = tab;
+        // Post request
+        App.http.post('/courses', {}).then(response =>
+        {
+            // Check success
+            if (response.success)
+            {
+                // Save courses
+                this.courses = response.data.map((courseJson: any) => new Course(courseJson));
+
+                // Load assignments
+                this.loadAssignments();
+            }
+            else throw new Error(response.data);
+        })
+        .catch(e => this.showError(`Error: Course data failed to load.\n(${e})`));
+    }
+
+    /**
+     * Load the assignments of the courses
+     */
+    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
+            App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
+            {
+                // Check success
+                if (response.success)
+                {
+                    course.loadAssignments(response.data);
+                }
+                else throw new Error(response.data);
+            })
+            .catch(e => this.showError(`Error: Assignments data failed to load.\n(${e})`));
+        });
+
+        // Wait for assignments to be ready.
+        pWaitFor(() => this.courses.every(c => c.rawAssignments != null)).then(() =>
+        {
+            // Filter courses
+            this.filteredCourses = this.courses.filter(c => c.isGraded);
+
+            // Check grading algorithms
+            this.checkGradingAlgorithms();
+        });
+    }
+
+    /**
+     * 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.rawNumericGrade == termGrade)
+            {
+                course.grading = {method: 'TOTAL_MEAN', weightingMap: {}};
+            }
+            else
+            {
+                // Request grading scheme for this course
+                App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
+                {
+                    // Check success
+                    if (response.success)
+                    {
+                        // Add it to course
+                        course.grading = response.data;
+                    }
+                    else throw new Error(response.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(() =>
+        {
+            // When the assignments are ready
+            this.assignmentsReady = true;
+
+            // Remove loading
+            this.logLoading('');
+        })
+    }
+
+    /**
+     * Log a message to loading screen
+     *
+     * @param message Message
+     */
+    private logLoading(message: string)
+    {
+        if (message == '') this.loading = '';
+        else this.loading += '\n' + message;
+    }
+
+    /**
+     * Show error message on loading screen
+     *
+     * @param message Error message
+     */
+    private showError(message: string)
+    {
+        this.loadingError = true;
+        this.loading = message;
+    }
+
+    /**
+     * Sign out
+     */
+    public signOut()
+    {
+        // Clear all cookies
+        this.$cookies.keys().forEach(key => this.$cookies.remove(key));
+
+        // 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();
     }
 }

src/components/app/app.vue

@@ -1,11 +1,21 @@
 <template>
-    <div id="app">
-        <login v-if="showLogin" v-on:login:courses="onLogin"></login>
-        <navigation :courses="courses" v-on:navigation:select="onNavigate"></navigation>
+    <div id="app" class="theme-default">
+        <login v-if="showLogin" v-on:login:token="onLogin"></login>
+        <navigation :courses="filteredCourses"
+                    :activeIndex.sync="selectedTab"
+                    @sign-out="signOut" @select-time="selectTime">
+        </navigation>
 
-        <div id="app-content">
-            <overall v-if="selectedTab === 'overall'"></overall>
+        <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>
 

src/components/loading/loading.vue

@@ -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>

src/components/login/login.scss

@@ -72,3 +72,28 @@
         width: 100%;
     }
 }
+
+// Error
+.input-error
+{
+    .el-input__inner
+    {
+        color: #ff3a3a6b !important;
+        border-color: #ff3a3a6b !important;
+        background-color: #ffdddd3b !important;
+    }
+
+    .el-input__inner:focus
+    {
+        background-color: white !important;
+    }
+}
+
+// Fix error message
+.el-form-item__error.custom
+{
+    padding-top: 0;
+    position: relative;
+    top: auto;
+    float: left;
+}

src/components/login/login.ts

@@ -1,5 +1,7 @@
 import {Component, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
+import App from '@/components/app/app';
+import VersionUtils from '@/logic/utils/version-utils';
 
 /**
  * This component handles user login, and obtains data from the server.
@@ -13,6 +15,50 @@ export default class Login extends Vue
     public password: any = '';
 
     public loading: boolean = false;
+    public error: String = '';
+
+    /**
+     * This is called when the instance is created.
+     */
+    public created()
+    {
+        // Check login cookies
+        if (this.$cookies.isKey('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;
+    }
 
     /**
      * On click, sends username and password to the server.
@@ -22,15 +68,28 @@ export default class Login extends Vue
         // Make login button loading
         this.loading = true;
 
-        // Fetch request TODO: Add username and password when the https server is ready.
-        fetch(`${Constants.API_URL}/veracross/courses`).then(res =>
+        // Fetch request
+        App.http.post('/login', {username: this.username, password: this.password})
+        .then(response =>
         {
-            // Get response body text
-            res.text().then(text =>
+            // Check success
+            if (response.success)
             {
-                // Call custom event with courses info
-                this.$emit('login:courses', JSON.parse(text));
-            })
+                // Save token to cookies
+                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);
+            }
+            else
+            {
+                // Show error message
+                this.error = response.data;
+
+                // Allow the user to retry
+                this.loading = false;
+            }
         })
         .catch(err =>
         {
@@ -40,4 +99,12 @@ export default class Login extends Vue
             this.loading = false;
         });
     }
+
+    /**
+     * This is called when the user hits enter in the input boxes.
+     */
+    public onEnter()
+    {
+        this.onLoginClick();
+    }
 }

src/components/login/login.vue

@@ -3,10 +3,26 @@
         <div class="login-vertical-center">
             <div class="login-panel">
                 <img alt="Vue logo" src="../../assets/logo.png">
+
                 <h1>Veracross Analyzer</h1>
-                <el-input v-model="username" placeholder="School Username"></el-input>
-                <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
-                <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                <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="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>
+
+                    <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                </form>
             </div>
         </div>
     </div>

src/components/navigation/navigation.scss

@@ -1,5 +1,113 @@
+
 .el-menu.centered li
 {
     display: inline-block !important;
     float: none !important;
 }
+
+// Borders
+#navigation
+{
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+
+    ul
+    {
+        border-bottom-width: 0;
+    }
+}
+
+#sign-out-button
+{
+    // Float right
+    position: absolute;
+    right: 0;
+
+    // Set width and height
+    height: 60px;
+    width: 110px;
+}
+
+#nav-grading-period
+{
+    // Float right
+    position: absolute;
+    right: 110px;
+
+    // Margins
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+#nav-title
+{
+    // Float left
+    position: absolute;
+    left: 0;
+
+    // Set height
+    height: 60px;
+
+    // Center text
+    align-items: center;
+
+    // Margins
+    margin-left: 20px;
+    margin-right: 8px;
+
+    // Font
+    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;
+}

src/components/navigation/navigation.ts

@@ -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 '@/logic/utils/course-utils';
+import {FormatUtils} from '@/logic/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,9 +80,107 @@ export default class Navigation extends Vue
     public onSelect(index: string, indexPath: string)
     {
         // Update active index
-        this.activeIndex = index;
+        this.updateIndex(index);
+    }
 
+    /**
+     * 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('navigation:select', this.activeIndex);
+        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;
     }
 }

src/components/navigation/navigation.vue

@@ -1,18 +1,49 @@
 <template>
     <div id="navigation">
-        <el-menu 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">
+                Veracross Analyzer
+            </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>
 
+            <!-- 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>
 

src/constants.ts

@@ -3,9 +3,66 @@
  */
 export default class Constants
 {
-    /**
-     * Base url for api access
-     * TODO: Use https for actual usage
-     */
-    public static API_URL: string = 'http://cn2.hydev.org:24021/api';
+    /** Base url for api access */
+    public static API_URL: string = 'https://va.hydev.org/api';
+
+    /** Current version */
+    public static VERSION: string = '0.4.3.1006';
+
+    /** 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';
+
+    public static SPLASH: string =
+        '.    ,        ,---.          |                        \n' +
+        '|    |.  ,    |---|,---.,---.|    ,   .,---,,---.,---.\n' +
+        ' \\  /  ><     |   ||   |,---||    |   | .-\' |---\'|    \n' +
+        '  `\'  \'  `    `   \'`   \'`---^`---\'`---|\'---\'`---\'`    \n' +
+        '                                  `---\'               \n' +
+        ` Version v${Constants.VERSION} by Hykilpikonna (YGui21)\n` +
+        ` Github: ${Constants.GITHUB}`;
+
+    // Graph Theme
+    public static THEME =
+    {
+        // Colors
+        colors:
+        [
+            '#19d4ae',
+            '#5ab1ef',
+            '#fa6e86',
+            '#ffb980',
+            '#0067a6',
+            '#c4b4e4',
+            '#d87a80',
+            '#9cbbff',
+            '#d9d0c7',
+            '#87a997',
+            '#d49ea2',
+            '#5b4947',
+            '#7ba3a8',
+            '#fc97af',
+            '#919e8b',
+            '#d7ab82',
+            '#6e7074',
+            '#61a0a8',
+            '#efa18d',
+            '#787464',
+            '#cc7e63',
+            '#724e58',
+            '#4b565b'
+        ]
+    };
+
+    // Terms (TODO: Actually get the terms dynamically
+    public static TERMS =
+    [
+        new Date('Sep 04 2019'),
+        new Date('Nov 03 2019'),
+        new Date('Jan 19 2020'),
+        new Date('Mar 22 2020'),
+        new Date('Jun 05 2020'),
+    ];
+    public static CURRENT_TERM = 1;
 }

src/logic/course.ts

@@ -0,0 +1,266 @@
+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';
+
+/**
+ * Objects of this interface represent assignment grades.
+ */
+export interface Assignment
+{
+    id: number
+    scoreId: number
+    type: string
+    typeId: number
+    description: string
+    time: number
+    complete: string
+    include: boolean
+    display: boolean
+
+    unread: boolean
+
+    scoreMax: number
+    score: number
+
+    gradingPeriod: number
+}
+
+export interface AssignmentType
+{
+    id: number
+    name: string
+
+    weight: number
+    scoreMax: number
+    score: number
+    percent: number
+}
+
+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;
+
+        // Other api issue
+        if (this.rawLetterGrade == '')
+        {
+            this.rawNumericGrade = undefined;
+            this.rawLetterGrade = undefined;
+        }
+
+        // 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.time - a.time);
+
+        // 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.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 rawSelectedAssignments(): Assignment[]
+    {
+        let timeCode = Navigation.instance.getSelectedGradingPeriod();
+
+        // All year
+        if (timeCode == -1)
+        {
+            return this.rawAssignments;
+        }
+
+        // Specific time
+        return this.computed.termAssignments[timeCode];
+    }
+
+    private _cacheAssignments: Assignment[];
+
+    /**
+     * Get graded assignments
+     */
+    get assignments(): Assignment[]
+    {
+        if (this._cacheAssignments == null)
+           this._cacheAssignments = this.rawSelectedAssignments.filter(a => a.complete == 'Complete');
+
+        return this._cacheAssignments;
+    }
+
+    private _cacheLetterGrade: string;
+
+    /**
+     * Get letter grade
+     */
+    get letterGrade(): string
+    {
+        if (this._cacheLetterGrade == null)
+        {
+            // Get scale
+            let scale = GPAUtils.findScale(this.numericGrade);
+
+            // Scale not found
+            if (scale == undefined) return this._cacheLetterGrade = '--';
+
+            // Cache
+            this._cacheLetterGrade = scale.letter;
+        }
+
+        return this._cacheLetterGrade;
+    }
+
+    private _cacheNumericGrade: number;
+
+    /**
+     * Get numeric grade
+     */
+    get numericGrade(): number
+    {
+        // Cached
+        if (this._cacheNumericGrade == null)
+        {
+            // Calculate
+            if (this.grading.method == 'PERCENT_TYPE')
+            {
+                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 assignment types
+     */
+    get assignmentTypes(): AssignmentType[]
+    {
+        if (this._cacheAssignmentTypes == null)
+        {
+            // Get all types
+            let types = this.assignments.map(a => a.type);
+
+            // Remove duplicates
+            types = types.filter((type, i, a) => a.indexOf(type) == i);
+
+            // Get total possible score for weight calculation
+            let totalScoreMax = this.assignments.reduce((sum, a) => sum + a.scoreMax, 0);
+
+            // For every type...
+            this._cacheAssignmentTypes = types.map(type =>
+            {
+                // Get assignments of the type
+                let typeAssignments = this.assignments.filter(a => a.type == type);
+
+                // Count scores and max scores
+                let score = typeAssignments.reduce((sum, a) => sum + a.score, 0);
+                let scoreMax = typeAssignments.reduce((sum, a) => sum + a.scoreMax, 0);
+
+                // Calculate weight
+                let weight = this.grading.method == 'PERCENT_TYPE'
+                    ? this.grading.weightingMap[type] : scoreMax / totalScoreMax;
+
+                // Return
+                return {name: type, id: typeAssignments[0].typeId, weight: weight,
+                    scoreMax: scoreMax, score: score, percent: +(score / scoreMax * 100).toFixed(2)}
+            })
+        }
+
+        return this._cacheAssignmentTypes;
+    }
+}

src/logic/utils/course-utils.ts

@@ -0,0 +1,89 @@
+import Course from '@/logic/course';
+import Navigation from '@/components/navigation/navigation';
+import Constants from '@/constants';
+
+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
+{
+    /**
+     * 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
+     *
+     * @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;
+
+        // Uncommon ones
+        let lower = name.toLowerCase();
+
+        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;
+
+        // Even more uncommon
+        if (lower.includes('honors')) return LEVEL_H;
+        if (lower.includes('accelerated')) return LEVEL_A;
+        if (name.includes('Advanced')) return LEVEL_A;
+
+        // Unknown course list
+        if (UNKNOWN_COURSE_LIST.has(name)) return UNKNOWN_COURSE_LIST.get(name);
+
+        // Really unknown
+        return undefined;
+    }
+
+    /**
+     * Get the begin date of the selected term
+     */
+    static getTermBeginDate()
+    {
+        let selected = Navigation.instance.getSelectedGradingPeriod();
+
+        return selected == -1 ? Constants.TERMS[0] : Constants.TERMS[selected];
+    }
+
+    /**
+     * Get the end date of the selected term
+     */
+    static getTermEndDate()
+    {
+        let selected = Navigation.instance.getSelectedGradingPeriod();
+
+        return selected == -1 ? Constants.TERMS[3] : Constants.TERMS[selected + 1];
+    }
+}

src/logic/utils/format-utils.ts

@@ -0,0 +1,36 @@
+import moment from 'moment';
+
+export class FormatUtils
+{
+    /**
+     * 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, '&');
+    }
+}

src/logic/utils/gpa-utils.ts

@@ -0,0 +1,190 @@
+import Course, {Assignment} from '@/logic/course';
+
+export interface Scale
+{
+    min: number
+    letter: string
+    gp: number
+}
+
+/**
+ * This is an utility class to calculate GPA.
+ */
+export class GPAUtils
+{
+    // [[Min score, Letter grade, Base GPA], ...]
+    public static SCALE: Scale[] =
+    [
+        {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}
+    ];
+
+    /**
+     * Calculate GPA for a list of couses
+     *
+     * @param coursesOriginal List of courses
+     */
+    public static getGPA(coursesOriginal: Course[]): {gpa: number, accurate: boolean, max: number}
+    {
+        // Clone array
+        let courses: Course[] = [];
+
+        // Accurate or not
+        let accurate: boolean = true;
+
+        // Remove all courses that does not have a grade
+        coursesOriginal.forEach(course =>
+        {
+            if (course.letterGrade == null || course.letterGrade == '')
+            {
+                accurate = false;
+            }
+            else if (course.level != 'none')
+            {
+                courses.push(course);
+            }
+        });
+
+        // If no course have grade, return -1
+        if (courses.length == 0)
+        {
+            return {gpa: -1, accurate: false, max: -1};
+        }
+
+        // Count total GPA
+        let totalGPA = 0;
+        let maxTotal = 0;
+        courses.forEach(course =>
+        {
+            totalGPA += this.getGP(course, course.letterGrade);
+            maxTotal += this.getGP(course, 'A+');
+        });
+
+        // Get average GPA, round to two decimal places
+        let gpa = Math.round(totalGPA / courses.length * 100) / 100;
+        let maxGPA = Math.round(maxTotal / courses.length * 100) / 100;
+
+        // Return results
+        return {gpa: gpa, accurate: accurate, max: maxGPA};
+    }
+
+    /**
+     * Calculate GPA for a course
+     *
+     * @param course Course
+     * @param letterGrade Letter grade
+     */
+    public static getGP(course: Course, letterGrade: string): number
+    {
+        // 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')
+        {
+            return this.SCALE.find(scale => scale.letter == grade);
+        }
+
+        // Numeric grade
+        return this.SCALE.find(scale => grade >= scale.min);
+    }
+
+    /**
+     * Calculate the total-mean (total/max) average
+     *
+     * @param assignments
+     */
+    public static getTotalMeanAverage(assignments: Assignment[])
+    {
+        let score = 0;
+        let max = 0;
+
+        // Loop through assignments
+        assignments.forEach(assignment =>
+        {
+            // If assignment should be displayed
+            if (assignment.complete != 'Complete') return;
+
+            // Record scores
+            score += assignment.score;
+            max += assignment.scoreMax;
+        });
+
+        // Return
+        return +(score / max * 100).toFixed(2);
+    }
+
+    /**
+     * 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).toFixed(2);
+    }
+}

src/logic/utils/graph-utils.ts

@@ -0,0 +1,73 @@
+import Constants from '@/constants';
+
+export default class GraphUtils
+{
+    static DOT = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:{color}"></span>';
+
+    /**
+     * Base settings
+     *
+     * @param title
+     * @param subtitle
+     */
+    static getBaseSettings(title?: String, subtitle?: String)
+    {
+        return {
+            // Color
+            color: Constants.THEME.colors,
+
+            // Title
+            title:
+            {
+                show: title != null,
+                textStyle:
+                {
+                    fontSize: 13
+                },
+                text: title,
+                subtext: subtitle,
+                x: 'center'
+            },
+        }
+    }
+
+    /**
+     * Get term mark lines
+     */
+    static getTermLines()
+    {
+        return {
+            silent: true,
+            symbol: 'none',
+            lineStyle: {color: Constants.THEME.colors[2]},
+            animationDuration: 500,
+            data: Constants.TERMS.map((term, index) =>
+            {
+                return {xAxis: term.getTime(), label: {formatter: `Term ${index + 1}`}}
+            })
+        }
+    }
+
+    /**
+     * Get mark areas for percentage scores
+     */
+    static getGradeMarkAreas(opacity: number)
+    {
+        return {
+            silent: true,
+            data:
+            [
+                // Above 100
+                [{itemStyle: {color: 'rgba(230,253,255)', opacity: opacity}, yAxis: 120}, {yAxis: 100}],
+                // 90 to 100
+                [{itemStyle: {color: 'rgba(241,255,237)', opacity: opacity}, yAxis: 100}, {yAxis: 90}],
+                // 80 to 90
+                [{itemStyle: {color: 'rgba(255,250,216)', opacity: opacity}, yAxis: 90}, {yAxis: 80}],
+                // 70 to 80
+                [{itemStyle: {color: 'rgba(255,225,199)', opacity: opacity}, yAxis: 80}, {yAxis: 70}],
+                // Below 70 (Fail)
+                [{itemStyle: {color: 'rgb(255,190,184)', opacity: opacity}, yAxis: 70}, {yAxis: -100}]
+            ]
+        }
+    }
+}

src/logic/utils/http-utils.ts

@@ -0,0 +1,30 @@
+import Constants from '@/constants';
+
+export class HttpUtils
+{
+    public token: string = '';
+
+    public post(node: string, body: any): Promise<any>
+    {
+        // Add token
+        if (this.token != '') body['token'] = this.token;
+
+        // Create promise
+        return new Promise<any>((resolve, reject) =>
+        {
+            // Fetch request
+            fetch(`${Constants.API_URL}${node}`, {method: 'POST', body: JSON.stringify(body)}).then(res =>
+            {
+                // Get response body text
+                res.text().then(text =>
+                {
+                    // Parse response
+                    let response = JSON.parse(text);
+                    resolve(response);
+                })
+                .catch(reject)
+            })
+            .catch(reject)
+        });
+    }
+}

src/logic/utils/json-utils.ts

@@ -0,0 +1,35 @@
+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
+            }
+        });
+    }
+}

src/logic/utils/version-utils.ts

@@ -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;
+    }
+}

src/main.ts

@@ -1,8 +1,9 @@
 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;
 
@@ -12,6 +13,9 @@ Vue.use(ElementUI, {locale: 'en-us'});
 // Use VCharts
 Vue.use(VCharts);
 
+// Use Cookies
+Vue.use(VueCookies);
+
 // Init app
 new Vue({
   render: (h) => h(App),

src/pages/course/assignment-type-head/assignment-type-head.vue

@@ -0,0 +1,74 @@
+<template>
+    <div id="assignment-type-head">
+        <el-card :body-style="{padding: '0px'}">
+            <div id="type-info-card">
+                <span id="type-name">{{type.name}}</span>
+                <span id="type-average">Average: {{type.percent}}%</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 AssignmentEntry from '@/pages/overall/overall-course/assignment-entry/assignment-entry.vue';
+    import {Assignment, AssignmentType} from '@/logic/course';
+
+    @Component({
+        components: {AssignmentEntry}
+    })
+    export default class AssignmentTypeHead extends Vue
+    {
+        @Prop({required: true}) type: AssignmentType;
+        @Prop({required: true}) assignments: Assignment[];
+
+        get filteredAssignments()
+        {
+            // Filter assignments to only this type
+            return this.assignments.filter(a => a.typeId == this.type.id);
+        }
+    }
+</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>

src/pages/course/course-page.scss

@@ -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);
+}

src/pages/course/course-page.vue

@@ -0,0 +1,70 @@
+<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>
+
+
+            <el-row>
+                <el-col :span="12">
+                    <el-card class="large overall-line-card vertical-center" body-style="padding: 0">
+                        <CourseTypeRadar :course="course"></CourseTypeRadar>
+                    </el-card>
+                </el-col>
+                <el-col :span="12">
+                    Hi
+                </el-col>
+            </el-row>
+
+            <AssignmentTypeHead v-for="type in course.assignmentTypes" :key="type.id"
+                                :type="type" :assignments="course.assignments">
+            </AssignmentTypeHead>
+        </div>
+    </el-card>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    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, {Assignment} from '@/logic/course';
+    import TypeRadar from '@/pages/course/course-type-radar/type-radar';
+
+    @Component({
+        components: {CourseTypeRadar: TypeRadar, 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;
+        }
+    }
+</script>
+
+<style src="./course-page.scss" lang="scss" scoped></style>

src/pages/course/course-scatter/course-scatter.ts

@@ -0,0 +1,165 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Constants from '@/constants';
+import {FormatUtils} from '@/logic/utils/format-utils';
+import moment from 'moment';
+import Course, {Assignment} from '@/logic/course';
+import GraphUtils from '@/logic/utils/graph-utils';
+
+@Component({
+})
+export default class CourseScatter extends Vue
+{
+    @Prop({required: true}) course: Course;
+
+    /**
+     * Override options
+     *
+     * @param options Original options (Unused)
+     */
+    afterConfig(options: any)
+    {
+        return this.chartSettings;
+    }
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        // Create settings
+        let settings =
+        {
+            // Base settings
+            ...GraphUtils.getBaseSettings('Assignments', 'Assignment scores for ' + this.course.name),
+
+            // X axis represents course names
+            xAxis:
+            {
+                type: 'time',
+                axisLabel:
+                {
+                    formatter: (name: any) => moment(name).format('MMM DD')
+                },
+                max: new Date().getTime()
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'value',
+                name: 'Percentage Score',
+                nameLocation: 'center',
+                nameGap: 38,
+                axisLabel:
+                {
+                    formatter: (name: any) => name + '%'
+                },
+                min: (value: any) => Math.floor(value.min) - 5,
+                max: (value: any) => Math.min(Math.ceil(value.max), 110)
+            },
+
+            // Tooltip
+            tooltip:
+            {
+                trigger: 'axis',
+                axisPointer:
+                {
+                    type: 'cross'
+                },
+                formatter: (ps: any[]) => moment(ps[0].data[0]).format('MMM DD, YYYY') + '<br>' + ps.map(p =>
+                    `${GraphUtils.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: this.series()
+        };
+
+        return settings;
+    }
+
+    /**
+     * Get series data
+     */
+    private series()
+    {
+        // Scatter data point style
+        let itemStyle =
+        {
+            normal:
+            {
+                opacity: 0.8,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.2)'
+            }
+        };
+
+        // Create scatter plots
+        let map = this.mapAssignments();
+        let series: any[] = Array.from(map, ([type, assignments]) =>
+        {
+            return {
+                type: 'scatter',
+                name: type,
+                data: CourseScatter.assignmentsData(assignments),
+                itemStyle: itemStyle
+            }
+        });
+
+        // Push other stuff
+        series.push(
+        {
+            type: 'line',
+            markLine: GraphUtils.getTermLines(),
+            markArea: GraphUtils.getGradeMarkAreas(0.4)
+        });
+
+        return series;
+    }
+
+    /**
+     * 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 => [a.time, (a.score / a.scoreMax * 100).toFixed(2), a.description]);
+    }
+}

src/pages/course/course-scatter/course-scatter.vue

@@ -0,0 +1,16 @@
+<template>
+    <div id="course-scatter">
+        <ve-scatter height="450px" class="graph" :extend="{a: 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>

src/pages/course/course-type-radar/type-radar.ts

@@ -0,0 +1,114 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Constants from '@/constants';
+import {FormatUtils} from '@/logic/utils/format-utils';
+import moment from 'moment';
+import Course, {Assignment} from '@/logic/course';
+import GraphUtils from '@/logic/utils/graph-utils';
+
+@Component
+export default class TypeRadar extends Vue
+{
+    @Prop({required: true}) course: Course;
+
+    /**
+     * Override options
+     *
+     * @param options Original options (Unused)
+     */
+    afterConfig(options: any)
+    {
+        return this.chartSettings;
+    }
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        // Create settings
+        let settings =
+        {
+            ...GraphUtils.getBaseSettings('Type Radar',
+                'Assignment type grades for ' + this.course.name),
+
+            // Radar settings
+            radar:
+            {
+                // shape: 'circle',
+                name:
+                {
+                    textStyle:
+                    {
+                        fontSize: 14,
+                        textShadowColor: '#cfcfcf',
+                        textShadowBlur: 2,
+                        textShadowOffsetX: 1,
+                        textShadowOffsetY: 1,
+                        color: '#fff',
+                        backgroundColor: '#f6f6f6',
+                        borderRadius: 3,
+                        padding: [3, 5]
+                    }
+                },
+                splitArea:
+                {
+                    areaStyle:
+                    {
+                        color:
+                        [
+                            'rgb(255,161,151)',
+                            'rgb(255,190,184)',
+                            'rgba(255,225,199)',
+                            'rgba(255,250,216)',
+                            'rgba(241,255,237)',
+                        ],
+                        opacity: 0.4
+                    }
+                },
+                indicator: this.course.assignmentTypes.map((t, i) => {return {
+                    name: `${t.name}\n${t.percent}%`,
+                    max: 100,
+                    color: Constants.THEME.colors[i]
+                }}),
+                radius: '60%',
+                center: ['50%', '60%']
+            },
+
+            tooltip: {},
+
+            // Data
+            series:
+            {
+                type: 'radar',
+                data:
+                [
+                    {
+                        name: 'Score',
+                        symbol: 'circle',
+                        areaStyle:
+                        {
+                            color:
+                            {
+                                type: 'radial',
+                                x: 0.5, y: 0.6, r: 0.5,
+                                colorStops:
+                                [
+                                    {offset: 0, color: '#ffa0a0'},
+                                    {offset: 0.5, color: '#fffead'},
+                                    {offset: 1, color: '#d1ffde'}
+                                ],
+                                global: false // 缺省为 false
+                            },
+                            opacity: 0.2
+                        },
+                        value: this.course.assignmentTypes.map(t => t.percent)
+                    }
+                ]
+            },
+
+            color: '#6771c1'
+        };
+
+        return settings;
+    }
+}

src/pages/course/course-type-radar/type-radar.vue

@@ -0,0 +1,16 @@
+<template>
+    <div id="course-scatter">
+        <ve-radar height="450px" class="graph" :extend="{a: this.course.name}" :after-config="afterConfig"></ve-radar>
+    </div>
+</template>
+
+<script src="./type-radar.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>

src/pages/overall/graph-overall/graph-overall.ts

@@ -1,19 +0,0 @@
-import {Component, Vue} from 'vue-property-decorator';
-
-@Component({
-})
-export default class GraphOverall extends Vue
-{
-    public chartData =
-    {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
-            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
-            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
-            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
-            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
-            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
-        ]
-    };
-}

src/pages/overall/graph-overall/graph-overall.vue

@@ -1,8 +0,0 @@
-<template>
-    <div id="graph-overall">
-        <ve-line :data="chartData" :extend="{series: {smooth: false}}"></ve-line>
-    </div>
-</template>
-
-<script src="./graph-overall.ts" lang="ts"></script>
-<style src="./graph-overall.scss" lang="scss"></style>

src/pages/overall/overall-bar/overall-bar.ts

@@ -0,0 +1,117 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Course from '@/logic/course';
+import {GPAUtils} from '@/logic/utils/gpa-utils';
+import Constants from '@/constants';
+import {FormatUtils} from '@/logic/utils/format-utils';
+
+@Component({
+})
+export default class OverallBar extends Vue
+{
+    @Prop({required: true}) courses: Course[];
+
+    /**
+     * Generate settings
+     */
+    get chartSettings()
+    {
+        let settings =
+        {
+            // Title
+            title:
+            {
+                show: true,
+                textStyle:
+                {
+                    fontSize: 12
+                },
+                text: 'Course GPA',
+                subtext: 'Current GPA for every course',
+                x: 'center'
+            },
+
+            // X axis represents course names
+            xAxis:
+            {
+                type: 'category',
+                axisLabel: {
+                    interval: 0,
+                    inside: false,
+                    rotate: 90,
+
+                    // Truncate text length
+                    formatter: (value: string) => FormatUtils.limit(value, 16)
+                },
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'value'
+            },
+
+            // Data
+            series:
+            [
+                // Max GP
+                {
+                    type: 'bar',
+                    barGap: '-100%',
+                    data: this.courses.map(course =>
+                    {
+                        return {value: [course.name, GPAUtils.getGP(course, 'A+')], itemStyle: {color: '#d8d8d8'}}
+                    }),
+                },
+                // Current GP
+                {
+                    type: 'bar',
+                    barGap: '-100%',
+                    data: this.generateGPData(),
+
+                    label:
+                    {
+                        show: true,
+                        rotate: 90
+                    }
+                }
+            ],
+
+            // Disable tooltip
+            tooltip:
+            {
+                show: false
+            }
+        };
+
+        return settings;
+    }
+
+    /**
+     * Generate GP data for each course
+     */
+    private generateGPData()
+    {
+        let data: any = [];
+
+        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, gp],
+                itemStyle:
+                {
+                    color: Constants.THEME.colors[index]
+                }
+            });
+        });
+
+        return data;
+    }
+}

src/pages/overall/overall-bar/overall-bar.vue

@@ -0,0 +1,17 @@
+<template>
+    <div id="overall-bar">
+        <ve-bar height="450px" class="graph"
+                :extend="chartSettings"></ve-bar>
+    </div>
+</template>
+
+<script src="./overall-bar.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    #overall-bar
+    {
+        .graph
+        {
+            margin-top: 50px;
+        }
+    }
+</style>

src/pages/overall/overall-course/assignment-entry/assignment-entry.scss

@@ -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);
+}

src/pages/overall/overall-course/assignment-entry/assignment-entry.vue

@@ -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.time).format("MMM D")}}</span>
+                <span class="now">({{getMoment(assignment.time).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 moment from 'moment';
+    import {Assignment} from '@/logic/course';
+
+    @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: number)
+        {
+            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>

src/pages/overall/overall-course/course-head/course-head.scss

@@ -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;
+        }
+    }
+}

src/pages/overall/overall-course/course-head/course-head.vue

@@ -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 '@/logic/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>

src/pages/overall/overall-course/overall-course.scss

@@ -0,0 +1,16 @@
+// Card
+.el-card.course-card
+{
+    // Margins
+    margin-right: 20px;
+    margin-left: 20px;
+
+    // Height limit
+    max-height: 250px;
+
+    // Limit name length
+    white-space: nowrap;
+
+    // Expansion color
+    background: #f4f6f9;
+}

src/pages/overall/overall-course/overall-course.ts

@@ -0,0 +1,51 @@
+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)
+            }
+        })
+    }
+}

src/pages/overall/overall-course/overall-course.vue

@@ -0,0 +1,19 @@
+<template>
+    <div id="overall-course">
+        <el-card class="course-card">
+            <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" scoped></style>

src/pages/overall/overall-line/overall-line.ts

@@ -0,0 +1,164 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import moment from 'moment';
+import Course, {Assignment} 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';
+
+@Component
+export default class OverallLine extends Vue
+{
+    @Prop({required: true}) courses: Course[];
+
+    filteredCourses: Course[];
+    settings: any;
+
+    /**
+     * When this component is created
+     */
+    created()
+    {
+        // Filter courses
+        this.filteredCourses = this.courses.filter(c => c.isGraded && c.assignments.length > 0);
+
+        // Generate settings
+        this.settings =
+        {
+            ...GraphUtils.getBaseSettings('Average Grade', 'Average score trend for every course'),
+
+            // Zoom bar
+            dataZoom:
+            [
+                {
+                    type: 'slider',
+                    startValue: Math.max(moment().subtract(30, 'days').toDate().getTime(),
+                        CourseUtils.getTermBeginDate().getTime()),
+
+                    // Minimum zoom: 1 week
+                    minValueSpan: 7 * 24 * 60 * 60 * 1000
+                }
+            ],
+
+            // Tooltip
+            tooltip:
+            {
+                trigger: 'axis'
+            },
+
+            // Axis
+            xAxis:
+            {
+                type: 'time',
+                axisLabel:
+                {
+                    formatter: (name: any) => moment(name).format('MMM DD')
+                },
+            },
+            yAxis:
+            {
+                axisLabel:
+                {
+                    formatter: (name: any) => name + '%'
+                },
+                min: (value: any) => Math.floor(value.min),
+                max: (value: any) => Math.min(Math.ceil(value.max), 110)
+            },
+
+            // Series data
+            series: this.series()
+        }
+    }
+
+    /**
+     * Override options
+     *
+     * @param options Original options (Unused)
+     */
+    afterConfig(options: any)
+    {
+        return this.settings;
+    }
+
+    /**
+     * Generate series data
+     */
+    private series()
+    {
+        // Each course
+        let series: any[] = this.filteredCourses.map(course => this.getCourseSeries(course));
+
+        // Push other stuff
+        series.push(
+        {
+            type: 'line',
+            markLine: GraphUtils.getTermLines(),
+            markArea: GraphUtils.getGradeMarkAreas(0.4)
+        });
+
+        return series
+    }
+
+    /**
+     * Generate series data for a course
+     *
+     * @param course
+     */
+    private getCourseSeries(course: Course)
+    {
+        // Graded assignments
+        let assignments = course.assignments.slice().reverse();
+
+        // Create series
+        return {
+            name: course.name,
+            type: 'line',
+            smooth: true,
+            symbol: 'circle', // circle, diamond, emptyCircle, none
+            data: this.toDateRange([...assignments.map(a => a.time)].map((time, i) =>
+            {
+                // Find subset before this assignment
+                let subset = assignments.filter(a => a.time <= time);
+
+                // Find grade
+                if (course.grading.method == 'PERCENT_TYPE')
+                    return [time, GPAUtils.getPercentTypeAverage(course, subset)];
+                if (course.grading.method == 'TOTAL_MEAN')
+                    return [time, GPAUtils.getTotalMeanAverage(subset)];
+            }))
+        }
+    }
+
+    /**
+     * Convert point data to date range data.
+     * Eg. [[Mon, 10], [Wed, 5]] to [[Mon, 10], [Tue, 10], [Wed, 5]]
+     *
+     * @param data
+     */
+    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(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[] = [];
+        for (let date = minDate; date <= now; date.setDate(date.getDate() + 1))
+        {
+            dates.push(new Date(date).getTime());
+        }
+
+        let lastValue: any = null;
+        return dates.map(date =>
+        {
+            // Data point on this specific date
+            let thisValue = data.find(a => a[0] == date);
+
+            // None
+            if (thisValue == null) return [date, lastValue == null ? null : lastValue[1]];
+            else return [date, (lastValue = thisValue)[1]];
+        });
+    }
+}

src/pages/overall/overall-line/overall-line.vue

@@ -0,0 +1,10 @@
+<template>
+    <div id="overall-line">
+        <ve-line :extend="{a: this.courses}" :after-config="afterConfig"></ve-line>
+    </div>
+</template>
+
+<script src="./overall-line.ts" lang="ts"></script>
+<style lang="scss" scoped>
+    
+</style>

src/pages/overall/overall.scss

@@ -0,0 +1,53 @@
+
+.gpa-card
+{
+    margin-left: 20px;
+    min-width: 136px;
+}
+
+.gpa
+{
+    display: block;
+}
+
+.gpa.header
+{
+    font-size: 14px;
+}
+
+.gpa.text
+{
+    font-size: 35px;
+    font-family: var(--font);
+}
+
+.gpa.max
+{
+    margin-top: -10px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #409eff;
+}
+
+.gpa.time
+{
+    font-size: 11px;
+}
+
+.no-grade
+{
+    font-size: 30px;
+    color: #b1b1b1;
+
+    // Disable selecting
+    display:block;
+    pointer-events: none;
+    user-select: none;
+}
+
+// Cards
+.el-card.overall-bar-card
+{
+    margin-right: 20px;
+    min-width: 170px;
+}

src/pages/overall/overall.ts

@@ -1,10 +0,0 @@
-import {Component, Vue} from 'vue-property-decorator';
-import GraphOverall from '@/pages/overall/graph-overall/graph-overall';
-
-@Component({
-    components: {GraphOverall}
-})
-export default class Overall extends Vue
-{
-
-}

src/pages/overall/overall.vue

@@ -1,9 +1,67 @@
 <template>
     <div id="overall">
-        <p>这是 Overall</p>
-        <graph-overall></graph-overall>
+        <el-row v-if="getGPA().gpa !== -1">
+            <el-col :span="4">
+                <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>
+                        <span class="gpa max">(Out of {{getGPA().max}})</span>
+                        <div class="bottom clearfix gpa time">
+                            <time>{{ new Date().toDateString() }}</time>
+                        </div>
+                    </div>
+                </el-card>
+            </el-col>
+            <el-col :span="14">
+                <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="large overall-bar-card vertical-center">
+                    <overall-bar :courses="courses"></overall-bar>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <el-row v-if="getGPA().gpa === -1">
+            <el-card class="large gpa-card vertical-center">
+                <div class="no-grade">This quarter has no grades yet...</div>
+            </el-card>
+        </el-row>
+
+        <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 '@/logic/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>

src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import Vue, {VNode} from 'vue';
 
 declare global {
   namespace JSX {

src/shims-vue.d.ts

@@ -1,4 +1,5 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+declare module '*.vue'
+{
+    import Vue from 'vue';
+    export default Vue;
 }

tsconfig.json

@@ -24,7 +24,10 @@
       "dom",
       "dom.iterable",
       "scripthost"
-    ]
+    ],
+
+    // Custom
+    "strictPropertyInitialization": false
   },
   "include": [
     "src/**/*.ts",

vue.config.js

@@ -0,0 +1,7 @@
+module.exports =
+{
+    devServer:
+    {
+        disableHostCheck: true,
+    }
+};