Added name field & submission confirmation

frontend/src/components/ScoreSelector.vue

@@ -1,9 +1,11 @@
 <template>
+  <div>
     <b-form-radio-group
       buttons
       button-variant="outline-info"
       size="lg"
       v-model="propModel"
+      invalid-feedback="Please select a score."
       required
     >
       <b-form-radio button-variant="1" value="1">1</b-form-radio>
@@ -12,6 +14,7 @@
       <b-form-radio button-variant="4" value="4">4</b-form-radio>
       <b-form-radio button-variant="5" value="5">5</b-form-radio>
     </b-form-radio-group>
+  </div>
 </template>
 
 <script>
@@ -19,11 +22,15 @@ export default {
   props: ["scoreValue"],
   computed: {
     propModel: {
-            get () { return this.scoreValue },
+      get() {
-            set (value) { this.$emit('newselection', value) },
+        return this.scoreValue;
+      },
+      set(value) {
+        this.$emit("newselection", value);
       }
     }
-}
+  }
+};
 </script>
 
 

frontend/src/views/GroupSessionInput.vue

@@ -1,17 +1,38 @@
 <template>
   <b-container fluid>
-    <b-container v-if="!valid">
+    <b-container v-if="error !== null">
+      <p>An error has occurred.</p>
+      <p>{{ error.status }}</p>
+      <p>{{ error.data }}</p>
+    </b-container>
+    <b-container v-else-if="complete">
+      <h2>Submission Complete</h2>
+      <p>Thank you. Your observation data has been submitted.</p>
+      <p>Your observation summary will shortly appear on the session display.</p>
+    </b-container>
+    <b-container v-else-if="!valid">
       <p>Getting session data from server</p>
     </b-container>
     <b-container v-else-if="scenarios.length === 0">
       <p>No scenarios defined for this session, please setup a new group session</p>
     </b-container>
-    <b-container v-else
+    <b-container v-else fluid>
-      v-for="(item, index) in scenarios"
+      <b-form @submit="onSubmit" id="submission-form" novalidate>
-      v-bind:key="index"
+        <b-row align-h="center">
-      class="border bottom-buffer"
+          <b-col>
-      fluid
+            <b-form-group label="Participant">
-    >
+              <b-form-input
+                v-model="participant"
+                type="text"
+                style="text-align:center;"
+                placeholder="Enter your name (Initial and Surname)"
+                required
+              ></b-form-input>
+            </b-form-group>
+          </b-col>
+        </b-row>
+        <b-row v-for="(item, index) in scenarios" v-bind:key="index" class="border bottom-buffer">
+          <b-col>
           <b-row>
             <b-col>
               <b-form-input
@@ -278,7 +299,18 @@
               </b-row>
             </b-col>
           </b-row>
+          </b-col>
+        </b-row>
+        <br>
+        <b-button type="submit" variant="primary" v-on:click="onSubmit()">Submit</b-button>
+      </b-form>
     </b-container>
+    <b-modal id="submissionModal" ref="submissionModal" title="Confirm Submission" @ok="handleOk">
+      <form @submit.stop.prevent="handleSubmit">
+        <p>Once submitted, data cannot be changed.</p>
+        <p>Are you sure you wish to submit?</p>
+      </form>
+    </b-modal>
   </b-container>
 </template>
 <script>
@@ -292,10 +324,10 @@ export default {
   data: function() {
     return {
       scenarios: [],
-      totals: [0, 0, 0, 0, 0, 0, 0, 0],
+      participant: null,
-      warningBound: 2.5,
+      valid: false,
-      submitPassword: null,
+      complete: false,
-      valid: false
+      error: null
     };
   },
   mounted() {
@@ -303,20 +335,21 @@ export default {
     if (this.id != null) {
       Vue.axios
         .get(`/grpob/valid/${this.id}`)
-        .then(function (response) {
+        .then(function(response) {
-          if(response.data.titles != null) {
+          if (response.data.titles != null) {
             response.data.titles.forEach(function(x) {
               self.addAnotherObservation(x);
-          })
+            });
-          self.valid = true
+            self.valid = true;
-          };
+          }
         })
         .catch(function(error) {
           if (error.response.status === 404) {
             self.$router.push("/dberror");
             return;
           }
-          console.log(error)
+          self.error = error.response;
+          console.log(error);
         });
     }
   },
@@ -366,51 +399,6 @@ export default {
         }
       });
     },
-    updateTotals: function() {
-      var iTotals = [0, 0, 0, 0, 0, 0, 0, 0];
-      var counts = [0, 0, 0, 0, 0, 0, 0, 0];
-      this.scenarios.forEach(function(element) {
-        if (element.monitoring.rating) {
-          iTotals[0] += parseInt(element.monitoring.rating);
-          counts[0] += 1;
-        }
-        if (element.controlProcedural.rating) {
-          iTotals[1] += parseInt(element.controlProcedural.rating);
-          counts[1] += 1;
-        }
-        if (element.control.rating) {
-          iTotals[2] += parseInt(element.control.rating);
-          counts[2] += 1;
-        }
-        if (element.conservatism.rating) {
-          iTotals[3] += parseInt(element.conservatism.rating);
-          counts[3] += 1;
-        }
-        if (element.teamworkCommunications.rating) {
-          iTotals[4] += parseInt(element.teamworkCommunications.rating);
-          counts[4] += 1;
-        }
-        if (element.teamworkLeadership.rating) {
-          iTotals[5] += parseInt(element.teamworkLeadership.rating);
-          counts[5] += 1;
-        }
-        if (element.teamworkWorkload.rating) {
-          iTotals[6] += parseInt(element.teamworkWorkload.rating);
-          counts[6] += 1;
-        }
-        if (element.knowledge.rating) {
-          iTotals[7] += parseInt(element.knowledge.rating);
-          counts[7] += 1;
-        }
-      });
-      for (var i = 0; i < iTotals.length; i++) {
-        if (counts[i] !== 0) {
-          Vue.set(this.totals, i, (iTotals[i] / counts[i]).toFixed(1));
-        } else {
-          Vue.set(this.totals, i, 0);
-        }
-      }
-    },
     onSubmit: function(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -428,15 +416,16 @@ export default {
       if (form.checkValidity()) {
         var self = this;
         Vue.axios
-          .post("/observation", {
+          .post("/grpob/submit", {
-            person: this.whom,
+            person: self.participant,
-            scenarios: JSON.parse(JSON.stringify(this.scenarios))
+            scenarios: JSON.parse(JSON.stringify(self.scenarios))
           })
           .then(function(response) {
-            self.$router.push("/complete");
+            self.complete = true;
             console.log(response);
           })
           .catch(function(error) {
+            self.error = error;
             console.log(error);
           });
       }