Linter conformance

backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/ObservationsController.kt

@@ -54,7 +54,6 @@ class ObservationsController {
     @Autowired
     lateinit var mailer: Email
 
-
     /**
      * Returns a list of all current sites.
      */
@@ -289,8 +288,7 @@ class ObservationsController {
                 return false
             mailer.sendObservationData(data)
             return true
-        }
+        } else
-        else
             logger.error("Mailer has not been initialized.")
         return false
     }

frontend/src/components/ObservationEntry.vue

@@ -3,7 +3,9 @@
     <b-row>
       <b-col cols="3">
         <p>{{ description }}</p>
-        <h4 v-bind:class="{ scorewarn: scenariofundamental.rating < 3 }">{{ scenariofundamental.rating }}</h4>
+        <h4 v-bind:class="{ scorewarn: scenariofundamental.rating < 3 }">
+          {{ scenariofundamental.rating }}
+        </h4>
       </b-col>
       <b-col cols="9">
         <b-form-textarea

frontend/src/components/ObservationSearchBar.vue

@@ -2,12 +2,20 @@
   <b-row>
     <b-col>
       <b-form-group label="Site">
-        <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions"/>
+        <b-form-select
+          class="text-center"
+          v-model="siteSelection"
+          :options="siteOptions"
+        />
       </b-form-group>
     </b-col>
     <b-col>
       <b-form-group label="Tutor">
-        <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions"/>
+        <b-form-select
+          class="text-center"
+          v-model="tutorSelection"
+          :options="tutorOptions"
+        />
       </b-form-group>
     </b-col>
     <!--
@@ -19,7 +27,11 @@
     -->
     <b-col>
       <b-form-group label="Person">
-        <b-form-input v-model="person" type="text" class="text-center"></b-form-input>
+        <b-form-input
+          v-model="person"
+          type="text"
+          class="text-center"
+        ></b-form-input>
       </b-form-group>
     </b-col>
     <b-col>
@@ -156,7 +168,7 @@ export default {
         this.$refs.errorModal.show();
       });
     this.getTutors();
-    this.$emit('refresh');
+    this.$emit("refresh");
   }
 };
 </script>

frontend/src/components/ScoreSelector.vue

@@ -33,7 +33,6 @@ export default {
 };
 </script>
 
-
 <style>
 .btn-1 {
   color: #ffffff;

frontend/src/router.js

@@ -10,8 +10,8 @@ const ViewObservations = () => import("./views/ViewObservations.vue");
 const ObservationComplete = () => import("./views/ObservationComplete.vue");
 const DBError = () => import("./views/DatabaseUnavailable.vue");
 const About = () => import("./views/About.vue");
-const GroupSession = () => import("./views/GroupSession.vue")
+const GroupSession = () => import("./views/GroupSession.vue");
-const GroupSessionInput = () => import("./views/GroupSessionInput.vue")
+const GroupSessionInput = () => import("./views/GroupSessionInput.vue");
 
 Vue.use(Router);
 

frontend/src/views/About.vue

@@ -2,20 +2,32 @@
   <b-container>
     <b-row>
       <b-col>
-                <h1 class="display-4 focus-in-expand-fwd">Training Observations Database</h1>
+        <h1 class="display-4 focus-in-expand-fwd">
+          Training Observations Database
+        </h1>
       </b-col>
     </b-row>
     <br />
     <b-row>
       <b-col>
-                <v-icon name="crown" scale="2" class="mb-3 jello-horizontal"></v-icon><p class="lead">Created by Nathan Cannon&nbsp;
+        <v-icon name="crown" scale="2" class="mb-3 jello-horizontal"></v-icon>
-                <a href="mailto:nathan.cannon@edf-energy.com"><v-icon name="briefcase"></v-icon></a>&nbsp;
+        <p class="lead">
-                <a href="mailto:neviynhd@gmail.com"><v-icon name="home"></v-icon></a></p>
+          Created by Nathan Cannon&nbsp;
+          <a href="mailto:nathan.cannon@edf-energy.com"
+            ><v-icon name="briefcase"></v-icon></a
+          >&nbsp;
+          <a href="mailto:neviynhd@gmail.com"><v-icon name="home"></v-icon></a>
+        </p>
       </b-col>
     </b-row>
     <b-row>
       <b-col>
-                <v-icon name="power-off" scale="2" class="mb-3 jello-horizontal"></v-icon><p class="lead">Powered by Spring Boot and Vue.js</p>
+        <v-icon
+          name="power-off"
+          scale="2"
+          class="mb-3 jello-horizontal"
+        ></v-icon>
+        <p class="lead">Powered by Spring Boot and Vue.js</p>
       </b-col>
     </b-row>
   </b-container>

frontend/src/views/DatabaseUnavailable.vue

@@ -3,7 +3,12 @@
     <b-row class="my-3">
       <b-col>
         <v-icon name="desktop" style="color: black" scale="5"></v-icon>
-                <v-icon class="mx-5 heartbeat" name="unlink" style="color: black" scale="4"></v-icon>
+        <v-icon
+          class="mx-5 heartbeat"
+          name="unlink"
+          style="color: black"
+          scale="4"
+        ></v-icon>
         <v-icon name="database" style="color: black" scale="5"></v-icon>
       </b-col>
     </b-row>

frontend/src/views/GroupSession.vue

@@ -3,14 +3,19 @@
     <b-row v-if="active">
       <b-col cols="12" md="3">
         <vue-qrcode v-model="qrdata" :options="{ width: 250 }"></vue-qrcode>
-        <p>Scan the code or navigate to
+        <p>
-          <br>
+          Scan the code or navigate to
+          <br />
           {{ qrdata }}
         </p>
       </b-col>
       <b-col cols="12" md="9">
         <b-card-group v-for="(item, index) in data" v-bind:key="index">
-          <b-card border-variant="secondary" header-border-variant="secondary" :header="index">
+          <b-card
+            border-variant="secondary"
+            header-border-variant="secondary"
+            :header="index"
+          >
             <b-card-text>
               <b-table :fields="tableFields" :items="item"></b-table>
             </b-card-text>
@@ -18,7 +23,9 @@
         </b-card-group>
       </b-col>
       <b-col>
-        <b-button size="lg" variant="primary" v-on:click="showCompletionModal()">Finish Session</b-button>
+        <b-button size="lg" variant="primary" v-on:click="showCompletionModal()"
+          >Finish Session</b-button
+        >
       </b-col>
     </b-row>
     <b-row v-else-if="complete">
@@ -30,7 +37,9 @@
         </b-row>
         <b-row>
           <b-col>
-            <p>Observation data for this session is now saved in the database.</p>
+            <p>
+              Observation data for this session is now saved in the database.
+            </p>
           </b-col>
         </b-row>
         <b-row>
@@ -39,7 +48,8 @@
               size="lg"
               variant="primary"
               v-on:click="window.location.reload()"
-            >Start a New Session</b-button>
+              >Start a New Session</b-button
+            >
           </b-col>
         </b-row>
       </b-col>
@@ -62,7 +72,11 @@
           <b-row align-h="center">
             <b-col>
               <b-form-group label="Type">
-                <b-form-select v-model="type" style="text-align:center;" required>
+                <b-form-select
+                  v-model="type"
+                  style="text-align:center;"
+                  required
+                >
                   <option :value="null">Select a training type</option>
                   <option value="INITIAL">INITIAL</option>
                   <option value="CONTINUING">CONTINUING</option>
@@ -74,7 +88,10 @@
             <b-col>
               <b-form-group label="Tutor(s)">
                 <p v-if="site == null">Select a site first.</p>
-                <b-form-checkbox-group v-model="tutors" :options="tutorOptions"></b-form-checkbox-group>
+                <b-form-checkbox-group
+                  v-model="tutors"
+                  :options="tutorOptions"
+                ></b-form-checkbox-group>
               </b-form-group>
             </b-col>
           </b-row>
@@ -92,7 +109,10 @@
               ></b-form-input>
             </b-col>
             <b-col cols="1">
-              <b-button v-on:click="scenarioTitles.splice(index, 1)" variant="danger">
+              <b-button
+                v-on:click="scenarioTitles.splice(index, 1)"
+                variant="danger"
+              >
                 <b>Delete</b>
               </b-button>
             </b-col>
@@ -103,24 +123,28 @@
                 v-on:click="scenarioTitles.push({ data: '' })"
                 size="lg"
                 variant="primary"
-              >Add Another Scenario</b-button>
+                >Add Another Scenario</b-button
+              >
             </b-col>
           </b-row>
           <b-row>
             <b-col>
-              <br>
+              <br />
             </b-col>
           </b-row>
           <b-row align-h="center">
             <b-col>
-              <b-button type="submit" size="lg" variant="primary">Start</b-button>
+              <b-button type="submit" size="lg" variant="primary"
+                >Start</b-button
+              >
             </b-col>
             <b-col>
               <b-button
                 size="lg"
                 variant="secondary"
                 v-on:click="connectToPrevious()"
-              >Connect to Previous Session</b-button>
+                >Connect to Previous Session</b-button
+              >
             </b-col>
           </b-row>
         </b-form>
@@ -134,7 +158,11 @@
       @shown="clearPassword"
     >
       <form @submit.stop.prevent="handleSubmit">
-        <b-form-input type="password" placeholder="Enter password" v-model="submitPassword"></b-form-input>
+        <b-form-input
+          type="password"
+          placeholder="Enter password"
+          v-model="submitPassword"
+        ></b-form-input>
       </form>
     </b-modal>
     <b-modal
@@ -145,7 +173,11 @@
       @shown="clearPassword"
     >
       <form @submit.stop.prevent="handleSubmit">
-        <b-form-input type="password" placeholder="Enter password" v-model="submitPassword"></b-form-input>
+        <b-form-input
+          type="password"
+          placeholder="Enter password"
+          v-model="submitPassword"
+        ></b-form-input>
       </form>
     </b-modal>
   </b-container>
@@ -196,7 +228,6 @@ export default {
     }
   },
   mounted() {
-    console.log("loading");
     Vue.axios
       .get("/site")
       .then(response => {
@@ -218,12 +249,6 @@ export default {
           password: this.submitPassword
         }
       };
-      console.log({
-        site: self.site,
-        tutors: self.tutors,
-        scenarioTitles: self.scenarioTitles.map(x => x.data),
-        type: self.type
-      });
       Vue.axios
         .post(
           "/grpob/start",
@@ -236,15 +261,12 @@ export default {
           axiosConfig
         )
         .then(function(response) {
-          console.log(response);
+          if (!("error" in response.data)) {
-          if ("error" in response.data) {
-          } else {
             self.setupSession(response.data);
           }
         })
-        .catch(function(error) {
+        .catch(function() {
           self.active = false;
-          console.log(error);
         });
     },
     connectToPrevious: function() {
@@ -252,9 +274,7 @@ export default {
       Vue.axios
         .get("/grpob/recover")
         .then(function(response) {
-          console.log(response);
+          if (!("error" in response.data)) {
-          if ("error" in response.data) {
-          } else {
             self.setupSession(response.data);
           }
         })
@@ -266,8 +286,6 @@ export default {
         });
     },
     setupSession: function(rdata) {
-      console.log("rdata");
-      console.log(rdata);
       var self = this;
       self.qrdata = `http://${rdata.ip}:${rdata.port}/#/groupsession/${
         rdata.id
@@ -340,14 +358,10 @@ export default {
         Vue.axios
           .post("/grpob/complete", {}, axiosConfig)
           .then(function(response) {
-            console.log(response.data);
             if ("success" in response.data) {
               self.complete = true;
               self.active = false;
             }
-          })
-          .catch(function(error) {
-            console.log(error);
           });
       }
     }

frontend/src/views/GroupSessionInput.vue

@@ -8,13 +8,18 @@
     <b-container v-else-if="complete">
       <h2>Submission Complete</h2>
       <p>Thank you.</p>
-      <p>This observation session is now closed and your data submitted to the database.</p>
+      <p>
+        This observation session is now closed and your data submitted to the
+        database.
+      </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>
+      <p>
+        No scenarios defined for this session, please setup a new group session
+      </p>
     </b-container>
     <b-container v-else fluid>
       <b-form>
@@ -31,15 +36,22 @@
             </b-form-group>
           </b-col>
           <b-col>
-            <b-button v-on:click="attemptReconnect()">Reconnect
+            <b-button v-on:click="attemptReconnect()">Reconnect </b-button>
-            </b-button>
           </b-col>
         </b-row>
-        <b-row v-for="(item, index) in scenarios" v-bind:key="index" class="border bottom-buffer">
+        <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 v-model="item.title" type="text" readonly></b-form-input>
+                <b-form-input
+                  v-model="item.title"
+                  type="text"
+                  readonly
+                ></b-form-input>
               </b-col>
             </b-row>
             <b-row>
@@ -49,7 +61,10 @@
                     <h5>Monitoring</h5>
                     <score-selector
                       :score-value="item.monitoring.rating"
-                      v-on:newselection="item.monitoring.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.monitoring.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -80,7 +95,10 @@
                     <h5>Control Procedural</h5>
                     <score-selector
                       :score-value="item.controlProcedural.rating"
-                      v-on:newselection="item.controlProcedural.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.controlProcedural.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -111,7 +129,10 @@
                     <h5>Control</h5>
                     <score-selector
                       :score-value="item.control.rating"
-                      v-on:newselection="item.control.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.control.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -142,7 +163,10 @@
                     <h5>Conservatism</h5>
                     <score-selector
                       :score-value="item.conservatism.rating"
-                      v-on:newselection="item.conservatism.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.conservatism.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -173,7 +197,10 @@
                     <h5>Teamwork Communications</h5>
                     <score-selector
                       :score-value="item.teamworkCommunications.rating"
-                      v-on:newselection="item.teamworkCommunications.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.teamworkCommunications.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -204,7 +231,10 @@
                     <h5>Teamwork Leadership</h5>
                     <score-selector
                       :score-value="item.teamworkLeadership.rating"
-                      v-on:newselection="item.teamworkLeadership.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.teamworkLeadership.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -235,7 +265,10 @@
                     <h5>Teamwork Workload</h5>
                     <score-selector
                       :score-value="item.teamworkWorkload.rating"
-                      v-on:newselection="item.teamworkWorkload.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.teamworkWorkload.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -266,7 +299,10 @@
                     <h5>Knowledge</h5>
                     <score-selector
                       :score-value="item.knowledge.rating"
-                      v-on:newselection="item.knowledge.rating = $event; actuallySubmit()"
+                      v-on:newselection="
+                        item.knowledge.rating = $event;
+                        actuallySubmit();
+                      "
                     ></score-selector>
                   </b-col>
                 </b-row>
@@ -294,8 +330,10 @@
             </b-row>
           </b-col>
         </b-row>
-        <br>
+        <br />
-        <b-button variant="primary" v-on:click="actuallySubmit()">Update</b-button>
+        <b-button variant="primary" v-on:click="actuallySubmit()"
+          >Update</b-button
+        >
       </b-form>
     </b-container>
   </b-container>
@@ -331,7 +369,7 @@ export default {
               self.addAnotherObservation(x);
             });
             self.valid = true;
-            self.setupSession()
+            self.setupSession();
           }
         })
         .catch(function(error) {
@@ -340,7 +378,6 @@ export default {
             return;
           }
           self.error = error.response;
-          console.log(error);
         });
     }
   },
@@ -396,14 +433,8 @@ export default {
         person: self.participant,
         scenarios: self.scenarios
       };
-      Vue.axios
+      Vue.axios.post("/grpob/submit", payload).catch(function(error) {
-        .post("/grpob/submit", payload)
-        .then(function(response) {
-          console.log(response);
-        })
-        .catch(function(error) {
         self.error = error;
-          console.log(error);
       });
     },
     setupSession: function() {
@@ -418,20 +449,18 @@ export default {
           var data = JSON.parse(incomingData.body);
           if (data.status === "complete") {
             self.complete = true;
-            self.stompclient.disconnect()
+            self.stompclient.disconnect();
           }
         });
       });
     },
     attemptReconnect: function() {
       var self = this;
-      Vue.axios.get(`/grpob/participant/${self.participant}`)
+      Vue.axios
+        .get(`/grpob/participant/${self.participant}`)
         .then(function(response) {
           self.scenarios = response.data;
-      })
+        });
-      .catch(function(error){
-        console.log(error)
-      })
     }
   }
 };

frontend/src/views/Home.vue

@@ -2,27 +2,44 @@
   <b-container>
     <b-row>
       <b-col>
-                <h1 class="tracking-in-expand-fwd display-4"><v-icon name="user-check" scale="2"></v-icon> Training Observations Database</h1>
+        <h1 class="tracking-in-expand-fwd display-4">
+          <v-icon name="user-check" scale="2"></v-icon> Training Observations
+          Database
+        </h1>
       </b-col>
     </b-row>
     <b-row class="my-3" align-h="center">
       <b-col lg="6" sm="12">
-                <b-button class="scale-in-center" size="lg" to="/new" variant="primary" block><v-icon name="file-alt"/> Start a new observation</b-button>
+        <b-button
+          class="scale-in-center"
+          size="lg"
+          to="/new"
+          variant="primary"
+          block
+          ><v-icon name="file-alt" /> Start a new observation</b-button
+        >
       </b-col>
     </b-row>
     <b-row class="my-3" align-h="center">
       <b-col lg="6" sm="12">
-                <b-button class="scale-in-center" size="lg" to="/observations" block><v-icon name="th-list"/> Read past observations</b-button>
+        <b-button class="scale-in-center" size="lg" to="/observations" block
+          ><v-icon name="th-list" /> Read past observations</b-button
+        >
       </b-col>
     </b-row>
     <b-row class="my-3" align-h="center">
       <b-col lg="6" sm="12">
-                <b-button class="scale-in-center" size="lg" to="/stats" block><v-icon name="chart-line"/> View daily observation statistics</b-button>
+        <b-button class="scale-in-center" size="lg" to="/stats" block
+          ><v-icon name="chart-line" /> View daily observation
+          statistics</b-button
+        >
       </b-col>
     </b-row>
     <b-row class="my-3" align-h="center">
       <b-col lg="6" sm="12">
-            <b-button class="scale-in-center" size="lg" to="/groupsession" block><v-icon name="users"/> Start a Group Session</b-button>
+        <b-button class="scale-in-center" size="lg" to="/groupsession" block
+          ><v-icon name="users" /> Start a Group Session</b-button
+        >
       </b-col>
     </b-row>
   </b-container>
@@ -33,7 +50,7 @@ import "vue-awesome/icons/file-alt";
 import "vue-awesome/icons/th-list";
 import "vue-awesome/icons/chart-line";
 import "vue-awesome/icons/user-check";
-import "vue-awesome/icons/users"
+import "vue-awesome/icons/users";
 export default {
   name: "Home",
   title: "Observations Database"

frontend/src/views/NewSite.vue

@@ -3,16 +3,30 @@
     <h2>New Site</h2>
     <b-form @submit="onSubmit" id="submission-form">
       <b-form-group horizontal label="Site Name">
-                <b-form-input v-model="siteName" type="text" style="text-align:center;"/>
+        <b-form-input
+          v-model="siteName"
+          type="text"
+          style="text-align:center;"
+        />
       </b-form-group>
       <b-form-group horizontal label="Password">
-                <b-form-input v-model="submissionPassword" type="password" style="text-align:center;" />
+        <b-form-input
+          v-model="submissionPassword"
+          type="password"
+          style="text-align:center;"
+        />
       </b-form-group>
       <b-button type="submit" size="lg" variant="primary">Submit</b-button>
     </b-form>
     <br />
-        <b-alert :show="dismissCountDown" dismissible fade :variant="alertVariant" @dismissed="dismissCountDown=0"
+    <b-alert
-                 @dismiss-count-down="countDownChanged">
+      :show="dismissCountDown"
+      dismissible
+      fade
+      :variant="alertVariant"
+      @dismissed="dismissCountDown = 0"
+      @dismiss-count-down="countDownChanged"
+    >
       {{ alertText }}
     </b-alert>
   </b-container>
@@ -35,10 +49,7 @@ export default {
     };
   },
   mounted() {
-    Vue.axios
+    Vue.axios.get("/site").catch(error => {
-      .get("/site")
-      .then(response => {})
-      .catch(error => {
       if (error.response.status === 404) {
         this.$router.push("/dberror");
         return;
@@ -72,11 +83,10 @@ export default {
             this.alertText = "Successfully added " + response.data.text;
             this.showAlert();
           })
-          .catch(error => {
+          .catch(() => {
             this.alertVariant = "danger";
             this.alertText = "Failed to add Site";
             this.showAlert();
-            console.log(error);
           });
       }
     }

frontend/src/views/NewTutor.vue

@@ -3,18 +3,37 @@
     <h2>New Tutor</h2>
     <b-form @submit="onSubmit" id="submission-form">
       <b-form-group horizontal label="Site">
-        <b-form-select v-model="siteSelection" :options="siteOptions" style="text-align:center;" />
+        <b-form-select
+          v-model="siteSelection"
+          :options="siteOptions"
+          style="text-align:center;"
+        />
       </b-form-group>
       <b-form-group horizontal label="Tutor Name">
-        <b-form-input v-model="tutorName" type="text" style="text-align:center;" />
+        <b-form-input
+          v-model="tutorName"
+          type="text"
+          style="text-align:center;"
+        />
       </b-form-group>
       <b-form-group horizontal label="Password">
-        <b-form-input v-model="submissionPassword" type="password" style="text-align:center;" />
+        <b-form-input
+          v-model="submissionPassword"
+          type="password"
+          style="text-align:center;"
+        />
       </b-form-group>
       <b-button type="submit" size="lg" variant="primary">Submit</b-button>
     </b-form>
     <br />
-    <b-alert :show="dismissCountDown" dismissible fade :variant="alertVariant" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged">
+    <b-alert
+      :show="dismissCountDown"
+      dismissible
+      fade
+      :variant="alertVariant"
+      @dismissed="dismissCountDown = 0"
+      @dismiss-count-down="countDownChanged"
+    >
       {{ alertText }}
     </b-alert>
   </b-container>
@@ -84,11 +103,10 @@ export default {
             this.alertText = "Successfully added " + response.data.text;
             this.showAlert();
           })
-          .catch(error => {
+          .catch(() => {
             this.alertVariant = "danger";
             this.alertText = "Failed to add Tutor";
             this.showAlert();
-            console.log(error);
           });
       }
     }

frontend/src/views/Observation.vue

@@ -1,69 +1,148 @@
 <template>
   <b-container fluid>
-        <b-container v-if="type != null && whom != null && site != null && tutors != null" fluid style="padding-left: 130px;">
+    <b-container
+      v-if="type != null && whom != null && site != null && tutors != null"
+      fluid
+      style="padding-left: 130px;"
+    >
       <h3>
         <v-icon name="tag" scale="1.5" />
         {{ type }}&nbsp;/&nbsp;{{ whom }}
       </h3>
       <b-container class="sidebar">
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[0] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[0] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Monitoring.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[0] < warningBound }"/>
+            <img
+              src="../assets/Monitoring.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[0] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[0] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[1] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[1] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[1] < warningBound }"/>
+            <img
+              src="../assets/Control.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[1] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[1] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[2] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[2] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[2] < warningBound }"/>
+            <img
+              src="../assets/Control.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[2] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[2] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[3] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[3] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Conservatism.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[3] < warningBound }"/>
+            <img
+              src="../assets/Conservatism.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[3] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[3] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[4] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[4] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[4] < warningBound }"/>
+            <img
+              src="../assets/Teamwork.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[4] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[4] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[5] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[5] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[5] < warningBound }"/>
+            <img
+              src="../assets/Teamwork.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[5] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[5] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[6] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[6] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[6] < warningBound }"/>
+            <img
+              src="../assets/Teamwork.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[6] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[6] }}</div>
           </b-col>
         </b-row>
-                <b-row align-v="center" class="sidebar-vert-padding" v-if="totals[7] > 0">
+        <b-row
+          align-v="center"
+          class="sidebar-vert-padding"
+          v-if="totals[7] > 0"
+        >
           <b-col class="centered-image">
-                        <img src="../assets/Knowledge.svg" class="image-opacity" v-bind:class="{ scorewarning: totals[7] < warningBound }"/>
+            <img
+              src="../assets/Knowledge.svg"
+              class="image-opacity"
+              v-bind:class="{ scorewarning: totals[7] < warningBound }"
+            />
             <div class="image-centered-text">{{ totals[7] }}</div>
           </b-col>
         </b-row>
       </b-container>
       <br />
       <b-form @submit="onSubmit" id="submission-form" novalidate>
-                <b-container v-for="(item, index) in scenarios" v-bind:key="index" class="border bottom-buffer" fluid>
+        <b-container
+          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."></b-form-input>
+              <b-form-input
+                v-model="item.title"
+                type="text"
+                placeholder="Enter scenario description."
+              ></b-form-input>
             </b-col>
             <b-col cols="1">
-                            <b-button v-on:click="deleteObservation(index)" variant="danger"><b>Delete</b></b-button>
+              <b-button v-on:click="deleteObservation(index)" variant="danger"
+                ><b>Delete</b></b-button
+              >
             </b-col>
           </b-row>
           <b-row>
@@ -71,11 +150,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Monitoring</h5>
-                                    <score-selector :score-value="item.monitoring.rating" v-on:newselection="item.monitoring.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.monitoring.rating"
+                    v-on:newselection="
+                      item.monitoring.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.monitoring.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -83,11 +182,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Control Procedural</h5>
-                                    <score-selector :score-value="item.controlProcedural.rating" v-on:newselection="item.controlProcedural.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.controlProcedural.rating"
+                    v-on:newselection="
+                      item.controlProcedural.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.controlProcedural.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -97,11 +216,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Control</h5>
-                                    <score-selector :score-value="item.control.rating" v-on:newselection="item.control.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.control.rating"
+                    v-on:newselection="
+                      item.control.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.control.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -109,11 +248,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Conservatism</h5>
-                                    <score-selector :score-value="item.conservatism.rating" v-on:newselection="item.conservatism.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.conservatism.rating"
+                    v-on:newselection="
+                      item.conservatism.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.conservatism.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -123,11 +282,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Teamwork Communications</h5>
-                                    <score-selector :score-value="item.teamworkCommunications.rating" v-on:newselection="item.teamworkCommunications.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.teamworkCommunications.rating"
+                    v-on:newselection="
+                      item.teamworkCommunications.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.teamworkCommunications.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -135,11 +314,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Teamwork Leadership</h5>
-                                    <score-selector :score-value="item.teamworkLeadership.rating" v-on:newselection="item.teamworkLeadership.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.teamworkLeadership.rating"
+                    v-on:newselection="
+                      item.teamworkLeadership.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.teamworkLeadership.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -149,11 +348,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Teamwork Workload</h5>
-                                    <score-selector :score-value="item.teamworkWorkload.rating" v-on:newselection="item.teamworkWorkload.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.teamworkWorkload.rating"
+                    v-on:newselection="
+                      item.teamworkWorkload.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.teamworkWorkload.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -161,11 +380,31 @@
               <b-row>
                 <b-col cols="4">
                   <h5>Knowledge</h5>
-                                    <score-selector :score-value="item.knowledge.rating" v-on:newselection="item.knowledge.rating = $event; updateTotals();"></score-selector>
+                  <score-selector
+                    :score-value="item.knowledge.rating"
+                    v-on:newselection="
+                      item.knowledge.rating = $event;
+                      updateTotals();
+                    "
+                  ></score-selector>
                 </b-col>
                 <b-col cols="8">
-                                    <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
-                                    <b-form-textarea v-model="item.knowledge.improvements" placeholder="AFIs" :rows="1" :max-rows="2" no-resize class="afi"></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>
@@ -176,22 +415,32 @@
             <b-button type="submit" variant="primary">Submit</b-button>
           </b-col>
           <b-col offset="1" cols="1">
-                        <b-button v-on:click="this.addAnotherObservation">Add Scenario</b-button>
+            <b-button v-on:click="this.addAnotherObservation"
+              >Add Scenario</b-button
+            >
           </b-col>
         </b-row>
       </b-form>
-            <b-modal id="submissionModal"
+      <b-modal
+        id="submissionModal"
         ref="submissionModal"
         title="Enter password to confirm submission"
         @ok="handleOk"
-                     @shown="clearPassword">
+        @shown="clearPassword"
+      >
         <form @submit.stop.prevent="handleSubmit">
-                    <b-form-input type="password"
+          <b-form-input
+            type="password"
             placeholder="Enter password"
-                                  v-model="submitPassword"></b-form-input>
+            v-model="submitPassword"
+          ></b-form-input>
         </form>
       </b-modal>
-            <p class="mt-3"><v-icon name="exclamation-circle" scale="1.5" color="gold"/>&nbsp;<i>Leaving this page before submitting will delete all entered data.</i></p>
+      <p class="mt-3">
+        <v-icon name="exclamation-circle" scale="1.5" color="gold" />&nbsp;<i
+          >Leaving this page before submitting will delete all entered data.</i
+        >
+      </p>
     </b-container>
     <b-container v-else>
       <b-row>
@@ -201,7 +450,10 @@
       </b-row>
       <b-row>
         <b-col>
-                    <p>An Observation session has not been correctly setup, please try again.</p>
+          <p>
+            An Observation session has not been correctly setup, please try
+            again.
+          </p>
         </b-col>
       </b-row>
     </b-container>
@@ -216,7 +468,7 @@ import "vue-awesome/icons/times-circle";
 import "vue-awesome/icons/exclamation-circle";
 import { mapState } from "vuex";
 import Vue from "vue";
-import ScoreSelector from "../components/ScoreSelector.vue"
+import ScoreSelector from "../components/ScoreSelector.vue";
 
 export default {
   name: "observation",
@@ -421,18 +673,16 @@ export default {
               tutors: this.tutors,
               person: this.whom,
               type: this.type,
-              observed: this.scenarios.map(x => x.title).join(', '),
+              observed: this.scenarios.map(x => x.title).join(", "),
               scenarios: JSON.parse(JSON.stringify(this.scenarios))
             },
             axiosConfig
           )
-          .then(function(response) {
+          //.then(function(response) {
+          .then(function() {
             self.$router.push("/complete");
-            console.log(response);
-          })
-          .catch(function(error) {
-            console.log(error);
           });
+        //.catch(function(error) {});
       }
       this.clearPassword();
       form.classList.add("was-validated");

frontend/src/views/ObservationComplete.vue

@@ -19,5 +19,4 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

frontend/src/views/StartNew.vue

@@ -1,6 +1,12 @@
 <template>
   <b-container class="home" align-h="center">
-        <b-modal ref="errorModal" class="text-center" centered hide-header hide-footer>
+    <b-modal
+      ref="errorModal"
+      class="text-center"
+      centered
+      hide-header
+      hide-footer
+    >
       <div class="modal-header">
         <h3 class="modal-title w-100">{{ errorStatus }}</h3>
       </div>
@@ -14,7 +20,9 @@
       </div>
     </b-modal>
     <b-container v-if="errorMessage">
-            <b-alert variant="danger" show>An error occurred, refresh and try again.</b-alert>
+      <b-alert variant="danger" show
+        >An error occurred, refresh and try again.</b-alert
+      >
     </b-container>
     <b-container v-if="!loaded && !errorMessage">
       <v-icon name="spinner" spin scale="2" />
@@ -26,25 +34,39 @@
         <b-row align-h="center">
           <b-col>
             <b-form-group label="Site">
-                            <b-form-select :value="site" @input="setSite" :options="siteOptions"
+              <b-form-select
-                                           style="text-align:center;" required></b-form-select>
+                :value="site"
+                @input="setSite"
+                :options="siteOptions"
+                style="text-align:center;"
+                required
+              ></b-form-select>
             </b-form-group>
           </b-col>
         </b-row>
         <b-row align-h="center">
           <b-col>
             <b-form-group label="Participant">
-                            <b-form-input :value="whom" @change="setWhom($event)" type="text"
+              <b-form-input
-                                          style="text-align:center;" required></b-form-input>
+                :value="whom"
+                @change="setWhom($event)"
+                type="text"
+                style="text-align:center;"
+                required
+              ></b-form-input>
             </b-form-group>
           </b-col>
         </b-row>
         <b-row align-h="center">
           <b-col>
             <b-form-group label="Type">
-                            <b-form-select :value="type" @input="setType" style="text-align:center;"
+              <b-form-select
-                                           required>
+                :value="type"
-                                <option :value=null>Select a training type</option>
+                @input="setType"
+                style="text-align:center;"
+                required
+              >
+                <option :value="null">Select a training type</option>
                 <option value="INITIAL">INITIAL</option>
                 <option value="CONTINUING">CONTINUING</option>
               </b-form-select>
@@ -56,7 +78,10 @@
             <b-form-group label="Tutor(s)">
               <p v-if="site == null">Select a site first.</p>
               <v-icon name="spinner" spin v-if="loadingTutors" />
-                            <b-form-checkbox-group v-model="iTutors" :options="tutorOptions"></b-form-checkbox-group>
+              <b-form-checkbox-group
+                v-model="iTutors"
+                :options="tutorOptions"
+              ></b-form-checkbox-group>
             </b-form-group>
           </b-col>
         </b-row>
@@ -119,11 +144,13 @@ export default {
       this.loadingTutors = true;
       this.tutorOptions = [];
       this.getTutors();
-      this.iTutors = this.iTutors.filter(x => this.tutorOptions.indexOf(x) !== -1)
+      this.iTutors = this.iTutors.filter(
+        x => this.tutorOptions.indexOf(x) !== -1
+      );
     },
     iTutors: function() {
       if (this.tutors !== this.iTutors) {
-        this.setTutors(this.iTutors)
+        this.setTutors(this.iTutors);
       }
     }
   },

frontend/src/views/Stats.vue

@@ -1,6 +1,12 @@
 <template>
   <b-container fluid>
-        <b-modal ref="errorModal" class="text-center" centered hide-header hide-footer>
+    <b-modal
+      ref="errorModal"
+      class="text-center"
+      centered
+      hide-header
+      hide-footer
+    >
       <div class="modal-header">
         <h3 class="modal-title w-100">{{ errorStatus }}</h3>
       </div>
@@ -17,25 +23,72 @@
       <b-col>
         <b-button-group size="sm">
           <b-button variant="dark">Select Chart:</b-button>
-              <b-button variant="outline-primary" @click="chartMode = 0; getFilteredAverage()">Trends</b-button>
+          <b-button
-              <b-button variant="outline-primary" @click="chartMode = 1; getFilteredAverage()">AFIs</b-button>
+            variant="outline-primary"
+            @click="
+              chartMode = 0;
+              getFilteredAverage();
+            "
+            >Trends</b-button
+          >
+          <b-button
+            variant="outline-primary"
+            @click="
+              chartMode = 1;
+              getFilteredAverage();
+            "
+            >AFIs</b-button
+          >
         </b-button-group>
       </b-col>
       <b-col>
         <b-button-group size="sm">
           <b-button variant="dark">Quick Interval:</b-button>
-              <b-button variant="outline-primary" v-on:click="setInterval(1, 'w'); getFilteredAverage()">1 Week</b-button>
+          <b-button
-              <b-button variant="outline-primary" v-on:click="setInterval(1, 'M'); getFilteredAverage()">1 Month</b-button>
+            variant="outline-primary"
-              <b-button variant="outline-primary" v-on:click="setInterval(3, 'M'); getFilteredAverage()">3 Months</b-button>
+            v-on:click="
-              <b-button variant="outline-primary" v-on:click="setInterval(1, 'y'); getFilteredAverage()">1 Year</b-button>
+              setInterval(1, 'w');
+              getFilteredAverage();
+            "
+            >1 Week</b-button
+          >
+          <b-button
+            variant="outline-primary"
+            v-on:click="
+              setInterval(1, 'M');
+              getFilteredAverage();
+            "
+            >1 Month</b-button
+          >
+          <b-button
+            variant="outline-primary"
+            v-on:click="
+              setInterval(3, 'M');
+              getFilteredAverage();
+            "
+            >3 Months</b-button
+          >
+          <b-button
+            variant="outline-primary"
+            v-on:click="
+              setInterval(1, 'y');
+              getFilteredAverage();
+            "
+            >1 Year</b-button
+          >
         </b-button-group>
       </b-col>
     </b-row>
-        <observation-search-bar v-on:refresh="getFilteredAverage()"></observation-search-bar>
+    <observation-search-bar
+      v-on:refresh="getFilteredAverage()"
+    ></observation-search-bar>
     <b-row v-if="chartData != null && chartData.labels.length > 0 && !loading">
       <b-col v-if="chartMode == 0">
-                <stats-view v-bind:chartData="chartData"
+        <stats-view
-                            style="position: relative; height:80vh" :options="options"/>
+          v-bind:chartData="chartData"
+          style="position: relative; height:80vh"
+          :options="options"
+        />
       </b-col>
       <b-col v-else-if="chartMode == 1">
         <afi-pie :chartData="chartData" :options="pieOptions" />
@@ -56,8 +109,8 @@
 <script>
 import Vue from "vue";
 import StatsView from "../components/StatsView";
-import AfiPie from "../components/AfiPie"
+import AfiPie from "../components/AfiPie";
-import ObservationSearchBar from "../components/ObservationSearchBar"
+import ObservationSearchBar from "../components/ObservationSearchBar";
 import "vue-awesome/icons/exclamation-circle";
 import "vue-awesome/icons/search";
 
@@ -119,7 +172,7 @@ export default {
         return this.$store.state.search.start;
       },
       set(data) {
-        this.$store.commit('setSearchStartDate', data);
+        this.$store.commit("setSearchStartDate", data);
       }
     },
     endDate: {
@@ -127,7 +180,7 @@ export default {
         return this.$store.state.search.end;
       },
       set(data) {
-        this.$store.commit('setSearchEndDate', data);
+        this.$store.commit("setSearchEndDate", data);
       }
     }
   },

frontend/src/views/ViewObservations.vue

@@ -1,11 +1,17 @@
 <template>
   <b-container fluid>
-    <b-modal ref="errorModal" class="text-center" centered hide-header hide-footer>
+    <b-modal
+      ref="errorModal"
+      class="text-center"
+      centered
+      hide-header
+      hide-footer
+    >
       <div class="modal-header">
         <h3 class="modal-title w-100">{{ errorStatus }}</h3>
       </div>
       <div class="d-block">
-        <br>
+        <br />
         <span style="font-size:20px;" v-html="errorMessage" />
         <button class="btn btn-warning" @click="$refs.errorModal.hide()">
           <v-icon name="exclamation-circle" />Dismiss
@@ -18,47 +24,76 @@
           <b-button variant="dark">Quick Interval:</b-button>
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'w'); getFiltered()"
+            v-on:click="
-          >1 Week</b-button>
+              setInterval(1, 'w');
+              getFiltered();
+            "
+            >1 Week</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'M'); getFiltered()"
+            v-on:click="
-          >1 Month</b-button>
+              setInterval(1, 'M');
+              getFiltered();
+            "
+            >1 Month</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(3, 'M'); getFiltered()"
+            v-on:click="
-          >3 Months</b-button>
+              setInterval(3, 'M');
+              getFiltered();
+            "
+            >3 Months</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'y'); getFiltered()"
+            v-on:click="
-          >1 Year</b-button>
+              setInterval(1, 'y');
+              getFiltered();
+            "
+            >1 Year</b-button
+          >
         </b-button-group>
       </b-col>
     </b-row>
-    <observation-search-bar v-on:refresh="getFiltered()"></observation-search-bar>
+    <observation-search-bar
-    <b-container v-if="observationData != null && observationData.length > 0" fluid>
+      v-on:refresh="getFiltered()"
+    ></observation-search-bar>
+    <b-container
+      v-if="observationData != null && observationData.length > 0"
+      fluid
+    >
       <b-card no-body>
         <b-tabs pills card vertical>
-          <b-tab v-for="(observation, index) in observationData" v-bind:key="index">
+          <b-tab
+            v-for="(observation, index) in observationData"
+            v-bind:key="index"
+          >
             <p slot="title">
               {{ observation.date }}
-              <br>
+              <br />
               {{ observation.whom }} {{ observation.type }}
-              <br>
+              <br />
               {{ shortenedString(observation.observed) }}
             </p>
             <h2>
               {{ observation.date }}, {{ observation.whom }}
-              <br>
+              <br />
               {{ observation.type }} / {{ observation.observed }}
             </h2>
             <b-row align-h="center">
               <h4>
                 Observed by:
-                <span v-bind:key="index" v-for="(tutor, index) in observation.tutors">
+                <span
+                  v-bind:key="index"
+                  v-for="(tutor, index) in observation.tutors"
+                >
                   <i>
                     {{ tutor.name }}
-                    <span v-if="index+1 < observation.tutors.length">,&nbsp;</span>
+                    <span v-if="index + 1 < observation.tutors.length"
+                      >,&nbsp;</span
+                    >
                   </i>
                 </span>
               </h4>
@@ -66,74 +101,112 @@
             <b-row align-h="center">
               <h4>Participant:&nbsp;{{ observation.person.name }}</h4>
             </b-row>
-            <br>
+            <br />
             <b-row class="mb-2">
               <b-col class="centered-image" v-if="observation.monitoring">
                 <img
                   src="../assets/Monitoring.svg"
                   class="image-opacity"
                   v-bind:class="{ scorewarning: observation.monitoring < 2.5 }"
-                >
+                />
-                <div class="image-centered-text">{{ observation.monitoring.toFixed(1) }}</div>
+                <div class="image-centered-text">
+                  {{ observation.monitoring.toFixed(1) }}
+                </div>
               </b-col>
-              <b-col class="centered-image" v-if="observation.controlProcedural">
+              <b-col
+                class="centered-image"
+                v-if="observation.controlProcedural"
+              >
                 <img
                   src="../assets/Control.svg"
                   class="image-opacity"
-                  v-bind:class="{ scorewarning: observation.controlProcedural < 2.5 }"
+                  v-bind:class="{
-                >
+                    scorewarning: observation.controlProcedural < 2.5
-                <div class="image-centered-text">{{ observation.controlProcedural.toFixed(1) }}</div>
+                  }"
+                />
+                <div class="image-centered-text">
+                  {{ observation.controlProcedural.toFixed(1) }}
+                </div>
               </b-col>
               <b-col class="centered-image" v-if="observation.control">
                 <img
                   src="../assets/Control.svg"
                   class="image-opacity"
                   v-bind:class="{ scorewarning: observation.control < 2.5 }"
-                >
+                />
-                <div class="image-centered-text">{{ observation.control.toFixed(1) }}</div>
+                <div class="image-centered-text">
+                  {{ observation.control.toFixed(1) }}
+                </div>
               </b-col>
               <b-col class="centered-image" v-if="observation.conservatism">
                 <img
                   src="../assets/Conservatism.svg"
                   class="image-opacity"
-                  v-bind:class="{ scorewarning: observation.conservatism < 2.5 }"
+                  v-bind:class="{
-                >
+                    scorewarning: observation.conservatism < 2.5
-                <div class="image-centered-text">{{ observation.conservatism.toFixed(1) }}</div>
+                  }"
+                />
+                <div class="image-centered-text">
+                  {{ observation.conservatism.toFixed(1) }}
+                </div>
               </b-col>
-              <b-col class="centered-image" v-if="observation.teamworkCommunications">
+              <b-col
+                class="centered-image"
+                v-if="observation.teamworkCommunications"
+              >
                 <img
                   src="../assets/Teamwork.svg"
                   class="image-opacity"
-                  v-bind:class="{ scorewarning: observation.teamworkCommunications < 2.5 }"
+                  v-bind:class="{
-                >
+                    scorewarning: observation.teamworkCommunications < 2.5
-                <div class="image-centered-text">{{ observation.teamworkCommunications.toFixed(1) }}</div>
+                  }"
+                />
+                <div class="image-centered-text">
+                  {{ observation.teamworkCommunications.toFixed(1) }}
+                </div>
               </b-col>
-              <b-col class="centered-image" v-if="observation.teamworkLeadership">
+              <b-col
+                class="centered-image"
+                v-if="observation.teamworkLeadership"
+              >
                 <img
                   src="../assets/Teamwork.svg"
                   class="image-opacity"
-                  v-bind:class="{ scorewarning: observation.teamworkLeadership < 2.5 }"
+                  v-bind:class="{
-                >
+                    scorewarning: observation.teamworkLeadership < 2.5
-                <div class="image-centered-text">{{ observation.teamworkLeadership.toFixed(1) }}</div>
+                  }"
+                />
+                <div class="image-centered-text">
+                  {{ observation.teamworkLeadership.toFixed(1) }}
+                </div>
               </b-col>
               <b-col class="centered-image" v-if="observation.teamworkWorkload">
                 <img
                   src="../assets/Teamwork.svg"
                   class="image-opacity"
-                  v-bind:class="{ scorewarning: observation.teamworkWorkload < 2.5 }"
+                  v-bind:class="{
-                >
+                    scorewarning: observation.teamworkWorkload < 2.5
-                <div class="image-centered-text">{{ observation.teamworkWorkload.toFixed(1) }}</div>
+                  }"
+                />
+                <div class="image-centered-text">
+                  {{ observation.teamworkWorkload.toFixed(1) }}
+                </div>
               </b-col>
               <b-col class="centered-image" v-if="observation.knowledge">
                 <img
                   src="../assets/Knowledge.svg"
                   class="image-opacity"
                   v-bind:class="{ scorewarning: observation.knowledge < 2.5 }"
-                >
+                />
-                <div class="image-centered-text">{{ observation.knowledge.toFixed(1) }}</div>
+                <div class="image-centered-text">
+                  {{ observation.knowledge.toFixed(1) }}
+                </div>
               </b-col>
             </b-row>
-            <b-row v-for="(entry, index2) in observation.scenarios" v-bind:key="index2">
+            <b-row
+              v-for="(entry, index2) in observation.scenarios"
+              v-bind:key="index2"
+            >
               <b-col class="border">
                 <b-row align-h="center">
                   <h3>{{ entry.title }}</h3>
@@ -149,7 +222,10 @@
                   ></observation-entry>
                 </b-row>
                 <b-row>
-                  <observation-entry :scenariofundamental="entry.control" :description="'Control'"></observation-entry>
+                  <observation-entry
+                    :scenariofundamental="entry.control"
+                    :description="'Control'"
+                  ></observation-entry>
                   <observation-entry
                     :scenariofundamental="entry.conservatism"
                     :description="'Conservatism'"
@@ -182,7 +258,7 @@
       </b-card>
       <b-button class="mt-2" variant="success" @click="getCSV()"
         >CSV Dump</b-button
-      >
+      >&nbsp;
       <b-button class="mt-2" variant="success" @click="sendEmail()"
         >Send as Email</b-button
       >