Justin Georgi
79d2d1bc83
Closes: #92 This adds a new link to the left panel to open a contact form. Filling out the form will allow the user to submit a comment which will be registered as a new issue on this repo. Reviewed-on: Georgi_Lab/ALVINN_f7#98
95 lines
3.2 KiB
Vue
95 lines
3.2 KiB
Vue
<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> |