[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.703';
+    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/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

@@ -22,8 +22,19 @@ export class FormatUtils
      * @param str String
      * @param length Max length
      */
-    static limit(str: string, length: number): string
+    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())
+    }
 }