More work on the student-page and Layout

frontend/src/components/base/BaseLayout.vue

@@ -16,8 +16,12 @@
         </v-list>
       </v-toolbar>
       <v-list dense>
-        <v-list-tile v-for="(item, i) in navItems" :key="i" :to="item.route">
-          {{ item.name }}
+        <v-list-tile exact v-for="(item, i) in navItems" :key="i" :to="item.route">
+          <v-list-tile-content>
+            <v-list-tile-title>
+              {{ item.name }}
+            </v-list-tile-title>
+          </v-list-tile-content>
         </v-list-tile>
       </v-list>
     </v-navigation-drawer>

frontend/src/components/student/StudentLayout.vue

 <template>
   <base-layout
-    :navItems="navItems"
+    :navItems="studentPageNavItems"
   >
-    <slot></slot>
+    <router-view></router-view>
   </base-layout>
 </template>
 
@@ -13,13 +13,30 @@
     name: 'student-layout',
     data () {
       return {
-        navItems: [
+        generalNavItems: [
           {
-            name: 'Login',
-            route: '/'
+            name: 'Overview',
+            route: '/student/'
+          },
+          {
+            name: 'Statistics',
+            route: '/student/'
           }
         ]
       }
+    },
+    computed: {
+      submissionNavItems: function () {
+        return this.$store.state.studentPage.submissions.map((sub, index) => {
+          return {
+            name: sub.type,
+            route: `/student/submission/${index}`
+          }
+        })
+      },
+      studentPageNavItems: function () {
+        return this.generalNavItems.concat(this.submissionNavItems)
+      }
     }
   }
 </script>

frontend/src/components/student/StudentPage.vue

 <template>
-  <student-layout>
     <v-container fluid>
       <v-layout justify center>
         <v-flex md3>
@@ -7,17 +6,16 @@
           <exam-information v-if="doneLoading" :exam="exam"></exam-information>
         </v-flex>
         <v-flex md7 offset-md1 v-if="doneLoading">
-          <h2>Submissions of {{ this.studentData.name }}</h2>
+          <h2>Submissions of {{ studentName }}</h2>
           <submission-list :submissions="submissions"></submission-list>
         </v-flex>
       </v-layout>
     </v-container>
-  </student-layout>
 </template>
 
 
 <script>
-  import ax from '@/store/api'
+  import {mapState} from 'vuex'
   import StudentLayout from './StudentLayout.vue'
   import SubmissionList from './SubmissionList.vue'
   import ExamInformation from './ExamInformation.vue'
@@ -30,24 +28,18 @@
     name: 'student-page',
     data () {
       return {
-        studentData: {},
         doneLoading: false
       }
     },
     created: function () {
-      this.doneLoading = false
-      ax.get('api/student-page/').then(response => {
-        this.studentData = response.data
-        this.doneLoading = true
-      })
+      this.$store.dispatch('getStudentData').then(() => { this.doneLoading = true })
     },
     computed: {
-      submissions () {
-        return this.studentData.submissions
-      },
-      exam () {
-        return this.studentData.exam
-      }
+      ...mapState({
+        studentName: state => state.studentPage.studentName,
+        exam: state => state.studentPage.exam,
+        submissions: state => state.studentPage.submissions
+      })
     }
   }
 </script>

frontend/src/components/student/SubmissionDetail.vue

 <template>
-  <p>Test</p>
+  <v-layout>
+
+    <annotated-submission class="ma-3"></annotated-submission>
+  </v-layout>
 </template>
 
 
 <script>
+  import AnnotatedSubmission from '../submission_notes/AnnotatedSubmission'
   export default {
+    components: {
+      AnnotatedSubmission
+    },
     name: 'submission-detail'
   }
 </script>

frontend/src/components/student/SubmissionList.vue

@@ -9,6 +9,7 @@
         <td>{{ props.item.type }}</td>
         <td class="text-xs-right">{{ props.item.score }}</td>
         <td class="text-xs-right">{{ props.item.full_score }}</td>
+        <td class="text-xs-right"><v-btn :to="`submission/${props.index}`" color="red">View</v-btn></td>
       </template>
     </v-data-table>
     <v-alert color="info" value="true">

frontend/src/components/submission_notes/AnnotatedSubmission.vue

@@ -2,10 +2,10 @@
   <table>
     <tr v-for="(code, index) in submission" :key="index">
       <td class="line-number-cell">
-        <v-tooltip left close-delay="20" color="transparent" content-class="comment-icon">
+        <!--<v-tooltip left close-delay="20" color="transparent" content-class="comment-icon">-->
           <v-btn block class="line-number-btn" slot="activator" @click="toggleEditorOnLine(index)">{{ index }}</v-btn>
-          <v-icon small color="indigo accent-3" class="comment-icon">fa-comment</v-icon>
-        </v-tooltip>
+          <!--<v-icon small color="indigo accent-3" class="comment-icon">comment</v-icon>-->
+        <!--</v-tooltip>-->
       </td>
       <td>
         <pre class="prettyprint"><code class="lang-c"> {{ code }}</code></pre>
@@ -67,7 +67,6 @@
   table {
     table-layout: auto;
     border-collapse: collapse;
-    border-width: 0px;
   }
 
   td {
@@ -76,17 +75,18 @@
   }
 
   .line-number-cell {
-    padding-left: 50px;
+    /*padding-left: 50px;*/
     vertical-align: top;
   }
 
   pre.prettyprint {
-    padding: 0px;
-    border: 0px;
+    padding: 0;
+    border: 0;
   }
 
   code {
     width: 100%;
+    box-shadow: None;
   }
 
 
@@ -97,7 +97,7 @@
   }
 
   .comment-icon {
-    border: 0px;
+    border: 0;
   }
 
 </style>

frontend/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Login from '@/components/Login'
 import StudentPage from '@/components/student/StudentPage'
+import StudentLayout from '@/components/student/StudentLayout'
 import SubmissionDetail from '@/components/student/SubmissionDetail'
 import ReviewerPage from '@/components/reviewer/ReviewerPage'
 import StudentListOverview from '@/components/reviewer/StudentListOverview'
@@ -19,11 +20,14 @@ export default new Router({
     },
     {
       path: '/student/',
-      name: 'student-page',
-      component: StudentPage,
+      component: StudentLayout,
       children: [
         {
-          path: 'submission:id/',
+          path: '',
+          component: StudentPage
+        },
+        {
+          path: 'submission/:id',
           component: SubmissionDetail
         }
       ]