768 lines
29 KiB
JavaScript
768 lines
29 KiB
JavaScript
|
|
|
|
function init_file_dropzone(parameter_name) {
|
|
Dropzone.options.myGreatDropzone = { // camelized version of the `id`
|
|
paramName: parameter_name, // The name that will be used to transfer the file
|
|
maxFilesize: 6 }; // MB
|
|
}
|
|
// init_file_dropzone("staffpicupload")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// VISUAL EFFECTS
|
|
//
|
|
|
|
|
|
|
|
function fade_message() {
|
|
var a_dom = document.querySelector('#alert');
|
|
TinyAnimate.animateCSS(a_dom, 'opacity', '', 1.0, 0.0, 750, 'easeInOutQuart', function() {
|
|
});
|
|
}
|
|
|
|
function alert_message(msg,color='yellow') {
|
|
var a = $('#alert')
|
|
a.text(msg)
|
|
a.css('background-color',color)
|
|
var a_dom = document.querySelector('#alert');
|
|
TinyAnimate.animateCSS(a_dom, 'opacity', '', 0.0, 1.0, 500, 'easeInOutQuart', function() {
|
|
setTimeout( fade_message, 2500 )
|
|
});
|
|
|
|
//a.css('visibility','visible')
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// FORM COMPONENTS
|
|
//
|
|
|
|
|
|
// TODO these should know if they're modifying the current user or someone else.
|
|
|
|
|
|
|
|
// A single text style question
|
|
const TQuestion = Vue.component('field', {
|
|
props: [ 'table', 'qid', 'question', 'answer', 'placeholder', 'targetid', ],
|
|
data: function () {
|
|
return { "a":this.answer } },
|
|
watch: {
|
|
"answer": function(val,Oldval) { this.a = val },
|
|
"a": function (val, oldVal) {
|
|
this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) }, },
|
|
template: `<div class="pure-control-group"><label v-if="this.question" :for="this.qid" class="question">{{ question }}</label>
|
|
<input :id="this.qid" type="text" class="form-control" v-model="a" :placeholder="placeholder" /></div>`,
|
|
})
|
|
|
|
// A single INLINE text style question
|
|
const TIQuestion = Vue.component('ifield', {
|
|
props: [ 'table', 'qid', 'question', 'answer', 'placeholder', 'myclass', 'targetid', ],
|
|
data: function () {
|
|
return { "a":this.answer } },
|
|
watch: {
|
|
"answer": function(val,Oldval) { this.a = val },
|
|
"a": function (val, oldVal) {
|
|
this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) }, },
|
|
template: `<input :id="this.qid" type="text" v-model="a" :placeholder="placeholder" :class="this.myclass" />`,
|
|
})
|
|
|
|
// A single checkbox
|
|
const Checkbox = Vue.component('checkbox', {
|
|
props: [ 'table', 'qid', 'question', 'answer', 'targetid', ],
|
|
data: function () {
|
|
return { "a":this.answer } },
|
|
watch: {
|
|
"answer": function(val,Oldval) { this.a = val },
|
|
"a": function (val, oldVal) {
|
|
var newVal = 0
|
|
if (val==true) { newVal = 1 }
|
|
this.$root.events.trigger('changed',[this.qid,this.table, newVal, this.targetid]) }, },
|
|
template: `<div class="pure-controls">
|
|
<label :for="this.qid" class="question pure-checkbox">
|
|
<input :id="this.qid" type="checkbox" class="form-control" v-model="a" />
|
|
{{ question }}</label></div>`
|
|
})
|
|
|
|
// A single long format text question
|
|
const TAQuestion = Vue.component('tfield', {
|
|
props: [ 'table', 'qid', 'question', 'answer', 'targetid', ],
|
|
data: function () {
|
|
return { "a": this.answer } },
|
|
watch: {
|
|
"a": function (val, oldVal) {
|
|
this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },
|
|
"answer": function (val, oldVal) { this.a = val },
|
|
},
|
|
template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
|
|
<textarea :id="this.qid" v-model="a"></textarea></div>` })
|
|
|
|
|
|
|
|
// Select menu
|
|
const SelMenu = Vue.component('selectmenu', {
|
|
props: [ 'table', 'qid', 'question', 'answer', 'menu', 'labelfield', 'targetid', ],
|
|
data: function () {
|
|
return { "a": this.answer } },
|
|
watch: {
|
|
"a": function (val, oldVal) {
|
|
this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },
|
|
"answer": function (val, oldVal) { this.a = val },
|
|
},
|
|
template: `<select :id="this.qid" v-model="a" class="pure-input-1-12">
|
|
<option v-for="o in this.$root[menu]" :value="o.id">{{o[labelfield]}}</option>
|
|
</select>` })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// ONE LINE OF THE STAFF DIR LISTING
|
|
//
|
|
const StaffLine = Vue.component('staff_line', {
|
|
props: [ 's', 'i' ],
|
|
//data: function() { return { } },
|
|
methods: {
|
|
nope: function() { return 1; },
|
|
odd: function(i) { if (i % 2 ==0) { return "even" } return "odd" },
|
|
bio: function() { return "bio.php?p=" + this.s.id },
|
|
gtitle: function() { if (this.s.gtitle) {return _.findWhere(this.$root.titles_menu, {id:this.s.gtitle}).name}; return "" },
|
|
gdept1: function() { if (this.s.dept1) {return _.findWhere(this.$root.depts_menu, {id:this.s.dept1}).name}; return "" },
|
|
grole: function() { if (this.s.role) {return _.findWhere(this.$root.roles_menu, {id:this.s.role}).descr}; return "" },
|
|
swapedit: function() { console.log("edit " + this.s.first_name + " " + this.s.last_name)
|
|
this.$emit('swapout', this.s.id) }
|
|
},
|
|
template: `<div><div :class="odd(i) + ' pure-g'">
|
|
<div class="pure-u-1-24"></div>
|
|
<div class="pure-u-1-4">{{s.first_name}} {{s.last_name}}</div>
|
|
<div class="pure-u-1-6">{{s.department}}</div>
|
|
<div class="pure-u-1-6">{{s.email}}</div>
|
|
<div class="pure-u-1-6">{{s.phone_number}}</div>
|
|
<div class="pure-u-1-6">{{s.room}}</div>
|
|
<div class="pure-u-1-24 clicky" v-on:click="swapedit"><span class="pure-button button-inlist">edit</span></div>
|
|
</div><div :class="odd(i) + ' pure-g'">
|
|
<div class="pure-u-1-24"></div>
|
|
<div class="pure-u-1-4 subtle">{{gtitle()}}</div>
|
|
<div class="pure-u-1-6 subtle">{{gdept1()}}</div>
|
|
<div class="pure-u-1-6 subtle">{{grole()}}</div>
|
|
<div class="pure-u-1-6 subtle">
|
|
Published: <span v-if="s.status!=0">Yes</span><span v-else>No</span><br />
|
|
personnel_ext: <span v-if="s.ext_id!=null">Yes</span><span v-else>No</span><br />
|
|
c_users: <span v-if="s.c_users_id_ext!=null || s.conf_id!=null">Yes</span><span v-else>No</span>
|
|
</div>
|
|
<div class="pure-u-1-6 subtle"></div>
|
|
<div class="pure-u-1-24 subtle"></div>
|
|
</div></div>
|
|
`
|
|
});
|
|
|
|
|
|
|
|
//
|
|
//
|
|
// STAFF DIR LISTING
|
|
//
|
|
// ONE LINE - BUT EDITING!
|
|
//
|
|
const StaffLineEdit = Vue.component('staff_line_edit', {
|
|
props: [ 's', 'i' ],
|
|
//data: function() { return { } },
|
|
methods: {
|
|
nope: function() { return 1; },
|
|
odd: function(i) { if (i % 2 ==0) { return "even" } return "odd" },
|
|
bio: function() { return "bio.php?p=" + this.s.id },
|
|
done: function() { this.$emit('done_edit') },
|
|
|
|
}, //v-lazy-container="{ selector: 'img' }"
|
|
template: `<form class="pure-form">
|
|
<div :class="odd(i) + ' pure-g'">
|
|
<div class="pure-u-1-24"><img :src="'//www.gavilan.edu/staff/' + s.dir_pic_path" width="25" height="auto" /></div>
|
|
<div class="pure-u-1-4">
|
|
<ifield myclass="double" table="personnel" qid="first_name" :answer="s.first_name" :targetid="s.id" placeholder="First Name"></ifield>
|
|
<ifield myclass="double" table="personnel" qid="last_name" :answer="s.last_name" :targetid="s.id" placeholder="Last Name"></ifield>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<ifield table="personnel" qid="department" :answer="s.department" :targetid="s.id" placeholder="Department"></ifield>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<ifield table="personnel" qid="email" :answer="s.email" :targetid="s.id" placeholder="Email"></ifield>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<ifield table="personnel" qid="phone_number" :answer="s.phone_number" :targetid="s.id" placeholder="Phone Number"></ifield>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<ifield table="personnel" qid="room" :answer="s.room" :targetid="s.id" placeholder="Room"></ifield>
|
|
</div>
|
|
<div class="pure-u-1-24 clicky" v-on:click="done"><span class="pure-button button-inlist-action">done</span></div>
|
|
</div>
|
|
<div :class="odd(i) + ' pure-g'">
|
|
<div class="pure-u-1-24"></div>
|
|
<div class="pure-u-1-4">
|
|
<selectmenu table="personnel_ext" qid="gtitle" :answer="s.gtitle" menu="titles_menu" :targetid="s.ext_id" labelfield="name"></selectmenu>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<selectmenu table="personnel_ext" qid="dept1" :answer="s.dept1" menu="depts_menu" :targetid="s.ext_id" labelfield="name"></selectmenu>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
<selectmenu table="personnel_ext" qid="role" :answer="s.role" menu="roles_menu" :targetid="s.ext_id" labelfield="descr"></selectmenu>
|
|
</div>
|
|
<div class="pure-u-1-6">
|
|
</div>
|
|
<div class="pure-u-1-62">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// STAFF DIR LISTING MAIN CONTAINER
|
|
//
|
|
const DirList = Vue.component('dirlist', {
|
|
data: function () {
|
|
return { "personnel":[], sortby:'last_name', search:'', reversed: false,
|
|
components: {n:StaffLine, e: StaffLineEdit }, editing: -1, } },
|
|
mounted: function() {
|
|
var self = this;
|
|
this.$root.fetch_menus();
|
|
|
|
fetch('dir_api.php?a=list', { method: 'GET' }).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.personnel = r2;
|
|
_.each( self.personnel, function(x) {
|
|
if (x.dir_photo_path==null) { x.dir_photo_path='images_sm/nobody.jpg' }
|
|
x.searchable = x.first_name.toLowerCase() + ' ' + x.last_name.toLowerCase()
|
|
if (x.department) { x.searchable += ' ' + x.department.toLowerCase() }
|
|
} )
|
|
//if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
|
|
//if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
|
|
// pause half a second for the children to get populated before registering update events...
|
|
setTimeout(function() {
|
|
//self.active = true;
|
|
// fancier text editors...
|
|
//pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
|
|
}, 1600);
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
},
|
|
methods: {
|
|
setsort: function(ss) {
|
|
if (this.sortby == ss) { this.reversed = ! this.reversed }
|
|
else {
|
|
this.reversed = false
|
|
this.sortby = ss
|
|
}
|
|
},
|
|
swapme: function(x) {
|
|
this.editing = x
|
|
},
|
|
done_edit: function(id) {
|
|
this.editing = -1
|
|
},
|
|
am_editing: function(id) {
|
|
if (id == this.editing) { return StaffLineEdit }
|
|
return StaffLine
|
|
},
|
|
},
|
|
computed: {
|
|
filtered: function() {
|
|
var ff = this.personnel
|
|
var self = this
|
|
if (this.search) {
|
|
var ss = self.search.toLowerCase()
|
|
ff = ff.filter(function(x) { return x.searchable.includes(ss) }) }
|
|
|
|
ff = _.sortBy(ff, function(x) {
|
|
if (x[self.sortby]) {
|
|
var s = x[self.sortby];
|
|
return s.trim().toLowerCase() }
|
|
return '' })
|
|
if (this.reversed) {
|
|
ff.reverse()
|
|
}
|
|
return ff
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
template: `<div class="">
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"></div>
|
|
<div class="pure-u-3-4"><b>Filter: </b><input type="text" v-model="search" name="dirfilter" class="double" /></div>
|
|
</div>
|
|
<br />
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"> </div>
|
|
</div>
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"></div>
|
|
<div v-on:click="setsort('last_name')" class="pure-u-1-4 clicky"><b>Name</b></div>
|
|
<div v-on:click="setsort('department')" class="pure-u-1-6 clicky"><b>Dept</b></div>
|
|
<div v-on:click="setsort('email')" class="pure-u-1-6 clicky"><b>Email</b></div>
|
|
<div class="pure-u-1-6"><b>Phone</b></div>
|
|
<div v-on:click="setsort('room')" class="pure-u-1-6 clicky"><b>Room</b></div>
|
|
</div>
|
|
<!-- <staff_line_edit :s="this.$root.user" :i="0" :key="'staff_000'"></staff_line_edit> -->
|
|
<component :is="am_editing(p.id)" v-on:swapout="swapme" v-on:done_edit="done_edit" v-for="p,i in filtered" :s="p" :i="i" :key="'staff_'+p.id + '_' + i"></component>
|
|
</div>` })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// ACTIVITIES LIST MAIN CONTAINER
|
|
//
|
|
const ActivityList = Vue.component('activitylist', {
|
|
data: function () {
|
|
return { activities:[], sortby:'title', reversed:false, editing: -1, } },
|
|
mounted: function() {
|
|
var self = this;
|
|
this.$root.fetch_menus();
|
|
|
|
fetch('dir_api.php?a=get/sessions', { method: 'GET' }).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.activities = r2;
|
|
_.each( self.activities, function(x) {
|
|
x.searchable = x.title.toLowerCase() + ' ' + x.desc.toLowerCase()
|
|
//if (x.department) { x.searchable += ' ' + x.department.toLowerCase() }
|
|
} )
|
|
//if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
|
|
//if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
|
|
// pause half a second for the children to get populated before registering update events...
|
|
setTimeout(function() {
|
|
//self.active = true;
|
|
// fancier text editors...
|
|
//pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
|
|
}, 1600);
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
},
|
|
methods: {
|
|
setsort: function(ss) {
|
|
if (this.sortby == ss) { this.reversed = ! this.reversed }
|
|
else {
|
|
this.reversed = false
|
|
this.sortby = ss
|
|
}
|
|
},
|
|
swapme: function(x) {
|
|
this.editing = x
|
|
},
|
|
done_edit: function(id) {
|
|
this.editing = -1
|
|
},
|
|
am_editing: function(id) {
|
|
return 0;
|
|
},
|
|
},
|
|
computed: {
|
|
filtered: function() {
|
|
var ff = this.activities
|
|
var self = this
|
|
if (this.search) {
|
|
var ss = self.search.toLowerCase()
|
|
ff = ff.filter(function(x) { return x.searchable.includes(ss) }) }
|
|
|
|
ff = _.sortBy(ff, function(x) {
|
|
if (x[self.sortby]) {
|
|
var s = x[self.sortby];
|
|
return s.trim().toLowerCase() }
|
|
return '' })
|
|
if (this.reversed) {
|
|
ff.reverse()
|
|
}
|
|
return ff
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
template: `<div class="">
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"></div>
|
|
<div class="pure-u-3-4"><b>Filter: </b><input type="text" v-model="search" name="dirfilter" class="double" /></div>
|
|
</div>
|
|
<br />
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"> </div>
|
|
</div>
|
|
<div class="pure-g pure-form">
|
|
<div class="pure-u-1-24"></div>
|
|
<div v-on:click="setsort('last_name')" class="pure-u-1-4 clicky"><b>Name</b></div>
|
|
<div v-on:click="setsort('department')" class="pure-u-1-6 clicky"><b>Dept</b></div>
|
|
<div v-on:click="setsort('email')" class="pure-u-1-6 clicky"><b>Email</b></div>
|
|
<div class="pure-u-1-6"><b>Phone</b></div>
|
|
<div v-on:click="setsort('room')" class="pure-u-1-6 clicky"><b>Room</b></div>
|
|
</div>
|
|
<!-- <staff_line_edit :s="this.$root.user" :i="0" :key="'staff_000'"></staff_line_edit> -->
|
|
<component :is="am_editing(p.id)" v-on:swapout="swapme" v-on:done_edit="done_edit" v-for="p,i in filtered" :s="p" :i="i" :key="'staff_'+p.id + '_' + i"></component>
|
|
</div>` })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// VERY SIMPLE CALENDAR
|
|
//
|
|
const MyCal = Vue.component('mycal', {
|
|
data: function () {
|
|
return { today:new Date(), currentMonth:0, currentYear:0, selectYear:'', selectMonth:'',
|
|
months:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
activities:[],
|
|
by_date: {},
|
|
editing: -1, } },
|
|
mounted: function() {
|
|
var self = this
|
|
this.currentYear = this.today.getFullYear()
|
|
this.currentMonth = this.today.getMonth()
|
|
this.selectYear = this.currentYear
|
|
this.selectMonth = this.currentMonth
|
|
|
|
fetch('dir_api.php?a=get/sessions', { method: 'GET' }).then(function (response) {
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.activities = r2
|
|
_.each( self.activities, function(x) {
|
|
var dd = new Date(x.starttime);
|
|
var [m,d,y] = [dd.getMonth(), dd.getDate(), dd.getFullYear()] // months start at 0....
|
|
var d_string = d + "-" + m + "-" + y
|
|
if (self.by_date[d_string]) { self.by_date[d_string].push(x) }
|
|
else { self.by_date[d_string] = [x, ] } } )
|
|
self.$forceUpdate()
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
},
|
|
methods: {
|
|
thisDay: function(i,j) {
|
|
var dayOfMonth = ((7*(i-1))+j)-this.firstDay()
|
|
return dayOfMonth
|
|
},
|
|
eventsThisDay: function(i,j) {
|
|
var dayOfMonth = ((7*(i-1))+j)-this.firstDay()
|
|
var d_string = dayOfMonth + "-" + this.selectMonth + "-" + this.selectYear
|
|
var day_text = ''
|
|
|
|
if (this.by_date[d_string]) {
|
|
evts = _.filter( this.by_date[d_string], function(x) { console.log(x); return x.typeId!="101" } )
|
|
console.log(evts)
|
|
return evts
|
|
}
|
|
return []
|
|
},
|
|
cleanTime: function(e) {
|
|
var dd = new Date(e.starttime);
|
|
var [h,m] = [dd.getHours(), dd.getMinutes()]
|
|
var ampm = 'am'
|
|
if (h > 12) { h -= 12; ampm = 'pm' }
|
|
if (m == 0) { m = '' }
|
|
else { m = ':' + m }
|
|
return h + m + ampm
|
|
},
|
|
daysInMonth: function() {
|
|
return 32 - new Date(this.selectYear, this.selectMonth, 32).getDate()
|
|
},
|
|
firstDay: function() {
|
|
return (new Date(this.selectYear, this.selectMonth)).getDay()
|
|
},
|
|
next: function() {
|
|
this.selectYear = (this.selectYear === 11) ? this.selectYear + 1 : this.selectYear;
|
|
this.selectMonth = (this.selectMonth + 1) % 12;
|
|
},
|
|
previous: function() {
|
|
this.selectYear = (this.selectYear === 0) ? this.selectYear - 1 : this.selectYear;
|
|
this.selectMonth = (this.selectMonth === 0) ? 11 : this.selectMonth - 1;
|
|
},
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
},
|
|
template: `<div class="calendar">
|
|
<h2>{{months[selectMonth] + " " + selectYear}}
|
|
<div class="btn_container">
|
|
<div class="btn_float">
|
|
<button class="pure-button" v-on:click="previous">Previous</button>
|
|
<button class="pure-button" v-on:click="next">Next</button>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Sun</th>
|
|
<th>Mon</th>
|
|
<th>Tue</th>
|
|
<th>Wed</th>
|
|
<th>Thu</th>
|
|
<th>Fri</th>
|
|
<th>Sat</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="calendar-body">
|
|
<tr v-for="i in 6" v-if="(((7*(i-1)))-firstDay() < daysInMonth()+1)">
|
|
<td v-for="j in 7">
|
|
<span v-if="( ((7*(i-1))+j)-firstDay() > 0) && (((7*(i-1))+j)-firstDay() < daysInMonth()+1)">
|
|
<div class="do_month">{{ thisDay(i,j) }}</div>
|
|
<div class="cal_evt" v-for="ev in eventsThisDay(i,j)">{{cleanTime(ev)}} {{ ev.title }}</div>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!--<label for="month">Jump To: </label>
|
|
<select class="pure-input-1-12" name="month" id="month" v-model="selectMonth">
|
|
<option v-for="m in 12" :value="m-1">{{months[m-1]}}</option>
|
|
</select>
|
|
<label for="year"></label>
|
|
<select class="pure-input-1-12" name="year" id="year" v-model="selectYear">
|
|
<option v-for="i in 5" :value="2018+i">{{2018+i}}</option>
|
|
</select>-->
|
|
</div>` })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// AJAX POST UPDATES TO API
|
|
//
|
|
|
|
function post_update(table,cols,vals,id=0) {
|
|
action = "nothing"
|
|
if (table=="personnel") { action = "update" }
|
|
if (table=="personnel_ext") { action = "update_xt" }
|
|
if (table=="webpages") { action = "update_web" }
|
|
var idstr = ""
|
|
if (id) { idstr = "&id=" + id }
|
|
|
|
console.log("a="+action+"&cols="+cols+"&vals="+vals+idstr)
|
|
|
|
fetch('dir_api.php', {
|
|
method: 'POST',
|
|
headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }),
|
|
body: "a="+action+"&cols="+cols+"&vals="+vals+idstr,
|
|
}).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
// display success alert
|
|
alert_message('Saved.')
|
|
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { alert_message("Couldn't save!",pink); console.warn('Something went wrong.', err); });
|
|
}
|
|
|
|
var evt = {
|
|
clear_tables: function() {
|
|
var self = this
|
|
_.each( this.tables, function(x) { self[x] = [] } )
|
|
this.data = {}
|
|
this.target_ids = {} },
|
|
send_update: function() {
|
|
var self = this
|
|
//console.log("Sending update... (not really)")
|
|
_.each( this.tables, function(x) {
|
|
if (self[x].length) {
|
|
var cols = ""
|
|
var vals = ""
|
|
_.each(self[x], function(y) {
|
|
if (cols.length) { cols += "," }
|
|
if (vals.length) { vals += "," }
|
|
cols += y
|
|
if (typeof self.data[y] == "string") {
|
|
re = /,/g
|
|
vals += encodeURIComponent(self.data[y].replace(re,'[CMA]') ) }
|
|
else { vals += self.data[y] }
|
|
})
|
|
//console.log("table: " + x + " Columns: " + cols + ".. Vals: " + vals)
|
|
var edit_other = 0
|
|
if (self.target_ids[x]) { edit_other = self.target_ids[x] }
|
|
post_update(x, cols, vals, edit_other)
|
|
}
|
|
} ) },
|
|
info: "what am I?" ,
|
|
data: {},
|
|
target_ids: {},
|
|
tables: ['personnel','personnel_ext','webpages','welcomepages','conf_sessions','conf_hosts',
|
|
'pers_departments','pers_committees','pers_titles'],
|
|
}
|
|
|
|
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// INITIALIZE THE APP
|
|
//
|
|
|
|
evt.clear_tables()
|
|
MicroEvent.mixin(evt);
|
|
|
|
var app = new Vue({
|
|
el: '#dir_editor',
|
|
data: { events: evt,
|
|
msg: 'hello', active: false,
|
|
user: {'last_name':'', 'first_name':'', 'department':'', 'extension':'', 'phone_number':'', 'email':'',
|
|
'staff_type':'', 'room':'', 'status':'', 'user_id':'', 'password':'', 'time_created':'', 'time_updated':'',
|
|
'id':'', 'web_on':'', use_dir_photo:0, general_photo_release:0,
|
|
officehours:'', title:'', picture:'', education:'', bio:'', courses:'', personal_page:'', changed:'' },
|
|
filter: [],
|
|
roles_menu: [],
|
|
depts_menu: [],
|
|
titles_menu: [],
|
|
committees_menu: [],
|
|
menus_fetched: false,
|
|
},
|
|
watch: { },
|
|
methods: {
|
|
fetch_menus: function() {
|
|
if (! this.menus_fetched) {
|
|
var self = this;
|
|
fetch('dir_api.php?a=menus', { method: 'GET' }).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.depts_menu = r2.departments;
|
|
self.roles_menu = r2.roles;
|
|
self.titles_menu = r2.titles;
|
|
self.committees_menu = r2.committees;
|
|
self.menus_fetched = true;
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
}
|
|
|
|
|
|
|
|
},
|
|
},
|
|
computed: { },
|
|
mounted: function() {
|
|
var self = this;
|
|
fetch('dir_api.php', { method: 'GET' }).then(function (response) {
|
|
// The API call was successful!
|
|
if (response.ok) {
|
|
response.json().then( function(r2) {
|
|
self.user = r2;
|
|
if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
|
|
if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
|
|
// pause half a second for the children to get populated before registering update events...
|
|
setTimeout(function() {
|
|
self.active = true;
|
|
// fancier text editors...
|
|
//pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
|
|
}, 1600);
|
|
} )
|
|
} else { return Promise.reject(response) }
|
|
}).then(function (data) {
|
|
}).catch(function (err) { console.warn('Something went wrong.', err); });
|
|
}
|
|
})
|
|
|
|
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
//
|
|
// SIMPLE EVENTS
|
|
//
|
|
|
|
var update_fxn = _.debounce( function() {
|
|
alert_message('saving...','lightgreen')
|
|
evt.send_update(); evt.clear_tables(); }, 1300 )
|
|
|
|
evt.bind('changed', function(dat) {
|
|
if (app.active) {
|
|
var column = dat[0]
|
|
var table = dat[1]
|
|
var value = dat[2]
|
|
var target = dat[3]
|
|
console.log(dat)
|
|
this.data[column] = value
|
|
if (!this[table].includes(column) ) {this[table].push(column)}
|
|
if (target) { this.target_ids[table] = target }
|
|
update_fxn() }
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
//
|
|
// MISC
|
|
//
|
|
//
|
|
|
|
//
|
|
// <img :src="'//www.gavilan.edu/staff/' + s.dir_photo_path" width="25" height="auto" />
|
|
// v-lazy-container="{ selector: 'img' }"
|
|
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|