[F] Fix logic error

This reverts commit 5441592d68.

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",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^2.6.5",
     "echarts": "^4.2.1",
     "element-ui": "^2.11.1",
+    "moment": "^2.24.0",
     "p-wait-for": "^3.1.0",
     "v-charts": "^1.19.0",
     "vue": "^2.6.10",

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,8 +7,20 @@
     color: #2c3e50;
 }
 
+#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;
 }

src/components/app/app.ts

@@ -15,7 +15,9 @@ import {GPAUtils} from '@/utils/gpa-utils';
 export interface Assignment
 {
     id: number,
+    scoreId: number,
     type: string,
+    typeId: number,
     description: string,
     date: string,
     complete: string,
@@ -78,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.
@@ -103,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();
@@ -114,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)
@@ -143,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)
@@ -188,7 +190,7 @@ export default class App extends Vue
     }
 
     /**
-     * Check the courses' grading algorithms. (Total-average or percent-type)
+     * Check the courses' grading algorithms. (Total-mean or percent-type)
      */
     private checkGradingAlgorithms()
     {
@@ -196,14 +198,14 @@ export default class App extends Vue
         for (const course of this.filteredCourses)
         {
             // Check if total-average grade is the same with percent-type grade
-            if (course.numericGrade == GPAUtils.getTotalMeanAverage(course))
+            if (course.numericGrade == +GPAUtils.getTotalMeanAverage(course).toFixed(2))
             {
-                course.grading = {method: 'TOTAL_AVERAGE', weightingMap: {}};
+                course.grading = {method: 'TOTAL_MEAN', weightingMap: {}};
             }
             else
             {
                 // Request grading scheme for this course
-                this.http.post('/grading', {'assignment_id': course.assignmentsId}).then(response =>
+                App.http.post('/grading', {'assignmentsId': course.assignmentsId}).then(response =>
                 {
                     // Check success
                     if (response.success)

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.1.382';
+    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

@@ -6,10 +6,36 @@
     margin-left: 20px;
 
     // Height limit
-    max-height: 90px;
+    max-height: 250px;
 
     // Limit name length
     white-space: nowrap;
+
+    // Expansion color
+    background: #f4f6f9;
+
+    // Main card content
+    .course-card-content.main
+    {
+        padding: 0 20px 0 20px;
+        height: 90px;
+
+        // Main color
+        background: white;
+    }
+
+    // Expansion content
+    .course-card-content.expand.notification
+    {
+
+    }
+}
+
+// Remove card padding for styling issues
+div.el-card.course-card > div.el-card__body
+{
+    padding-right: 0 !important;
+    padding-left: 0 !important;
 }
 
 .course-col-name

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

@@ -1,9 +1,11 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import {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';
 
 @Component({
+    components: {UnreadEntry}
 })
 export default class OverallCourse extends Vue
 {
@@ -11,6 +13,7 @@ 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
@@ -19,8 +22,31 @@ export default class OverallCourse extends Vue
     {
         if (this.unread == -1)
         {
-            return this.unread = this.course.assignments.filter(a => a.unread).length;
+            this.unreadAssignments = this.course.assignments.filter(a => a.unread);
+            return this.unread = this.unreadAssignments.length;
         }
         else return this.unread;
     }
+
+    /**
+     * Mark an assignment as read
+     */
+    markAsRead(assignment: Assignment)
+    {
+        App.http.post('/mark-as-read', {scoreId: assignment.scoreId})
+        .then(response =>
+        {
+            // Check success
+            if (response.success)
+            {
+                this.unreadAssignments = this.unreadAssignments.filter(a => a != assignment);
+                this.unread = this.unreadAssignments.length;
+            }
+            else
+            {
+                // Show error message TODO: Show it properly
+                alert(response.data)
+            }
+        })
+    }
 }

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

@@ -1,34 +1,44 @@
 <template>
     <div id="overall-course">
         <el-card class="course-card">
-            <el-row>
-                <el-col :span="6" class="course-col-name">
-                    <div class="course-name">
-                        {{course.name}}
-                    </div>
-                    <div class="course-teacher">
-                        {{course.teacherName}}
-                    </div>
-                </el-col>
-                <el-col :span="12">
-                    &nbsp;
-                </el-col>
-                <el-col :span="6" class="course-col-grade">
-                    <div class="course-grade">
-                        <span class="letter">{{course.letterGrade}} </span>
-                        <span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
-                        <span class="percent">%</span>
-                    </div>
-                    <div class="course-updates" :class="countUnread() === 0 ? 'none' : 'unread'">
-                        <span class="unread-number">
-                            {{countUnread()}}
-                        </span>
-                        <span class="unread-text">
-                            new update{{countUnread() >= 2 ? 's' : ''}}
-                        </span>
-                    </div>
-                </el-col>
-            </el-row>
+            <div class="course-card-content main vertical-center">
+                <el-row>
+                    <el-col :span="6" class="course-col-name">
+                        <div class="course-name">
+                            {{course.name}}
+                        </div>
+                        <div class="course-teacher">
+                            {{course.teacherName}}
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        &nbsp;
+                    </el-col>
+                    <el-col :span="6" class="course-col-grade">
+                        <div class="course-grade">
+                            <span class="letter">{{course.letterGrade}} </span>
+                            <span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
+                            <span class="percent">%</span>
+                        </div>
+                        <div class="course-updates" :class="countUnread() === 0 ? 'none' : 'unread'">
+                            <span class="unread-number">
+                                {{countUnread()}}
+                            </span>
+                            <span class="unread-text">
+                                new update{{countUnread() >= 2 ? 's' : ''}}
+                            </span>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="course-card-content expand notification"
+                 v-if="countUnread() !== 0">
+                <unread-entry v-for="assignment in unreadAssignments"
+                              :assignment="assignment"
+                              :key="assignment.id"
+                              v-on:mark-as-read="markAsRead">
+                </unread-entry>
+            </div>
         </el-card>
     </div>
 </template>

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

@@ -0,0 +1,107 @@
+
+// Row
+.unread-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;
+        }
+
+        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;
+    }
+}
+
+.unread-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/unread-entry/unread-entry.ts

@@ -0,0 +1,30 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Assignment, Course} from '@/components/app/app';
+import moment from 'moment';
+
+@Component({
+})
+export default class UnreadEntry extends Vue
+{
+    // @ts-ignore
+    @Prop({required: true}) assignment: Assignment;
+
+    /**
+     * Format a date to the displayed format
+     *
+     * @param date Date
+     */
+    getMoment(date: string)
+    {
+        return moment(new Date(date));
+    }
+
+    /**
+     * Mark this unread assignment as read
+     */
+    markAsRead()
+    {
+        // Call custom event
+        this.$emit('mark-as-read', this.assignment)
+    }
+}

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

@@ -0,0 +1,31 @@
+<template>
+    <div class="unread-entry vertical-center">
+        <el-row class="unread-row">
+            <el-col :span="3" class="date">
+                <span class="month">{{getMoment(assignment.date).format("MMM Do")}}</span>
+                <span class="now">({{getMoment(assignment.date).fromNow()}})</span>
+            </el-col>
+            <el-col :span="15" class="description">
+                <span class="type entry-box"
+                      :style="`border-color: var(--assignment-type-${assignment.typeId})`">
+                    {{assignment.type}}
+                </span>
+                <span class="text">{{assignment.description}}</span>
+            </el-col>
+            <el-col :span="6" class="grade">
+                <span class="percent entry-box">
+                    {{(assignment.score / assignment.scoreMax * 100).toFixed(1)}}
+                    <span class="symbol">%</span>
+                </span>
+                <span class="score entry-box">{{assignment.score}}</span>
+                <span class="max entry-box">{{assignment.scoreMax}}</span>
+                <el-button class="mark-as-read" size="mini" type="text"
+                           icon="el-icon-close" @click="markAsRead">
+                </el-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script src="./unread-entry.ts" lang="ts"></script>
+<style src="./unread-entry.scss" lang="scss"></style>

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/pages/overall/overall.scss

@@ -3,13 +3,12 @@
 .el-card
 {
     margin: 10px;
-    height: 494px;
     padding: 0;
+}
 
-    // Vertical center
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
+.el-card.large
+{
+    height: 494px;
 }
 
 .gpa-card
@@ -60,3 +59,12 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
+
+// Vertical centering
+.vertical-center
+{
+    // Vertical center
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}

src/pages/overall/overall.vue

@@ -2,7 +2,7 @@
     <div id="overall">
         <el-row>
             <el-col :span="4">
-                <el-card class="gpa-card">
+                <el-card class="large gpa-card vertical-center">
                     <div style="padding: 14px;">
                         <span class="gpa header">GPA:</span>
                         <span class="gpa text">{{getGPA().gpa}}</span>
@@ -14,18 +14,21 @@
                 </el-card>
             </el-col>
             <el-col :span="14">
-                <el-card class="overall-line-card">
+                <el-card class="large overall-line-card vertical-center">
                     <overall-line :courses="courses"></overall-line>
                 </el-card>
             </el-col>
             <el-col :span="6">
-                <el-card class="overall-bar-card">
+                <el-card class="large overall-bar-card vertical-center">
                     <overall-bar :courses="courses"></overall-bar>
                 </el-card>
             </el-col>
         </el-row>
 
-        <overall-course v-for="course in courses" :course="course"></overall-course>
+        <overall-course v-for="course in courses"
+                        :course="course"
+                        :key="course.id">
+        </overall-course>
     </div>
 </template>
 

src/utils/course-utils.ts

@@ -22,8 +22,8 @@ export class CourseUtils
             // Skip courses without levels
             if (course.level == 'None') return;
 
-            // Skip courses without assignments
-            if (course.assignments.length == 0) return;
+            // Skip courses without graded assignments
+            if (course.assignments.filter(a => a.complete == 'Complete').length == 0) return;
             
             // Skip if there are no grading scale
             // if (course.grading.method == 'NOT_GRADED') return;

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,7 +17,9 @@ 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,
                 date: assignment._date,
                 complete: assignment.completion_status,