Frontend can now submit and view persons.

frontend/src/views/Observation.vue

@@ -5,6 +5,7 @@
                 <v-icon name="tag" scale="1.5"/>
                 {{type}}&nbsp;/&nbsp;{{description}}
             </h3>
+            <br />
             <b-container class="sidebar">
                 <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
                     <b-col class="centered-image">
@@ -55,6 +56,23 @@
                     </b-col>
                 </b-row>
             </b-container>
+            <b-row>
+                <b-col>
+                    <b-form-input v-model="personInput" v-on:keyup.enter.native="addPerson()" placeholder="Enter a name."></b-form-input>
+                </b-col>
+                <b-col cols="1">
+                    <b-button variant="outline-secondary" v-on:click="addPerson()">+</b-button>
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col>
+                    <b-list-group>
+                        <b-list-group-item v-if="persons === [] || persons == null">Enter your name(s)!</b-list-group-item>
+                        <b-list-group-item v-for="(item, index) in persons">{{ item }}&nbsp;<a v-on:click="deletePerson(index)"><v-icon name="times-circle"/></a></b-list-group-item>
+                    </b-list-group>
+                </b-col>
+            </b-row>
+            <br />
             <b-form @submit="onSubmit" id="submission-form" novalidate>
                 <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
                     <b-row class="top-buffer">
@@ -143,6 +161,7 @@
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 import "vue-awesome/icons/tag";
+import "vue-awesome/icons/times-circle"
 import { mapState } from "vuex";
 import Vue from "vue";
 
@@ -160,7 +179,9 @@ export default {
         }
       ],
       totals: [0, 0, 0, 0, 0, 0, 0, 0],
-      submitPassword: null
+      submitPassword: null,
+      persons: [],
+      personInput: null
     };
   },
   computed: {
@@ -286,6 +307,7 @@ export default {
               observed: this.description,
               whom: this.whom,
               type: this.type,
+              persons: this.persons,
               entries: JSON.parse(JSON.stringify(this.observations))
             },
             axiosConfig
@@ -300,7 +322,14 @@ export default {
       }
       this.clearPassword();
       form.classList.add("was-validated");
-    }
+    },
+    addPerson() {
+      this.persons.push(this.personInput);
+      this.personInput = null;
+    },
+    deletePerson: function(index) {
+      this.persons.splice(index, 1);
+    },
   }
 };
 </script>

frontend/src/views/StartNew.vue

@@ -114,6 +114,9 @@ export default {
         this.errorMessage = error.response.data;
         this.$refs.errorModal.show();
       });
+    if(this.site != null){
+      this.getTutors();
+    }
   },
   computed: {
     ...mapState(["site", "description", "type", "tutors", "whom"])

frontend/src/views/ViewObservations.vue

@@ -53,11 +53,18 @@
                     <b-tab v-for="(observation, index) in observationData" v-bind:key="index">
                         <p slot="title">{{ observation.date }}<br/>{{ observation.whom }} {{ observation.type }}<br/>{{ observation.observed }}</p>
                         <h2>{{ observation.date }}, {{ observation.whom }}<br/>{{ observation.type }}, {{ observation.observed }}</h2>
+                        <ul>
+                            <li v-for="person in observation.persons">{{ person.name }}</li>
+                        </ul>
                         <b-row>
                             <b-col class="centered-image">
                                 <img src="../assets/Monitoring.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.monitoring }}</div>
                             </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Control.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.controlProcedural }}</div>
+                            </b-col>
                             <b-col class="centered-image">
                                 <img src="../assets/Control.svg" class="image-opacity"/>
                                 <div class="image-centered-text">{{ observation.control }}</div>
@@ -68,7 +75,15 @@
                             </b-col>
                             <b-col class="centered-image">
                                 <img src="../assets/Teamwork.svg" class="image-opacity"/>
-                                <div class="image-centered-text">{{ observation.teamwork }}</div>
+                                <div class="image-centered-text">{{ observation.teamworkCommunications }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Teamwork.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.teamworkLeadership }}</div>
+                            </b-col>
+                            <b-col class="centered-image">
+                                <img src="../assets/Teamwork.svg" class="image-opacity"/>
+                                <div class="image-centered-text">{{ observation.teamworkWorkload }}</div>
                             </b-col>
                             <b-col class="centered-image">
                                 <img src="../assets/Knowledge.svg" class="image-opacity"/>