ShinobiCE/web/pages/blocks/schedules.ejs

<div class="modal dark fade" id="schedules" role="dialog" aria-labelledby="schedulesLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="schedulesLabel"><i class="fa fa-clock-o"></i> &nbsp; <%-lang['Schedules']%></h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
              <label>
                  <div><select class="form-control" id="schedulesSelector">
                      <option value=""><%-lang['Add New']%></option>
                      <optgroup label="<%-lang['Saved Schedules']%>"></optgroup>
                    </select></div>
              </label>
          </div>
          <div class="form-group-group green">
              <h4><%- lang['Schedule'] %>
                <div class="pull-right">
                    <a class="btn btn-danger btn-xs delete" style="display:none">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a>
                </div>
              </h4>
              <div class="form-group">
                <label><div><span><%-lang['Name']%></span></div>
                    <div><input class="form-control" name="name"></div>
                </label>
              </div>
              <div class="form-group">
                  <label><div><span><%-lang['Enabled']%></span></div>
                    <div><select class="form-control" name="enabled">
                        <option value="1" selected><%-lang.Yes%></option>
                        <option value="0"><%-lang.No%></option>
                    </select></div>
                  </label>
              </div>
              <div class="form-group">
                <label><div><span><%-lang['Start']%></span></div>
                    <div><input class="form-control" name="start" placeholder="HH:ss"></div>
                </label>
              </div>
              <div class="form-group">
                <label><div><span><%-lang['End']%></span></div>
                    <div><input class="form-control" name="end" placeholder="HH:ss"></div>
                </label>
              </div>
              <div class="form-group">
                  <label><div><span><%-lang['Monitor States']%></span></div>
                    <div><select class="form-control" style="min-height:100px" multiple name="monitorStates">
                    </select></div>
                  </label>
              </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> <%-lang.Close%></button>
        <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <%-lang.Save%></button>
      </div>
    </form>
  </div>
</div>
<script>
    $(document).ready(function(){
        $.schedules = {
            e: $('#schedules'),
            selector: $('#schedulesSelector'),
            loadedMonitorStates: {},
            loadedSchedules: {}
        }
        $.schedules.f = $.schedules.e.find('form')
        $.schedules.selectedStates = $.schedules.e.find('[name="monitorStates"]')
        $.schedules.loadSchedules = function(callback){
            $.get($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke,function(d){
                console.log(d)
                var html = ''
                $.each(d.schedules,function(n,v){
                    $.schedules.loadedSchedules[v.name] = v
                    html += $.ccio.tm('option',{
                        id: v.name,
                        name: v.name
                    })
                })
                $.schedules.selector.find('optgroup').html(html)
                if(callback)callback()
            })
        }
        $.schedules.loadMonitorStates = function(){
            $.get($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke,function(d){
                var html = ''
                $.each(d.presets,function(n,v){
                    $.schedules.loadedMonitorStates[v.name] = v
                    html += $.ccio.tm('option',{
                        id: v.name,
                        name: v.name
                    })
                })
                $.schedules.selectedStates.html(html)
            })
        }
        $.schedules.e.on('shown.bs.modal', function (e) {
            $.schedules.loadMonitorStates()
            $.schedules.loadSchedules()
        })
        $.schedules.e.on('click','.delete',function(e){
            $.confirm.e.modal('show');
            $.confirm.title.text(lang['Delete Monitor States Preset']);
            $.confirm.body.html(lang.deleteMonitorStateText1);
            $.confirm.click({title:'Delete',class:'btn-danger'},function(){
                var form = $.schedules.f.serializeObject()
                $.post($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke + '/' + form.name + '/delete',function(d){
                    $.ccio.log(d)
                    if(d.ok === true){
                        $.schedules.loadSchedules()
                        $.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
                    }
                })
            })
        })
        $.schedules.selector.change(function(e){
            var selected = $(this).val()
            var loaded = $.schedules.loadedSchedules[selected]
            var namespace = $.schedules.e.find('[name="name"]')
            var deleteButton = $.schedules.e.find('.delete')
            $.schedules.selectedStates.find('option:selected').removeAttr('selected')
            if(loaded){
                namespace.val(loaded.name)
                var html = ''
                $.each(loaded,function(n,v){
                    $.schedules.f.find('[name="' + n + '"]').val(v)
                })
                $.each(loaded.details.monitorStates,function(n,v){
                    $.schedules.selectedStates.find('option[value="' + v + '"]').prop('selected',true)
                })
                deleteButton.show()
            }else{
                namespace.val('')
                deleteButton.hide()
            }
        })
        $.schedules.f.submit(function(e){
            e.preventDefault()
            var el = $(this)
            var form = el.serializeObject()
            var monitors = []
            var failedToParseAJson = false
            var rows = $.monitorStates.monitors.find('.state-monitor-row')
            if(form.name === ''){
                return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Name cannot be empty.'],type:'error'})
            }
            if(form.start === ''){
                return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Start Time cannot be empty.'],type:'error'})
            }
            if(form.monitorStates instanceof Array === false){
                form.monitorStates = [form.monitorStates]
            }
            console.log(form.monitorStates)

            var data = {
                start: form.start,
                end: form.end,
                enabled: form.enabled,
                details:{
                    monitorStates: form.monitorStates
                }
            }
            $.post($.ccio.init('location',$user) + $user.auth_token + '/schedule/' + $user.ke + '/' + form.name + '/insert',{data:data},function(d){
                $.ccio.log(d)
                if(d.ok === true){
                    $.schedules.loadSchedules(function(){
                        $.schedules.selector.val(form.name)
                    })
                    $.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
                }
            })
            return false;
        })
    })
</script>