[U] Release v0.3.4.561

This reverts commit f1089dbdf5.

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

@@ -1,12 +1,20 @@
 #app
 {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
 }
 
+#app-content
+{
+    // Limit max width
+    max-width: 1300px;
+    text-align: center;
+    margin: auto;
+}
+
 .theme-default
 {
     --unread: #ff6c00;
@@ -15,4 +23,6 @@
     --assignment-type-2: #3f991e;
     --assignment-type-3: #ff9900;
     --assignment-type-4: #b02b02;
+
+    --font: 'Avenir', Helvetica, Arial, sans-serif;
 }

src/components/app/app.ts

@@ -8,6 +8,7 @@ import pWaitFor from 'p-wait-for';
 import {HttpUtils} from '@/utils/http-utils';
 import {CourseUtils} from '@/utils/course-utils';
 import {GPAUtils} from '@/utils/gpa-utils';
+import Loading from '@/components/loading/loading.vue';
 
 /**
  * Objects of this interface represent assignment grades.
@@ -15,6 +16,7 @@ import {GPAUtils} from '@/utils/gpa-utils';
 export interface Assignment
 {
     id: number,
+    scoreId: number,
     type: string,
     typeId: number,
     description: string,
@@ -56,7 +58,7 @@ export interface Course
 }
 
 @Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading},
 })
 export default class App extends Vue
 {
@@ -78,8 +80,14 @@ export default class App extends Vue
     // Token
     public token: string = '';
 
+    // Loading text
+    public loading: string = '';
+
+    // Loading error
+    public loadingError: boolean = false;
+
     // Http Client
-    public http: HttpUtils = new HttpUtils('');
+    public static http: HttpUtils = new HttpUtils();
 
     /**
      * This is called when the instance is created.
@@ -100,11 +108,14 @@ export default class App extends Vue
         // Hide login bar
         this.showLogin = false;
 
+        // Show loading message
+        this.logLoading('1. Logging in...');
+
         // Store token
         this.token = token;
 
         // Assign token to http client
-        this.http.token = token;
+        App.http.token = token;
 
         // Load data
         this.loadCoursesAfterLogin();
@@ -115,7 +126,11 @@ export default class App extends Vue
      */
     public loadCoursesAfterLogin()
     {
-        this.http.post('/courses', {}).then(response =>
+        // Show loading message
+        this.logLoading('2. Loading courses...');
+
+        // Post request
+        App.http.post('/courses', {}).then(response =>
         {
             // Check success
             if (response.success)
@@ -126,13 +141,9 @@ export default class App extends Vue
                 // Load assignments
                 this.loadAssignments();
             }
-            else
-            {
-                // Show error message TODO: Show it properly
-                alert(response.data);
-            }
+            else throw new Error(response.data);
         })
-        .catch(alert);
+        .catch(e => this.showError(`Error: Course data failed to load.\n(${e})`));
     }
 
     /**
@@ -140,11 +151,14 @@ export default class App extends Vue
      */
     public loadAssignments()
     {
+        // Show loading message
+        this.logLoading('3. Loading assignments...');
+
         // Get assignments for all the courses
         this.courses.forEach(course =>
         {
             // Send request to get assignments
-            this.http.post('/assignments', {id: course.assignmentsId}).then(response =>
+            App.http.post('/assignments', {'assignmentsId': course.assignmentsId}).then(response =>
             {
                 // Check success
                 if (response.success)
@@ -153,17 +167,13 @@ export default class App extends Vue
                     // Parse json and filter it
                     course.assignments = JsonUtils.filterAssignments(response.data);
                 }
-                else
-                {
-                    // Show error message TODO: Show it properly
-                    alert(response.data);
-                }
+                else throw new Error(response.data);
             })
-            .catch(alert);
+            .catch(e => this.showError(`Error: Assignments data failed to load.\n(${e})`));
         });
 
         // Wait for assignments to be ready.
-        pWaitFor(() => this.isAssignmentsReady()).then(() =>
+        pWaitFor(() => this.courses.every(c => c.assignments != null)).then(() =>
         {
             // Filter courses
             this.filteredCourses = CourseUtils.getGradedCourses(this.courses);
@@ -173,26 +183,14 @@ export default class App extends Vue
         });
     }
 
-    /**
-     * Are assignments ready or not
-     *
-     * @returns boolean Ready or not
-     */
-    private isAssignmentsReady(): boolean
-    {
-        for (const course of this.courses)
-        {
-            if (course.assignments == null) return false;
-        }
-
-        return true;
-    }
-
     /**
      * Check the courses' grading algorithms. (Total-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)
         {
@@ -204,7 +202,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)
@@ -212,41 +210,43 @@ export default class App extends Vue
                         // Add it to course
                         course.grading = response.data;
                     }
-                    else
-                    {
-                        // Show error message TODO: Show it properly
-                        alert(response.data)
-                    }
+                    else throw new Error(response.data);
                 })
-                .catch(alert)
+                .catch(e => this.showError(`Error: Grading data failed to load.\n(${e})`))
             }
         }
 
         // Wait for done
-        pWaitFor(() => this.isGradingReady()).then(() =>
+        pWaitFor(() => this.filteredCourses.every(c => c.grading != undefined)).then(() =>
         {
             // When the assignments are ready
-            // TODO: Display loading
             this.assignmentsReady = true;
+
+            // Remove loading
+            this.logLoading('');
         })
     }
 
     /**
-     * Are grading algorithms ready or not.
+     * Log a message to loading screen
      *
-     * @returns boolean Ready or not
+     * @param message Message
      */
-    private isGradingReady(): boolean
+    private logLoading(message: string)
     {
-        for (const course of this.filteredCourses)
-        {
-            if (course.grading == undefined)
-            {
-                return false;
-            }
-        }
+        if (message == '') this.loading = '';
+        else this.loading += '\n' + message;
+    }
 
-        return true;
+    /**
+     * Show error message on loading screen
+     *
+     * @param message Error message
+     */
+    private showError(message: string)
+    {
+        this.loadingError = true;
+        this.loading = message;
     }
 
     /**

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">
@@ -11,6 +11,8 @@
                      v-if="selectedTab === 'overall' && assignmentsReady">
             </overall>
         </div>
+
+        <loading v-if="loading !== ''" :text="loading" :error="loadingError"></loading>
     </div>
 </template>
 

src/components/loading/loading.vue

@@ -0,0 +1,115 @@
+<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
+    {
+        // @ts-ignore
+        @Prop() text: string;
+
+        // @ts-ignore
+        @Prop() 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;
+        background: #00000065;
+
+        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: #eeeeee;
+    }
+
+    #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.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.4.561';
 
     public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
 

src/pages/course/course-page.ts

@@ -0,0 +1,15 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import OverallLine from '@/pages/overall/overall-line/overall-line';
+import OverallBar from '@/pages/overall/overall-bar/overall-bar';
+import OverallCourse from '@/pages/overall/overall-course/overall-course';
+import {Course} from '@/components/app/app';
+import {GPAUtils} from '@/utils/gpa-utils';
+
+@Component({
+    components: {OverallLine, OverallBar, OverallCourse}
+})
+export default class CoursePage extends Vue
+{
+    // @ts-ignore
+    @Prop({required: true}) course: Course;
+}

src/pages/course/course-page.vue

@@ -0,0 +1,7 @@
+<template>
+    <div id="course-page">
+    </div>
+</template>
+
+<script src="./course-page.ts" lang="ts"></script>
+<style src="./course-page.scss" lang="scss"></style>

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

@@ -30,7 +30,7 @@
 .gpa.text
 {
     font-size: 35px;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
 }
 
 .gpa.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,