Commit 6bf22154 authored by Daniel Eggert's avatar Daniel Eggert
Browse files

refactored progress dialog into v-overlay

parent 828f1537
<template>
<v-container style="margin-bottom: 35px;">
<v-container style="margin-bottom: 35px">
<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-card>
</v-overlay>
<v-row>
<demap
class="nav-offset"
......@@ -7,29 +20,35 @@
legend-collapsed
:center="[13.064923, 52.379539]"
:zoom="16"
style="height: 600px; margin-bottom: 10px;"
/>
<ProgressDialog
:progress="progressReport"
showProgressBar
style="height: 600px; margin-bottom: 10px"
/>
</v-row>
<v-row
v-if="!exampleModule.isConnected()"
style="justify-content: center; align-items: center;"
style="justify-content: center; align-items: center"
>
<span>please wait while the connection to the backend module is established...</span>
<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-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>
>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-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-container>
</template>
......@@ -43,20 +62,22 @@
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import Demap from '@digital-earth/frontend-framework/lib/map/Demap.vue';
import ProgressDialog from '@digital-earth/frontend-framework/lib/messaging/ProgressDialog.vue';
import ProgressTree from '@digital-earth/frontend-framework/lib/messaging/ProgressTree.vue';
import ExampleModuleMessaging from '@digital-earth/frontend-framework/lib/messaging/ExampleModuleMessaging';
import { PulsarProgressReport } from '@digital-earth/frontend-framework/lib/messaging/PulsarMessages';
@Component({
components: { Demap, ProgressDialog }
components: { Demap, ProgressTree },
})
export default class Workflow extends Vue {
private exampleModule: ExampleModuleMessaging = new ExampleModuleMessaging();
private progressReport: PulsarProgressReport = null;
private showProgress = false;
protected sendRequest(): void {
this.showProgress = true;
this.exampleModule.sendRequest((progressReport: PulsarProgressReport) => {
this.progressReport = progressReport;
this.progressReport = progressReport;
});
}
}
......
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