195 lines
6.4 KiB
HTML
195 lines
6.4 KiB
HTML
<!doctype html>
|
|
<title>Welcome To Gavilan College</title>
|
|
{% if name %}
|
|
<h1>Editor for: {{ name }}</h1>
|
|
<p> <b>canvas id:</b> {{ id }}
|
|
{% else %}
|
|
<h1>Hello, World!</h1>
|
|
{% endif %}
|
|
|
|
<p>
|
|
This is a page. Vue is: 1. set up your data. fetch json of either 1 item or the whole list.
|
|
</p>
|
|
|
|
|
|
<script>
|
|
Vue.config.devtools = true;
|
|
|
|
var appdata = { "allsessions": [],
|
|
"goo":"", "name":"", "uid":"",
|
|
"mysessions": [],
|
|
"questions": [],
|
|
"times":times, "headers":headers, "colors":colors, };
|
|
|
|
appdata.goo=x['user']['goo']; appdata.name = x['user']['name'];
|
|
appdata.uid = x['user']['id']; appdata.mysessions = x['mysessions'];
|
|
appdata.other = x['other'];
|
|
appdata.questions = _.groupBy(x['questions'], function(z) { return z.ses_id; });
|
|
|
|
</script>
|
|
|
|
|
|
<p>1.1 Make your main div with id, and custom tags in it.</p>
|
|
|
|
<div id="sample">
|
|
<post-session v-for="ses in orderedSessions" :ses="ses" :qmodel="questions[parseInt(ses.session)]"></post-session>
|
|
</div>
|
|
|
|
|
|
<p>2. Make some components</p>
|
|
|
|
<script>
|
|
|
|
// A single text style question
|
|
Vue.component('t-question', {
|
|
props: [ 'qq' ],
|
|
data: function () {
|
|
return {
|
|
"answer": ""
|
|
}
|
|
},
|
|
watch: {
|
|
"qq.answer": function (val, oldVal) { this.$emit('update', this.qq.qid, val); },
|
|
},
|
|
template: `<div><span class="question">{{ qq.question }}</span><br />
|
|
<textarea v-model="qq.answer"></textarea>
|
|
<br />
|
|
</div>`
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<p>3. Including the one that corresponds to the html / main div above. </p>
|
|
|
|
<script>
|
|
|
|
Vue.component('post-session', {
|
|
props: [ 'ses','qmodel' ],
|
|
data: function () {
|
|
var st = "wait";
|
|
if ( this.passed(this.ses) && this.ses.surveyed ) { st = "ok";}
|
|
else if ( this.passed(this.ses) ) { st = "need"; }
|
|
|
|
var is_cert = true;
|
|
if (this.ses.certified_at == null) { is_cert = false; }
|
|
|
|
return { "is_cert": is_cert, "state": st }
|
|
},
|
|
methods: {
|
|
docert: function(c) { var card = this;
|
|
var d = 1;
|
|
if (!c) { d = null; }
|
|
var save_answer_url = "conf3.php?u=" + card.ses.user + "&cert=" + card.ses.ses_id + "&q=" + d;
|
|
console.log(save_answer_url);
|
|
$.ajax({
|
|
url: save_answer_url,
|
|
context: document.body
|
|
}).done(function(r) {
|
|
card.state = "ok_saved";
|
|
console.log('ajax returned'); console.log(r);
|
|
}); },
|
|
update: _.debounce( function(qid,newval) { var card = this;
|
|
var save_answer_url = "conf3.php?u=" + card.ses.user + "&s=" + card.ses.ses_id + "&q=" + qid + "&answer=" + encodeURI(newval);
|
|
console.log(save_answer_url);
|
|
|
|
$.ajax({
|
|
url: save_answer_url, // u s q answer
|
|
context: document.body
|
|
}).done(function(r) {
|
|
card.state = "ok_saved";
|
|
// console.log('ajax returned'); console.log(r);
|
|
});
|
|
}, 300),
|
|
|
|
format_dt: format_dt,
|
|
passed: function(s) {
|
|
var t = s['starttime'].split(/[- :]/);
|
|
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
|
|
var milli = Date.now() - d;
|
|
if (milli > 0) { return true; }
|
|
return false; },
|
|
needs_svy(s) {
|
|
if ( this.passed(s) && ! s.surveyed ) { return true;}
|
|
return false;
|
|
}
|
|
},
|
|
template: `<div id="single_session" class="ses_card">
|
|
<div class="card_flags">
|
|
<template v-if="state=='need'">
|
|
<span class="badge badge-warning">Needs Survey</span>
|
|
<img src="map/images/icons/alert-circle.svg" alt="" width="22" height="22" title="Click to answer survey">
|
|
</template>
|
|
<template v-if="state=='ok'">
|
|
<span class="badge badge-success">OK</span>
|
|
<img src="map/images/icons/check.svg" alt="" width="22" height="22" title="OK">
|
|
</template>
|
|
<template v-if="state=='wait'">
|
|
<span class="badge badge-success">Not yet</span>
|
|
<img src="map/images/icons/check.svg" alt="" width="22" height="22" title="Wait till after session">
|
|
</template>
|
|
<template v-if="state=='loading'">
|
|
<span class="badge badge-success">OK</span>
|
|
<img src="map/images/spinner.gif" alt="" width="22" height="22" title="OK">
|
|
</template>
|
|
<template v-if="state=='ok_saved'">
|
|
<span class="badge badge-success">SAVED</span>
|
|
<img src="map/images/icons/check.svg" alt="" width="22" height="22" title="Saved">
|
|
</template>
|
|
</div>
|
|
<h3>Event: {{ ses.title }} </h3>
|
|
<span class="minor">Date:</span> {{ format_dt(ses) }}
|
|
<span class="minor">Location:</span> {{ ses.location }} <br />
|
|
|
|
<span class="minor">{{ ses.desc }}</span><br /><br />
|
|
<template v-for="q in qmodel">
|
|
<t-question v-if="q.type==1" :qq="q" @update="update"></t-question><br />
|
|
<n-question v-if="q.type==2" :qq="q" @update="update"></n-question><br />
|
|
</template><br />
|
|
<icertify :c="is_cert"></icertify>
|
|
<!--<template v-if=" ! passed(ses)">
|
|
</template>
|
|
<p v-else>This session hasn't occured yet. Check back after it to do the survey.</p>-->
|
|
|
|
</div>`
|
|
})
|
|
|
|
|
|
|
|
var vm = new Vue({
|
|
data: appdata, el: '#sample',
|
|
methods: {
|
|
format_dt: format_dt,
|
|
pretty_track: pretty_track,
|
|
pretty_session: function(ses) { },
|
|
remove: function (event) { console.log(event); console.log(this);
|
|
if (g_login) {
|
|
var re = /\w+_(\d+)/;
|
|
var match = re.exec(event.target.id);
|
|
remove(match[1]); } }, },
|
|
computed: {
|
|
orderedSessions: function () {
|
|
return _.sortBy(this.mysessions, 'starttime');
|
|
},
|
|
groupedSessions: function () {
|
|
var only = _.without( this.allsessions, _.findWhere(this.allsessions, { id:"1002" }));
|
|
return _.sortBy ( _.groupBy( _.sortBy(only, 'track'), 'starttime' ), function(x) { return x[0].starttime; });
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script src='/data/gui/lib/d3.js'></script>
|
|
<script src='/data/gui/lib/lodash.js'></script>
|
|
<script src='/data/gui/lib/vue.js'></script>
|
|
<script>
|
|
var margin = {top: 20, right: 20, bottom: 70, left: 40}
|
|
|
|
var filename= "/data/users/logs/{% if id %}{{ id }}{% else %}241{% endif %}.csv"
|
|
console.log(filename)
|
|
|
|
</script>
|