ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add survey.js demo implementation to frontend

This commit is contained in:
Ramon Wenger 2019-06-20 14:51:09 +02:00
parent 590fd180c3
commit 2494245b12
6 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>skillbox</title> <title>skillbox</title>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<!-- FIXME: replace with own css -->
<link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<script> <script>
window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac'; window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
@ -27,8 +30,8 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="center"> <div class="center">
</div> </div>
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

49
client/package-lock.json generated
View File

@ -4656,8 +4656,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -4675,13 +4674,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -4694,18 +4691,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -4808,8 +4802,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -4819,7 +4812,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -4832,20 +4824,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -4862,7 +4851,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -4935,8 +4923,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -4946,7 +4933,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5022,8 +5008,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -5053,7 +5038,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -5071,7 +5055,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -5110,13 +5093,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
@ -11236,6 +11217,14 @@
"has-flag": "^3.0.0" "has-flag": "^3.0.0"
} }
}, },
"survey-vue": {
"version": "1.0.87",
"resolved": "https://registry.npmjs.org/survey-vue/-/survey-vue-1.0.87.tgz",
"integrity": "sha512-NKxrv6KHtGr3P5gr+nx+cu3OkvBgZUgV+cdb0mzvqObex8PJD+IEsbE4NpE6yeoIN6h6NLxaX+ns9Y2fV+xv0A==",
"requires": {
"vue": "^2.1.10"
}
},
"svgo": { "svgo": {
"version": "0.7.2", "version": "0.7.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",

1
client/package.json
View File

@ -64,6 +64,7 @@
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"survey-vue": "^1.0.87",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"unfetch": "^3.1.1", "unfetch": "^3.1.1",
"uploadcare-widget": "^3.6.0", "uploadcare-widget": "^3.6.0",

7
client/src/main.js
View File

@ -10,10 +10,10 @@ import router from './router'
import store from '@/store/index' import store from '@/store/index'
import VueScrollTo from 'vue-scrollto'; import VueScrollTo from 'vue-scrollto';
import VueAnalytics from 'vue-analytics'; import VueAnalytics from 'vue-analytics';
import { Validator, install as VeeValidate } from 'vee-validate/dist/vee-validate.minimal.esm.js'; import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.minimal.esm.js';
import { required, min } from 'vee-validate/dist/rules.esm.js'; import {required, min} from 'vee-validate/dist/rules.esm.js';
import veeDe from 'vee-validate/dist/locale/de'; import veeDe from 'vee-validate/dist/locale/de';
import {dateFilter} from './filters/date-filter' import {dateFilter} from './filters/date-filter';
Vue.config.productionTip = false; Vue.config.productionTip = false;
@ -108,6 +108,7 @@ Vue.use(VeeValidate, {
Vue.filter('date', dateFilter); Vue.filter('date', dateFilter);
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',

37
client/src/pages/survey.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div>
<h1>Survey</h1>
<survey :survey='survey'></survey>
</div>
</template>
<script>
import * as SurveyVue from 'survey-vue';
const Survey = SurveyVue.Survey;
export default {
components: {
Survey
},
data() {
let json = {"pages":[{"name":"First page","elements":[{"type":"text","name":"question1","title":"Some question"},{"type":"checkbox","name":"question2","title":"Did you like the above question?","choices":[{"value":"item1","text":"Yes"},{"value":"item2","text":"No"},{"value":"item3","text":"Maybe?"}]},{"type":"radiogroup","name":"question3","title":"How many more questions would you like?","choices":[{"value":"item1","text":"Many"},{"value":"item2","text":"A lot!"},{"value":"item3","text":"Tons"}]},{"type":"expression","name":"question12","visibleIf":"{question3} = \"item2\"","title":"Many","expression":"'Hallo {question1}'","commentText":"Other (describe)"},{"type":"dropdown","name":"question4","title":"Are you tired yet?","hasOther":true,"choices":[{"value":"item1","text":"No"},{"value":"item2","text":"Certainly not!"}]},{"type":"comment","name":"question5","title":"Any comments?"},{"type":"rating","name":"question6","title":"How great is this quiz so far?"},{"type":"imagepicker","name":"question7","title":"Which image would describe this quiz best?","choices":[{"value":"lion","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"},{"value":"giraffe","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"},{"value":"panda","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"},{"value":"camel","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"}]},{"type":"boolean","name":"question8","title":"Vote for this quiz?"},{"type":"html","name":"question9","html":"<h1>Look at you go!</h1>"},{"type":"expression","name":"question10","title":"What is this?","expression":"'{question1}'","displayStyle":"currency","currency":"CHF","commentText":"Other (describe)"},{"type":"matrix","name":"question11","columns":["Column 1","Column 2","Column 3"],"rows":["Row 1","Row 2"]}]},{"name":"Second Page","elements":[{"type":"dropdown","name":"question13","hasOther":true,"choices":["item1","item2","item3"]}],"title":"Dini Mer","description":"Hallo Velo","questionsOrder":"random"}]};
let survey = new SurveyVue.Model(json);
survey.onComplete.add((sender, options) => {
console.log('complete');
console.log(sender);
console.log(options);
sender.clear(false);
sender.mode = 'display';
});
return {
survey
}
}
}
</script>

7
client/src/router/index.js
View File

@ -24,6 +24,7 @@ import activity from '@/pages/activity'
import Router from 'vue-router' import Router from 'vue-router'
import editProject from '@/pages/editProject' import editProject from '@/pages/editProject'
import newProject from '@/pages/newProject' import newProject from '@/pages/newProject'
import surveyPage from '@/pages/survey'
import store from '@/store/index'; import store from '@/store/index';
@ -45,9 +46,7 @@ const routes = [
component: submissions, component: submissions,
meta: {filter: true} meta: {filter: true}
}, },
] ]
}, },
{path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}}, {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}},
{path: '/new-room/', name: 'new-room', component: newRoom}, {path: '/new-room/', name: 'new-room', component: newRoom},
@ -87,6 +86,10 @@ const routes = [
{path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}}, {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
] ]
}, },
{
path: '/survey',
component: surveyPage
},
{path: '*', component: p404} {path: '*', component: p404}
]; ];