Browse Source

add error message to stats page

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
712b25bc71
  1. 26
      src/components/World/World.js
  2. 46
      src/views/StatisticsView.vue

26
src/components/World/World.js

@ -32,7 +32,7 @@ function createLight() {
} }
class World { class World {
constructor(container) { constructor(container, vue) {
this.update = this.update.bind(this); this.update = this.update.bind(this);
// Instances of camera, scene, and renderer // Instances of camera, scene, and renderer
@ -72,7 +72,7 @@ class World {
this.scene.add(light, terrain); this.scene.add(light, terrain);
this.loadClaims(); this.loadClaims(vue);
requestAnimationFrame(this.update); requestAnimationFrame(this.update);
@ -95,7 +95,7 @@ class World {
requestAnimationFrame(this.update); requestAnimationFrame(this.update);
} }
async loadClaims() { async loadClaims(vue) {
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
try { try {
const url = const url =
@ -191,21 +191,21 @@ class World {
} }
} else { } else {
console.log( console.log(
"Got bad response status & data of", "Got bad server response status & data of",
resp.status, resp.status,
resp.data 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) { } 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; );
} }
} }

46
src/views/StatisticsView.vue

@ -58,6 +58,17 @@
<!-- Another place to play with the sizing is in Resizer.setSize --> <!-- Another place to play with the sizing is in Resizer.setSize -->
<div id="scene-container" class="h-screen"></div> <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> </section>
</template> </template>
@ -72,7 +83,7 @@ export default class StatisticsView extends Vue {
mounted() { mounted() {
const container = document.querySelector("#scene-container"); const container = document.querySelector("#scene-container");
const newWorld = new World(container); const newWorld = new World(container, this);
newWorld.start(); newWorld.start();
this.world = newWorld; this.world = newWorld;
} }
@ -146,6 +157,39 @@ export default class StatisticsView extends Vue {
//document.body.appendChild(rendererSVG.domElement); //document.body.appendChild(rendererSVG.domElement);
ExportToSVG(rendererSVG, "test.svg"); 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) { function ExportToSVG(rendererSVG, filename) {

Loading…
Cancel
Save