add error message to stats page

src/components/World/World.js

@@ -32,7 +32,7 @@ function createLight() {
 }
 
 class World {
-  constructor(container) {
+  constructor(container, vue) {
     this.update = this.update.bind(this);
 
     // Instances of camera, scene, and renderer
@@ -72,7 +72,7 @@ class World {
 
     this.scene.add(light, terrain);
 
-    this.loadClaims();
+    this.loadClaims(vue);
 
     requestAnimationFrame(this.update);
 
@@ -95,7 +95,7 @@ class World {
     requestAnimationFrame(this.update);
   }
 
-  async loadClaims() {
+  async loadClaims(vue) {
     const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
     try {
       const url =
@@ -191,21 +191,21 @@ class World {
         }
       } else {
         console.log(
-          "Got bad response status & data of",
+          "Got bad server response status & data of",
           resp.status,
           resp.data
         );
-        // this.alertTitle = "Error With Server";
+        vue.setAlert(
-        // this.alertMessage =
+          "Error With Server",
-        //   "Got an error retrieving your given time from the server.";
+          "There was an error retrieving your claims from the server."
-        // this.isAlertVisible = true;
+        );
       }
     } catch (error) {
-      console.log("Got error of", error);
+      console.log("Got exception contacting server:", error);
-      // this.alertTitle = "Error With Server";
+      vue.setAlert(
-      // this.alertMessage =
+        "Error With Server",
-      //   "Got an error retrieving your given time from the server.";
+        "There was a problem retrieving your claims from the server."
-      // this.isAlertVisible = true;
+      );
     }
   }
 

src/views/StatisticsView.vue

@@ -58,6 +58,17 @@
 
     <!-- Another place to play with the sizing is in Resizer.setSize -->
     <div id="scene-container" class="h-screen"></div>
+
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
   </section>
 </template>
 
@@ -72,7 +83,7 @@ export default class StatisticsView extends Vue {
 
   mounted() {
     const container = document.querySelector("#scene-container");
-    const newWorld = new World(container);
+    const newWorld = new World(container, this);
     newWorld.start();
     this.world = newWorld;
   }
@@ -146,6 +157,39 @@ export default class StatisticsView extends Vue {
     //document.body.appendChild(rendererSVG.domElement);
     ExportToSVG(rendererSVG, "test.svg");
   }
+
+  alertTitle = "";
+  alertMessage = "";
+  isAlertVisible = false;
+
+  public setAlert(title, message) {
+    this.alertTitle = title;
+    this.alertMessage = message;
+    this.isAlertVisible = true;
+  }
+
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
 }
 
 function ExportToSVG(rendererSVG, filename) {