[U] Pre-release v0.3.1.382

src/components/app/app.scss

@@ -1,8 +1,14 @@
 #app
 {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    text-align: center;
-  color: #2c3e50;
+    color: #2c3e50;
+}
+
+.theme-default
+{
+    --unread: #ff6c00;
+    --main: #0c6dad;
 }

src/components/app/app.ts

@@ -12,8 +12,9 @@ import {GPAUtils} from '@/utils/gpa-utils';
 /**
  * Objects of this interface represent assignment grades.
  */
-export interface Grade
+export interface Assignment
 {
+    id: number,
     type: string,
     description: string,
     date: string,
@@ -21,6 +22,8 @@ export interface Grade
     include: boolean,
     display: boolean,
 
+    unread: boolean,
+
     scoreMax: number,
     score: number
 }
@@ -48,7 +51,7 @@ export interface Course
         weightingMap: {[index: string]: number}
     }
 
-    assignments: Grade[]
+    assignments: Assignment[]
 }
 
 @Component({

src/components/app/app.vue

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

src/components/navigation/navigation.scss

@@ -15,3 +15,36 @@
         border-bottom-width: 0;
     }
 }
+
+#sign-out-button
+{
+    // Float right
+    position: absolute;
+    right: 0;
+
+    // Set width and height
+    height: 60px;
+    width: 110px;
+}
+
+#nav-title
+{
+    // Float left
+    position: absolute;
+    left: 0;
+
+    // Set height
+    height: 60px;
+
+    // Center text
+    align-items: center;
+
+    // Margins
+    margin-left: 14px;
+    margin-right: 8px;
+
+    // Font
+    font-size: 1.25rem;
+    display: inline-flex;
+
+}

src/components/navigation/navigation.vue

@@ -1,6 +1,11 @@
 <template>
     <div id="navigation">
-        <el-menu class="centered" :default-active="activeIndex" mode="horizontal" @select="onSelect">
+        <el-menu style="margin-bottom: 10px;"
+                 class="centered" :default-active="activeIndex" mode="horizontal" @select="onSelect">
+
+            <!--div id="nav-title">
+                Veracross Analyzer
+            </div-->
 
             <el-menu-item index="overall">Overall</el-menu-item>
 

src/constants.ts

@@ -8,12 +8,18 @@ export default class Constants
      */
     public static API_URL: string = 'https://va.hydev.org/api';
 
+    public static VERSION: string = '0.3.1.382';
+
+    public static GITHUB: string = 'https://github.com/HyDevelop/VeracrossAnalyzer.Client';
+
     public static SPLASH: string =
         '.    ,        ,---.          |                        \n' +
         '|    |.  ,    |---|,---.,---.|    ,   .,---,,---.,---.\n' +
         ' \\  /  ><     |   ||   |,---||    |   | .-\' |---\'|    \n' +
         '  `\'  \'  `    `   \'`   \'`---^`---\'`---|\'---\'`---\'`    \n' +
-        '      v0.2.3.315                  `---\'               ';
+        '                                  `---\'               \n' +
+        ` Version v${Constants.VERSION} by Hykilpikonna (YGui21)\n` +
+        ` Github: ${Constants.GITHUB}`;
 
     // Graph Theme
     public static THEME =

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

@@ -1,9 +0,0 @@
-<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.vue

@@ -1,8 +0,0 @@
-<template>
-    <div id="graph-overall">
-        <ve-line :data="convertChart" :extend="settings"></ve-line>
-    </div>
-</template>
-
-<script src="./graph-overall.ts" lang="ts"></script>
-<style src="./graph-overall.scss" lang="scss"></style>

src/pages/overall/overall-bar/overall-bar.scss

@@ -1,4 +1,4 @@
-#graph-average
+#overall-bar
 {
     .graph
     {

src/pages/overall/overall-bar/overall-bar.ts

@@ -5,7 +5,7 @@ import Constants from '@/constants';
 
 @Component({
 })
-export default class GraphAverage extends Vue
+export default class OverallBar extends Vue
 {
     // @ts-ignore
     @Prop({required: true}) courses: Course[];
@@ -82,9 +82,6 @@ export default class GraphAverage extends Vue
             }
         };
 
-        // TODO: Remove this
-        console.log(settings);
-
         return settings;
     }
 

src/pages/overall/overall-bar/overall-bar.vue

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

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

@@ -0,0 +1,106 @@
+// Card
+.el-card.course-card
+{
+    // Margins
+    margin-right: 20px;
+    margin-left: 20px;
+
+    // Height limit
+    max-height: 90px;
+
+    // Limit name length
+    white-space: nowrap;
+}
+
+.course-col-name
+{
+    // Align left
+    text-align: left;
+    float: left;
+
+    .course-name
+    {
+        overflow: hidden;
+        font-size: 22px;
+        color: var(--main);
+    }
+
+    .course-name:hover
+    {
+        text-decoration: underline;
+    }
+
+    .course-teacher
+    {
+        font-size: 12px;
+        color: #999999;
+        font-style: italic;
+    }
+}
+
+.course-col-grade
+{
+    // Align right
+    text-align: right;
+    float: right;
+
+    // Adjust position
+    margin-top: -2px;
+
+    .course-grade
+    {
+        font-size: 21px;
+    }
+
+    .course-updates
+    {
+        font-size: 14px;
+
+        .unread-number
+        {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            border-radius: 5px;
+
+            padding-left: 3px;
+            padding-right: 3px;
+
+            margin-right: 3px;
+        }
+
+        .unread-text
+        {
+            font-style: italic;
+        }
+    }
+
+    .course-updates.unread
+    {
+        .unread-number
+        {
+            background: var(--unread);
+            color: white;
+        }
+
+        .unread-text
+        {
+            color: var(--unread);
+        }
+    }
+
+    .course-updates.none
+    {
+        color: #999999;
+
+        .unread-number
+        {
+            background: #eeeeee;
+        }
+    }
+}
+
+.el-card__body
+{
+    margin: auto 0;
+}

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

@@ -0,0 +1,26 @@
+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 OverallCourse extends Vue
+{
+    // @ts-ignore
+    @Prop({required: true}) course: Course;
+
+    private unread: number = -1;
+
+    /**
+     * Count the number of unread assignments with cache
+     */
+    countUnread(): number
+    {
+        if (this.unread == -1)
+        {
+            return this.unread = this.course.assignments.filter(a => a.unread).length;
+        }
+        else return this.unread;
+    }
+}

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

@@ -0,0 +1,37 @@
+<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>
+        </el-card>
+    </div>
+</template>
+
+<script src="./overall-course.ts" lang="ts"></script>
+<style src="./overall-course.scss" lang="scss"></style>

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

@@ -3,7 +3,7 @@ import {Course} from '@/components/app/app';
 
 @Component({
 })
-export default class GraphOverall extends Vue
+export default class OverallLine extends Vue
 {
     // @ts-ignore
     @Prop({required: true}) courses: Course[];
@@ -171,8 +171,6 @@ export default class GraphOverall extends Vue
             rows.push(row);
         });
 
-        console.log(rows);
-
         return {
             columns: columns,
             rows: rows

src/pages/overall/overall-line/overall-line.vue

@@ -0,0 +1,8 @@
+<template>
+    <div id="overall-line">
+        <ve-line :data="convertChart" :extend="settings"></ve-line>
+    </div>
+</template>
+
+<script src="./overall-line.ts" lang="ts"></script>
+<style src="./overall-line.scss" lang="scss"></style>

src/pages/overall/overall.scss

@@ -47,8 +47,8 @@
     font-size: 11px;
 }
 
-// Graph average
+// Cards
-.graph-average-card
+.el-card.overall-bar-card
 {
     margin-right: 20px;
     min-width: 170px;

src/pages/overall/overall.ts

@@ -1,11 +1,12 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
-import GraphOverall from '@/pages/overall/graph-overall/graph-overall';
+import OverallLine from '@/pages/overall/overall-line/overall-line';
-import GraphAverage from '@/pages/overall/graph-average/graph-average';
+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: {GraphOverall, GraphAverage}
+    components: {OverallLine, OverallBar, OverallCourse}
 })
 export default class Overall extends Vue
 {

src/pages/overall/overall.vue

@@ -14,17 +14,18 @@
                 </el-card>
             </el-col>
             <el-col :span="14">
-                <el-card>
+                <el-card class="overall-line-card">
-                    <graph-overall :courses="courses"></graph-overall>
+                    <overall-line :courses="courses"></overall-line>
                 </el-card>
             </el-col>
             <el-col :span="6">
-                <el-card class="graph-average-card">
+                <el-card class="overall-bar-card">
-                    <graph-average :courses="courses"></graph-average>
+                    <overall-bar :courses="courses"></overall-bar>
                 </el-card>
             </el-col>
         </el-row>
-        <div class=""></div>
+
+        <overall-course v-for="course in courses" :course="course"></overall-course>
     </div>
 </template>
 

src/utils/json-utils.ts

@@ -1,4 +1,4 @@
-import {Grade} from '@/components/app/app';
+import {Assignment} from '@/components/app/app';
 
 export default class JsonUtils
 {
@@ -6,16 +6,17 @@ export default class JsonUtils
      * This method filters the information provided in an assignments json.
      *
      * @param assignments Assignments object
-     * @returns Grade[] Filtered assignment grade object list
+     * @returns Assignment[] Filtered assignment grade object list
      */
-    public static filterAssignments(assignments: any): Grade[]
+    public static filterAssignments(assignments: any): Assignment[]
     {
-        let result: Grade[] = [];
+        let result: Assignment[] = [];
 
         assignments.assignments.forEach((assignment: any) =>
         {
             result.push(
             {
+                id: assignment.assignment_id,
                 type: assignment.assignment_type,
                 description: assignment.assignment_description,
                 date: assignment._date,
@@ -23,6 +24,8 @@ export default class JsonUtils
                 include: assignment.include_in_calculated_grade == 1,
                 display: assignment.display_grade == 1,
 
+                unread: assignment.is_unread == 1,
+
                 scoreMax: assignment.maximum_score,
                 score: +assignment.raw_score
             });