if (location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}




//    _          _                     
//   | |        | |                    
//   | |__   ___| |_ __   ___ _ __ ___ 
//   | '_ \ / _ \ | '_ \ / _ \ '__/ __|
//   | | | |  __/ | |_) |  __/ |  \__ \
//   |_| |_|\___|_| .__/ \___|_|  |___/
//                | |                  
//                |_|       


  
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")


function parsesqltime(mysqldate) {  // 2021-01-29 09:00:00
    if (! mysqldate) { return 0 }
    var field = mysqldate.match(/^(\d\d\d\d)\-(\d+)\-(\d+)\s(\d+)\:(\d+)\:(\d+)$/)      
    var mydate = new Date(field[1], field[2] - 1 , field[3], field[4], field[5], field[6])
    return mydate }

function dj(mysqldate) { return dayjs(parsesqltime(mysqldate)) }

Object.defineProperty(Vue.prototype, '$dj', { value: dj });
Object.defineProperty(Vue.prototype, '$parsesqltime', { value: parsesqltime });




//    ________   __
//   |  ____\ \ / /
//   | |__   \ V / 
//   |  __|   > <  
//   | |     / . \ 
//   |_|    /_/ \_\
//                 
//       
// 
//   VISUAL EFFECTS
//



function fade_message(theselector='#alert') {
    var a_dom = document.querySelector(theselector);
    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 ) }); }

function fadein_message(theclass='success') {
    //var a = $('#'+theclass)
    //a.css('visibility','visible')
    var a_dom = document.querySelector('.'+theclass);
    TinyAnimate.animateCSS(a_dom, 'opacity', '', 0.0, 1.0, 500, 'easeInOutQuart', function() {
        setTimeout( function() { fade_message('.'+theclass) }, 2500 ) }); }


//                                                     _       
//                                                    | |      
//     ___ ___  _ __ ___  _ __   ___  _ __   ___ _ __ | |_ ___ 
//    / __/ _ \| '_ ` _ \| '_ \ / _ \| '_ \ / _ \ '_ \| __/ __|
//   | (_| (_) | | | | | | |_) | (_) | | | |  __/ | | | |_\__ \
//    \___\___/|_| |_| |_| .__/ \___/|_| |_|\___|_| |_|\__|___/
//                       | |                                   
//                       |_|        

// 
//   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', 'myclass' ],
  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" :class="this.myclass" v-model="a"></textarea></div>` })



// long format text WYSIWYG HTML
const HTAQuestion = Vue.component('htfield', {
    props: [ 'table', 'qid', 'question', 'answer', 'targetid', 'myclass' ],
    data: function () { return {  "a": this.answer,   "p":0,    } },            // the pell editor object
    mounted: function() {
        var self = this
        var element = document.getElementById(self.qid)
        console.log(element)
        this.p = pell.init( { element: element, onChange: function(h) { 
            self.$root.events.trigger('changed',[self.qid, self.table, h, self.targetid]) } } )
        self.p.content.innerHTML = self.answer },
    watch: { 
        "answer": function (val, oldVal) { this.p.content.innerHTML = val }, },
    template: `<div><label :for="this.qid" class="question">{{ question }} </label>
    <div :id="this.qid" class="pure-control-group pell"></div></div>` })

// long format text WYSIWYG HTML      FORM ALIGNED STYLE
const HTAQuestionFA = Vue.component('htfield_fa', {
    props: [ 'table', 'qid', 'question', 'answer', 'targetid', 'myclass' ],
    data: function () { return {  "a": this.answer,   "p":0,    } },            // the pell editor object
    mounted: function() {
        var self = this
        var element = document.getElementById(self.qid)
        console.log(element)
        this.p = pell.init( { element: element, onChange: function(h) { 
            self.$root.events.trigger('changed',[self.qid, self.table, h, self.targetid]) } } )
        self.p.content.innerHTML = self.answer },
    watch: { 
        "answer": function (val, oldVal) { this.p.content.innerHTML = val }, },
    template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
    <div :id="this.qid" class="pure-control-group form-control pell"></div></div>` })

// A single numeric question    
const NQuestioon = Vue.component('n-question', {
  props: [ 'qq' ],
  data: function () { return { "answer": "" } },
  watch: { "qq.answer": function (val, oldVal) { 
      this.$emit('dirty') 
      this.$emit('update', this.qq.qid, val); }, },
  template: `<div class=""><span class="question">{{ qq.question }}</span><br />
<div class="makeup_indent "><input class="form-check-input" type="radio" id="one" value="1" v-model="qq.answer">
<label class="form-check-label" for="one">One</label> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input class="form-check-input" type="radio" id="two" value="2" v-model="qq.answer">
<label class="form-check-label" for="two">Two</label> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input class="form-check-input" type="radio" id="three" value="3" v-model="qq.answer">
<label class="form-check-label" for="three">Three</label> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input class="form-check-input" type="radio" id="four" value="4" v-model="qq.answer">
<label class="form-check-label" for="four">Four</label> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
<input class="form-check-input" type="radio" id="five" value="5" v-model="qq.answer">
<label class="form-check-label" for="five">Five</label> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; 
</div></div>`
}) 



// The "I Certify" question
const ICertify = Vue.component('icertify', {
  props: [ 'c' ],
  data: function () { return { "checked": this.c } },
  watch: { checked() { console.log('checked 1'); console.log(this.checked); 
      this.$emit('dirty') 
      this.$parent.docert(this.checked); },
  },
  template: `<div class="makeup_indent"><input class="form-check-input" type="checkbox" id="checkbox"  v-model="checked">
            <label class="icert form-check-label" for="checkbox">I certify that I have attended this event.</label><br />
            </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>` })


// Select menu    FORM ALIGNED STYLE
const SelMenuFA = Vue.component('selectmenu_fa', {
  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: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
  <select :id="this.qid" v-model="a" class="form-control pure-input-1-12">
    <option v-for="o in this.$root[menu]" :value="o.id">{{o[labelfield]}}</option>
  </select></div>` })


// A date time picker
const DTPicker = Vue.component('dtpicker', {
  props: [ 'table', 'qid', 'question', 'answer', 'targetid', ],
  methods: {  },
  mounted: function() { },
  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 type="datetime-local" :id="this.qid" class="form-control" v-model="a" step="300" /></div>`,
})


// Accordion style box
const ExpandyBox = Vue.component('expandybox', {
  props: [ 'header', 'body', ],
  methods: {
        toggle: function() { 
            if (this.state=='close') { this.state='open'; this.symbol='-' }
            else                     { this.state='close'; this.symbol='+' }
        }
      },
  mounted: function() { },
  data: function () { return { "state":'close', "symbol":"+", } }, 
  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><div class="pure-g">
    <div class="pure-u-1-1">
        <h4 class="exp_header">
            <a href="#" v-on:click.prevent="toggle()">
            <span class="decorate">{{symbol}}</span>
            {{header}}</a>
        </h4>
    </div>
    </div>
    <div v-if="state=='open'" class="pure-g">
        <div class="pure-u-1-1" v-html="body"><slot></slot></div>
    </div>
  </div>`,
})



//        _         __  __   _____ _____ _____  
//       | |       / _|/ _| |  __ \_   _|  __ \ 
//    ___| |_ __ _| |_| |_  | |  | || | | |__) |
//   / __| __/ _` |  _|  _| | |  | || | |  _  / 
//   \__ \ || (_| | | | |   | |__| || |_| | \ \ 
//   |___/\__\__,_|_| |_|   |_____/_____|_|  \_\
//                                              
//                  

// 
//   ONE LINE OF THE STAFF DIR    EDITOR listing
//
const StaffLine = Vue.component('staff_line', {
    props: [ 's', 'i', 'dup_class', ],
    //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 "" },
        gdept2: function() { if (this.s.dept2) {return _.findWhere(this.$root.depts_menu, {id:this.s.dept2}).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-4"><pre>
status: {{ s.status }}
permissions: {{ grole() }}
pers id: {{ s.id }}
ext id: {{ s.ext_id }}
bio page: {{ s.web_on }}
Photo - use:  {{s.use_dir_photo}}  release: {{s.general_photo_release}}
        path: {{s.dir_photo_path}}
# Sections: {{s.num_taught}}
{{ s.sections }}      </pre>
</div>
<div class="pure-u-1-4"><pre>
staff: {{ s.staff_type }}
conf_id: {{ s.conf_id }}
G00{{s.conf_goo}}
espanol: {{s.espanol}}
  </pre>
</div>
<div class="pure-u-1-4"><pre>
{{s.first_name}} {{s.last_name}}
{{gtitle()}}
{{gdept1()}}  
{{gdept2()}}
(old dept: {{s.department}} )  </pre>
</div>
<div class="pure-u-1-4"><pre>
email: {{s.email}}
room:  {{s.room}}
phone: {{s.phone_number}}
Zoom: {{s.zoom}}
Preferred contact: {{s.preferred_contact}}  
</pre><div class="xxpure-u-1-24 clicky" v-on:click="swapedit"><span class="pure-button button-inlist">edit</span></div>
</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') },
        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 "" },
        gdept2: function() { if (this.s.dept2) {return _.findWhere(this.$root.depts_menu, {id:this.s.dept2}).name}; return "-" },
        grole: function() { if (this.s.role) {return _.findWhere(this.$root.roles_menu, {id:this.s.role}).descr}; return "" },
    },    //v-lazy-container="{ selector: 'img' }"
    template: `<form class="pure-form">
        <div :class="odd(i) + ' list-editor pure-g'">
<div class="pure-u-1-4">
<checkbox table="personnel" qid="status" question="Published" :answer="s.status" :targetid="s.id"></checkbox>
permissions: <selectmenu table="personnel_ext" qid="role" :answer="s.role" menu="roles_menu" :targetid="s.ext_id" labelfield="descr"></selectmenu><br />
pers id: {{ s.id }}<br />
ext id: {{ s.ext_id }}<br />
<checkbox table="personnel" qid="web_on" question="Bio Page On" :answer="s.web_on" :targetid="s.id"></checkbox>
<checkbox table="personnel_ext" qid="use_dir_photo" question="Use Photo" :answer="s.use_dir_photo" :targetid="s.ext_id"></checkbox>
<checkbox table="personnel_ext" qid="general_photo_release" question="Release Photo" :answer="s.general_photo_release" :targetid="s.ext_id"></checkbox>
Dir photo <ifield myclass="double" table="personnel_ext" qid="dir_photo_path" :answer="s.dir_photo_path" :targetid="s.ext_id" placeholder="Dir Photo Path"></ifield><br />
# Sections: {{s.num_taught}}<br />
{{ s.sections }}
</div>
<div class="pure-u-1-4">
Staff Type <ifield myclass="double" table="personnel" qid="staff_type" :answer="s.staff_type" :targetid="s.id" placeholder="Staff Type"></ifield><br />
conf_id: {{ s.conf_id }}<br />
<!-- GOO <ifield myclass="double" table="conf_users" qid="goo" :answer="s.conf_goo" :targetid="s.conf_id" placeholder="GOO"></ifield><br />-->
GOO {{ s.conf_goo }} <br />
<checkbox table="personnel_ext" qid="espanol" question="Speak Spanish" :answer="s.espanol" :targetid="s.ext_id"></checkbox>
</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><br />
<ifield myclass="double" table="personnel" qid="last_name" :answer="s.last_name" :targetid="s.id" placeholder="Last Name"></ifield><br />
<selectmenu table="personnel_ext" qid="gtitle" :answer="s.gtitle" menu="titles_menu" :targetid="s.ext_id" labelfield="name"></selectmenu><br />
<selectmenu table="personnel_ext" qid="dept1" :answer="s.dept1" menu="depts_menu" :targetid="s.ext_id" labelfield="name"></selectmenu> <br />
<selectmenu table="personnel_ext" qid="dept2" :answer="s.dept2" menu="depts_menu" :targetid="s.ext_id" labelfield="name"></selectmenu><br />
(old dept: {{s.department}} ) 
</div>
<div class="pure-u-1-4">
<ifield table="personnel" qid="email" :answer="s.email" :targetid="s.id" placeholder="Email"></ifield><br />
<ifield table="personnel" qid="room" :answer="s.room" :targetid="s.id" placeholder="Room"></ifield><br />
<ifield table="personnel" qid="phone_number" :answer="s.phone_number" :targetid="s.id" placeholder="Phone Number"></ifield><br />
<ifield table="personnel_ext" qid="zoom" :answer="s.zoom" :targetid="s.ext_id" placeholder="Zoom Room"></ifield><br />
<ifield table="personnel_ext" qid="preferred_contact" :answer="s.preferred_contact" :targetid="s.ext_id" placeholder="Preferred contact"></ifield>
<div class="xxpure-u-1-24 clicky" v-on:click="done"><span class="pure-button button-inlist-action">done</span>
</div>
</div>
</div>
    </form>
    `
});





// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    STAFF DIR LISTING MAIN CONTAINER
// 
const DirList = Vue.component('dirlist', {
  data: function () {
    return { "personnel":[], sortby:'last_name', search:'', reversed: false, id_list:[], id_dups:[], 
             components: {n:StaffLine, e: StaffLineEdit }, editing: -1,    }  },
  mounted: function() { 
        var self = this;
        this.$root.fetch_menus();
        
        fetch('dir_api.php?a=list/staffsemester', { method: 'GET' }).then(function (response) {
            if (response.ok) {
                response.json().then( function(r2) {  
                    self.personnel = r2; 
                    _.each( self.personnel, function(x) { 
                        if (x.sections==null) { x.num_taught=0 } 
                        if (x.dir_photo_path==null) { x.dir_photo_path='images_sm/nobody.jpg' } 
                        if (x.use_dir_photo == "0") { x.use_dir_photo = false } else { x.use_dir_photo = true }
                        if (x.espanol == "0" || !x.espanol) { x.espanol = false } else { x.espanol = true }
                        if (x.general_photo_release == "0") { x.general_photo_release = false 
                        } else { x.general_photo_release = true }
                        if (self.id_list.includes(x.id)) { self.id_dups.push(x.id) }
                        else { self.id_list.push(x.id) }
                        x.searchable = ''
                        if (x.first_name) { x.searchable += ' ' + x.first_name.toLowerCase() }
                        if (x.last_name) { x.searchable += ' ' + x.last_name.toLowerCase() }
                        if (x.dept1name) { x.searchable += ' ' + x.dept1name.toLowerCase() }
                        if (x.titlename) { x.searchable += ' ' + x.titlename.toLowerCase() }
                        if (x.status == "1" || x.status == null) { x.status = "1" 
                        } else { x.status = false; x.searchable += ' inactive' }
                    } ) } ) } 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
      },
      is_dup_id_class: function(id) { return this.id_dups.includes(id) ? " dup_line" : "" },
  },
  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 'zzzzzzzzzz' })
          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">&nbsp;</div>
            </div> 
            <div class="pure-g pure-form">
                <div v-on:click="setsort('num_taught')" class="pure-u-1-24 clicky"><b>C</b></div>
                <div class="pure-u-1-4 clicky">
                <b v-on:click="setsort('last_name')">Name</b><br />
                <b v-on:click="setsort('gtitle')">Title</b>
                </div>
                <div class="pure-u-1-6 clicky">
                <b v-on:click="setsort('department')">Dept</b><br />
                <b v-on:click="setsort('dept1')">Dept1</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" :dup_class="is_dup_id_class(p.id)" :key="'staff_'+p.id + '_' + i"></component>
            </div>` })



// https://www.daterangepicker.com/
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local





//     __ _                        _   _       _ _   _           
//    / _| |                      | | (_)     (_) | (_)          
//   | |_| | _____  __   __ _  ___| |_ ___   ___| |_ _  ___  ___ 
//   |  _| |/ _ \ \/ /  / _` |/ __| __| \ \ / / | __| |/ _ \/ __|
//   | | | |  __/>  <  | (_| | (__| |_| |\ V /| | |_| |  __/\__ \
//   |_| |_|\___/_/\_\  \__,_|\___|\__|_| \_/ |_|\__|_|\___||___/
//                                                               
//   




// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    EDIT / CREATE activity or event
// 
const ActivityEditor = Vue.component('activityedit', {
    props: [ 'which', ],
    data: function () {
        return { creating:0,
                 everyname:[], everyone:[], hosts_by_sesid:{}, this_hosts:[], host_search:[], host_search_str:'', 
                 activities:[], this_activity:{}, editing: -1, active:-1,   }  },
    mounted: function() { 
       this.fetch_mypeople()
       this.$root.fetch_menus()
        if (this.which==0) { 
            this.creating = 1
            this.$root.creating = 1
            this.this_activity = {"title":"","desc":"","length":"1","starttime":"",
                                  "track":"","location":"","gets_survey":"1","category":"1",
                                  "parent":"","recording":"","instructions":"","image_url":"",
                                  "is_flex_approved":"1","typeId":"101"}
        } else { this.fetch_myevents() } },
    methods: {
      set_id: function(new_id) { this.this_activity.id = new_id; this.creating=0; this.$root.creating=0 },
      month_year: function(d) {  var b = this.$root.$dj(d).format('MMM D YYYY'); return b },
      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 },
      remove: function(hostid) {
          var self = this
          basic_get('dir_api.php?a=remove/host/' + this.which + '/' + hostid,
            function(r2) { 
                self.this_hosts = _.reject(self.this_hosts, function(x) { return x.hostid == hostid} )
                alert_message('Saved') } )  
      },
      add: function(hostid) {
          var self = this
          basic_get('dir_api.php?a=add/host/' + this.which + '/' + hostid,
            function(r2) { 
                self.this_hosts.push( _.findWhere(self.everyone, {id:hostid} ) )
                alert_message('Saved') } )  
      },
      hostlookup: function() { 
          var self = this
          if (this.host_search_str=='') { this.host_search=[] }
          else { this.host_search_str = this.host_search_str.toLowerCase()
              this.host_search = _.first(_.filter(self.everyone, function(x) { return x.name.toLowerCase().search( self.host_search_str) != -1 }),7) } },
      save_new_event: function() {
          this.$root.events.trigger('create_new_session',this.this_activity)
      },
      fetch_mypeople: function() {
        var self = this;
        basic_get('dir_api.php?a=get/names',
                   function(r2) { 
                   self.everyone = r2.users
                   _.each( self.everyone, function(x) {
                            x.hostid = x.id } )
                   self.everyname = _.pluck(r2.users,'name') } ) },
      fetch_myevents: function() {
        var self = this;
        basic_get('dir_api.php?a=get/sessions',
                   function(r2) { 
                        self.activities = _.indexBy(r2,function(x) { return x.id } ); self.$forceUpdate()
                        self.active += 1; 
                        _.each( self.activities, function(x) {
                            x.searchable = x.title.toLowerCase() + ' ' + x.desc.toLowerCase() } )  
                        self.this_activity = self.activities[ self.which ] 
                        self.this_activity.starttime = self.this_activity.starttime.replace(' ','T')} )  
        basic_get('dir_api.php?a=get/hosts',
                   function(r2) { 
                        self.hosts_by_sesid = _.groupBy(r2,function(x) { return x.id } )
                        self.this_hosts = self.hosts_by_sesid[ self.which ]
                        } )  
    },
  },
  template: `<div class="">
                <div class="pure-g pure-form pure-form-aligned">
                    <div class="pure-u-1-24"></div>
                    <div class="pure-u-23-24">
                        <dtpicker table="conf_sessions" qid="starttime" :answer="this_activity.starttime" 
                                  :targetid="this_activity.id" question="Starts at"></dtpicker>
                        <field myclass="double" table="conf_sessions" qid="title" :answer="this_activity.title" 
                                  :targetid="this_activity.id" question="Title" placeholder="Title"></field>
                        <htfield_fa table="conf_sessions" qid="desc" question="Description" myclass="pell" 
                                  :answer="this_activity.desc" :targetid="this_activity.id"></htfield_fa>
                        <field myclass="double" table="conf_sessions" qid="location" :answer="this_activity.location" 
                            :targetid="this_activity.id" question="Location / Zoom" placeholder="Location"></field>
                        <field myclass="double" table="conf_sessions" qid="length" :answer="this_activity.length" 
                            :targetid="this_activity.id" question="Length (in hours)" placeholder="1"></field>
                        <selectmenu_fa table="conf_sessions" qid="type" :answer="this_activity.type" menu="sessiontypes_menu" 
                            :targetid="this_activity.id" question="Type"  labelfield="type"></selectmenu_fa>
                        <selectmenu_fa v-if="this_activity.type=='101'" table="conf_sessions" 
                                       qid="parent" :answer="this_activity.parent" menu="parents_menu" 
                            :targetid="this_activity.id" question="What flex day?"  labelfield="title"></selectmenu_fa>
                        <field myclass="double" table="conf_sessions" qid="recording" :answer="this_activity.recording" 
                            :targetid="this_activity.id" question="Recording Link" placeholder=""></field>
                        <br />
                        <div v-if="!creating"  class="pure-control-group double">
                            <label class="fake_pcg">Hosts</label>
                            <div class="fake_pcg">
                                <span v-for="h in this_hosts">{{h.name}} 
                                <span class="clicky" v-on:click="remove(h.hostid)">x</span>  <br /></span>
                            </div>
                        </div>
                        <div v-if="!creating" class="pure-control-group double">
                            <label class="">Add a host</label>
                            <div class="fake_pcg">
                                <form autocomplete="off">
                                <input type="text" id="addhost" name="addhost" class="form-control" 
                                        v-on:keyup="hostlookup" v-model="host_search_str" />
                                </form>
                                <div>
                                    <span v-for="ho in host_search">{{ho.name}}
                                    <span class="clicky" v-on:click="add(ho.id)">+</span>  <br /></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div v-if="creating" class="pure-control-group double">
                            <label class=""></label>
                            <div class="fake_pcg">
                                <button class="pure-button pure-button-primary form-control" v-on:click="save_new_event">
                                Create Activity
                                </button>
                            </div>
                        </div>
                    </div>
                </div> 
                <!--  add:      permissions                      track,                        x day if pd day
                             x  add/remove host               x  New activity                    general list & signup
                                show signups, surveys            instructions                    survey?
                                flex approved?                   image?                          what other permissions issues?        -->       
            </div>` })

// 
// 
// 
// 
// 
// 
//    ACTIVITIES LIST MAIN CONTAINER
//    ------------------------------
// 
// 
// 
const ActivityList = Vue.component('activitylist', {
  props: [ 'itineraryview','focus' ],
  data: function () {
    return { activities:[], mysessions:[], search:'', sortby:'starttime', reversed:false, my_ses_ids:[], my_host_ids:[], 
             show_filters: 'all', expanded: 1, editing: -1, active:-1, hosts:{}, 
             filters: {'sp22':['2022-01-26','2022-01-30'], 'all':['2022-01-01','2022-11-30'] },
             day_titles: {'Jan 27 2022':" - Optional Flex Day", 'Jan 28 2022':' - Mandatory Flex Day'} } },
  mounted: function() { 
        this.$root.fetch_menus();
        this.fetch_myevents()
  },
  methods: {
      get_day_title: function(day) { if (day in this.day_titles) { return this.day_titles[day] } return '' },
      month_year: function(d) { var b = this.$root.$dj(d).format('MMM D YYYY'); return b },
      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 },
      fetch_myevents: function() {
        var self = this;
        basic_get('dir_api.php?a=get/mysessions',
                   function(r2) { 
                       self.mysessions = _.sortBy(r2,function(x) { return x.starttime || 0} ); 
                       self.my_ses_ids = _.pluck(r2, 'id')
                       self.$forceUpdate(); 
                       self.active += 1;  
                   } )
        basic_get('dir_api.php?a=get/sessions',
                   function(r2) { 
                        self.activities = _.sortBy(r2,function(x) { return x.starttime } ); self.$forceUpdate()
                        self.active += 1; 
                        _.each( self.activities, function(x) {
                            var field = x.starttime.match(/^(\d\d\d\d)\-(\d+)\-(\d+)\s(\d+)\:(\d+)\:(\d+)$/)       
                            var mydate = new Date(field[1], field[2] - 1 , field[3], field[4], field[5], field[6])
                            x.dj = dayjs(mydate)
                            x.searchable = x.title.toLowerCase() + ' ' + x.desc.toLowerCase() } )
                        self.$forceUpdate();
                        self.active += 1;    } )  
        basic_get('dir_api.php?a=get/allhosts',
                   function(r2) { 
                        self.hosts = r2
                        setTimeout(function () { 
                        self.my_host_ids = r2[ self.$root.user.conf_id ]
                        if (! self.my_host_ids) { self.my_host_ids = [] }
                        }, 750);
                        self.active += 1; 
                    } )  
    },
    joinme: function(id) {
        var self = this
        basic_get('dir_api.php?a=signup/' + id,
            function(r2) { 
                self.mysessions.push(_.findWhere(self.activities, {'id':id}))
                self.my_ses_ids.push(id)
                alert_message("Added activity") })
    },
    dumpme: function(id) {
        var self = this
        basic_get('dir_api.php?a=signdown/' + id,
            function(r2) { 
                self.mysessions = _.without( self.mysessions, _.findWhere(self.activities, {'id':id}))
                self.my_ses_ids = _.without( self.my_ses_ids, id)
                self.$forceUpdate()
                alert_message("Removed activity") })
    },
    filtered: function(ff) { if (this.active<1) { return [] }
        var self = this
        if (this.search) { 
            var ss = self.search.toLowerCase()
            console.log('one')
            ff = ff.filter(function(x) { return ('searchable' in x ? x.searchable.includes(ss) : 0) }) }
        if (this.focus) {
            var start = dayjs(this.filters.sp22[0])
            var end = dayjs(this.filters.sp22[1])
            ff = ff.filter( function(item,index) { 
                this_time = dayjs(item.starttime)
                return this_time.isBefore(end) && start.isBefore(this_time)  } )
        }
        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 }, },
  computed: {
      activities_filtered: function() { var a =  this.filtered(this.activities); return a; },
      mysessions_filtered: function() { return this.filtered(this.mysessions) },
      
      activities_g_filtered: function() { if (this.active<1) { return {} }
        var self=this; 
        return _.groupBy(self.activities_filtered, function(x) { return self.month_year(x.starttime) } );  },
      mysessions_g_filtered: function() { if (this.active<1) { return {} }
        var self=this; return _.groupBy(self.mysessions_filtered, function(x) { return self.month_year(x.starttime) } );  }, },
  watch: { },
  template: `<div class="activitylist">
                <div v-if="itineraryview && active>0" v-for="items,mmyy in mysessions_g_filtered">
                    <b>{{mmyy}}</b>
                    <div v-for="a in items" class="pure-g pure-form">
                        <div class="pure-u-1-24"> </div>
                        <div class="pure-u-5-24">{{ $root.$dj(a.starttime).format('h:mma') }} </div>
                        <div class="pure-u-3-4">{{a.title}} </div>
                    </div>
                </div> 
                <div v-if="!itineraryview && active>0" v-for="items,mmyy in activities_g_filtered">
                    <div class="pure-g"><div class="day_title pure-u-1-1">{{mmyy}} {{get_day_title(mmyy)}}</div></div>
                    <div v-for="a in items" class="activitylist">
                        <div class="pure-g pure-form">
                            <div class="pure-u-7-24">
                                {{ $root.$dj(a.starttime).format('h:mma') }} <br />
                                <a v-if="my_ses_ids.includes(a.id)" v-on:click.prevent="dumpme(a.id)" href="#" class="button-inlist-action">Cancel</a>
                                <a v-else v-on:click.prevent="joinme(a.id)" href="#" class="button-inlist">Sign Up</a> 
                                 
                                <a v-if="my_host_ids.includes(a.id)" :href="'ed_act.php?w='+a.id"class="button-inlist-action">Edit</a>
                            </div>
                            <div class="pure-u-17-24"><b>{{a.title}}</b>
                            <div class="rhs_grey">{{a.typeStr}}</div></div>
                        </div>
                        <div v-if="expanded" class="pure-g pure-form"><div class="pure-u-24-24" v-html="a.desc"></div>
                        </div>
                    </div>
                </div> 
            </div>` })


/*

 - show upcoming, past, dropdown for category
 
 - show signup status, signup/cancel button
 
 - navigation: check permission, show edit / new button

 - page: create / edit activity.

*/





const ShowSurveys = Vue.component('show-survey', {
    name: 'ShowSurveys',
    //components: { 'essay-question': EssayQuestion, 'number-question': NumberQuestion },
    props: ['answer', ],
    methods: { 
        logger: function() { console.log('logger'); console.log(this); console.log( this.answer ); return ''; },
        ses_name: function() { 
            if (this.answer) { 
                return this.answer[0][0].s_title }
            return '' }
    },
    template: `<div>
    {{ logger() }}
        <div class="session-survey" v-for="q in answer">
            <b>{{ q[0]['question'] }}</b>
            <number-question v-if="q[0]['type']=='2'" :aa="q"></number-question>
            <essay-question v-if="q[0]['type']=='1'" :aa="q"></essay-question>
        </div>
    </div>`
});


const Survey = Vue.component('surveydisplay', {
    props: [ 'answers' ],
    data () {
        return {
            qa_all: [ ],
            sesh: {},
            questions: [],
            one: {},
            qdata: [],
          answer: ""
        }
    },
    created: function() {
        var self = this
        self.questions = _.where(this.$root.$data.myquestions,
            {'ses_id':self.$route.params.take_ses_id})
        self.$forceUpdate()
        /*this.$axios.get(this.$server + this.$api + '?a=get/questions', {withCredentials: true}).then( function(resp2) {
            self.qdata = resp2.data
            setTimeout(self.continueExecution, 1000) //wait 1 seconds before continuing
        } )*/

        this.$axios.get(this.$server + this.$api + '?a=get/answers/all', {withCredentials: true}).then( function(resp2) {
        } ) },
    methods: { 
      continueExecution: function() {self.questions = _.where( this.qdata, {'ses_id': this.$route.params.take_ses_id } )},
      one_session: function() {
          if (this.$route.params.take_ses_id) {
              var self = this
              var my_id = self.$route.params.take_ses_id
              console.log("My id is: " + my_id)
              var my_ses = _.find(this.$root.$data.activities, function(x) { return x.id==my_id } ) 
              /*console.log('The session: ')
              console.log(my_ses)*/
              return my_ses }
          console.log('no session found ')
          return {'title':''}
      },
        answers: function() {
            var a = this.sesh[parseInt( this.$route.params.ses_id)]
            //console.log(a)
            if (a) { return a }
            return 0
        },
        requested_session: function() {
            var self = this
            return _.find(this.$root.$data.activities, function(x) { console.log(x.id); console.log(self.$route.params.ses_id); return x.id == self.$route.params.ses_id } ) 
            /*
            a =  _.find(this.$root.$data.activities, function(x) { console.log(x.id); console.log(self.$route.params.ses_id); return x.id == self.$route.params.ses_id } )
            console.log(a)
            return a */
        }
    },
    template: `<div class="session-survey" v-for="q in answer">
            <b>{{ q[0]['question'] }}</b>
            <number-question v-if="q[0]['type']=='2'" :aa="q"></number-question>
            <essay-question v-if="q[0]['type']=='1'" :aa="q"></essay-question>
        </div>


        <!-- <div>
          <show-survey v-if="answers()" :answer="answers()"></show-survey>
          <span v-else><ul><li>No responses yet</li></ul>
      </div>

     Show admin all classes -->

    <br /> &nbsp;
    <br /> &nbsp;
    <br /> &nbsp;
</div>
`
})









// 
// 
// 
// 
// 
// 
//    ACTIVITIES LIST - SIGNUPS & SURVEYS
//    -----------------------------------
// 
// 
// 
const ActivityReport = Vue.component('activityreport', {
    props: [ 'which' ],
    data: function () {
        return { activities:[],hosts:[], hosts_by_sesid:[], everyone:[], questions:[], answers:{}, answers2:{}, rosters:[]  } },
    mounted: function() { 
        var self = this
        basic_get('dir_api.php?a=get/sessions', function(r2) { 
            self.activities = _.sortBy(r2,function(x) { return x.starttime } ); self.$forceUpdate()
            self.active += 1; 
            _.each( self.activities, function(x) {
                var field = x.starttime.match(/^(\d\d\d\d)\-(\d+)\-(\d+)\s(\d+)\:(\d+)\:(\d+)$/)       
                var mydate = new Date(field[1], field[2] - 1 , field[3], field[4], field[5], field[6])
                x.dj = dayjs(mydate)
                x.searchable = x.title.toLowerCase() + ' ' + x.desc.toLowerCase() } )
            self.$forceUpdate();
            self.active += 1;    } )  
        basic_get('dir_api.php?a=get/hosts', function(r2) { 
            self.hosts_by_sesid = _.groupBy(r2,function(x) { return x.id } )
            } )  
        basic_get('dir_api.php?a=get/rosters', function(r2) { 
            self.rosters = _.groupBy(r2,function(x) { return x.sesid } )
            } )  
        basic_get('dir_api.php?a=get/allhosts', function(r2) { 
            self.hosts = r2
            setTimeout(function () { self.hosts = r2;  self.$forceUpdate() }, 750);
            self.active += 1; 
        } )  
        basic_get('dir_api.php?a=get/names', function(r2) { 
            self.everyone = []
            _.each( r2.users, function(x) { self.everyone[x.id] = x.name } ) } )
        basic_get('dir_api.php?a=get/questions', function(r2) { 
            self.questions = r2 })
        basic_get('dir_api.php?a=get/answers/all', function(r2) { 
            var organized = _.groupBy(r2, function(x) { return x.ses_id; } )
            // TODO are answers and answers2 the same?
            _.each(  organized,  function(val,key,lis) { self.answers[key] = _.groupBy( val,  function(y) { return y.q_id; }); } )
            _.each( self.answers, function(val,key,lis) { self.answers2[key] = _.sortBy( val, "q_id" ) } )
            self.$forceUpdate()
        } )
    },
    methods: { 
        hoststr: function(id) { 
            var self = this
            return _.reduce( self.hosts_by_sesid[id], function(mem,val) { if (val.name) { return mem + val.name + ", " } return mem }, '')
        },
        userstr: function(id) { return _.pluck(this.rosters[id], "name").join(', ') },
        surveystr: function(id) { 
            var self = this
            var answers = _.find(this.activities, function(x) { console.log(x.id); return x.id == id } )
            console.log('found these answers')
            console.log(answers)
            return "Surveys"
            return _.reduce( self.hosts_by_sesid[id], function(mem,val) { if (val.name) { return mem + val.name + ", " } return mem }, '')
        },
    },
    computed: {
    },
    watch: { },
    template: `<div class="activityreport">
                <div v-for="a in activities" class="report">
                    <div class="pure-g pure-form">
                        <div class="pure-u-7-24">
                            {{ $root.$dj(a.starttime).format('YYYY MMM DD dd h:mma') }}
                        </div>
                        <div class="pure-u-17-24"><b>{{a.title}}</b> 
                        
                            <div class="rhs_grey">{{a.typeStr}}</div>
                        </div>
                    </div>
                    <div class="pure-g"><div class="pure-u-1-1">
                        <a :href="'ed_act.php?w='+a.id" class="button-inlist">Edit</a>
                    </div></div>
                    <expandybox v-if="a.desc" header="Description" :body="a.desc"></expandybox>
                    <expandybox v-if="hoststr(a.id)" header="Hosts" :body="hoststr(a.id)"></expandybox>
                    <expandybox v-if="userstr(a.id)" :header="'Attendees (' + rosters[a.id].length + ')'" :body="userstr(a.id)"></expandybox>
                    <expandybox v-if="surveystr(a.id)" header="Surveys" :body="surveystr(a.id)"></expandybox>
                </div>
            </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
        basic_get('dir_api.php?a=get/sessions',
                   function(r2) { self.activities = _.map(r2,  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()  } )
  },
  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) { return x.typeId!="101" } )
            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">
            <h3>{{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>
            </h3>
            <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>
            </div>` })






//                 _                            _      _   _              _ 
//                | |                          | |    | | | |            | |
//   __      _____| | ___ ___  _ __ ___   ___  | | ___| |_| |_ ___ _ __  | |
//   \ \ /\ / / _ \ |/ __/ _ \| '_ ` _ \ / _ \ | |/ _ \ __| __/ _ \ '__| | |
//    \ V  V /  __/ | (_| (_) | | | | | |  __/ | |  __/ |_| ||  __/ |    |_|
//     \_/\_/ \___|_|\___\___/|_| |_| |_|\___| |_|\___|\__|\__\___|_|    (_)
//                                                                          
//             






// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    WELCOME LETTER main component
// 
const WelcomeLetter = Vue.component('welcomeletter', {
  props: [ 'mysem','mycrn', 'teacher_ext_id',  ],
  data: function () {
    return { courses_by_semester:[], wl_sem:'', wl_crn:'', section_wl:{}, sortby:'code', reversed:false, active:-1,   }  },
    watch: { 
        "teacher_ext_id": function (val, oldVal) { console.log('tch ext id changed'); this.fetch_sections() }, 
    },
    mounted: function() { 
        var self = this
        if (this.mysem && this.mycrn) { this.fetch_wletters(this.mysem, this.mycrn) }
        else { this.$root.do_after_load( self.fetch_sections) }
    },
    methods: {
        swap_section: function(section_obj) { this.fetch_wletters(section_obj.sem,section_obj.crn) },
        show_list: function() { this.section_wl = {} },
        fetch_wletters: function(ss,cc) {
            var self = this;
            fetch('dir_api.php?a=get/section/' + ss + '/' + cc, 
            { method: 'GET' }).then(function (response) {
                // The API call was successful!
                if (response.ok) {
                    response.json().then( function(r2) { 
                        self.section_wl = r2; 
                    } )
                } else { return Promise.reject(response) }
            }).then(function (data) {
            }).catch(function (err) { console.warn('Something went wrong.', err); });
        },
        fetch_sections: function() {
            var self = this;
            basic_get('dir_api.php?a=get/sections/' + this.$root.user.ext_id,
                       function(r2) { self.courses_by_semester = _.groupBy(r2,function(x) { return x.sem || 0} ); self.$forceUpdate(); self.active += 1; console.log(self.active) } )
        },
    },
    template: `<div class="">
                <div v-if="section_wl.id" class="pure-g pure-form">
                    <div class="pure-u-24-24">
                        <div class="clicky" v-on:click="show_list()">back to list of sections</div>
                        <div class="">
                            Course: 
                        </div>
                        <div class="">
                            Description: 
                        </div>
                        <div class="">
                            Delivery Format: 
                        </div>
                        <div class="">
                            Schedule: 
                        </div>
                        <div class=""> 
                            Length: 
                        </div>
                        <form class="pure-form pure-form-aligned">
                        
                            <tfield table="welcome_letters" qid="introduction" question="Introduction" :answer="this.section_wl.introduction" :targetid="this.section_wl.wl_id"></tfield>
                            
                            <tfield table="welcome_letters" qid="what_expect" question="What to Expect" :answer="this.section_wl.what_expect" :targetid="this.section_wl.wl_id"></tfield>
                            
                            <tfield table="welcome_letters" qid="textbook" question="Textbook Information" :answer="this.section_wl.textbook" :targetid="this.section_wl.wl_id"></tfield>
                            
                            <tfield table="welcome_letters" qid="assessments" question="Tests and Assessments" :answer="this.section_wl.assessments" :targetid="this.section_wl.wl_id"></tfield>
                            
                            <tfield table="welcome_letters" qid="other_info" question="Other Useful Information" :answer="this.section_wl.other_info" :targetid="this.section_wl.wl_id"></tfield>
                            
                            <tfield table="welcome_letters" qid="additional_resources" question="Additional Resources" :answer="this.section_wl.additional_resources" :targetid="this.section_wl.wl_id"></tfield>
                            
                        </form>
                    </div>
                </div> 
                <div v-else class="pure-g pure-form">
                    <div v-for="sect_list,sm in courses_by_semester"  class="pure-u-24-24">
                        <b> {{sm}}</b><br />
                        <div v-for="crs in sect_list" class="clicky" v-on:click="swap_section(crs)">
                            &nbsp; &nbsp; &nbsp; {{crs.code}} - {{crs.crn}} - {{crs.name}}
                        </div>
                    </div>
                </div>
            </div>` })




//                         _         _          _                 
//                        | |       | |        | |                
//     _____   _____ _ __ | |_ ___  | |__   ___| |_ __   ___ _ __ 
//    / _ \ \ / / _ \ '_ \| __/ __| | '_ \ / _ \ | '_ \ / _ \ '__|
//   |  __/\ V /  __/ | | | |_\__ \ | | | |  __/ | |_) |  __/ |   
//    \___| \_/ \___|_| |_|\__|___/ |_| |_|\___|_| .__/ \___|_|   
//                                               | |              
//                                               |_|     // 
//   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=="conf_users")        { action = "update_cf" }
    if (table=="conf_sessions")     { action = "update/activity" }
    if (table=="webpages")          { action = "update_web" }
    if (table=="welcome_letters")   { action = "update/letter" }      // or insert?
    var idstr = ""
    if (id) { idstr = "&id=" + id }
    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) {
        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); });
}

function generic_fail(err,x="Something went wrong with an ajax fetch") {
    console.log(x); console.log(err) }

function basic_get( url, after_fxn, fail_fxn=generic_fail ) {
    fetch(url, { method: 'GET' }).then(function (response) {
        if (response.ok) {response.json().then( function(r2) { after_fxn(r2) } )
        } else { return Promise.reject(response) }
    }).then(function (data) { }).catch(function (err) { fail_fxn(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
        _.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]  }
                })
                var edit_other = 0
                if (self.target_ids[x]) { edit_other = self.target_ids[x] }
                post_update(x, cols, vals, edit_other)
            }
        } ) },
    data: {},
    target_ids: {},
    tables: ['personnel','personnel_ext','webpages','welcome_letters','conf_sessions','conf_hosts',
    'pers_departments','pers_committees','pers_titles'],
}



evt.clear_tables()            
MicroEvent.mixin(evt)







//                    _                  _____  _____  
//                   (_)           /\   |  __ \|  __ \ 
//    _ __ ___   __ _ _ _ __      /  \  | |__) | |__) |
//   | '_ ` _ \ / _` | | '_ \    / /\ \ |  ___/|  ___/ 
//   | | | | | | (_| | | | | |  / ____ \| |    | |     
//   |_| |_| |_|\__,_|_|_| |_| /_/    \_\_|    |_|     
//                                                     
//                   
var app = new Vue({ 
  el: '#dir_editor',
  data: { events: evt, 
    msg: 'hello', active: false, creating:0, 
    user: {'last_name':'', 'first_name':'', 'department':'', 'extension':'', 'phone_number':'', 'email':'',
            'staff_type':'', 'room':'', 'status':'', 'user_id':'', 'password':'', 'time_created':'', 'time_updated':'', 
            'id':'', ext_id:false, 'web_on':'', use_dir_photo:0, general_photo_release:0, espanol:0, zoom:'', preferred_contact:'',
            officehours:'', title:'', picture:'', education:'', bio:'', courses:'', personal_page:'', changed:'' },
    filter: [],
    roles_menu: [],
    depts_menu: [],
    titles_menu: [],
    sessiontypes_menu: [],
    parents_menu: [],
    waiting_fxns: [],
    data_loaded: 0,
    committees_menu: [],
    menus_fetched: false,
  },
  watch: { 
    'data_loaded': function(newVal,oldVal) {
        if (newVal > 0) { _.each( this.waiting_fxns, function(fx) { fx() }) } }, },
  methods: { 
    do_after_load: function(do_fxn) { this.waiting_fxns.push(do_fxn) /*....*/ },
    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.sessiontypes_menu = r2.sessiontypes; 
                        self.parents_menu = r2.parents; 
                        self.menus_fetched = true;
                    } )
                } else { return Promise.reject(response) }
            }).then(function (data) {
            }).catch(function (err) { console.warn('Something went wrong.', err); });
        }
    },
    my_subscribe_calendar: function() { return "webcal://hhh.gavilan.edu/phowell/map/calendar" + this.user.conf_id + ".ics"  },
    clip_copy: function(x) {
        // see the .htaccess file for the mod_rewrite that makes the ics file work. //
        
        var data = [new ClipboardItem({ "text/plain": new Blob([this.my_subscribe_calendar()], { type: "text/plain" }) })];
        navigator.clipboard.write(data).then(function() {
          console.log("Copied to clipboard successfully!");
          fadein_message()
        }, function() { console.error("Unable to write to clipboard. :-("); }) }, },
  computed: {  },
  mounted: function() { 
        var self = this;
        this.fetch_menus()
        fetch('dir_api.php', { method: 'GET' }).then(function (response) {
            // The API call was successful!
            if (response.ok) {
                response.json().then( function(r2) { 
                    var x = self.user.mysessions
                    self.user = r2; 
                    self.user.mysessions = x
                    if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
                    if (self.user.espanol == "0") { self.user.espanol = false }
                    if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
                    self.data_loaded += 1
                    // 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); }) } })




//                         _       
//                        | |      
//     _____   _____ _ __ | |_ ___ 
//    / _ \ \ / / _ \ '_ \| __/ __|
//   |  __/\ V /  __/ | | | |_\__ \
//    \___| \_/ \___|_| |_|\__|___/
//                                 
//                  


// 
//   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]
        this.data[column] = value
        if (!this[table].includes(column) ) {this[table].push(column)}
        if (target) { this.target_ids[table] = target } } 
    if (app.active &&  !app.creating) { update_fxn() }
});

evt.bind('create_new_session', function(dat) { 
    var default_activity = {"title":"","desc":"","length":"1","starttime":"","track":"","location":"","gets_survey":"1","category":"1",
                            "parent":"","recording":"","instructions":"","image_url":"","is_flex_approved":"1","typeId":"101"}
    var new_activity = _.extend(default_activity, evt.data)
    
    if ('typeId' in new_activity) { new_activity.type = new_activity.typeId; delete new_activity.typeId; }
    let formData = new FormData();
    _.each( Object.keys(new_activity), function(x) { console.log(x); formData.append(x, new_activity[x]) } )
    
    fetch('dir_api.php?a=set/newsession', { 
        method: 'POST', 
        body: formData, }).then(function (response) {
        if (response.ok) {
            response.json().then( function(r2) { 
                alert_message('Saved new activity.')
                app.$children[0].set_id(r2.new_id) } )
        } else { return Promise.reject(response) }
    }).then(function (data) {
    }).catch(function (err) { alert_message("Couldn't create the activity!",pink); console.warn('Something went wrong.', err); })  })




//
//
//   MISC
//
//

//
//     <img :src="'//www.gavilan.edu/staff/' + s.dir_photo_path" width="25" height="auto" />
//     v-lazy-container="{ selector: 'img' }"
//