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

expanded examples to latest dasf messaging

parent 8bdd8063
......@@ -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",
......
<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>
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