From 7b34c5c9ba9b59c0086297bd714c878d6f2a0d2d Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 25 Jul 2019 15:16:52 +0100
Subject: [PATCH] Linter conformance

---
 .../controller/GroupSessionController.kt      |   2 +-
 .../controller/ObservationsController.kt      |   6 +-
 frontend/src/App.vue                          |  48 +-
 frontend/src/components/ObservationEntry.vue  |   4 +-
 .../src/components/ObservationSearchBar.vue   |  20 +-
 frontend/src/components/ScoreSelector.vue     |   1 -
 frontend/src/router.js                        |   4 +-
 frontend/src/views/About.vue                  |  52 +-
 frontend/src/views/DatabaseUnavailable.vue    |  47 +-
 frontend/src/views/GroupSession.vue           |  88 ++-
 frontend/src/views/GroupSessionInput.vue      |  99 ++-
 frontend/src/views/Home.vue                   |  73 +-
 frontend/src/views/NewSite.vue                |  70 +-
 frontend/src/views/NewTutor.vue               |  30 +-
 frontend/src/views/Observation.vue            | 674 ++++++++++++------
 frontend/src/views/ObservationComplete.vue    |  17 +-
 frontend/src/views/StartNew.vue               | 169 +++--
 frontend/src/views/Stats.vue                  | 177 +++--
 frontend/src/views/ViewObservations.vue       | 172 +++--
 19 files changed, 1137 insertions(+), 616 deletions(-)

diff --git a/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/GroupSessionController.kt b/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/GroupSessionController.kt
index bf8b674..83e4e25 100644
--- a/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/GroupSessionController.kt
+++ b/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/GroupSessionController.kt
@@ -178,7 +178,7 @@ class GroupSessionController {
                 observations.add(observation)
             }
             GroupSessionManager.invalidate()
-            if(this::environment.isInitialized && environment.getProperty("smtp.autosendoncomplete")!!.toBoolean())
+            if (this::environment.isInitialized && environment.getProperty("smtp.autosendoncomplete")!!.toBoolean())
                 GlobalScope.launch {
                     if (::mailer.isInitialized)
                         mailer.sendObservationData(observations)
diff --git a/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/ObservationsController.kt b/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/ObservationsController.kt
index e66ccd6..1d95d04 100644
--- a/backend/src/main/kotlin/uk/co/neviyn/observationdatabase/controller/ObservationsController.kt
+++ b/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.
      */
@@ -285,12 +284,11 @@ class ObservationsController {
         logger.info("Sending Observation data by email")
         if (::mailer.isInitialized) {
             val data = getObservations(observationsRequest)
-            if(data.isEmpty())
+            if (data.isEmpty())
                 return false
             mailer.sendObservationData(data)
             return true
-        }
-        else
+        } else
             logger.error("Mailer has not been initialized.")
         return false
     }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1797ee3..368cd28 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,28 +1,28 @@
 <template>
-    <div id="app">
-        <b-navbar toggleable="md" type="dark" variant="info">
-            <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
-            <b-navbar-brand to="/">Observation Database</b-navbar-brand>
-            <b-collapse is-nav id="nav_collapse">
-                <b-navbar-nav>
-                    <b-nav-item to="/new">New Observation</b-nav-item>
-                    <b-nav-item to="/observations">View Observations</b-nav-item>
-                    <b-nav-item to="/stats">Graphs</b-nav-item>
-                </b-navbar-nav>
-                <!-- Right aligned nav items -->
-                <b-navbar-nav class="ml-auto">
-                    <b-nav-item-dropdown text="Admin" right>
-                        <b-dropdown-item to="/newsite">New Site</b-dropdown-item>
-                        <b-dropdown-item to="/newtutor">New Tutor</b-dropdown-item>
-                    </b-nav-item-dropdown>
-                </b-navbar-nav>
-            </b-collapse>
-        </b-navbar>
-        <br/>
-        <transition name="fade" mode="out-in" appear>
-            <router-view/>
-        </transition>
-    </div>
+  <div id="app">
+    <b-navbar toggleable="md" type="dark" variant="info">
+      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
+      <b-navbar-brand to="/">Observation Database</b-navbar-brand>
+      <b-collapse is-nav id="nav_collapse">
+        <b-navbar-nav>
+          <b-nav-item to="/new">New Observation</b-nav-item>
+          <b-nav-item to="/observations">View Observations</b-nav-item>
+          <b-nav-item to="/stats">Graphs</b-nav-item>
+        </b-navbar-nav>
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item-dropdown text="Admin" right>
+            <b-dropdown-item to="/newsite">New Site</b-dropdown-item>
+            <b-dropdown-item to="/newtutor">New Tutor</b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+    <br />
+    <transition name="fade" mode="out-in" appear>
+      <router-view />
+    </transition>
+  </div>
 </template>
 
 <!--suppress CssUnusedSymbol -->
diff --git a/frontend/src/components/ObservationEntry.vue b/frontend/src/components/ObservationEntry.vue
index 5f3c072..2009b0b 100644
--- a/frontend/src/components/ObservationEntry.vue
+++ b/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
diff --git a/frontend/src/components/ObservationSearchBar.vue b/frontend/src/components/ObservationSearchBar.vue
index 4fee044..0e50df5 100644
--- a/frontend/src/components/ObservationSearchBar.vue
+++ b/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>
diff --git a/frontend/src/components/ScoreSelector.vue b/frontend/src/components/ScoreSelector.vue
index 40fb029..4c1f630 100644
--- a/frontend/src/components/ScoreSelector.vue
+++ b/frontend/src/components/ScoreSelector.vue
@@ -33,7 +33,6 @@ export default {
 };
 </script>
 
-
 <style>
 .btn-1 {
   color: #ffffff;
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 88802fb..c4e33b4 100644
--- a/frontend/src/router.js
+++ b/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 GroupSessionInput = () => import("./views/GroupSessionInput.vue")
+const GroupSession = () => import("./views/GroupSession.vue");
+const GroupSessionInput = () => import("./views/GroupSessionInput.vue");
 
 Vue.use(Router);
 
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index e86f8b5..6fac519 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -1,24 +1,36 @@
 <template>
-    <b-container>
-        <b-row>
-            <b-col>
-                <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;
-                <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>
-            </b-col>
-        </b-row>
-    </b-container>
+  <b-container>
+    <b-row>
+      <b-col>
+        <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;
+          <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>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/DatabaseUnavailable.vue b/frontend/src/views/DatabaseUnavailable.vue
index 1857933..c3e0ba4 100644
--- a/frontend/src/views/DatabaseUnavailable.vue
+++ b/frontend/src/views/DatabaseUnavailable.vue
@@ -1,25 +1,30 @@
 <template>
-    <b-container>
-        <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 name="database" style="color: black" scale="5"></v-icon>
-            </b-col>
-        </b-row>
-        <br/>
-        <b-row class="my-3">
-            <b-col>
-                <h1>Database Unavailable</h1>
-            </b-col>
-        </b-row>
-        <b-row>
-            <b-col class="text-center">
-                <p>The database is currently unavailable.</p>
-                <p>Try again later or contact your System Administrator.</p>
-            </b-col>
-        </b-row>
-    </b-container>
+  <b-container>
+    <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 name="database" style="color: black" scale="5"></v-icon>
+      </b-col>
+    </b-row>
+    <br />
+    <b-row class="my-3">
+      <b-col>
+        <h1>Database Unavailable</h1>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col class="text-center">
+        <p>The database is currently unavailable.</p>
+        <p>Try again later or contact your System Administrator.</p>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/GroupSession.vue b/frontend/src/views/GroupSession.vue
index 60424f6..05b7a26 100644
--- a/frontend/src/views/GroupSession.vue
+++ b/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
-          <br>
+        <p>
+          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>
@@ -100,27 +120,31 @@
           <b-row align-h="center">
             <b-col>
               <b-button
-                v-on:click="scenarioTitles.push({data:''})"
+                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) {
-          } else {
+          if (!("error" in response.data)) {
             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) {
-          } else {
+          if (!("error" in response.data)) {
             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);
           });
       }
     }
diff --git a/frontend/src/views/GroupSessionInput.vue b/frontend/src/views/GroupSessionInput.vue
index b3277f4..edf1189 100644
--- a/frontend/src/views/GroupSessionInput.vue
+++ b/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>
+            <b-button v-on:click="attemptReconnect()">Reconnect </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>
-        <b-button variant="primary" v-on:click="actuallySubmit()">Update</b-button>
+        <br />
+        <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,15 +433,9 @@ export default {
         person: self.participant,
         scenarios: self.scenarios
       };
-      Vue.axios
-        .post("/grpob/submit", payload)
-        .then(function(response) {
-          console.log(response);
-        })
-        .catch(function(error) {
-          self.error = error;
-          console.log(error);
-        });
+      Vue.axios.post("/grpob/submit", payload).catch(function(error) {
+        self.error = error;
+      });
     },
     setupSession: function() {
       var self = this;
@@ -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}`)
-      .then(function(response){
-        self.scenarios = response.data;
-      })
-      .catch(function(error){
-        console.log(error)
-      })
+      Vue.axios
+        .get(`/grpob/participant/${self.participant}`)
+        .then(function(response) {
+          self.scenarios = response.data;
+        });
     }
   }
 };
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 2782d23..91c0074 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,31 +1,48 @@
 <template>
-    <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>
-            </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-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-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-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-col>
-        </b-row>
-    </b-container>
+  <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>
+      </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-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-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-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-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
@@ -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"
diff --git a/frontend/src/views/NewSite.vue b/frontend/src/views/NewSite.vue
index 60ae137..33e188e 100644
--- a/frontend/src/views/NewSite.vue
+++ b/frontend/src/views/NewSite.vue
@@ -1,21 +1,35 @@
 <template>
-    <b-container>
-        <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-group>
-            <b-form-group horizontal label="Password">
-                <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">
-            {{ alertText }}
-        </b-alert>
-    </b-container>
+  <b-container>
+    <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-group>
+      <b-form-group horizontal label="Password">
+        <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"
+    >
+      {{ alertText }}
+    </b-alert>
+  </b-container>
 </template>
 
 <script>
@@ -35,17 +49,14 @@ export default {
     };
   },
   mounted() {
-    Vue.axios
-      .get("/site")
-      .then(response => {})
-      .catch(error => {
-        if (error.response.status === 404) {
-          this.$router.push("/dberror");
-          return;
-        }
-        this.alertText = error.response.data;
-        this.alertVariant = "danger";
-      });
+    Vue.axios.get("/site").catch(error => {
+      if (error.response.status === 404) {
+        this.$router.push("/dberror");
+        return;
+      }
+      this.alertText = error.response.data;
+      this.alertVariant = "danger";
+    });
   },
   methods: {
     countDownChanged: function(dismissCountDown) {
@@ -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);
           });
       }
     }
diff --git a/frontend/src/views/NewTutor.vue b/frontend/src/views/NewTutor.vue
index 1af5f61..dc498a0 100644
--- a/frontend/src/views/NewTutor.vue
+++ b/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);
           });
       }
     }
diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index af10fce..4782dc0 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -1,211 +1,463 @@
 <template>
-    <b-container fluid>
-        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-col class="centered-image">
-                        <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-row>
-                        <b-col>
-                            <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-col>
-                    </b-row>
-                    <b-row>
-                        <b-col cols="6" class="border">
-                            <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>
-                                </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 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-col cols="6" class="border">
-                            <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>
-                                </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 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 cols="6" class="border">
-                            <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>
-                                </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 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-col cols="6" class="border">
-                            <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>
-                                </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 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 cols="6" class="border">
-                            <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>
-                                </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 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 cols="4">
-                                    <h5>Teamwork Leadership</h5>
-                                    <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 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 cols="4">
-                                    <h5>Teamwork Workload</h5>
-                                    <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 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 cols="4">
-                                    <h5>Knowledge</h5>
-                                    <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 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-container>
-                <b-row align-h="center">
-                    <b-col cols="1">
-                        <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-col>
-                </b-row>
-            </b-form>
-            <b-modal id="submissionModal"
-                     ref="submissionModal"
-                     title="Enter password to confirm submission"
-                     @ok="handleOk"
-                     @shown="clearPassword">
-                               <form @submit.stop.prevent="handleSubmit">
-                    <b-form-input type="password"
-                                  placeholder="Enter password"
-                                  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>
-        </b-container>
-        <b-container v-else>
-            <b-row>
-                <b-col>
-                    <h2>Error</h2>
+  <b-container fluid>
+    <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-col class="centered-image">
+            <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-row>
+            <b-col>
+              <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-col>
+          </b-row>
+          <b-row>
+            <b-col cols="6" class="border">
+              <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>
                 </b-col>
-            </b-row>
-            <b-row>
-                <b-col>
-                    <p>An Observation session has not been correctly setup, please try again.</p>
+                <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
+                    v-model="item.monitoring.improvements"
+                    placeholder="AFIs"
+                    :rows="1"
+                    :max-rows="2"
+                    no-resize
+                    class="afi"
+                  ></b-form-textarea>
                 </b-col>
-            </b-row>
+              </b-row>
+            </b-col>
+            <b-col cols="6" class="border">
+              <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>
+                </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
+                    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 cols="6" class="border">
+              <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>
+                </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
+                    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-col cols="6" class="border">
+              <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>
+                </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
+                    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 cols="6" class="border">
+              <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>
+                </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
+                    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 cols="4">
+                  <h5>Teamwork Leadership</h5>
+                  <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
+                    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 cols="4">
+                  <h5>Teamwork Workload</h5>
+                  <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
+                    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 cols="4">
+                  <h5>Knowledge</h5>
+                  <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
+                    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-container>
+        <b-row align-h="center">
+          <b-col cols="1">
+            <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-col>
+        </b-row>
+      </b-form>
+      <b-modal
+        id="submissionModal"
+        ref="submissionModal"
+        title="Enter password to confirm submission"
+        @ok="handleOk"
+        @shown="clearPassword"
+      >
+        <form @submit.stop.prevent="handleSubmit">
+          <b-form-input
+            type="password"
+            placeholder="Enter password"
+            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>
     </b-container>
+    <b-container v-else>
+      <b-row>
+        <b-col>
+          <h2>Error</h2>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <p>
+            An Observation session has not been correctly setup, please try
+            again.
+          </p>
+        </b-col>
+      </b-row>
+    </b-container>
+  </b-container>
 </template>
 
 <script>
@@ -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");
@@ -450,7 +700,7 @@ export default {
 }
 
 .scorewarning {
-    background-color: red;
+  background-color: red;
 }
 .top-buffer {
   margin-top: 10px;
@@ -506,6 +756,6 @@ img {
 }
 
 h5 {
-    padding-top: 2px;
+  padding-top: 2px;
 }
 </style>
diff --git a/frontend/src/views/ObservationComplete.vue b/frontend/src/views/ObservationComplete.vue
index ed467c4..807d0f4 100644
--- a/frontend/src/views/ObservationComplete.vue
+++ b/frontend/src/views/ObservationComplete.vue
@@ -1,11 +1,11 @@
 <template>
-    <b-container>
-        <h2>Submission Complete</h2>
-        <p>{{ type }}/{{ whom }} has been submitted successfully.</p>
-        <b-button size="lg" variant="primary" to="/new">
-            Start New Observation
-        </b-button>
-    </b-container>
+  <b-container>
+    <h2>Submission Complete</h2>
+    <p>{{ type }}/{{ whom }} has been submitted successfully.</p>
+    <b-button size="lg" variant="primary" to="/new">
+      Start New Observation
+    </b-button>
+  </b-container>
 </template>
 
 <script>
@@ -19,5 +19,4 @@ export default {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/StartNew.vue b/frontend/src/views/StartNew.vue
index edb1dae..f577461 100644
--- a/frontend/src/views/StartNew.vue
+++ b/frontend/src/views/StartNew.vue
@@ -1,73 +1,98 @@
 <template>
-    <b-container class="home" align-h="center">
-        <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/>
-                <span style="font-size:20px;" v-html="errorMessage"/>
-                <button class="btn btn-warning" @click="$refs.errorModal.hide()">
-                    <v-icon name="exclamation-circle"/>
-                    Dismiss
-                </button>
-            </div>
-        </b-modal>
-        <b-container v-if="errorMessage">
-            <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"/>
-            <br/><br/>
-            <p>Loading Site Data</p>
-        </b-container>
-        <b-container v-if="loaded">
-            <b-form @submit="onSubmit" id="submission-form" novalidate>
-                <b-row align-h="center">
-                    <b-col>
-                        <b-form-group label="Site">
-                            <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"
-                                          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;"
-                                           required>
-                                <option :value=null>Select a training type</option>
-                                <option value="INITIAL">INITIAL</option>
-                                <option value="CONTINUING">CONTINUING</option>
-                            </b-form-select>
-                        </b-form-group>
-                    </b-col>
-                </b-row>
-                <b-row align-h="center">
-                    <b-col>
-                        <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-group>
-                    </b-col>
-                </b-row>
-                <b-row align-h="center">
-                    <b-col>
-                        <b-button type="submit" size="lg" variant="primary">Start</b-button>
-                    </b-col>
-                </b-row>
-            </b-form>
-        </b-container>
+  <b-container class="home" align-h="center">
+    <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 />
+        <span style="font-size:20px;" v-html="errorMessage" />
+        <button class="btn btn-warning" @click="$refs.errorModal.hide()">
+          <v-icon name="exclamation-circle" />
+          Dismiss
+        </button>
+      </div>
+    </b-modal>
+    <b-container v-if="errorMessage">
+      <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" />
+      <br /><br />
+      <p>Loading Site Data</p>
+    </b-container>
+    <b-container v-if="loaded">
+      <b-form @submit="onSubmit" id="submission-form" novalidate>
+        <b-row align-h="center">
+          <b-col>
+            <b-form-group label="Site">
+              <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"
+                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;"
+                required
+              >
+                <option :value="null">Select a training type</option>
+                <option value="INITIAL">INITIAL</option>
+                <option value="CONTINUING">CONTINUING</option>
+              </b-form-select>
+            </b-form-group>
+          </b-col>
+        </b-row>
+        <b-row align-h="center">
+          <b-col>
+            <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-group>
+          </b-col>
+        </b-row>
+        <b-row align-h="center">
+          <b-col>
+            <b-button type="submit" size="lg" variant="primary">Start</b-button>
+          </b-col>
+        </b-row>
+      </b-form>
+    </b-container>
+  </b-container>
 </template>
 
 <script>
@@ -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)
+      if (this.tutors !== this.iTutors) {
+        this.setTutors(this.iTutors);
       }
     }
   },
diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index cee40cb..436f8a6 100644
--- a/frontend/src/views/Stats.vue
+++ b/frontend/src/views/Stats.vue
@@ -1,63 +1,116 @@
 <template>
-    <b-container fluid>
-        <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/>
-                <span style="font-size:20px;" v-html="errorMessage"/>
-                <button class="btn btn-warning" @click="$refs.errorModal.hide()">
-                    <v-icon name="exclamation-circle"/>
-                    Dismiss
-                </button>
-            </div>
-        </b-modal>
-        <b-row class="pb-2">
-          <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 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 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>
-        <b-row v-if="chartData != null && chartData.labels.length > 0 && !loading">
-            <b-col v-if="chartMode == 0">
-                <stats-view 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"/>
-            </b-col>
-        </b-row>
-        <b-row v-else-if="loading">
-          Loading...
-        </b-row>
-        <b-row v-else>
-          <b-col>
-            <v-icon name="search"></v-icon>
-            <p>No data found with the given search parameters.</p>
-          </b-col>
-        </b-row>
-    </b-container>
+  <b-container fluid>
+    <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 />
+        <span style="font-size:20px;" v-html="errorMessage" />
+        <button class="btn btn-warning" @click="$refs.errorModal.hide()">
+          <v-icon name="exclamation-circle" />
+          Dismiss
+        </button>
+      </div>
+    </b-modal>
+    <b-row class="pb-2">
+      <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
+            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
+            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>
+    <b-row v-if="chartData != null && chartData.labels.length > 0 && !loading">
+      <b-col v-if="chartMode == 0">
+        <stats-view
+          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" />
+      </b-col>
+    </b-row>
+    <b-row v-else-if="loading">
+      Loading...
+    </b-row>
+    <b-row v-else>
+      <b-col>
+        <v-icon name="search"></v-icon>
+        <p>No data found with the given search parameters.</p>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
 import Vue from "vue";
 import StatsView from "../components/StatsView";
-import AfiPie from "../components/AfiPie"
-import ObservationSearchBar from "../components/ObservationSearchBar"
+import AfiPie from "../components/AfiPie";
+import ObservationSearchBar from "../components/ObservationSearchBar";
 import "vue-awesome/icons/exclamation-circle";
 import "vue-awesome/icons/search";
 
@@ -106,7 +159,7 @@ export default {
           ]
         }
       },
-      pieOptions:{
+      pieOptions: {
         maintainAspectRatio: false
       },
       errorStatus: null,
@@ -115,19 +168,19 @@ export default {
   },
   computed: {
     startDate: {
-      get(){
+      get() {
         return this.$store.state.search.start;
       },
-      set(data){
-        this.$store.commit('setSearchStartDate', data);
+      set(data) {
+        this.$store.commit("setSearchStartDate", data);
       }
     },
     endDate: {
-      get(){
+      get() {
         return this.$store.state.search.end;
       },
-      set(data){
-        this.$store.commit('setSearchEndDate', data);
+      set(data) {
+        this.$store.commit("setSearchEndDate", data);
       }
     }
   },
@@ -154,7 +207,7 @@ export default {
           this.loading = false;
         });
     },
-    setInterval: function(amount, timeType){
+    setInterval: function(amount, timeType) {
       this.endDate = moment();
       this.startDate = moment().subtract(amount, timeType);
     }
diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 8c76528..8af0fd3 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -1,14 +1,20 @@
 <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>
-        <span style="font-size:20px;" v-html="errorMessage"/>
+        <br />
+        <span style="font-size:20px;" v-html="errorMessage" />
         <button class="btn btn-warning" @click="$refs.errorModal.hide()">
-          <v-icon name="exclamation-circle"/>Dismiss
+          <v-icon name="exclamation-circle" />Dismiss
         </button>
       </div>
     </b-modal>
@@ -18,47 +24,76 @@
           <b-button variant="dark">Quick Interval:</b-button>
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'w'); getFiltered()"
-          >1 Week</b-button>
+            v-on:click="
+              setInterval(1, 'w');
+              getFiltered();
+            "
+            >1 Week</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'M'); getFiltered()"
-          >1 Month</b-button>
+            v-on:click="
+              setInterval(1, 'M');
+              getFiltered();
+            "
+            >1 Month</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(3, 'M'); getFiltered()"
-          >3 Months</b-button>
+            v-on:click="
+              setInterval(3, 'M');
+              getFiltered();
+            "
+            >3 Months</b-button
+          >
           <b-button
             variant="outline-primary"
-            v-on:click="setInterval(1, 'y'); getFiltered()"
-          >1 Year</b-button>
+            v-on:click="
+              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>
-    <b-container v-if="observationData != null && observationData.length > 0" fluid>
+    <observation-search-bar
+      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 }"
-                >
-                <div class="image-centered-text">{{ observation.controlProcedural.toFixed(1) }}</div>
+                  v-bind:class="{
+                    scorewarning: observation.controlProcedural < 2.5
+                  }"
+                />
+                <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 }"
-                >
-                <div class="image-centered-text">{{ observation.conservatism.toFixed(1) }}</div>
+                  v-bind:class="{
+                    scorewarning: observation.conservatism < 2.5
+                  }"
+                />
+                <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 }"
-                >
-                <div class="image-centered-text">{{ observation.teamworkCommunications.toFixed(1) }}</div>
+                  v-bind:class="{
+                    scorewarning: observation.teamworkCommunications < 2.5
+                  }"
+                />
+                <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 }"
-                >
-                <div class="image-centered-text">{{ observation.teamworkLeadership.toFixed(1) }}</div>
+                  v-bind:class="{
+                    scorewarning: observation.teamworkLeadership < 2.5
+                  }"
+                />
+                <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 }"
-                >
-                <div class="image-centered-text">{{ observation.teamworkWorkload.toFixed(1) }}</div>
+                  v-bind:class="{
+                    scorewarning: observation.teamworkWorkload < 2.5
+                  }"
+                />
+                <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
       >