From a3686775730840f5656764421a33880baf274871 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Fri, 21 Sep 2018 10:27:00 +0100
Subject: [PATCH] Added error message to Stats page.

---
 frontend/src/views/Stats.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index 1ae7974..279558c 100644
--- a/frontend/src/views/Stats.vue
+++ b/frontend/src/views/Stats.vue
@@ -1,5 +1,18 @@
 <template>
-  <stats-view v-if="chartData != null && chartData != {}" :data="chartData" :options="options" />
+  <b-container>
+    <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>
+    <stats-view v-if="chartData != null && chartData != {}" :data="chartData" :options="options" />
+  </b-container>
 </template>
 
 <script>
@@ -11,14 +24,23 @@ export default {
   data: function() {
     return {
       chartData: null,
-      options: null
+      options: null,
+      errorStatus: null,
+      errorMessage: null
     };
   },
   methods: {
     getAllTimeAverage: function() {
-      Vue.axios.get("/api/average/all/chartjs").then(response => {
-        this.chartData = response.data;
-      });
+      Vue.axios
+        .get("/api/average/all/chartjs")
+        .then(response => {
+          this.chartData = response.data;
+        })
+        .catch(error => {
+          this.errorStatus = error.response.status;
+          this.errorMessage = error.response.data;
+          this.$refs.errorModal.show();
+        });
     }
   },
   mounted() {