From d7b018638fc8ff2ac3e68bf1c6121ff0cb121fff Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Fri, 21 Sep 2018 10:11:57 +0100
Subject: [PATCH] Added error message/display if getting site list fails.

---
 frontend/src/views/Home.vue | 124 +++++++++++++++++++++++-------------
 1 file changed, 78 insertions(+), 46 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 2544c76..2fcc147 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,53 +1,74 @@
 <template>
   <b-container class="home" align-h="center">
-    <h1>Training Observations</h1>
-    <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;"></b-form-select>
-          </b-form-group>
-        </b-col>
-      </b-row>
-      <b-row align-h="center">
-        <b-col>
-          <b-form-group label="Description">
-            <b-form-input :value="description" @input="setDescription" type="text" style="text-align:center;"></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;">
-              <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 :value="tutors" @input="setTutors" :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-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;"></b-form-select>
+            </b-form-group>
+          </b-col>
+        </b-row>
+        <b-row align-h="center">
+          <b-col>
+            <b-form-group label="Description">
+              <b-form-input :value="description" @input="setDescription" type="text" style="text-align:center;"></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;">
+                <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 :value="tutors" @input="setTutors" :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>
 import Vue from "vue";
 import "vue-awesome/icons/spinner";
+import "vue-awesome/icons/exclamation-circle";
 import { mapState, mapMutations } from "vuex";
 export default {
   name: "home",
@@ -55,13 +76,24 @@ export default {
     return {
       siteOptions: [],
       tutorOptions: [],
-      loadingTutors: false
+      loadingTutors: false,
+      loaded: false,
+      errorMessage: null,
+      errorStatus: null
     };
   },
   mounted() {
-    Vue.axios.get("/api/site/all").then(response => {
-      this.siteOptions = response.data;
-    });
+    Vue.axios
+      .get("/api/site/all")
+      .then(response => {
+        this.siteOptions = response.data;
+        this.loaded = true;
+      })
+      .catch(error => {
+        this.errorStatus = error.response.status;
+        this.errorMessage = error.response.data;
+        this.$refs.errorModal.show();
+      });
   },
   computed: {
     ...mapState(["site", "description", "type", "tutors"])