src/components/app.vue

@@ -8,6 +8,7 @@
         <f7-list>
           <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
           <f7-list-item link="/about/" >About ALVINN</f7-list-item>
+          <f7-list-item link="/contact/" view=".view-main" panel-close=".panel-left">Contact</f7-list-item>
         </f7-list>
         <f7-toolbar class="panel-bar" position="bottom">
           <span>version 0.2.1</span>

src/js/routes.js

@@ -3,6 +3,7 @@ import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
 import SettingsPage from '../pages/settings.vue';
 import DetectPage from '../pages/detect.vue';
+import ContactPage from  '../pages/contact.vue';
 
 import NotFoundPage from '../pages/404.vue';
 
@@ -23,6 +24,10 @@ var routes = [
     path: '/settings/',
     component: SettingsPage,
   },
+  {
+    path: '/contact/',
+    component: ContactPage,
+  },
   {
     path: '(.*)',
     component: NotFoundPage,

src/pages/contact.vue

@@ -0,0 +1,95 @@
+<template>
+  <f7-page name="contact">
+    <f7-navbar title="Contact" back-link="Back"></f7-navbar>
+    <f7-block-title medium style="text-align: center;">Contact the ALVINN team</f7-block-title>
+    <f7-block style="display: flex; justify-content: center;">
+      <div class="form-container"> 
+        <p>
+          ALVINN can only get better with your feedback.  Use the form below to send us any questions or let us know how we can improve.
+        </p>
+        <f7-list class="form-element">
+          <f7-list-input v-model:value="userEmail" label="E-mail (optional)" type="email" placeholder="Your e-mail" clear-button />
+          <f7-list-input v-model:value="commentType" label="This is a... (optional)" type="select" placeholder="Select comment type">
+            <option value="20">Bug</option>
+            <option value="22">Feature request</option>
+            <option value="25">Question</option>
+          </f7-list-input>
+          <f7-list-input v-model:value="commentTitle" label="Subject of comment (optional)" type="textarea" resizable placeholder="Type here" />
+        </f7-list>
+        <f7-text-editor class="form-element comment-editor"/>
+        <div style="align-self: flex-end; display: flex; gap: 15px;">
+          <f7-button fill @click="clearForm">
+            Clear form
+          </f7-button>
+          <f7-button fill @click="sendFeedback">
+            Send feedback
+          </f7-button>
+        </div>
+      </div>
+    </f7-block>
+  </f7-page>
+</template>
+
+<style>
+  .form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .form-element {
+    align-self: stretch;
+  }
+</style>
+
+<script>
+  import { f7 } from 'framework7-vue'
+
+  export default {
+    data () {
+      return {
+        commentTitle: "",
+        userEmail: "",
+        commentType: ""
+      }
+    },
+    computed: {
+      commentText () {
+        var text = f7.textEditor.get('.comment-editor').getValue()
+        if (this.userEmail) {
+          text += `\\n\\nSubmitted by: ${this.userEmail}`
+        }
+        return text
+      }
+    },
+    methods: {
+      sendFeedback () {
+        var self = this
+        var issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
+        var xhr = new XMLHttpRequest()
+        xhr.open("POST", issueURL)
+        xhr.setRequestHeader('Content-Type', 'application/json')
+        xhr.setRequestHeader('accept', 'application/json')
+        xhr.onload = function () {
+          if (this.status !== 201) {
+            console.log(xhr.response)
+            const errorResponse = JSON.parse(xhr.response)
+            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
+            return;
+          }
+          f7.dialog.alert('Thank you for your feedback.')
+          self.clearForm()
+        }
+        xhr.send(`{"body": "${this.commentText}", "labels": [${this.commentType}], "title": "${this.commentTitle || 'User submitted comment'}"}`)
+      },
+      clearForm () {
+        this.commentTitle = ''
+        this.userEmail = ''
+        this.commentType = ''
+        f7.textEditor.get('.comment-editor').clearValue();
+      }
+    }
+  }
+
+</script>