Show front and backend version on help dialogue

lib/www/client/source/src/components/help-dialog.vue

@@ -22,6 +22,17 @@
       <p>You can get help or report a problem by sending an email to <a :href="`mailto:${email}`">{{email}}</a>. Please include as much information as possible about your problem or question—screenshots are often a good idea, and data files may also be attached.</p>
 
       <p>When you write to the above address a ticket will be automatically created in the project's issue tracking system.</p>
+
+      <v-alert dense type="info" border="left" outlined>
+        <div class="text-body-2">
+        You are using Dougal version:
+        <ul>
+          <li><code>{{clientVersion}}</code> (client)</li>
+          <li><code>{{serverVersion}}</code> (server)</li>
+        </ul>
+        </div>
+      </v-alert>
+
     </v-card-text>
 
     <v-divider></v-divider>
@@ -75,6 +86,8 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex';
+
 export default {
   name: 'DougalHelpDialog',
 
@@ -82,8 +95,27 @@ export default {
     return {
       dialog: false,
       email: "dougal-support@aaltronav.eu",
-      feed: btoa(encodeURIComponent("https://gitlab.com/wgp/dougal/software.atom?feed_token=XSPpvsYEny8YmH75Nz5W"))
+      feed: btoa(encodeURIComponent("https://gitlab.com/wgp/dougal/software.atom?feed_token=XSPpvsYEny8YmH75Nz5W")),
+      clientVersion: process.env.DOUGAL_FRONTEND_VERSION ?? "(unknown)",
+      serverVersion: null,
     };
+  },
+
+  methods: {
+    async getServerVersion () {
+      const version = await this.api(['/version', {}, null, {silent:true}]);
+      this.serverVersion = version?.tag ?? "(unknown)";
+    },
+
+    ...mapActions(["api"])
+  },
+
+  async mounted () {
+    this.getServerVersion();
+  },
+
+  async beforeUpdate () {
+    this.getServerVersion();
   }
 
 };