[F] Fix logic error

This reverts commit 5441592d68.

public/index.html

@@ -25,4 +25,14 @@
         <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
         <script src="https://unpkg.com/element-ui/lib/index.js"></script>
     </body>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q615K1KFLC"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-Q615K1KFLC');
+    </script>
 </html>

src/components/app/app.scss

@@ -7,6 +7,14 @@
     color: #2c3e50;
 }
 
+#app-content
+{
+    // Limit max width
+    max-width: 1300px;
+    text-align: center;
+    margin: auto;
+}
+
 .theme-default
 {
     --unread: #ff6c00;

src/components/app/app.ts

@@ -15,6 +15,7 @@ import {GPAUtils} from '@/utils/gpa-utils';
 export interface Assignment
 {
     id: number,
+    scoreId: number,
     type: string,
     typeId: number,
     description: string,
@@ -79,7 +80,7 @@ export default class App extends Vue
     public token: string = '';
 
     // Http Client
-    public http: HttpUtils = new HttpUtils('');
+    public static http: HttpUtils = new HttpUtils();
 
     /**
      * This is called when the instance is created.
@@ -104,7 +105,7 @@ export default class App extends Vue
         this.token = token;
 
         // Assign token to http client
-        this.http.token = token;
+        App.http.token = token;
 
         // Load data
         this.loadCoursesAfterLogin();
@@ -115,7 +116,7 @@ export default class App extends Vue
      */
     public loadCoursesAfterLogin()
     {
-        this.http.post('/courses', {}).then(response =>
+        App.http.post('/courses', {}).then(response =>
         {
             // Check success
             if (response.success)
@@ -144,7 +145,7 @@ export default class App extends Vue
         this.courses.forEach(course =>
         {
             // Send request to get assignments
-            this.http.post('/assignments', {id: course.assignmentsId}).then(response =>
+            App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
             {
                 // Check success
                 if (response.success)
@@ -204,7 +205,7 @@ export default class App extends Vue
             else
             {
                 // Request grading scheme for this course
-                this.http.post('/grading', {'assignment_id': course.assignmentsId}).then(response =>
+                App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
                 {
                     // Check success
                     if (response.success)

src/components/app/app.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app" class="theme-default">
-        <login v-if="showLogin" v-on:login:token="onLogin" :http="http"></login>
+        <login v-if="showLogin" v-on:login:token="onLogin"></login>
         <navigation :courses="filteredCourses"
                     v-on:sign-out="signOut()"
                     v-on:navigation:select="onNavigate">

src/components/login/login.ts

@@ -1,6 +1,7 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
 import {HttpUtils} from '@/utils/http-utils';
+import App from '@/components/app/app';
 
 /**
  * This component handles user login, and obtains data from the server.
@@ -17,14 +18,18 @@ export default class Login extends Vue
     public loading: boolean = false;
     public error: String = '';
 
-    @Prop()
-    public http?: HttpUtils;
-
     /**
      * This is called when the instance is created.
      */
     public created()
     {
+        // Check cookies version
+        if (!this.$cookies.isKey('va.version') || this.$cookies.get('va.version') != Constants.VERSION)
+        {
+            // Clear all cookies
+            this.$cookies.keys().forEach(key => this.$cookies.remove(key));
+        }
+
         // Check login cookies
         if (this.$cookies.isKey('va.token'))
         {
@@ -42,7 +47,7 @@ export default class Login extends Vue
         this.loading = true;
 
         // Fetch request
-        (<HttpUtils> this.http).post('/login', {username: this.username, password: this.password})
+        App.http.post('/login', {username: this.username, password: this.password})
         .then(response =>
         {
             // Check success
@@ -50,6 +55,7 @@ export default class Login extends Vue
             {
                 // Save token to cookies
                 this.$cookies.set('va.token', response.data, '7d');
+                this.$cookies.set('va.version', Constants.VERSION);
 
                 // Call custom event with token
                 this.$emit('login:token', response.data);

src/constants.ts

@@ -8,7 +8,7 @@ export default class Constants
      */
     public static API_URL: string = 'https://va.hydev.org/api';
 
-    public static VERSION: string = '0.3.2.452';
+    public static VERSION: string = '0.3.3.502';
 
     public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
 

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

@@ -12,7 +12,7 @@
     white-space: nowrap;
 
     // Expansion color
-    background: #f9f9f9;
+    background: #f4f6f9;
 
     // Main card content
     .course-card-content.main

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

@@ -1,5 +1,5 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import {Assignment, Course} from '@/components/app/app';
+import App, {Assignment, Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
 import Constants from '@/constants';
 import UnreadEntry from '@/pages/overall/overall-course/unread-entry/unread-entry';
@@ -28,8 +28,25 @@ export default class OverallCourse extends Vue
         else return this.unread;
     }
 
-    unreadTable()
+    /**
+     * Mark an assignment as read
+     */
+    markAsRead(assignment: Assignment)
     {
-        return [{date: '2019-10-04', name: 'Letter from a Penn Farmer Discussion Forum', grade: '14|14'}];
+        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

@@ -35,7 +35,8 @@
                  v-if="countUnread() !== 0">
                 <unread-entry v-for="assignment in unreadAssignments"
                               :assignment="assignment"
-                              :key="assignment.id">
+                              :key="assignment.id"
+                              v-on:mark-as-read="markAsRead">
                 </unread-entry>
             </div>
         </el-card>

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

@@ -3,7 +3,7 @@
 .unread-entry
 {
     height: 40px;
-    padding: 0 20px 0 20px;
+    padding: 0 10px 0 20px;
     background: #f5f7fa;
 
     text-align: left;
@@ -11,6 +11,8 @@
     // Date
     .el-col.date
     {
+        min-width: 130px;
+
         span.month
         {
             margin-right: 5px;
@@ -23,8 +25,11 @@
         }
     }
 
+    // Description
     .el-col.description
     {
+        width: unset;
+
         span.type
         {
             display: inline-block;
@@ -46,6 +51,7 @@
     .el-col.grade
     {
         text-align: right;
+        float: right;
 
         span.percent
         {
@@ -74,6 +80,14 @@
             background: #ddd;
             color: #333;
         }
+
+        // Mark as read
+        button.mark-as-read
+        {
+            margin-left: 8px;
+            color: #aaa;
+            padding: 4px;
+        }
     }
 
     .entry-box

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

@@ -14,8 +14,17 @@ export default class UnreadEntry extends Vue
      *
      * @param date Date
      */
-    private getMoment(date: string)
+    getMoment(date: string)
     {
         return moment(new Date(date));
     }
+
+    /**
+     * Mark this unread assignment as read
+     */
+    markAsRead()
+    {
+        // Call custom event
+        this.$emit('mark-as-read', this.assignment)
+    }
 }

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

@@ -19,6 +19,9 @@
                 </span>
                 <span class="score entry-box">{{assignment.score}}</span>
                 <span class="max entry-box">{{assignment.scoreMax}}</span>
+                <el-button class="mark-as-read" size="mini" type="text"
+                           icon="el-icon-close" @click="markAsRead">
+                </el-button>
             </el-col>
         </el-row>
     </div>

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

@@ -56,7 +56,8 @@ export default class OverallLine extends Vue
         },
         yAxis:
         {
-            min: (value: any) => value.min - 10
+            min: (value: any) => value.min,
+            max: (value: any) => value.max
         }
     };
 

src/utils/http-utils.ts

@@ -4,11 +4,6 @@ export class HttpUtils
 {
     public token: string = '';
 
-    constructor (token: string)
-    {
-        this.token = token;
-    }
-
     public post(node: string, body: any): Promise<any>
     {
         // Add token

src/utils/json-utils.ts

@@ -17,6 +17,7 @@ export default class JsonUtils
             result.push(
             {
                 id: assignment.assignment_id,
+                scoreId: assignment.score_id,
                 type: assignment.assignment_type,
                 typeId: assignment.assignment_type_id,
                 description: assignment.assignment_description,