198 lines
6.3 KiB
HTML
198 lines
6.3 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>
|
|
|
|
<style>
|
|
body, select { font-family: arial; font-size: 0.75rem; }
|
|
.line span { display: inline-block; width: 16%; }
|
|
div.line { border-bottom: 1px solid lightgrey; margin-bottom: 4px; }
|
|
.linehead span { font-weight: bold; }
|
|
</style>
|
|
<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 src='/data/gui/lib/jacks.min.js'></script> <!-- https://github.com/jccazeaux/jacks -->
|
|
<script src='/data/gui/lib/zeroupload.min.js'></script> <!-- https://github.com/jhuckaby/zeroupload -->
|
|
<script src='/data/gui/lib/vue-good-table.min.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"
|
|
var appdata = { users:[], depts:[], titles:[],
|
|
columns: [
|
|
{
|
|
label: 'Name',
|
|
field: 'name',
|
|
},
|
|
{
|
|
label: 'Age',
|
|
field: 'age',
|
|
type: 'number',
|
|
},
|
|
{
|
|
label: 'Created On',
|
|
field: 'createdAt',
|
|
type: 'date',
|
|
dateInputFormat: 'yyyy-MM-dd',
|
|
dateOutputFormat: 'MMM do yy',
|
|
},
|
|
{
|
|
label: 'Percent',
|
|
field: 'score',
|
|
type: 'percentage',
|
|
},
|
|
],
|
|
rows: [
|
|
{ id:1, name:"John", age: 20, createdAt: '2020-09-08', score: 0.03343 },
|
|
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
|
|
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
|
|
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
|
|
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
|
|
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
|
|
], }
|
|
Vue.config.devtools = true;
|
|
|
|
</script>
|
|
|
|
<h3>I'm making a vue app. Again. And I like it. </h3>
|
|
|
|
<p>1.1 Make your main div with id, and custom tags in it.</p>
|
|
|
|
<div id="sample">
|
|
|
|
<vue-good-table
|
|
:columns="columns"
|
|
:rows="rows"></vue-good-table>
|
|
|
|
<br /><br />
|
|
<div class="line linehead">
|
|
<span>Name</span>
|
|
<span>Title</span>
|
|
<span>Department</span>
|
|
<span>Old Department</span>
|
|
<span>Email</span>
|
|
<span>Phone</span>
|
|
</div><user-line v-for="p,i in users" v-bind:user="p" v-bind:key="'usr_'+i"></user-line>
|
|
</div>
|
|
|
|
|
|
<p>2. Make some components</p>
|
|
|
|
<script>
|
|
|
|
Vue.component('popup-field', {
|
|
props: ['fieldname', 'values', // an array of objs: {'text':'t', 'value':'v' }
|
|
'init_val', 'userid'],
|
|
data: function() { return {'selected':this.init_val, 'a':'b'} },
|
|
delimiters: ['[[', ']]'],
|
|
methods: {
|
|
new_val: function() {
|
|
jacks().get("/api/update_pers_dept/" + this.userid + "/" + this.selected)
|
|
.header("Accepts", "application/json")
|
|
.send( function(resp) { console.log("Tried to update department.")
|
|
console.log(resp) } )
|
|
},
|
|
},
|
|
template: `<select v-model="selected" @change="new_val()" >
|
|
<option v-for="k in values" :value="k.id">[[ k.name ]]</option>
|
|
</select>`
|
|
})
|
|
|
|
Vue.component('popup-title-field', {
|
|
props: ['fieldname', 'values',
|
|
'init_val', 'userid'],
|
|
data: function() { return {'selected':this.init_val, 'a':'b'} },
|
|
delimiters: ['[[', ']]'],
|
|
methods: {
|
|
new_val: function() {
|
|
jacks().get("/api/update_pers_title/" + this.userid + "/" + this.selected)
|
|
.header("Accepts", "application/json")
|
|
.send( function(resp) { console.log("Tried to update title.")
|
|
console.log(resp) } )
|
|
},
|
|
},
|
|
template: `<select v-model="selected" @change="new_val()" >
|
|
<option v-for="k in values" :value="k.id">[[ k.name ]]</option>
|
|
</select>`
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<p>3. Including the one that corresponds to the html / main div above. </p>
|
|
|
|
<script>
|
|
|
|
Vue.component('user-line', {
|
|
props: [ 'user', ],
|
|
data: function () {
|
|
return { "a": "a", "b": "b" }
|
|
},
|
|
delimiters: ['[[', ']]'],
|
|
methods: {
|
|
update2: _.debounce( function(column, row, newval) {
|
|
jacks().get("/api/update_pers_dept/" + row + "/" + newval)
|
|
.header("Accepts", "application/json")
|
|
.send( function(resp) { console.log("Tried to update department.")
|
|
console.log(resp) } )
|
|
}, 300),
|
|
update: function(column, row, newval) { }
|
|
},
|
|
template: `<div class="line">
|
|
<span>[[ user.first_name ]] [[ user.last_name ]]</span>
|
|
<span>
|
|
<popup-title-field :fieldname="'title'" :values="this.$root.titles"
|
|
:init_val="user.titleid" :userid="user.id" ></popup-title-field>
|
|
</span>
|
|
<span>
|
|
<popup-field :fieldname="'dept1'" :values="this.$root.depts"
|
|
:init_val="user.dept1" :userid="user.id" ></popup-field>
|
|
</span>
|
|
<span>[[ user.old_dept ]]</span>
|
|
<span>[[ user.email ]]</span>
|
|
<span>[[ user.phone_number ]]</span>
|
|
</div>`
|
|
})
|
|
|
|
|
|
|
|
var vm = new Vue({
|
|
data: appdata,
|
|
el: '#sample',
|
|
delimiters: ['[[', ']]'],
|
|
methods: {
|
|
pretty_session: function(ses) { },
|
|
remove: function (event) { console.log(event); console.log(this);
|
|
}},
|
|
computed: {
|
|
}
|
|
});
|
|
|
|
jacks().get("/api/personnel_fetch")
|
|
.header("Accepts", "application/json")
|
|
.send( function(resp) { vm.users = JSON.parse(resp.response)
|
|
console.log(vm.users) } )
|
|
|
|
jacks().get("/api/personnel_meta")
|
|
.header("Accepts", "application/json")
|
|
.send( function(resp) { var meta = JSON.parse(resp.response)
|
|
vm.depts = meta.depts
|
|
vm.titles = meta.titles
|
|
console.log(vm.depts) } )
|
|
|
|
console.log(filename)
|
|
|
|
</script>
|
|
|
|
|
|
|