From 4bcfb844339c31b9fc63c5f0b8ef740b965305bd Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 21 Feb 2019 15:38:33 +0000
Subject: [PATCH] Added name field & submission confirmation

---
 frontend/src/components/ScoreSelector.vue |  47 +-
 frontend/src/views/GroupSessionInput.vue  | 619 +++++++++++-----------
 2 files changed, 331 insertions(+), 335 deletions(-)

diff --git a/frontend/src/components/ScoreSelector.vue b/frontend/src/components/ScoreSelector.vue
index a61a9f6..40fb029 100644
--- a/frontend/src/components/ScoreSelector.vue
+++ b/frontend/src/components/ScoreSelector.vue
@@ -1,29 +1,36 @@
 <template>
-  <b-form-radio-group
-    buttons
-    button-variant="outline-info"
-    size="lg"
-    v-model="propModel"
-    required
-  >
-    <b-form-radio button-variant="1" value="1">1</b-form-radio>
-    <b-form-radio button-variant="2" value="2">2</b-form-radio>
-    <b-form-radio button-variant="3" value="3">3</b-form-radio>
-    <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>
+    <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>
+      <b-form-radio button-variant="2" value="2">2</b-form-radio>
+      <b-form-radio button-variant="3" value="3">3</b-form-radio>
+      <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>
 export default {
-    props: ["scoreValue"],
-    computed: {
-        propModel: {
-            get () { return this.scoreValue },
-            set (value) { this.$emit('newselection', value) },
-        }
+  props: ["scoreValue"],
+  computed: {
+    propModel: {
+      get() {
+        return this.scoreValue;
+      },
+      set(value) {
+        this.$emit("newselection", value);
+      }
     }
-}
+  }
+};
 </script>
 
 
diff --git a/frontend/src/views/GroupSessionInput.vue b/frontend/src/views/GroupSessionInput.vue
index 2907634..3ed0d9a 100644
--- a/frontend/src/views/GroupSessionInput.vue
+++ b/frontend/src/views/GroupSessionInput.vue
@@ -1,284 +1,316 @@
 <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
-      v-for="(item, index) in scenarios"
-      v-bind:key="index"
-      class="border bottom-buffer"
-      fluid
-    >
-      <b-row>
-        <b-col>
-          <b-form-input
-            v-model="item.title"
-            type="text"
-            placeholder="Enter scenario description."
-            readonly
-          ></b-form-input>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="6" class="border">
+    <b-container v-else fluid>
+      <b-form @submit="onSubmit" id="submission-form" novalidate>
+        <b-row align-h="center">
+          <b-col>
+            <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>
-              <h5>Monitoring</h5>
-              <score-selector
-                :score-value="item.monitoring.rating"
-                v-on:newselection="item.monitoring.rating = $event;"
-              ></score-selector>
+              <b-form-input
+                v-model="item.title"
+                type="text"
+                placeholder="Enter scenario description."
+                readonly
+              ></b-form-input>
             </b-col>
           </b-row>
           <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.monitoring.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.monitoring.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Monitoring</h5>
+                  <score-selector
+                    :score-value="item.monitoring.rating"
+                    v-on:newselection="item.monitoring.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.monitoring.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.monitoring.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
-          </b-row>
-        </b-col>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Control Procedural</h5>
-              <score-selector
-                :score-value="item.controlProcedural.rating"
-                v-on:newselection="item.controlProcedural.rating = $event;"
-              ></score-selector>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Control Procedural</h5>
+                  <score-selector
+                    :score-value="item.controlProcedural.rating"
+                    v-on:newselection="item.controlProcedural.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.controlProcedural.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.controlProcedural.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
           </b-row>
           <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.controlProcedural.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.controlProcedural.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Control</h5>
+                  <score-selector
+                    :score-value="item.control.rating"
+                    v-on:newselection="item.control.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.control.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.control.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
-          </b-row>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Control</h5>
-              <score-selector
-                :score-value="item.control.rating"
-                v-on:newselection="item.control.rating = $event;"
-              ></score-selector>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Conservatism</h5>
+                  <score-selector
+                    :score-value="item.conservatism.rating"
+                    v-on:newselection="item.conservatism.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.conservatism.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.conservatism.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
           </b-row>
           <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.control.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.control.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Teamwork Communications</h5>
+                  <score-selector
+                    :score-value="item.teamworkCommunications.rating"
+                    v-on:newselection="item.teamworkCommunications.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.teamworkCommunications.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.teamworkCommunications.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
-          </b-row>
-        </b-col>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Conservatism</h5>
-              <score-selector
-                :score-value="item.conservatism.rating"
-                v-on:newselection="item.conservatism.rating = $event;"
-              ></score-selector>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Teamwork Leadership</h5>
+                  <score-selector
+                    :score-value="item.teamworkLeadership.rating"
+                    v-on:newselection="item.teamworkLeadership.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.teamworkLeadership.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.teamworkLeadership.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
           </b-row>
           <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.conservatism.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.conservatism.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Teamwork Workload</h5>
+                  <score-selector
+                    :score-value="item.teamworkWorkload.rating"
+                    v-on:newselection="item.teamworkWorkload.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.teamworkWorkload.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.teamworkWorkload.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
+            </b-col>
+            <b-col cols="6" class="border">
+              <b-row>
+                <b-col>
+                  <h5>Knowledge</h5>
+                  <score-selector
+                    :score-value="item.knowledge.rating"
+                    v-on:newselection="item.knowledge.rating = $event;"
+                  ></score-selector>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col>
+                  <b-form-textarea
+                    v-model="item.knowledge.strengths"
+                    placeholder="Strengths"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="strength"
+                  ></b-form-textarea>
+                  <b-form-textarea
+                    v-model="item.knowledge.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
+                </b-col>
+              </b-row>
             </b-col>
           </b-row>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Teamwork Communications</h5>
-              <score-selector
-                :score-value="item.teamworkCommunications.rating"
-                v-on:newselection="item.teamworkCommunications.rating = $event;"
-              ></score-selector>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.teamworkCommunications.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.teamworkCommunications.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
-            </b-col>
-          </b-row>
-        </b-col>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Teamwork Leadership</h5>
-              <score-selector
-                :score-value="item.teamworkLeadership.rating"
-                v-on:newselection="item.teamworkLeadership.rating = $event;"
-              ></score-selector>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.teamworkLeadership.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.teamworkLeadership.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
-            </b-col>
-          </b-row>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Teamwork Workload</h5>
-              <score-selector
-                :score-value="item.teamworkWorkload.rating"
-                v-on:newselection="item.teamworkWorkload.rating = $event;"
-              ></score-selector>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.teamworkWorkload.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.teamworkWorkload.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
-            </b-col>
-          </b-row>
-        </b-col>
-        <b-col cols="6" class="border">
-          <b-row>
-            <b-col>
-              <h5>Knowledge</h5>
-              <score-selector
-                :score-value="item.knowledge.rating"
-                v-on:newselection="item.knowledge.rating = $event;"
-              ></score-selector>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-textarea
-                v-model="item.knowledge.strengths"
-                placeholder="Strengths"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="strength"
-              ></b-form-textarea>
-              <b-form-textarea
-                v-model="item.knowledge.improvements"
-                placeholder="AFIs"
-                :rows="1"
-                :max-rows="2"
-                no-resize
-                class="afi"
-              ></b-form-textarea>
-            </b-col>
-          </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],
-      warningBound: 2.5,
-      submitPassword: null,
-      valid: false
+      participant: null,
+      valid: false,
+      complete: false,
+      error: null
     };
   },
   mounted() {
@@ -303,20 +335,21 @@ export default {
     if (this.id != null) {
       Vue.axios
         .get(`/grpob/valid/${this.id}`)
-        .then(function (response) {
-          if(response.data.titles != null) {
-          response.data.titles.forEach(function(x) {
-            self.addAnotherObservation(x);
-          })
-          self.valid = true
-          };
+        .then(function(response) {
+          if (response.data.titles != null) {
+            response.data.titles.forEach(function(x) {
+              self.addAnotherObservation(x);
+            });
+            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", {
-            person: this.whom,
-            scenarios: JSON.parse(JSON.stringify(this.scenarios))
+          .post("/grpob/submit", {
+            person: self.participant,
+            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);
           });
       }