expanded examples to latest dasf messaging

package.json

@@ -13,13 +13,13 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "dasf-web": "0.1.0",
-    "nuxt": "2.15.2",
     "@mdi/font": "5.9.55",
     "@nuxtjs/axios": "5.13.6",
     "@nuxtjs/style-resources": "1.1.0",
     "axios": "0.21.1",
     "d3": "5.16.0",
+    "dasf-web": "0.2.2",
+    "nuxt": "2.15.2",
     "nuxt-client-init-module": "0.3.0",
     "ol": "6.4.3",
     "vue-class-component": "7.2.6",

pages/workflow.vue

 <template>
-  <v-container style="margin-bottom: 35px; padding-top: 100px; padding-bottom: 20px;">
-    <v-overlay :value="progressReport != null && showProgress">
-      <v-card>
-        <progress-tree :progress="progressReport" title="Request Progress" />
-        <v-card-actions>
-          <v-spacer />
-          <v-btn color="primary" @click.native="showProgress = false"
-            >Dismiss</v-btn
-          >
-          <v-spacer />
-        </v-card-actions>
+  <v-container
+    style="margin-bottom: 35px; padding-top: 100px; padding-bottom: 20px"
+  >
+    <v-overlay :value="!exampleModule.isConnected()">
+      <v-card loading>
+        <v-card-text>
+          please wait while the connection to the backend module is
+          established...
+        </v-card-text>
       </v-card>
     </v-overlay>
 
@@ -22,36 +20,78 @@
         :zoom="16"
         style="height: 600px; margin-bottom: 10px"
       />
-    </v-row>
-    <v-row
-      v-if="!exampleModule.isConnected()"
-      style="justify-content: center; align-items: center"
-    >
-      <span
-        >please wait while the connection to the backend module is
-        established...</span
-      >
-    </v-row>
-    <v-row style="justify-content: center; align-items: center">
-      <v-btn
-        color="primary"
-        :disabled="!exampleModule.isConnected()"
-        :loading="!exampleModule.isConnected()"
-        @click.native="sendRequest"
-        >send request</v-btn
-      >
-    </v-row>
-    <v-row
-      v-if="exampleModule.isConnected()"
-      style="justify-content: center; align-items: center"
-    >
-      <span
-        >The response message is printed in the developer console only!
-        (ctrl+shift+i)</span
-      >
     </v-row> -->
-    <v-row>
-      <radar-chart chart-title="radar chart" />
+    <v-row style="justify-content: center; align-items: center">
+      <v-col>
+        <v-card color="teal">
+          <v-card-title>Hello World Demo</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="greetMessage"
+              label="Greet Message"
+              hint="Type in a greet message to the hello world RCP module"
+              persistent-hint
+            />
+            <v-text-field
+              v-model="repeatMessage"
+              label="Repeat Message"
+              :hint="
+                'Type in a repeat message, it will be repeated ' +
+                repeat +
+                ' times'
+              "
+              persistent-hint
+            />
+            <v-select
+              v-model="repeat"
+              :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+              label="Repeat"
+              hint="Select the number of greet repeatitions"
+              persistent-hint
+            />
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              :disabled="!exampleModule.isConnected()"
+              :loading="!exampleModule.isConnected()"
+              @click.native="sendHelloWorldRequest"
+              >send hello_world request</v-btn
+            >
+            <v-spacer />
+          </v-card-actions>
+          <div v-if="helloWorldResponse != null">
+            <v-card-title> Response </v-card-title>
+            <v-card-text>
+              <pre>{{ helloWorldResponse }}</pre>
+            </v-card-text>
+          </div>
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card color="blue-grey">
+          <v-card-title>Progress Report Demo</v-card-title>
+          <v-card-text v-if="progressReport != null">
+            <progress-tree
+              class="blue-grey darken-2"
+              :progress="progressReport"
+              title="Progress Report"
+            />
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              :disabled="!exampleModule.isConnected()"
+              :loading="!exampleModule.isConnected()"
+              @click.native="sendProgressReportRequest"
+              >send progress report request</v-btn
+            >
+            <v-spacer
+          /></v-card-actions>
+        </v-card>
+      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -65,33 +105,70 @@
 <script lang='ts'>
 import { Component, Vue } from 'vue-property-decorator';
 // import Demap from 'dasf-web/lib/map/Demap.vue';
-import RadarChart from 'dasf-web/lib/charts/RadarChart.vue';
+// import RadarChart from 'dasf-web/lib/charts/RadarChart.vue';
 import ProgressTree from 'dasf-web/lib/messaging/ProgressTree.vue';
 import ExampleModuleMessaging from 'dasf-web/lib/messaging/ExampleModuleMessaging';
 import { PulsarProgressReport } from 'dasf-web/lib/messaging/PulsarMessages';
 
 @Component({
-  components: { RadarChart, ProgressTree },
+  components: { ProgressTree },
 })
 export default class Workflow extends Vue {
   private exampleModule: ExampleModuleMessaging = new ExampleModuleMessaging();
+
+  private repeat = 4;
+  private greetMessage = 'Hello World';
+  private repeatMessage = 'Repeat Me';
+  private helloWorldResponse: Record<string, unknown> = null;
+
   private progressReport: PulsarProgressReport = null;
-  private showProgress = false;
-  private radarChartData: Map<string, Map<string, number>> = Workflow.initData();
+  // private radarChartData: Map<string, Map<string, number>> =
+  //   Workflow.initData();
+
+  // private static initData(): Map<string, Map<string, number>> {
+  //   const e1 = new Map([
+  //     ['size', 3],
+  //     ['height', 10],
+  //     ['width', 100],
+  //   ]);
+  //   const e2 = new Map([
+  //     ['size', 1],
+  //     ['height', 20],
+  //     ['width', 20],
+  //   ]);
+  //   const e3 = new Map([
+  //     ['size', 2],
+  //     ['height', 5],
+  //     ['width', 10],
+  //   ]);
 
-  private static initData(): Map<string, Map<string, number>> {
-    const e1 = new Map([['size', 3], ['height', 10], ['width', 100]]);
-    const e2 = new Map([['size', 1], ['height', 20], ['width', 20]]);
-    const e3 = new Map([['size', 2], ['height', 5], ['width', 10]]);
+  //   return new Map([
+  //     ['first', e1],
+  //     ['second', e2],
+  //     ['third', e3],
+  //   ]);
+  // }
 
-    return new Map([['first', e1], ['second', e2], ['third', e3]]);
+  protected sendHelloWorldRequest(): void {
+    this.exampleModule
+      .sendHelloWorldRequest(this.greetMessage, this.repeatMessage, this.repeat)
+      .then((response: Record<string, unknown>) => {
+        this.helloWorldResponse = response;
+      })
+      .catch((error: string) => {
+        console.error(error);
+        this.helloWorldResponse = { error: error };
+      });
   }
 
-  protected sendRequest(): void {
-    this.showProgress = true;
-    this.exampleModule.sendRequest((progressReport: PulsarProgressReport) => {
-      this.progressReport = progressReport;
-    });
+  protected sendProgressReportRequest(): void {
+    this.exampleModule
+      .sendProgressReportRequest((progressReport: PulsarProgressReport) => {
+        this.progressReport = progressReport;
+      })
+      .catch((error: string) => {
+        console.error(error);
+      });
   }
 }
 </script>