[U] Pre-Release v0.3.6.741

src/components/app/app.scss

@@ -71,3 +71,14 @@ div.el-card.course-card > div.el-card__body
     text-decoration: underline;
     cursor: pointer;
 }
+
+// Non-selectable text
+.unselectable
+{
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

src/components/navigation/navigation.scss

@@ -46,5 +46,46 @@
     // Font
     font-size: 1.25rem;
     display: inline-flex;
-
+}
+
+#next-course
+{
+    // Down center
+    width: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    padding-top: 2px;
+    box-shadow: 0 -2px 9px 0 #ecebeb;
+
+    // Trapezoid
+    transform: perspective(50px) rotateX(10deg);
+}
+
+#prev-course
+{
+    // Up center
+    width: 50%;
+    position: absolute;
+    top: 61px;
+    left: 25%;
+    padding-bottom: 2px;
+    box-shadow: 0 2px 9px 0 #ecebeb;
+
+    // Trapezoid
+    transform: perspective(50px) rotateX(-10deg);
+}
+
+.nav-course-operations
+{
+    // Background
+    background-color: rgba(214, 214, 214, 0.67);
+    opacity: 0.85;
+
+    // Font
+    font-size: 14px;
+    color: #ab8585;
+
+    // Cursor
+    cursor: pointer;
 }

src/components/navigation/navigation.ts

@@ -2,6 +2,7 @@ import {Component, Prop, Vue} from 'vue-property-decorator';
 import Constants from '@/constants';
 import {Course} from '@/components/app/app';
 import {CourseUtils} from '@/utils/course-utils';
+import {FormatUtils} from '@/utils/format-utils';
 
 /**
  * This component is the top navigation bar
@@ -14,20 +15,27 @@ export default class Navigation extends Vue
     // @ts-ignore
     @Prop() activeIndex: string;
 
-    @Prop() courses: any;
+    // @ts-ignore
+    @Prop() courses: Course[];
+
+    // Instance
+    public static instance: Navigation;
 
     /**
      * This is called when the instance is created.
      */
     public created()
     {
+        // Set instance
+        Navigation.instance = this;
+
         // Set history state
         let url = window.location.pathname;
         if (url == '/' || url == '') url = '/overall';
         window.history.replaceState({lastTab: url.substring(1)}, '', url);
 
         // Update initial index
-        this.updateIndex(url.substring(1));
+        this.updateIndex(url.substring(1), false);
 
         // Create history state listener
         window.onpopstate = e =>
@@ -36,7 +44,7 @@ export default class Navigation extends Vue
             {
                 // Restore previous tab
                 console.log(`onPopState: Current: ${this.activeIndex}, Previous: ${e.state.lastTab}`);
-                this.updateIndex(e.state.lastTab);
+                this.updateIndex(e.state.lastTab, false);
             }
         };
     }
@@ -56,25 +64,87 @@ export default class Navigation extends Vue
     {
         // Update active index
         this.updateIndex(index);
-
-        // Debug output TODO: Remove this
-        console.log(`onNavigate: Previous: ${this.activeIndex}, New: ${index}`);
-
-        // Check url
-        let url = `/${index}`;
-
-        // Push history state
-        window.history.pushState({lastTab: index}, '', url);
     }
 
     /**
      * Update index
      *
      * @param newIndex New index
+     * @param history Record in history or not (Default true)
      */
-    private updateIndex(newIndex: string)
+    public updateIndex(newIndex: string, history?: boolean)
     {
+        // Call custom event
         this.$emit('update:activeIndex', newIndex);
+
+        // Record or not
+        if (history == null || history)
+        {
+            // Debug output TODO: Remove this
+            console.log(`onNavigate: Previous: ${this.activeIndex}, New: ${newIndex}`);
+
+            // Check url
+            let url = `/${newIndex}`;
+
+            // Push history state
+            window.history.pushState({lastTab: newIndex}, '', url);
+        }
+
+        // Update title
+        document.title = 'Veracross Analyzer - ' + this.getTitle(newIndex);
+    }
+
+    /**
+     * Get title for index
+     *
+     * @param index Index
+     */
+    public getTitle(index: string)
+    {
+        // Course
+        if (index.startsWith('course'))
+        {
+            return this.findCourse(index.split('/')[1], 0).name;
+        }
+
+        // Others
+        return FormatUtils.toTitleCase(index);
+    }
+
+    /**
+     * Move to the next course
+     *
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public nextCourse(indexOffset: number)
+    {
+        // Set tab to the next index
+        this.updateIndex(CourseUtils.formatTabIndex(this.findNextCourse(indexOffset)))
+    }
+
+    /**
+     * Find the next course
+     *
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public findNextCourse(indexOffset: number)
+    {
+        return this.findCourse(this.activeIndex.split('/')[1], indexOffset);
+    }
+
+    /**
+     * Find course
+     *
+     * @param courseId Course ID
+     * @param indexOffset Index offset (Eg. 1 for next)
+     */
+    public findCourse(courseId: string, indexOffset: number)
+    {
+        // Find current course index
+        let courseIndex = this.courses.findIndex(c => c.id == +courseId);
+
+        // Find next course
+        return this.courses[courseIndex + indexOffset];
     }
 
     /**

src/components/navigation/navigation.vue

@@ -18,7 +18,14 @@
 
             <el-button @click="signOut" id="sign-out-button" type="text">Sign Out</el-button>
         </el-menu>
-        <div class="line"></div>
+        <div v-if="activeIndex.includes('course') && findNextCourse(-1) != null"
+             @click="nextCourse(-1)" id="prev-course" class="nav-course-operations unselectable">
+            ▲ PREVIOUS COURSE ▲
+        </div>
+        <div v-if="activeIndex.includes('course') && findNextCourse(1) != null"
+             @click="nextCourse(1)" id="next-course" class="nav-course-operations unselectable">
+            ▼ NEXT COURSE ▼
+        </div>
     </div>
 </template>
 

src/constants.ts

@@ -7,7 +7,7 @@ export default class Constants
     public static API_URL: string = 'https://va.hydev.org/api';
 
     /** Current version */
-    public static VERSION: string = '0.3.5.697';
+    public static VERSION: string = '0.3.6.741';
 
     /** Minimum version that still supports the same cookies */
     public static MIN_SUPPORTED_VERSION: string = '0.3.4.561';

src/pages/course/course-scatter/course-scatter.ts

@@ -9,6 +9,8 @@ import moment from 'moment';
 })
 export default class CourseScatter extends Vue
 {
+    private static DOT = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:{color}"></span>';
+
     // @ts-ignore
     @Prop({required: true}) course: Course;
 
@@ -30,6 +32,7 @@ export default class CourseScatter extends Vue
         // Map assignments
         let map = this.mapAssignments();
 
+        // Scatter data point style
         let itemStyle =
         {
             normal:
@@ -94,9 +97,13 @@ export default class CourseScatter extends Vue
                 axisPointer:
                 {
                     type: 'cross'
-                }
+                },
+                formatter: (ps: any[]) => ps[0].data[0] + '<br>' + ps.map(p =>
+                    `${CourseScatter.DOT.replace('{color}', p.color)}
+                    ${FormatUtils.limit(p.data[2], 22)}: ${p.data[1]}%<br>`).join('')
             },
 
+            // Legend
             legend:
             {
                 bottom: 24,
@@ -152,6 +159,6 @@ export default class CourseScatter extends Vue
     private static assignmentsData(assignments: Assignment[])
     {
         return assignments.filter(a => a.complete == 'Complete')
-            .map(a => [FormatUtils.toChartDate(a.date), (a.score / a.scoreMax * 100).toFixed(2)]);
+            .map(a => [FormatUtils.toChartDate(a.date), (a.score / a.scoreMax * 100).toFixed(2), a.description]);
     }
 }

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

@@ -2,6 +2,7 @@ import {Component, Prop, Vue} from 'vue-property-decorator';
 import {Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
 import Constants from '@/constants';
+import {FormatUtils} from '@/utils/format-utils';
 
 @Component({
 })
@@ -40,7 +41,7 @@ export default class OverallBar extends Vue
                     rotate: 90,
 
                     // Truncate text length
-                    formatter: (value: string) => value.length <= 16 ? value : value.substr(0, 14) + '...'
+                    formatter: (value: string) => FormatUtils.limit(value, 16)
                 },
             },
 

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

@@ -27,6 +27,7 @@
     import {Component, Prop, Vue} from 'vue-property-decorator';
     import App, {Course} from '@/components/app/app';
     import {CourseUtils} from '@/utils/course-utils';
+    import Navigation from '@/components/navigation/navigation';
 
     @Component({
         components: {}
@@ -48,7 +49,7 @@
         redirect()
         {
             if (!this.clickable) return;
-            App.instance.selectedTab = CourseUtils.formatTabIndex(this.course);
+            Navigation.instance.updateIndex(CourseUtils.formatTabIndex(this.course));
         }
     }
 </script>

src/utils/format-utils.ts

@@ -15,4 +15,26 @@ export class FormatUtils
         // Convert to yyyy-mm-dd
         return moment(date).format('YYYY-MM-DD');
     }
+
+    /**
+     * Limit string length
+     *
+     * @param str String
+     * @param length Max length
+     */
+    public static limit(str: string, length: number): string
+    {
+        return str.length <= length ? str : str.substr(0, length - 2) + '...'
+    }
+
+    /**
+     * To Title Case
+     *
+     * @param str oRigInAL sTrING
+     * @return string Original String
+     */
+    public static toTitleCase(str: string)
+    {
+        return str.replace(/\w\S*/g, s => s.charAt(0).toUpperCase() + s.substr(1).toLowerCase())
+    }
 }