Merge branch '2-adapt-to-new-messaging-example' into 'master'

Resolve "Adapt to new messaging example"

Closes #2

See merge request digital-earth/de-app-template!2

package.json

@@ -15,17 +15,21 @@
     "generate": "nuxt-ts generate"
   },
   "dependencies": {
-    "@digital-earth/frontend-framework": "git+ssh://git@git.geomar.de:digital-earth/de-frontend-framework.git",
+    "@digital-earth/frontend-framework": "../de-frontend-framework/",
     "@mdi/font": "^4.9.95",
     "@nuxt/typescript-runtime": "latest",
-    "@nuxtjs/axios": "^5.11.0",
+    "@nuxtjs/axios": "^5.12.0",
     "@nuxtjs/style-resources": "~1.0.0",
+    "axios": "^0.19.2",
     "d3": "^5.16.0",
     "nuxt": "latest",
     "nuxt-client-init-module": "^0.1.8",
-    "nuxt-property-decorator": "~2.5.1"
+    "nuxt-property-decorator": "^2.7.2",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.0.0"
   },
   "devDependencies": {
+    "@nuxt/types": "^2.13.3",
     "@nuxt/typescript-build": "latest",
     "@nuxtjs/vuetify": "^1.11.2",
     "@types/jest": "^24.9.1",
@@ -43,8 +47,6 @@
     "stylus": "~0.54.5",
     "stylus-loader": "~3.0.2",
     "surge": "^0.21.3",
-    "typescript": "^3.9.5",
-    "ts-jest": "^26.0.0",
-    "vue-jest": "^3.0.4"
+    "typescript": "^3.9.7"
   }
 }

pages/workflow.vue

 <template>
-  <demap class="nav-offset" show-osm legend-collapsed :center="[13.064923, 52.379539]" :zoom="16" />
+  <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;"
+      />
+    </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>
 </template>
 
 <style scoped>
 .nav-offset {
-    margin-top: 70px;
+  margin-top: 70px;
 }
 </style>
 
 <script lang='ts'>
 import { Component, Vue } from 'vue-property-decorator';
 import Demap from '@digital-earth/frontend-framework/lib/map/Demap.vue';
+import ExampleModuleMessaging from '@digital-earth/frontend-framework/lib/messaging/ExampleModuleMessaging';
 
 @Component({
   components: { Demap }
 })
-export default class Workflow extends Vue {}
+export default class Workflow extends Vue {
+  private exampleModule: ExampleModuleMessaging = new ExampleModuleMessaging();
+
+  protected sendRequest(): void {
+    this.exampleModule.sendRequest();
+  }
+}
 </script>
\ No newline at end of file