Cleanup

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 =>{
 

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){

frontend/src/components/gRPCPointclient.vue

+
+
+
+
+
+
+
+
+
+
+
+/*THIS IS FOR THE OLD PROTO, REMOVE LATER*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /*eslint-disable*/
 <template>
   <div>

frontend/src/components/gRPCProjectorClient.vue

 /*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