[U] Release v0.3.4.561

This reverts commit f1089dbdf5.

src/components/app/app.scss

@@ -1,6 +1,6 @@
 #app
 {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
@@ -23,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.
@@ -57,7 +58,7 @@ export interface Course
 }
 
 @Component({
-    components: {Login, Navigation, Overall},
+    components: {Login, Navigation, Overall, Loading},
 })
 export default class App extends Vue
 {
@@ -79,6 +80,12 @@ export default class App extends Vue
     // Token
     public token: string = '';
 
+    // Loading text
+    public loading: string = '';
+
+    // Loading error
+    public loadingError: boolean = false;
+
     // Http Client
     public static http: HttpUtils = new HttpUtils();
 
@@ -101,6 +108,9 @@ 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;
 
@@ -116,6 +126,10 @@ export default class App extends Vue
      */
     public loadCoursesAfterLogin()
     {
+        // Show loading message
+        this.logLoading('2. Loading courses...');
+
+        // Post request
         App.http.post('/courses', {}).then(response =>
         {
             // Check success
@@ -127,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})`));
     }
 
     /**
@@ -141,6 +151,9 @@ 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 =>
         {
@@ -154,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);
@@ -174,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)
         {
@@ -213,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

@@ -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/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.3.502';
+    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.scss

@@ -30,7 +30,7 @@
 .gpa.text
 {
     font-size: 35px;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
 }
 
 .gpa.max