From 69204b4234e0ba74b1cc0dbe04445e3d911eb7a9 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Tue, 9 Oct 2018 13:51:12 +0100
Subject: [PATCH] Added page for if database connection is unavailable.

---
 frontend/src/router.js                     |  6 ++++
 frontend/src/views/DatabaseUnavailable.vue | 35 ++++++++++++++++++++++
 frontend/src/views/Home.vue                |  2 +-
 frontend/src/views/NewSite.vue             | 14 +++++++++
 frontend/src/views/NewTutor.vue            |  4 +++
 frontend/src/views/StartNew.vue            | 13 ++++++++
 frontend/src/views/Stats.vue               |  4 +++
 frontend/src/views/ViewObservations.vue    |  4 +++
 8 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/DatabaseUnavailable.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 9375a5a..71b3ceb 100644
--- a/frontend/src/router.js
+++ b/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
         }
     ]
 });
diff --git a/frontend/src/views/DatabaseUnavailable.vue b/frontend/src/views/DatabaseUnavailable.vue
new file mode 100644
index 0000000..2e024d3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index b600cba..eca5b8d 100644
--- a/frontend/src/views/Home.vue
+++ b/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">
diff --git a/frontend/src/views/NewSite.vue b/frontend/src/views/NewSite.vue
index 10838ae..9690238 100644
--- a/frontend/src/views/NewSite.vue
+++ b/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;
diff --git a/frontend/src/views/NewTutor.vue b/frontend/src/views/NewTutor.vue
index 4ac8a96..0f416b9 100644
--- a/frontend/src/views/NewTutor.vue
+++ b/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";
       });
diff --git a/frontend/src/views/StartNew.vue b/frontend/src/views/StartNew.vue
index 82cabd5..2022eb4 100644
--- a/frontend/src/views/StartNew.vue
+++ b/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();
                     });
                 }
             },
diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index 00af6c9..4e345d1 100644
--- a/frontend/src/views/Stats.vue
+++ b/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();
diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 5dd159e..6c4094a 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/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);
                 });
         },