Working version of student-page

Implemented version of the student-page using vuetify and the new general layout. The side navigation should be displaying links to the (not yet implemented) detail views of the submissions to provide easy way to change between submission views.

frontend/src/components/base/BaseLayout.vue

@@ -30,8 +30,7 @@
       class="grady-toolbar"
     >
       <v-toolbar-title>
-        <!--<v-toolbar-side-icon v-icon="fa-bars"></v-toolbar-side-icon>-->
-        <span @click.stop="drawer = !drawer">Icon</span>
+        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
         <v-avatar>
           <img src="../../assets/brand.png">
         </v-avatar>

frontend/src/components/student/StudentPage.vue

 <template>
+  <student-layout>
     <v-container fluid>
       <v-layout justify center>
-        <v-flex md5>
+        <v-flex md3>
           <h2>Exam Overview</h2>
           <exam-information v-if="doneLoading" :exam="exam"></exam-information>
         </v-flex>
-        <div md6 offset-md1 v-if="doneLoading">
+        <v-flex md7 offset-md1 v-if="doneLoading">
           <h2>Submissions of {{ this.studentData.name }}</h2>
           <submission-list :submissions="submissions"></submission-list>
-        </div>
+        </v-flex>
       </v-layout>
     </v-container>
+  </student-layout>
 </template>
 
 
 <script>
   import ax from '@/store/api'
-  import GradyNav from './StudentLayout.vue'
+  import StudentLayout from './StudentLayout.vue'
   import SubmissionList from './SubmissionList.vue'
   import ExamInformation from './ExamInformation.vue'
 
@@ -24,7 +26,7 @@
     components: {
       ExamInformation,
       SubmissionList,
-      GradyNav},
+      StudentLayout},
     name: 'student-page',
     data () {
       return {

frontend/src/components/student/SubmissionList.vue

 <template>
   <div class="row my-2 justify-content-center">
-    <b-table hover :items="submissions" :fields="fields"></b-table>
-    <div class="alert alert-info">
-      You reached <b>{{ sumScore }}</b> of <b>{{ sumFullScore }}</b> possible points( {{ pointRatio }}% ).
-    </div>
+    <v-data-table
+      hide-actions
+      :headers="headers"
+      :items="submissions"
+    >
+      <template slot="items" slot-scope="props">
+        <td>{{ props.item.type }}</td>
+        <td class="text-xs-right">{{ props.item.score }}</td>
+        <td class="text-xs-right">{{ props.item.full_score }}</td>
+      </template>
+    </v-data-table>
+    <v-alert color="info" value="true">
+      You reached <b>{{ sumScore }}</b> of <b>{{ sumFullScore }}</b> possible points ( {{ pointRatio }}% ).
+    </v-alert>
   </div>
 </template>
 
@@ -13,6 +23,22 @@
     name: 'submission-list',
     data () {
       return {
+        headers: [
+          {
+            text: 'Task',
+            align: 'left',
+            value: 'type'
+          },
+          {
+            text: 'Score',
+            value: 'score'
+          },
+          {
+            text: 'Maximum Score',
+            value: 'full_score'
+          }
+        ],
+
         fields: [
           { key: 'type', sortable: true },
           { key: 'score', label: 'Score', sortable: true },

frontend/src/store/grady_speak.js

@@ -13,7 +13,7 @@ const gradySays = [
   'I\'m sorry to differ with you, sir, but you are the caretaker.',
   'You have always been the caretaker, I should know, sir.',
   'I\'ve always been here.',
-  'Indeed, he is, Mr. Torrance. Avery willful boy. ',
+  'Indeed, he is, Mr. Torrance. A very willful boy. ',
   'A rather naughty boy, if I may be so bold, sir.',
   'Perhaps they need a good talking to, if you don\'t mind my saying so. Perhaps a bit more.',
   'My girls, sir, they didn\'t care for the Overlook at first.',

frontend/src/store/store.js

@@ -10,7 +10,8 @@ const store = new Vuex.Store({
   state: {
     token: '',
     loggedIn: false,
-    username: '',
+    username: 'username',
+    userRole: 'Student',
     error: '',
     examInstance: 'B.Inf 1301 Kohorte 2'
   },