From 248d7ffe49f53f8f2f2fc0887a2a16da423c7f23 Mon Sep 17 00:00:00 2001
From: IsolatedSushi <simen.vanherpt@gmail.com>
Date: Thu, 1 Oct 2020 00:00:13 +0200
Subject: [PATCH] Cleanup
---
backend/server.js | 2 +
frontend/src/App.vue | 8 +++-
frontend/src/components/gRPCPointclient.vue | 41 +++++++++++++++++++
.../src/components/gRPCProjectorClient.vue | 40 ++++++++++++++----
4 files changed, 82 insertions(+), 9 deletions(-)
diff --git a/backend/server.js b/backend/server.js
index 6dfd835..269b4fc 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -26,6 +26,8 @@ function sendPoint(call, callback) {
})
}
+
+//Route the grpc function to the microservice
function sendPointStream(call) {
http.get("http://localhost:8090/generatePointStream", res =>{
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1a0f397..bd87816 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -30,10 +30,11 @@ export default {
ScatterPlot,
Counter },
created(){
+ //To handle to insane amount of points being send over
const interValsource = interval(1000);
- interValsource.subscribe(val => this.distributeStreams(val));
-
+ interValsource.subscribe(val => this.distributeStreams(val));
},
+
data(){
return {
pointList: [],
@@ -41,11 +42,14 @@ export default {
pointCount: 0
}
},
+
methods: {
addPoint: function(point){
this.streamStarted = true;
this.pointList.push(point);
},
+ //Update all the components which rely on the data
+ //Is this the best way to do this?
distributeStreams: function(val){
//REMOVE THIS LATER
if(val == -1){
diff --git a/frontend/src/components/gRPCPointclient.vue b/frontend/src/components/gRPCPointclient.vue
index 51f4f12..4b3bcc1 100644
--- a/frontend/src/components/gRPCPointclient.vue
+++ b/frontend/src/components/gRPCPointclient.vue
@@ -1,3 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+/*THIS IS FOR THE OLD PROTO, REMOVE LATER*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/*eslint-disable*/
<template>
<div>
diff --git a/frontend/src/components/gRPCProjectorClient.vue b/frontend/src/components/gRPCProjectorClient.vue
index 3545dfb..d2024e1 100644
--- a/frontend/src/components/gRPCProjectorClient.vue
+++ b/frontend/src/components/gRPCProjectorClient.vue
@@ -1,6 +1,23 @@
/*eslint-disable*/
<template>
<div>
+ <v-alert
+ v-if="launched"
+ :value="!succesAlert"
+ type="error"
+ transition="scale-transition"
+ dismissible
+ close-icon="mdi-delete"
+ >Cannot connect to server</v-alert>
+
+ <v-alert
+ v-if="launched"
+ :value="succesAlert"
+ type="success"
+ transition="scale-transition"
+ dismissible
+ close-icon="mdi-delete"
+ >Connected to the server!</v-alert>
<h1>Dapr grpc</h1>
<h1 class="my-10">Check the developer console for the messages</h1>
@@ -14,30 +31,40 @@
</template>
<script>
+
+
const { TrainingSet } = require("../generated/projector_pb");
const { ProjectorClient } = require("../generated/projector_grpc_web_pb");
export default {
name: "gRPCProjectorClient",
+
data() {
- return {};
+ return {
+ succesAlert: false,
+ launched: false
+ };
},
+
created: function () {
+ //Setup the server
const connectURL = "http://" + window.location.hostname + ":8080";
- console.log(connectURL);
var client = new ProjectorClient(connectURL, null, null);
-
- console.log(client);
var param = new TrainingSet();
+ //Call the stream
var stream = client.getProjectionPoints(param);
stream.on("data", (response) => {
+ this.succesAlert = true;
+ this.launched = true;
this.$emit("newPoint", response);
});
+
stream.on("error", (err) => {
- this.errorAlert = true;
- this.succesAlert = false;
+ this.succesAlert = false
+ this.launched = true;
+
console.log(
`Unexpected stream error: code = ${err.code}` +
`, message = "${err.message}"`
@@ -45,7 +72,6 @@ export default {
});
},
methods: {
-
},
};
</script>
\ No newline at end of file
--
GitLab