From 263fce425d73eb7c888905e378dfaf5e4e509226 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Mon, 25 Jan 2021 19:31:41 +1100
Subject: [PATCH] refine stats ui

---
 www/layouts/default.vue | 24 ++++++++++++++++++++++++
 www/pages/index.vue     |  3 +++
 www/pages/stats/_id.vue |  8 +++++++-
 www/store/error.js      |  9 +++++++++
 www/store/stats.js      | 13 +++++++++----
 5 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 www/store/error.js

diff --git a/www/layouts/default.vue b/www/layouts/default.vue
index c9feb8a..8e2f66e 100644
--- a/www/layouts/default.vue
+++ b/www/layouts/default.vue
@@ -44,6 +44,21 @@
         <a href="mailto:me@toozhao.com" class="contact">Contact me</a>
       </b-col>
     </b-row>
+    <template #overlay>
+        <div class="text-center" v-if="hasError">
+          <b-icon icon="stopwatch" font-scale="3" animation="cylon"></b-icon>
+          <p id="error-detail">{{error}}</p>
+          <b-button
+            ref="cancel"
+            variant="outline-light"
+            size="sm"
+            aria-describedby="cancel-label"
+            href="/"
+          >
+            Back to homepage
+          </b-button>
+        </div>
+      </template>
   </b-overlay>
 </template>
 
@@ -77,6 +92,12 @@ export default Vue.extend({
     isLoading() {
       return this.$store.state.loading.loading;
     },
+    hasError() {
+      return this.$store.state.error.error !== "";
+    },
+    error(){
+      return this.$store.state.error.error;
+    },
     isProduction() {
       return this.$config.env === "production";
     },
@@ -141,4 +162,7 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
+#error-detail {
+  color: #fff;
+}
 </style>
diff --git a/www/pages/index.vue b/www/pages/index.vue
index 5decfce..dd36fb9 100644
--- a/www/pages/index.vue
+++ b/www/pages/index.vue
@@ -179,6 +179,9 @@ export default Vue.extend({
       activeBadgeColor: "green"
     };
   },
+  mounted() {
+    this.$store.commit("error/setError", "")
+  },
   computed: {
     badge() {
       return this.$store.state.badges.currentBadge;
diff --git a/www/pages/stats/_id.vue b/www/pages/stats/_id.vue
index f06fc3c..f4939b7 100644
--- a/www/pages/stats/_id.vue
+++ b/www/pages/stats/_id.vue
@@ -84,12 +84,18 @@ export default {
               borderWidth: 2,
               borderColor: 'rgb(49, 197, 83)',
               fill: false,
-              lineTension: 1
+              lineTension: 0.1
             }
           ]
         };
         this.$store.commit("loading/updateLoading");
         this.loaded = true;
+      },
+      errorCallback: (error) => {
+        console.log(error.response.data.msg)
+        this.$store.commit("error/setError", error.response.data.msg)
+        // this.$store.commit("loading/updateLoading");
+        this.loaded = false;
       }
     });
   },
diff --git a/www/store/error.js b/www/store/error.js
new file mode 100644
index 0000000..c40c810
--- /dev/null
+++ b/www/store/error.js
@@ -0,0 +1,9 @@
+export const state = () => ({
+  error: ""
+});
+
+export const mutations = {
+  setError(state, error) {
+    state.error = error;
+  }
+};
diff --git a/www/store/stats.js b/www/store/stats.js
index efa8f37..087b8e2 100644
--- a/www/store/stats.js
+++ b/www/store/stats.js
@@ -9,10 +9,15 @@ export const mutations = {
 };
 
 export const actions = {
-  async getBadgeStats(context, {badgeId, callback}) {
-    const result = await this.$axios.$get(`/api/stats/${badgeId}`);
-    context.commit("setStats", result);
-    callback(result);
+  async getBadgeStats(context, {badgeId, callback, errorCallback}) {
+    try{
+      const result = await this.$axios.$get(`/api/stats/${badgeId}`);
+      context.commit("setStats", result);
+      callback(result);
+    }catch (error) {
+      errorCallback(error)
+    }
+
   }
 
 };