Added error message/display if getting site list fails.

frontend/src/views/Home.vue

@@ -1,6 +1,25 @@
 <template>
   <b-container class="home" align-h="center">
-    <h1>Training Observations</h1>
+    <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>
@@ -43,11 +62,13 @@
         </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,12 +76,23 @@ export default {
     return {
       siteOptions: [],
       tutorOptions: [],
-      loadingTutors: false
+      loadingTutors: false,
+      loaded: false,
+      errorMessage: null,
+      errorStatus: null
     };
   },
   mounted() {
-    Vue.axios.get("/api/site/all").then(response => {
+    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: {