Commit b19834cd authored by Daniel Eggert's avatar Daniel Eggert
Browse files

expanded examples to latest dasf messaging

parent 8bdd8063
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
"generate": "nuxt generate" "generate": "nuxt generate"
}, },
"dependencies": { "dependencies": {
"dasf-web": "0.1.0",
"nuxt": "2.15.2",
"@mdi/font": "5.9.55", "@mdi/font": "5.9.55",
"@nuxtjs/axios": "5.13.6", "@nuxtjs/axios": "5.13.6",
"@nuxtjs/style-resources": "1.1.0", "@nuxtjs/style-resources": "1.1.0",
"axios": "0.21.1", "axios": "0.21.1",
"d3": "5.16.0", "d3": "5.16.0",
"dasf-web": "0.2.2",
"nuxt": "2.15.2",
"nuxt-client-init-module": "0.3.0", "nuxt-client-init-module": "0.3.0",
"ol": "6.4.3", "ol": "6.4.3",
"vue-class-component": "7.2.6", "vue-class-component": "7.2.6",
......
<template> <template>
<v-container style="margin-bottom: 35px; padding-top: 100px; padding-bottom: 20px;"> <v-container
<v-overlay :value="progressReport != null && showProgress"> style="margin-bottom: 35px; padding-top: 100px; padding-bottom: 20px"
<v-card> >
<progress-tree :progress="progressReport" title="Request Progress" /> <v-overlay :value="!exampleModule.isConnected()">
<v-card-actions> <v-card loading>
<v-spacer /> <v-card-text>
<v-btn color="primary" @click.native="showProgress = false" please wait while the connection to the backend module is
>Dismiss</v-btn established...
> </v-card-text>
<v-spacer />
</v-card-actions>
</v-card> </v-card>
</v-overlay> </v-overlay>
...@@ -22,36 +20,78 @@ ...@@ -22,36 +20,78 @@
:zoom="16" :zoom="16"
style="height: 600px; margin-bottom: 10px" 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> -->
<v-row> <v-row style="justify-content: center; align-items: center">
<radar-chart chart-title="radar chart" /> <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-row>
</v-container> </v-container>
</template> </template>
...@@ -65,33 +105,70 @@ ...@@ -65,33 +105,70 @@
<script lang='ts'> <script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
// import Demap from 'dasf-web/lib/map/Demap.vue'; // 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 ProgressTree from 'dasf-web/lib/messaging/ProgressTree.vue';
import ExampleModuleMessaging from 'dasf-web/lib/messaging/ExampleModuleMessaging'; import ExampleModuleMessaging from 'dasf-web/lib/messaging/ExampleModuleMessaging';
import { PulsarProgressReport } from 'dasf-web/lib/messaging/PulsarMessages'; import { PulsarProgressReport } from 'dasf-web/lib/messaging/PulsarMessages';
@Component({ @Component({
components: { RadarChart, ProgressTree }, components: { ProgressTree },
}) })
export default class Workflow extends Vue { export default class Workflow extends Vue {
private exampleModule: ExampleModuleMessaging = new ExampleModuleMessaging(); 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 progressReport: PulsarProgressReport = null;
private showProgress = false; // private radarChartData: Map<string, Map<string, number>> =
private radarChartData: Map<string, Map<string, number>> = Workflow.initData(); // 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>> { // return new Map([
const e1 = new Map([['size', 3], ['height', 10], ['width', 100]]); // ['first', e1],
const e2 = new Map([['size', 1], ['height', 20], ['width', 20]]); // ['second', e2],
const e3 = new Map([['size', 2], ['height', 5], ['width', 10]]); // ['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 { protected sendProgressReportRequest(): void {
this.showProgress = true; this.exampleModule
this.exampleModule.sendRequest((progressReport: PulsarProgressReport) => { .sendProgressReportRequest((progressReport: PulsarProgressReport) => {
this.progressReport = progressReport; this.progressReport = progressReport;
}); })
.catch((error: string) => {
console.error(error);
});
} }
} }
</script> </script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment