workflow.vue 2 KB
Newer Older
Daniel Eggert's avatar
Daniel Eggert committed
1
<template>
2
3
4
5
6
7
8
9
10
11
  <v-container style="margin-bottom: 35px;">
    <v-row>
      <demap
        class="nav-offset"
        show-osm
        legend-collapsed
        :center="[13.064923, 52.379539]"
        :zoom="16"
        style="height: 600px; margin-bottom: 10px;"
      />
12
13
14
      <ProgressDialog
        :progress="progressReport"
      />
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    </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-container>
Daniel Eggert's avatar
Daniel Eggert committed
34
35
</template>

Daniel Eggert's avatar
Daniel Eggert committed
36
37
<style scoped>
.nav-offset {
38
  margin-top: 70px;
Daniel Eggert's avatar
Daniel Eggert committed
39
40
41
}
</style>

Daniel Eggert's avatar
Daniel Eggert committed
42
43
44
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import Demap from '@digital-earth/frontend-framework/lib/map/Demap.vue';
45
import ProgressDialog from '@digital-earth/frontend-framework/lib/map/ProgressDialog.vue';
46
import ExampleModuleMessaging from '@digital-earth/frontend-framework/lib/messaging/ExampleModuleMessaging';
47
import { PulsarProgressReport } from '@digital-earth/frontend-framework/lib/messaging/PulsarMessages';
Daniel Eggert's avatar
Daniel Eggert committed
48
49

@Component({
Adam Sasin's avatar
Adam Sasin committed
50
  components: { Demap, ProgressDialog }
Daniel Eggert's avatar
Daniel Eggert committed
51
})
52
53
export default class Workflow extends Vue {
  private exampleModule: ExampleModuleMessaging = new ExampleModuleMessaging();
Adam Sasin's avatar
Adam Sasin committed
54
  private progressReport: PulsarProgressReport = new PulsarProgressReport();
55
56

  protected sendRequest(): void {
57
58
59
    this.exampleModule.sendRequest((progressReport: PulsarProgressReport) => {
        this.progressReport = progressReport;
    });
60
61
  }
}
62
</script>