-
Notifications
You must be signed in to change notification settings - Fork 3
/
ExampleScenario.vue
131 lines (105 loc) · 3.46 KB
/
ExampleScenario.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
Example scenario
----------------
=> The following section in HTML-PUG defines the app's layout.
<template lang="pug">
.page
h1 {{ infos.title }}
img.icon.center-block(slot='title-img', :src='infos.icon')
//- Short description of what you can do in this page
p.scenario-description.
Hi I am an example scenario code for the frontend !
Duplicate me to get started !
//- This widget provides links to tweet the page or give feedback
web-links(:emailSubject="'[CAB] Feedback on: ' + infos.title",
tweetMessage="Pre-written message for your tweets !",
:tweetUrl="'http://CAB.genomefoundry.org/' + infos.path")
//- This is the form, where all the use input goes ! Notice that the v-model
//- for each form component is of the form ```form.XXXX``
.form
h4.formlabel Provide some files
files-uploader(v-model='form.files', :multiple='true',
text="Drop multiple files here (or click to select)")
h4.formlabel Provide some text:
el-input(v-model='form.text')
//- This widget provides the "Submit" button, and manages the request to the
//- backend. Super important !
backend-querier(:form='form',
:backendUrl='infos.backendUrl',
:validateForm='validateForm',
submitButtonText='Start Computations',
v-model='queryStatus')
//- If the backend uses the logger to store progress bars, they can be displayed here
progress-bars(:bars='queryStatus.polling.data.bars',
:order="['loop', 'subloop']",
v-if='queryStatus.polling.inProgress && queryStatus.polling.data')
//- An error message appears if anything goes wrong.
el-alert(v-if='queryStatus.requestError && !queryStatus.polling.inProgress',
:title="queryStatus.requestError",
type="error",
:closable="false")
//- The results section appears when the request returned interesting results.
.results(v-if='!queryStatus.polling.inProgress')
//- Download button for the file produced by the backend
p <b>The server's computations yielded the following result:</b>
p {{queryStatus.result.answer_text}}
.results-summary(v-if='queryStatus.result.preview',
v-html="queryStatus.result.preview.html")
</template>
=> The following section in Javascript defines the app's variables and logics.
<script>
// Infos on this scenario.default.
var infos = {
title: 'Example Scenario',
navbarTitle: 'Example Scenario',
path: 'example_scenario',
description: '',
backendUrl: 'start/example_scenario',
icon: require('../../images/black_white_logo.svg')
}
export default {
data () {
return {
infos: infos,
form: {
files: [],
text: ''
},
queryStatus: {
polling: {},
result: {},
requestError: ''
}
}
},
infos: infos,
methods: {
validateForm () {
var errors = []
if (this.form.files.length === 0) {
errors.push('Provide at least 1 file.')
}
if (this.form.text.length === 0) {
errors.push('Provide some text input.')
}
return errors
}
}
}
</script>
=> The following section applies custome CSS to this particular app.
<style lang='scss' scoped>
h4.formlabel {
text-align: center;
text-transform: uppercase;
margin-top: 40px
}
.form {
margin: 50px auto;
max-width: 500px;
}
.title-img {
height:80px;
margin-top: -20px;
margin-bottom: 20px;
}
</style>