[U] Pre-release v0.2.1.295

This reverts commit d254706a21.

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://i.imgur.com/xl3Q4Nt.jpg)
+
+<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.

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.ts

@@ -6,6 +6,7 @@ import Constants from '@/constants';
 import JsonUtils from '@/utils/json-utils';
 import pWaitFor from 'p-wait-for';
 import {HttpUtils} from '@/utils/http-utils';
+import {CourseUtils} from '@/utils/course-utils';
 
 /**
  * Objects of this interface represent assignment grades.
@@ -54,6 +55,9 @@ export default class App extends Vue
     // List of course that the student takes
     public courses: Course[] = [];
 
+    // List of course that should be displayed
+    public filteredCourses: Course[] = [];
+
     // Currently selected tab
     public selectedTab: string = 'overall';
 
@@ -122,8 +126,6 @@ export default class App extends Vue
 
     /**
      * Load the assignments of the courses
-     *
-     * @param courses Courses Json
      */
     public loadAssignments()
     {
@@ -153,7 +155,11 @@ export default class App extends Vue
         pWaitFor(() => this.isAssignmentsReady()).then(() =>
         {
             // When the assignments are ready
+            // TODO: Display loading
             this.assignmentsReady = true;
+
+            // Filter courses
+            this.filteredCourses = CourseUtils.getGradedCourses(this.courses);
         });
     }
 

src/components/app/app.vue

@@ -1,13 +1,15 @@
 <template>
     <div id="app">
         <login v-if="showLogin" v-on:login:token="onLogin" :http="http"></login>
-        <navigation :courses="courses"
+        <navigation :courses="filteredCourses"
                     v-on:sign-out="signOut()"
                     v-on:navigation:select="onNavigate">
         </navigation>
 
         <div id="app-content">
-            <overall :courses="courses" v-if="selectedTab === 'overall' && assignmentsReady"></overall>
+            <overall :courses="filteredCourses"
+                     v-if="selectedTab === 'overall' && assignmentsReady">
+            </overall>
         </div>
     </div>
 </template>

src/components/login/login.ts

@@ -4,6 +4,7 @@ import {HttpUtils} from '@/utils/http-utils';
 
 /**
  * This component handles user login, and obtains data from the server.
+ * TODO: Press enter to login
  */
 @Component({
     components: {},
@@ -70,4 +71,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

@@ -8,13 +8,15 @@
 
                 <el-input v-model="username"
                           placeholder="School Username"
-                          :class="{'input-error': error !== ''}">
+                          :class="{'input-error': error !== ''}"
+                          @keyup.enter.native="onEnter">
                 </el-input>
 
                 <el-input v-model="password"
                           placeholder="Veracross Password"
                           show-password=""
-                          :class="{'input-error': error !== ''}">
+                          :class="{'input-error': error !== ''}"
+                          @keyup.enter.native="onEnter">
                 </el-input>
 
                 <div class="el-form-item__error custom">{{error}}</div>

src/constants.ts

@@ -5,7 +5,6 @@ export default class Constants
 {
     /**
      * Base url for api access
-     * TODO: Use https for actual usage
      */
     public static API_URL: string = 'https://va.hydev.org/api';
 
@@ -14,5 +13,31 @@ export default class Constants
         '|    |.  ,    |---|,---.,---.|    ,   .,---,,---.,---.\n' +
         ' \\  /  ><     |   ||   |,---||    |   | .-\' |---\'|    \n' +
         '  `\'  \'  `    `   \'`   \'`---^`---\'`---|\'---\'`---\'`    \n' +
-        '      v0.1.1.0                    `---\'               '
+        '      v0.2.1.295                  `---\'               ';
+
+    // Graph Theme
+    public static THEME =
+    {
+        // Colors
+        colors:
+        [
+            '#18cea5',
+            '#4fa8ed',
+            '#f9627b',
+            '#ffb075',
+            '#005c9c',
+            '#bcabe0',
+            '#d36e75',
+            '#fc97af',
+            '#919e8b',
+            '#d7ab82',
+            '#6e7074',
+            '#61a0a8',
+            '#efa18d',
+            '#787464',
+            '#cc7e63',
+            '#724e58',
+            '#4b565b'
+        ]
+    }
 }

src/pages/overall/graph-average/graph-average.scss

@@ -0,0 +1,7 @@
+#graph-average
+{
+    .graph
+    {
+        margin-top: 50px;
+    }
+}

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

@@ -0,0 +1,112 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Course} from '@/components/app/app';
+import {GPAUtils} from '@/utils/gpa-utils';
+import Constants from '@/constants';
+
+@Component({
+})
+export default class GraphAverage extends Vue
+{
+    // @ts-ignore
+    @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) => value.length <= 16 ? value : value.substr(0, 14) + '...'
+                },
+            },
+
+            // Y axis represents GPAs and MaxGPAs
+            yAxis:
+            {
+                type: 'value'
+            },
+
+            // Data
+            series:
+            [
+                {
+                    type: 'bar',
+                    barGap: '-100%',
+                    data: this.courses.map(course =>
+                    {
+                        return {value: [course.name, GPAUtils.getGP(course, 'A+')],
+                            itemStyle: {color: '#d8d8d8'}}
+                    }),
+                },
+                {
+                    type: 'bar',
+                    barGap: '-100%',
+                    data: this.generateGPData(),
+
+                    label:
+                    {
+                        show: true,
+                        rotate: 90
+                    }
+                }
+            ],
+
+            // Disable tooltip
+            tooltip:
+            {
+                show: false
+            }
+        };
+
+        // TODO: Remove this
+        console.log(settings);
+
+        return settings;
+    }
+
+    /**
+     * Generate GP data for each course
+     */
+    private generateGPData()
+    {
+        let data: any = [];
+
+        this.courses.forEach(course =>
+        {
+            data.push(
+            {
+                value: [course.name, GPAUtils.getGP(course, course.letterGrade)],
+                itemStyle:
+                {
+                    color: Constants.THEME.colors[data.length]
+                }
+            });
+        });
+
+        return data;
+    }
+}

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

@@ -0,0 +1,9 @@
+<template>
+    <div id="graph-average">
+        <ve-bar height="450px" class="graph"
+                :extend="chartSettings"></ve-bar>
+    </div>
+</template>
+
+<script src="./graph-average.ts" lang="ts"></script>
+<style src="./graph-average.scss" lang="scss"></style>

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

@@ -5,17 +5,143 @@ import {Course} from '@/components/app/app';
 })
 export default class GraphOverall extends Vue
 {
-    @Prop({required: true}) chart: any;
+    // @ts-ignore
+    @Prop({required: true}) courses: Course[];
 
     private settings =
     {
+        // Title
+        title:
+        {
+            show: true,
+            textStyle:
+            {
+                fontSize: 12
+            },
+            text: 'Average Grade',
+            subtext: 'Average score trend for every course',
+            x: 'center'
+        },
+        // Legend
+        legend:
+        {
+            show: false,
+            //left: 'auto',
+            //align: 'left',
+            //orient: 'vertical'
+            textStyle:
+            {
+                fontSize: 11
+            },
+            icon: 'circle'
+        },
+        // Zoom bar
+        dataZoom:
+        [
+            // TODO: Calculate real value for startValue
+            {
+                startValue: '9/13/2019'
+            },
+            {
+                type: 'inside'
+            }
+        ],
         series:
         {
-            smooth: false
+            smooth: true
+        },
+        xAxis:
+        {
+            //type: 'time'
         },
         yAxis:
         {
-            min: 70
+            min: (value: any) => value.min - 10
+        }
+    };
+
+    /**
+     * Convert assignments list to a graph dataset.
+     */
+    get convertChart()
+    {
+        let courses = this.courses;
+
+        // Compute the column names
+        let columns = courses.map(course => course.name);
+        columns.unshift('date');
+
+        // Find the min date
+        let minDates = courses.map(course => new Date(course.assignments[course.assignments.length - 1].date).getTime());
+        let minDate: Date = new Date(Math.min.apply(null, minDates));
+
+        // Find the dates in between
+        let now = new Date();
+        let dates = [];
+        for (let date = minDate; date <= now; date.setDate(date.getDate() + 1))
+        {
+            dates.push(new Date(date));
+        }
+
+        // Initialize course specific variables
+        let courseScores: {[index: string]: any} = {};
+        let courseMaxScores: {[index: string]: any} = {};
+        let courseIndexes: {[index: string]: any} = {};
+        courses.forEach(course =>
+        {
+            courseScores[course.name] = 0;
+            courseMaxScores[course.name] = 0;
+            courseIndexes[course.name] = course.assignments.length - 1;
+        });
+
+        // Compute the rows data
+        let rows: {[index: string]: any}[] = [];
+        dates.forEach(date =>
+        {
+            // Define row object
+            let row: {[index: string]:any} = {'date': date.toLocaleDateString('en-US')};
+
+            // Loop through courses
+            courses.forEach(course =>
+            {
+                // Reversed loop through the assignments
+                for (let r = courseIndexes[course.name]; r >= 0; r--)
+                {
+                    let assignment = course.assignments[r];
+
+                    // If assignment should be displayed
+                    if (assignment.complete != 'Complete') continue;
+
+                    // Date is being looked at
+                    let assignmentDate = new Date(assignment.date);
+                    if (assignmentDate.getTime() == date.getTime())
+                    {
+                        // Record scores
+                        courseScores[course.name] += assignment.score;
+                        courseMaxScores[course.name] += assignment.scoreMax;
+                    }
+
+                    // Not now
+                    else if (assignmentDate > date)
+                    {
+                        courseIndexes[course.name] = r;
+                        break;
+                    }
+                }
+
+                // Add average to the row
+                row[course.name] = courseScores[course.name] / courseMaxScores[course.name] * 100;
+            });
+
+            // Add it to the array
+            rows.push(row);
+        });
+
+        console.log(rows);
+
+        return {
+            columns: columns,
+            rows: rows
         }
     }
 }

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

@@ -1,7 +1,6 @@
 <template>
     <div id="graph-overall">
-        <p>Your average score graph all time:</p>
-        <ve-line :data="chart" :extend="settings"></ve-line>
+        <ve-line :data="convertChart" :extend="settings"></ve-line>
     </div>
 </template>
 

src/pages/overall/overall.scss

@@ -12,18 +12,51 @@
     flex-direction: column;
 }
 
-.span-gpa-header
+.gpa-card
+{
+    margin-left: 20px;
+    min-width: 136px;
+}
+
+.gpa
+{
+    display: block;
+}
+
+.gpa.header
 {
     font-size: 14px;
 }
 
-.span-gpa
+.gpa.text
 {
     font-size: 35px;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
 
-.gpa-time
+.gpa.max
 {
-    font-size: 14px;
+    margin-top: -10px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #409eff;
+}
+
+.gpa.time
+{
+    font-size: 11px;
+}
+
+// Graph average
+.graph-average-card
+{
+    margin-right: 20px;
+    min-width: 170px;
+}
+
+// Fix padding
+.el-card__body
+{
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
 }

src/pages/overall/overall.ts

@@ -1,151 +1,23 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import GraphOverall from '@/pages/overall/graph-overall/graph-overall';
+import GraphAverage from '@/pages/overall/graph-average/graph-average';
 import {Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
 
 @Component({
-    components: {GraphOverall}
+    components: {GraphOverall, GraphAverage}
 })
 export default class Overall extends Vue
 {
     // @ts-ignore
     @Prop({required: true}) courses: Course[];
 
-    get convertCharts()
-    {
-        // Null case
-        if (this.courses == null) return [];
-
-        // Filter it
-        let courses: Course[] = this.filterCourses();
-
-        // Compute the column names
-        let columns = ['date'];
-        courses.forEach(course =>
-        {
-            columns.push(course.name);
-        });
-
-        // Find the min date
-        let minDate: Date = new Date();
-        courses.forEach(course =>
-        {
-            if (course.assignments.length == 0) return;
-            let date = new Date(course.assignments[course.assignments.length - 1].date);
-            if (date < minDate) minDate = date;
-        });
-
-        // Find the dates in between
-        let now = new Date();
-        let dates = [];
-        for (let date = minDate; date <= now; date.setDate(date.getDate() + 1))
-        {
-            dates.push(new Date(date));
-        }
-
-        // Initialize course specific variables
-        let courseScores: {[index: string]: any} = {};
-        let courseMaxScores: {[index: string]: any} = {};
-        let courseIndexes: {[index: string]: any} = {};
-        courses.forEach(course =>
-        {
-            courseScores[course.name] = 0;
-            courseMaxScores[course.name] = 0;
-            courseIndexes[course.name] = course.assignments.length - 1;
-        });
-
-        // Compute the rows data
-        let rows: {[index: string]: any}[] = [];
-        dates.forEach(date =>
-        {
-            // Define row object
-            let row: {[index: string]:any} = {'date': date.toLocaleDateString('en-US')};
-
-            // Loop through courses
-            courses.forEach(course =>
-            {
-                // Reversed loop through the assignments
-                for (let r = courseIndexes[course.name]; r >= 0; r--)
-                {
-                    let assignment = course.assignments[r];
-
-                    // If assignment should be displayed
-                    if (assignment.complete != 'Complete') continue;
-
-                    // Date is being looked at
-                    let assignmentDate = new Date(assignment.date);
-                    if (assignmentDate.getTime() == date.getTime())
-                    {
-                        // Record scores
-                        courseScores[course.name] += assignment.score;
-                        courseMaxScores[course.name] += assignment.scoreMax;
-                    }
-
-                    // Not now
-                    else if (assignmentDate > date)
-                    {
-                        courseIndexes[course.name] = r;
-                        break;
-                    }
-                }
-
-                // Add average to the row
-                row[course.name] = courseScores[course.name] / courseMaxScores[course.name] * 100;
-            });
-
-            // Add it to the array
-            rows.push(row);
-        });
-
-        console.log(rows);
-
-        return {
-            columns: columns,
-            rows: rows
-        }
-    }
-
     /**
-     * Return a list of courses that are graphed
-     */
-    private filterCourses(): Course[]
-    {
-        // Define result
-        let result: Course[] = [];
-
-        // Filter through courses
-        this.courses.forEach(course =>
-        {
-            // Skip future or past courses
-            if (course.status != 'active') return;
-
-            // Skip courses without levels
-            if (course.level == 'None') return;
-
-            // Skip courses without assignments
-            if (course.assignments.length == 0) return;
-
-            // Add it to the list
-            result.push(course);
-        });
-
-        return result;
-    }
-
-    /**
-     * This function is called to get gpa as a string.
+     * This function is called to get gpa since I can't import another
+     * class in the Vue file.
      */
     public getGPA()
     {
-        let gpa = GPAUtils.getGPA(this.courses);
-        let result = '' + gpa.gpa;
-
-        /* Not accurate
-        if (!gpa.accurate)
-        {
-            result = `(${result})`;
-        }*/
-
-        return result;
+        return GPAUtils.getGPA(this.courses);
     }
 }

src/pages/overall/overall.vue

@@ -2,22 +2,25 @@
     <div id="overall">
         <el-row>
             <el-col :span="4">
-                <el-card style="margin-left: 20px">
+                <el-card class="gpa-card">
                     <div style="padding: 14px;">
-                        <span class="span-gpa-header">GPA:</span>
-                        <br>
-                        <span class="span-gpa">{{getGPA()}}</span>
-                        <div class="bottom clearfix gpa-time">
-                            <time class="time">{{ new Date().toDateString() }}</time>
-                            <br>
-                            <el-button type="text" class="button">Button</el-button>
+                        <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="20">
-                <el-card style="margin-right: 20px">
-                    <graph-overall :chart="convertCharts"></graph-overall>
+            <el-col :span="14">
+                <el-card>
+                    <graph-overall :courses="courses"></graph-overall>
+                </el-card>
+            </el-col>
+            <el-col :span="6">
+                <el-card class="graph-average-card">
+                    <graph-average :courses="courses"></graph-average>
                 </el-card>
             </el-col>
         </el-row>

src/utils/course-utils.ts

@@ -0,0 +1,34 @@
+import {Course} from '@/components/app/app';
+
+export class CourseUtils
+{
+    /**
+     * Return a list of courses that are graphed
+     *
+     * @param original Original course list
+     * @return Course[] Filtered course list
+     */
+    public static getGradedCourses(original: Course[]): Course[]
+    {
+        // Define result
+        let result: Course[] = [];
+
+        // Filter through courses
+        original.forEach(course =>
+        {
+            // Skip future or past courses
+            if (course.status != 'active') return;
+
+            // Skip courses without levels
+            if (course.level == 'None') return;
+
+            // Skip courses without assignments
+            if (course.assignments.length == 0) return;
+
+            // Add it to the list
+            result.push(course);
+        });
+
+        return result;
+    }
+}

src/utils/gpa-utils.ts

@@ -31,7 +31,7 @@ export class GPAUtils
      *
      * @param coursesOriginal List of courses
      */
-    public static getGPA(coursesOriginal: Course[]): {gpa: number, accurate: boolean}
+    public static getGPA(coursesOriginal: Course[]): {gpa: number, accurate: boolean, max: number}
     {
         // Clone array
         let courses: Course[] = [];
@@ -42,7 +42,7 @@ export class GPAUtils
         // Remove all courses that does not have a grade
         coursesOriginal.forEach(course =>
         {
-            if (course.numericGrade == null || course.numericGrade == 0)
+            if (course.letterGrade == null || course.letterGrade == '')
             {
                 accurate = false;
             }
@@ -55,35 +55,39 @@ export class GPAUtils
         // If no course have grade, return -1
         if (courses.length == 0)
         {
-            return {gpa: -1, accurate: false};
+            return {gpa: -1, accurate: false, max: -1};
         }
 
         // Count total GPA
         let totalGPA = 0;
+        let maxTotal = 0;
         courses.forEach(course =>
         {
-            totalGPA += this.getGP(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};
+        return {gpa: gpa, accurate: accurate, max: maxGPA};
     }
 
     /**
      * Calculate GPA for a course
      *
      * @param course Course
+     * @param letterGrade Letter grade
      */
-    public static getGP(course: Course): number
+    public static getGP(course: Course, letterGrade?: string): number
     {
         // Find the GPA for this course.
         for (let scale of this.SCALE)
         {
             // Letter grades are the same
-            if (scale[this.LETTER] == course.letterGrade)
+            if (scale[this.LETTER] == letterGrade)
             {
                 // Get grade and add it
                 let grade = <number> scale[this.GPA];

vue.config.js

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