Commit 82a51683 authored by antoine masson's avatar antoine masson
Browse files

v0.87

-Fix link error in analysis
- fix slider error not next to stop
- fix element size in tradeoff
parent 3e4623de
# client-app
# Eawag Survey Client interface
## Project setup
```
......@@ -22,3 +22,75 @@ yarn lint
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## Files
./LICENSE : MIT License
./README.md
./babel.config.js
./filename.txt : this file list generated using tree -ifI node_modules > filename.txt
./package-lock.json : npm file for managing packages
./package.json : npm list of command and packages installed for this project
./public : external fiile needed for the project
./public/favicon.ico : icon of the application
./public/index.html : index page for webserver
./public/logoeawag.png : eawag logo
./src : project files
./src/App.vue : main Vue application
./src/assets : add features
./src/assets/countries.js : list of countries
./src/assets/flags : flags (in .svg)
./src/components : Vue components
./src/components/AlternativesDisp.vue : Display a list of alternatives
./src/components/AlternativesSort.vue : Sort a list of alternatives
./src/components/Conclusion_rational.vue : Display the conclusion for rational survey
./src/components/ImgItem.vue : Display a box with a picture, a caption and info and click actions
./src/components/ObjectivesSort.vue : Swing and Trade-off sorting for objectives
./src/components/PrePostSurvey.vue : Pre or Post survey display
./src/components/SelectLang.vue : Language selection
./src/components/form_input : Form input for post and pre survey
./src/components/form_input/buttons_input.vue :
./src/components/form_input/checkboxes_input.vue
./src/components/form_input/dragdrop_input.vue
./src/components/form_input/numerical_input.vue
./src/components/form_input/numslide_input.vue
./src/components/form_input/stickslide_input.vue
./src/components/form_input/string_input.vue
./src/components/form_input/text_input.vue
./src/components/poc.vue : Person of contact display
./src/components/popup_card.vue : Display a popup for alternative or objective presentation
./src/helpers : common functions
./src/helpers/api.js : for API communication
./src/helpers/dnd.js : for drag and drop inputs
./src/helpers/generic.js : diverse function for sorting, normalize objects
./src/helpers/tradeoff.js : tradeoff numerical funct
./src/layouts : page layouts
./src/layouts/Main.vue : layout used in all the project
./src/main.js : configuration file for Vue and starting javascript file
./src/quasar.js : configuration file quasar
./src/router : Vue Router
./src/router/index.js : Router config file
./src/store : Vuex store files
./src/store/index.js : config and main func for store
./src/store/modules
./src/store/modules/auth.js : func for authentification
./src/store/modules/survey.js : func for survey
./src/styles : CSS Style
./src/styles/quasar.sass
./src/styles/quasar.variables.sass
./src/views : Main Vue View
./src/views/AccessUrl.vue : Used when using direct access url entry
./src/views/Login.vue : Login (main) page
./src/views/NotFoundComponent.vue : 404 errors
./src/views/PostSurvey.vue : Post survey
./src/views/PreSurvey.vue : Pre survey
./src/views/RationalSurvey.vue : Rational survey
./src/views/RedirectUrl.vue : Used when user is redirect to another url after the survey
./src/views/SurveyIndex.vue : This componets is the hub when a user arrive (after loging, access...) it relaod previosu data (if any) and redirect user where it should goes
./src/views/TokenUrl.vue : Used if token is entred in URL instead of loging page
./src/views/WelcomePage.vue : display survey welcome page
./vue.config.js : configuration file for Vue
./yarn.lock : yarn file for managing packages
13 directories, 304 files
.
./LICENSE
./README.md
./babel.config.js
./filename.txt
./package-lock.json
./package.json
./public
./public/favicon.ico
./public/index.html
./public/logoeawag.png
./src
./src/App.vue
./src/assets
./src/assets/countries.js
./src/assets/flags
./src/assets/flags/ad.svg
./src/assets/flags/ae.svg
./src/assets/flags/af.svg
./src/assets/flags/ag.svg
./src/assets/flags/ai.svg
./src/assets/flags/al.svg
./src/assets/flags/am.svg
./src/assets/flags/ao.svg
./src/assets/flags/aq.svg
./src/assets/flags/ar.svg
./src/assets/flags/as.svg
./src/assets/flags/at.svg
./src/assets/flags/au.svg
./src/assets/flags/aw.svg
./src/assets/flags/ax.svg
./src/assets/flags/az.svg
./src/assets/flags/ba.svg
./src/assets/flags/bb.svg
./src/assets/flags/bd.svg
./src/assets/flags/be.svg
./src/assets/flags/bf.svg
./src/assets/flags/bg.svg
./src/assets/flags/bh.svg
./src/assets/flags/bi.svg
./src/assets/flags/bj.svg
./src/assets/flags/bl.svg
./src/assets/flags/bm.svg
./src/assets/flags/bn.svg
./src/assets/flags/bo.svg
./src/assets/flags/bq.svg
./src/assets/flags/br.svg
./src/assets/flags/bs.svg
./src/assets/flags/bt.svg
./src/assets/flags/bv.svg
./src/assets/flags/bw.svg
./src/assets/flags/by.svg
./src/assets/flags/bz.svg
./src/assets/flags/ca.svg
./src/assets/flags/cc.svg
./src/assets/flags/cd.svg
./src/assets/flags/cf.svg
./src/assets/flags/cg.svg
./src/assets/flags/ch.svg
./src/assets/flags/ci.svg
./src/assets/flags/ck.svg
./src/assets/flags/cl.svg
./src/assets/flags/cm.svg
./src/assets/flags/cn.svg
./src/assets/flags/co.svg
./src/assets/flags/cr.svg
./src/assets/flags/cu.svg
./src/assets/flags/cv.svg
./src/assets/flags/cw.svg
./src/assets/flags/cx.svg
./src/assets/flags/cy.svg
./src/assets/flags/cz.svg
./src/assets/flags/de.svg
./src/assets/flags/dj.svg
./src/assets/flags/dk.svg
./src/assets/flags/dm.svg
./src/assets/flags/do.svg
./src/assets/flags/dz.svg
./src/assets/flags/ec.svg
./src/assets/flags/ee.svg
./src/assets/flags/eg.svg
./src/assets/flags/eh.svg
./src/assets/flags/er.svg
./src/assets/flags/es.svg
./src/assets/flags/et.svg
./src/assets/flags/fi.svg
./src/assets/flags/fj.svg
./src/assets/flags/fk.svg
./src/assets/flags/fm.svg
./src/assets/flags/fo.svg
./src/assets/flags/fr.svg
./src/assets/flags/ga.svg
./src/assets/flags/gb.svg
./src/assets/flags/gd.svg
./src/assets/flags/ge.svg
./src/assets/flags/gf.svg
./src/assets/flags/gg.svg
./src/assets/flags/gh.svg
./src/assets/flags/gi.svg
./src/assets/flags/gl.svg
./src/assets/flags/gm.svg
./src/assets/flags/gn.svg
./src/assets/flags/gp.svg
./src/assets/flags/gq.svg
./src/assets/flags/gr.svg
./src/assets/flags/gs.svg
./src/assets/flags/gt.svg
./src/assets/flags/gu.svg
./src/assets/flags/gw.svg
./src/assets/flags/gy.svg
./src/assets/flags/hk.svg
./src/assets/flags/hm.svg
./src/assets/flags/hn.svg
./src/assets/flags/hr.svg
./src/assets/flags/ht.svg
./src/assets/flags/hu.svg
./src/assets/flags/id.svg
./src/assets/flags/ie.svg
./src/assets/flags/il.svg
./src/assets/flags/im.svg
./src/assets/flags/in.svg
./src/assets/flags/io.svg
./src/assets/flags/iq.svg
./src/assets/flags/ir.svg
./src/assets/flags/is.svg
./src/assets/flags/it.svg
./src/assets/flags/je.svg
./src/assets/flags/jm.svg
./src/assets/flags/jo.svg
./src/assets/flags/jp.svg
./src/assets/flags/ke.svg
./src/assets/flags/kg.svg
./src/assets/flags/kh.svg
./src/assets/flags/ki.svg
./src/assets/flags/km.svg
./src/assets/flags/kn.svg
./src/assets/flags/kp.svg
./src/assets/flags/kr.svg
./src/assets/flags/kw.svg
./src/assets/flags/ky.svg
./src/assets/flags/kz.svg
./src/assets/flags/la.svg
./src/assets/flags/lb.svg
./src/assets/flags/lc.svg
./src/assets/flags/li.svg
./src/assets/flags/lk.svg
./src/assets/flags/lr.svg
./src/assets/flags/ls.svg
./src/assets/flags/lt.svg
./src/assets/flags/lu.svg
./src/assets/flags/lv.svg
./src/assets/flags/ly.svg
./src/assets/flags/ma.svg
./src/assets/flags/mc.svg
./src/assets/flags/md.svg
./src/assets/flags/me.svg
./src/assets/flags/mf.svg
./src/assets/flags/mg.svg
./src/assets/flags/mh.svg
./src/assets/flags/mk.svg
./src/assets/flags/ml.svg
./src/assets/flags/mm.svg
./src/assets/flags/mn.svg
./src/assets/flags/mo.svg
./src/assets/flags/mp.svg
./src/assets/flags/mq.svg
./src/assets/flags/mr.svg
./src/assets/flags/ms.svg
./src/assets/flags/mt.svg
./src/assets/flags/mu.svg
./src/assets/flags/mv.svg
./src/assets/flags/mw.svg
./src/assets/flags/mx.svg
./src/assets/flags/my.svg
./src/assets/flags/mz.svg
./src/assets/flags/na.svg
./src/assets/flags/nc.svg
./src/assets/flags/ne.svg
./src/assets/flags/nf.svg
./src/assets/flags/ng.svg
./src/assets/flags/ni.svg
./src/assets/flags/nl.svg
./src/assets/flags/no.svg
./src/assets/flags/np.svg
./src/assets/flags/nr.svg
./src/assets/flags/nu.svg
./src/assets/flags/nz.svg
./src/assets/flags/om.svg
./src/assets/flags/pa.svg
./src/assets/flags/pe.svg
./src/assets/flags/pf.svg
./src/assets/flags/pg.svg
./src/assets/flags/ph.svg
./src/assets/flags/pk.svg
./src/assets/flags/pl.svg
./src/assets/flags/pm.svg
./src/assets/flags/pn.svg
./src/assets/flags/pr.svg
./src/assets/flags/ps.svg
./src/assets/flags/pt.svg
./src/assets/flags/pw.svg
./src/assets/flags/py.svg
./src/assets/flags/qa.svg
./src/assets/flags/re.svg
./src/assets/flags/ro.svg
./src/assets/flags/rs.svg
./src/assets/flags/ru.svg
./src/assets/flags/rw.svg
./src/assets/flags/sa.svg
./src/assets/flags/sb.svg
./src/assets/flags/sc.svg
./src/assets/flags/sd.svg
./src/assets/flags/se.svg
./src/assets/flags/sg.svg
./src/assets/flags/sh.svg
./src/assets/flags/si.svg
./src/assets/flags/sj.svg
./src/assets/flags/sk.svg
./src/assets/flags/sl.svg
./src/assets/flags/sm.svg
./src/assets/flags/sn.svg
./src/assets/flags/so.svg
./src/assets/flags/sr.svg
./src/assets/flags/ss.svg
./src/assets/flags/st.svg
./src/assets/flags/sv.svg
./src/assets/flags/sx.svg
./src/assets/flags/sy.svg
./src/assets/flags/sz.svg
./src/assets/flags/tc.svg
./src/assets/flags/td.svg
./src/assets/flags/tf.svg
./src/assets/flags/tg.svg
./src/assets/flags/th.svg
./src/assets/flags/tj.svg
./src/assets/flags/tk.svg
./src/assets/flags/tl.svg
./src/assets/flags/tm.svg
./src/assets/flags/tn.svg
./src/assets/flags/to.svg
./src/assets/flags/tr.svg
./src/assets/flags/tt.svg
./src/assets/flags/tv.svg
./src/assets/flags/tw.svg
./src/assets/flags/tz.svg
./src/assets/flags/ua.svg
./src/assets/flags/ug.svg
./src/assets/flags/um.svg
./src/assets/flags/unknown.svg
./src/assets/flags/us.svg
./src/assets/flags/uy.svg
./src/assets/flags/uz.svg
./src/assets/flags/va.svg
./src/assets/flags/vc.svg
./src/assets/flags/ve.svg
./src/assets/flags/vg.svg
./src/assets/flags/vi.svg
./src/assets/flags/vn.svg
./src/assets/flags/vu.svg
./src/assets/flags/wf.svg
./src/assets/flags/ws.svg
./src/assets/flags/ye.svg
./src/assets/flags/yt.svg
./src/assets/flags/za.svg
./src/assets/flags/zm.svg
./src/assets/flags/zw.svg
./src/components
./src/components/AlternativesDisp.vue
./src/components/AlternativesSort.vue
./src/components/Conclusion_rational.vue
./src/components/ImgItem.vue
./src/components/ObjectivesSort.vue
./src/components/PrePostSurvey.vue
./src/components/SelectLang.vue
./src/components/form_input
./src/components/form_input/buttons_input.vue
./src/components/form_input/checkboxes_input.vue
./src/components/form_input/dragdrop_input.vue
./src/components/form_input/numerical_input.vue
./src/components/form_input/numslide_input.vue
./src/components/form_input/stickslide_input.vue
./src/components/form_input/string_input.vue
./src/components/form_input/text_input.vue
./src/components/poc.vue
./src/components/popup_card.vue
./src/helpers
./src/helpers/api.js
./src/helpers/dnd.js
./src/helpers/generic.js
./src/helpers/tradeoff.js
./src/layouts
./src/layouts/Main.vue
./src/main.js
./src/quasar.js
./src/router
./src/router/index.js
./src/store
./src/store/index.js
./src/store/modules
./src/store/modules/auth.js
./src/store/modules/survey.js
./src/styles
./src/styles/quasar.sass
./src/styles/quasar.variables.sass
./src/views
./src/views/AccessUrl.vue
./src/views/Login.vue
./src/views/NotFoundComponent.vue
./src/views/PostSurvey.vue
./src/views/PreSurvey.vue
./src/views/RationalSurvey.vue
./src/views/RationalSurveyAlternatives.vue
./src/views/RedirectUrl.vue
./src/views/SurveyIndex.vue
./src/views/TokenUrl.vue
./src/views/WelcomePage.vue
./vue.config.js
./yarn.lock
13 directories, 304 files
{
"name": "client-app",
"version": "0.8.6",
"version": "0.8.7",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
......@@ -13,7 +13,7 @@
"core-js": "^3.6.5",
"jsonwebtoken": "^8.5.1",
"mathjs": "^9.3.0",
"quasar": "^1.15.2",
"quasar": "^1.15.19",
"vue": "^2.6.11",
"vue-json-pretty": "^1.7.1",
"vue-router": "^3.5.1",
......
......@@ -50,7 +50,7 @@
<tr>
<th class="text-center bg-grey-3" ></th>
<th class="text-center bg-grey-3" v-for="(alt,c) in alternativesSorted" :key="alt.short_name" >
<img-item :obj="alt" alt @onInfo="onInfo(true,c)" style="width:9vw"/>
<img-item :obj="alt" alt @onInfo="onInfo(false,c)" style="width:9vw"/>
</th>
</tr>
</thead>
......@@ -247,10 +247,13 @@ export default {
dispmatrix(alt, obj) {
return this.convperc(tradeV(this.rational.predicmat[alt][obj], this.objectives.find(o => o.short_name === obj).elements))
},
slidenext(){
this.$refs.stepper_obj.next();
window.scrollTo(0, 0);
},
onNext1() {
if (this.learnloop) {
this.$refs.stepper_obj.next()
this.slidenext()
} else {
this.$emit('continue')
}
......@@ -261,7 +264,7 @@ export default {
this.$emit('continue')
} else {
this.$refs.stepper_obj.next()
this.slidenext()
}
},
addmcda() {
......
......@@ -17,7 +17,7 @@
<span class="col-11" v-if="!root" v-html="objectives.elements.contents.html.content" ></span>
</div>
<q-stepper-navigation class="row q-pa-md q-gutter-md justify-end">
<q-btn class="col-auto" @click="$refs.stepper_obj.next()" color="primary" :label="template_text.NEXT" />
<q-btn class="col-auto" @click="slidenext" color="primary" :label="template_text.NEXT" />
</q-stepper-navigation>
</q-step>
......@@ -40,7 +40,7 @@
<span class="col-11 " v-html="template_text.SWINGTEXT" ></span>
</div>
<q-stepper-navigation class="row q-pa-md q-gutter-md justify-end">
<q-btn class="col-auto" @click="$refs.stepper_obj.next()" color="primary" :label="template_text.NEXT" />
<q-btn class="col-auto" @click="slidenext()" color="primary" :label="template_text.NEXT" />
</q-stepper-navigation>
</q-step>
......@@ -88,7 +88,7 @@
</div>
<q-stepper-navigation class="row q-pa-md q-gutter-md justify-end" v-if="this.swing.length===this.objectives.children.length">
<q-btn class="col-auto " @click="onRestartSwing" color="secondary" :label="template_text.RESTART"/>
<q-btn class="col-auto " @click="$refs.stepper_obj.next()" color="primary" :label="template_text.NEXT" />
<q-btn class="col-auto " @click="slidenext()" color="primary" :label="template_text.NEXT" />
</q-stepper-navigation>
</q-step>
......@@ -156,7 +156,7 @@
<span class="col-11" v-html="template_text.TRADEOFFTEXT" ></span>
</div>
<q-stepper-navigation class="row q-pa-md q-gutter-md justify-end">
<q-btn class="col-auto" @click="$refs.stepper_obj.next()" color="primary" :label="template_text.NEXT" />
<q-btn class="col-auto" @click="slidenext()" color="primary" :label="template_text.NEXT" />
</q-stepper-navigation>
</q-step>
......@@ -173,7 +173,7 @@
<div class="row q-pa-md justify-between" v-if="!tmptradestep.selected">
<q-card class="col-md-5 col-12 row q-gutter-sm justify-center swingcard" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" @click="onSelectTradeStep(n-1,0)" >
<q-card class="col-md-4 col-12 row q-gutter-sm justify-center swingcard" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" @click="onSelectTradeStep(n-1,0)" >
<q-card bordered class="bg-green col-5" >
<img-item :obj="objectives.children[n-1]" @onInfo="onInfo(n-1)"/>
<q-separator />
......@@ -201,7 +201,7 @@
</div>
</div>
<q-card class="col-md-5 col-12 row q-gutter-sm justify-center swingcard" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" @click="onSelectTradeStep(n-1,1)">
<q-card class="col-md-4 col-12 row q-gutter-sm justify-center swingcard" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" @click="onSelectTradeStep(n-1,1)">
<q-card bordered class=" col-5" >
<img-item :obj="objectives.children[n-1]" @onInfo="onInfo(n-1)"/>
<q-separator />
......@@ -220,7 +220,7 @@
</div>
<div class="row q-pa-md justify-between" v-else>
<q-card class="col-md-5 col-12 row q-gutter-sm justify-center" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" >
<q-card class="col-md-4 col-12 row q-gutter-sm justify-center" bordered :style="(!root)?'background-color:'+objectives.elements.color:''" >
<q-card bordered :class="(tmptradestep.item===0)?'bg-green':''" class="col-5" >
<img-item :obj="objectives.children[n-1]" @onInfo="onInfo(n-1)"/>
<q-separator />
......@@ -237,12 +237,12 @@
</q-card>
</q-card>
<div class="col-auto text-h3 items-center self-center q-pa-md text-center">
<div class="col-md-2 col-12 text-h3 items-center self-center q-pa-md text-center">
=
</div>
<q-card class="col-md-5 col-12 row q-gutter-sm justify-center" bordered :style="(!root)?'background-color:'+objectives.elements.color:''">
<q-card class="col-md-4 col-12 row q-gutter-sm justify-center" bordered :style="(!root)?'background-color:'+objectives.elements.color:''">
<div class="col-2 self-center" v-if="tmptradestep.item===0" >
<div class="col-3 self-center q-pa-md" v-if="tmptradestep.item===0" >
<q-slider :reverse="(objectives.children[n-1].elements.min<objectives.children[n-1].elements.max)"
vertical
v-model="tmptradestep.value[2]"
......@@ -258,17 +258,17 @@
<q-separator />
<q-card-section >
<span class="text-subtitle1 text-center">{{tmptradestep.value[2]}} {{objectives.children[n-1].elements.unit[selectlang]}}</span>
<span class="value-text text-center">{{tmptradestep.value[2]}} {{objectives.children[n-1].elements.unit[selectlang]}}</span>
</q-card-section>
</q-card>
<q-card bordered :class="(tmptradestep.item===0)?'bg-green':''" class="col-4">
<img-item :obj="objectives.children[n]" @onInfo="onInfo(n)"/>
<q-separator />
<q-card-section >
<span class="text-subtitle1 text-center">{{tmptradestep.value[3]}} {{objectives.children[n].elements.unit[selectlang]}}</span>
<span class="value-text text-center">{{tmptradestep.value[3]}} {{objectives.children[n].elements.unit[selectlang]}}</span>
</q-card-section>
</q-card>
<div class="col-2 self-center" v-if="tmptradestep.item===1">
<div class="col-3 self-center q-pa-md" v-if="tmptradestep.item===1">
<q-slider :reverse="(objectives.children[n].elements.min<objectives.children[n].elements.max)"
vertical
v-model="tmptradestep.value[3]"
......@@ -406,14 +406,14 @@ export default {
this.swing = []
this.tmpswing={}
this.step=4
this.$refs.stepper_obj.goTo(this.step)
this.slidegoto(this.step)
this.error={}
},
onRestartTrade(){
this.tmptrademat=[]
this.tmptrade = {}
this.step=7
this.$refs.stepper_obj.goTo(this.step)
this.slidegoto(this.step)
},
onContinue(){
......@@ -448,13 +448,13 @@ export default {
await this.FinishTrade()
//If not restart goto next otherwise go to comparaison
if(this.form.check.length===0){
this.$refs.stepper_obj.next()
this.slidenext()
} else {
this.step= 7+this.objectives.children.length
this.$refs.stepper_obj.goTo(this.step)
this.slidegoto(this.step)
}
} else {
this.$refs.stepper_obj.next()
this.slidenext()
}
},
onTradeEquiStep(n){
......@@ -515,10 +515,10 @@ export default {
}else {
//If not restart goto next otherwise go to comparaison
if(this.form.check.length===0){
this.$refs.stepper_obj.next()
this.slidenext()
} else {
this.step= 7+this.objectives.children.length
this.$refs.stepper_obj.goTo(this.step)
this.slidegoto(this.step)
} }
},
onSwingSlider(swingval,indexswing,value){
......@@ -547,9 +547,9 @@ export default {
obj:true,
persistent:true,
}).onOk(() => {
if(index<this.enablebox+1) this.enablebox=index+1 //move to the next image
if(index===this.enablebox) this.enablebox++; //move to the next image
})
if(index===this.objectives.children.length-1) this.$refs.stepper_obj.next() //send a continue event all images have been displayed
if(index===this.objectives.children.length-1) this.slidenext() //send a continue event all images have been displayed
},
onSwing(index){
......@@ -577,6 +577,15 @@ export default {
persistent:false,
})
},
slidenext(){
this.$refs.stepper_obj.next();
window.scrollTo(0, 0);
},
slidegoto(step){
this.$refs.stepper_obj.goTo(step);
window.scrollTo(0, 0);
}
},
props:{
template_text:Object,
......@@ -595,7 +604,7 @@ export default {
})
if(this.root){
this.step=2
this.$refs.stepper_obj.goTo(this.step)
this.slidegoto(this.step)
}
},
watch: { // Send step modification to database
......@@ -628,7 +637,7 @@ export default {
cursor: pointer;
}
.value-text{
font-size: max(0.75vw, 10px);
font-size: max(0.7vw, 10px);
}
......