Add help link to footer

lib/www/client/source/src/components/footer.vue

@@ -1,8 +1,14 @@
 <!-- kate: replace-tabs on; indent-width 2; -->
 <template>
 <v-footer app>
-	<small>&copy; {{year}} <a href="https://aaltronav.eu/" target="_blank" class="brand">Aaltronav</a></small>
+	<dougal-help-dialog></dougal-help-dialog>
+
 	<v-spacer></v-spacer>
+
+	<small>&copy; {{year}} <a href="https://aaltronav.eu/" target="_blank" class="brand">Aaltronav</a></small>
+
+	<v-spacer></v-spacer>
+
 	<div title="Night mode">
       <v-switch
         class="ma-auto"
@@ -27,8 +33,16 @@
 </style>
 
 <script>
+
+import DougalHelpDialog from '@/components/help-dialog';
+
 export default {
   name: 'DougalFooter',
+
+  components: {
+    DougalHelpDialog
+  },
+
   computed: {
     year () {
       const date = new Date();

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

@@ -0,0 +1,77 @@
+<template>
+<v-dialog
+  v-model="dialog"
+  max-width="500"
+  style="z-index:2020;"
+>
+  <template v-slot:activator="{ on, attrs }">
+	<small class="ml-3">
+      <a v-on="on">
+        Get help
+        <v-icon small>mdi-account-question</v-icon>
+      </a>
+	</small>
+  </template>
+
+  <v-card>
+    <v-card-title class="headline">
+      Dougal user support
+    </v-card-title>
+
+    <v-card-text>
+      <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-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions>
+
+      <v-btn
+        color="info"
+        text
+        :href="`mailto:${email}?Subject=Question`"
+      >
+        Ask a question
+      </v-btn>
+
+      <v-btn
+        color="warning darken-1"
+        text
+        href="mailto:dougal-support@aaltronav.eu?Subject=Bug report"
+      >
+        Report a bug
+      </v-btn>
+
+      <v-spacer></v-spacer>
+
+
+      <v-btn
+        color="primary darken-1"
+        text
+        @click="dialog=false"
+      >
+        Close
+      </v-btn>
+    </v-card-actions>
+
+  </v-card>
+
+</v-dialog>
+
+</template>
+
+<script>
+export default {
+  name: 'DougalHelpDialog',
+
+  data () {
+    return {
+      dialog: false,
+      email: "dougal-support@aaltronav.eu"
+    };
+  }
+
+};
+</script>