Added page for if database connection is unavailable.

frontend/src/router.js

@@ -8,6 +8,7 @@ import NewSite from "./views/NewSite.vue";
 import NewTutor from "./views/NewTutor.vue";
 import ViewObservations from "./views/ViewObservations.vue";
 import ObservationComplete from "./views/ObservationComplete.vue";
+import DBError from "./views/DatabaseUnavailable.vue"
 
 Vue.use(Router);
 
@@ -52,6 +53,11 @@ export default new Router({
             path: "/complete",
             name: "complete",
             component: ObservationComplete
+        },
+        {
+            path: "/dberror",
+            name: "dberror",
+            component: DBError
         }
     ]
 });

frontend/src/views/DatabaseUnavailable.vue

@@ -0,0 +1,35 @@
+<template>
+    <b-container>
+        <b-row class="my-3">
+            <b-col>
+                <v-icon label="Database Error" scale="5">
+                    <v-icon name="database" style="color: black"></v-icon>
+                    <v-icon name="ban" scale="2" style="color: red"></v-icon>
+                </v-icon>
+            </b-col>
+        </b-row>
+        <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>
+    import 'vue-awesome/icons/database'
+    import 'vue-awesome/icons/ban'
+    export default {
+        name: "DatabaseUnavailable"
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/Home.vue

@@ -7,7 +7,7 @@
         </b-row>
         <b-row class="my-3">
             <b-col>
-                <b-button size="lg" to="/new">Start a new observation</b-button>
+                <b-button size="lg" to="/new" variant="primary">Start a new observation</b-button>
             </b-col>
         </b-row>
         <b-row class="my-3">

frontend/src/views/NewSite.vue

@@ -33,6 +33,20 @@
                 submissionPassword: ""
             };
         },
+        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";
+                });
+        },
         methods: {
             countDownChanged: function (dismissCountDown) {
                 this.dismissCountDown = dismissCountDown;

frontend/src/views/NewTutor.vue

@@ -43,6 +43,10 @@ export default {
         this.siteOptions = response.data;
       })
       .catch(error => {
+          if(error.response.status === 404){
+              this.$router.push("/dberror");
+              return;
+          }
         this.alertText = error.response.data;
         this.alertVariant = "danger";
       });

frontend/src/views/StartNew.vue

@@ -106,6 +106,10 @@
                     this.loaded = true;
                 })
                 .catch(error => {
+                    if(error.response.status === 404){
+                        this.$router.push("/dberror");
+                        return;
+                    }
                     this.errorStatus = error.response.status;
                     this.errorMessage = error.response.data;
                     this.$refs.errorModal.show();
@@ -136,6 +140,15 @@
                     Vue.axios.get("/site/" + this.site + "/tutors").then(response => {
                         this.tutorOptions = response.data;
                         this.loadingTutors = false;
+                    }).catch(error => {
+                        if(error.response.status === 404){
+                            this.$router.push("/dberror");
+                            return;
+
+                        }
+                        this.errorStatus = error.response.status;
+                        this.errorMessage = error.response.data;
+                        this.$refs.errorModal.show();
                     });
                 }
             },

frontend/src/views/Stats.vue

@@ -161,6 +161,10 @@
                     this.siteOptions = response.data;
                 })
                 .catch(error => {
+                    if(error.response.status === 404){
+                        this.$router.push("/dberror");
+                        return;
+                    }
                     this.errorStatus = error.response.status;
                     this.errorMessage = error.response.data;
                     this.$refs.errorModal.show();

frontend/src/views/ViewObservations.vue

@@ -101,6 +101,10 @@
                     this.siteOptions = response.data;
                 })
                 .catch(error => {
+                    if(error.response.status === 404){
+                        this.$router.push("/dberror");
+                        return;
+                    }
                     console.log(error);
                 });
         },