timelines.js

(function() {

    $( function() {

      var group1 = "project";
      var group2 = "user";
      var group3 = "day";
      var filterProjectId = "";
      var filterClientId = "";


      function timeConverter(UNIX_timestamp){
        var a = new Date(UNIX_timestamp * 1000);
        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        var year = a.getFullYear();
        var month = months[a.getMonth()];
        var date = a.getDate();
        var hour = a.getHours();
        var min = a.getMinutes();
        var sec = a.getSeconds();
        var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
        return time;
      }

        $(document).ready(function() {
            $("#dialog-confirm").dialog({
              autoOpen: false,
              modal: true
            });

          var start = moment().subtract(29, 'days');
          var end = moment();
          function cb(start, end) {
            $('#report-range span').html(start.format('DD/MM/YY') + ' - ' + end.format('DD/MM/YY'));
          }
          $("#report-range").daterangepicker({
            timePicker: false,
            startDate: start,
            endDate: end,
            ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'Last 90 Days': [moment().subtract(89, 'days'), moment()],
              'Last 365 Days': [moment().subtract(364, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
              'The Month Before Last': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')],
              'This Year': [moment().startOf('year'), moment().endOf('year')],
              'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
              
            },
            locale: {
                format: 'DD/MM/YY'
              }
            },cb);
            $("#report-range").on('apply.daterangepicker', function(ev, picker) {
              start = picker.startDate;
              end = picker.endDate;
              getReport();
            });
          cb(start, end);
          $("#group1").select2();
          $("#group2").select2();
          $("#group3").select2();
          $('#group1').on("change", function(e) { 
            group1 = e.val;
            getReport();
          });
          $('#group2').on("change", function(e) {
            group2 = e.val;
            getReport();
          });
          $('#group3').on("change", function(e) { 
            group3 = e.val;
            getReport();
          });
          getReport();
          getTimelines();
          $("#filter-project").select2({
            tags: true,
            width: '200px',
            escapeMarkup : function(markup) { return markup; },
            placeholder: "Select project",
            allowClear: true,
            ajax: { 
              tags: true,
                url:  OC.generateUrl('/apps/timetracker/ajax/projects'),
                
                dataType: 'json',
                delay: 250,
                results: function (data, page) { //json parse
                    return { 
                        results: $.map(data.Projects,function(val, i){
                        return { id: val.id, text:val.name};
                        }),
                        pagination: {
                        more: false,
                        }
                    };
                },
                cache: false,
                
            },
            initSelection: function(element, callback) {
                
                var results;
                    results = [];
                    results.push({
                        id: projectId,
                        text: projectName,
                        });
                    
                    callback(results[0]);
            }
        });

        $("#filter-project").on("change", function (e) { 
         
          filterProjectId = $(e.target).val();
          getReport();
        });



        $("#filter-client").select2({
          tags: true,
          width: '200px',
          escapeMarkup : function(markup) { return markup; },
          placeholder: "Select client",
          allowClear: true,
          ajax: { 
            tags: true,
              url:  OC.generateUrl('/apps/timetracker/ajax/clients'),
              
              dataType: 'json',
              delay: 250,
              results: function (data, page) { //json parse
                  return { 
                      results: $.map(data.Clients,function(val, i){
                      return { id: val.id, text:val.name};
                      }),
                      pagination: {
                      more: false,
                      }
                  };
              },
              cache: false,
              
          },
          initSelection: function(element, callback) {
              
              var results;
                  results = [];
                  results.push({
                      id: clientId,
                      text: clientName,
                      });
                  
                  callback(results[0]);
          }
      });

      $("#filter-client").on("change", function (e) { 
       
        filterClientId = $(e.target).val();
        getReport();
      });
        $('input.select2-input').attr('autocomplete', "xxxxxxxxxxx");

        
       
          function getReport(){
              var baseUrl = OC.generateUrl('/apps/timetracker/ajax/report?name=&from='+start.unix()+'&to='+end.unix()+'&group1='+group1+'&group2='+group2+'&timegroup='+group3+'&filterProjectId='+filterProjectId+'&filterClientId='+filterClientId);
              var table = new Tabulator("#report", {
                ajaxURL:baseUrl,
                layout:"fitColumns",
                columns:[
                  //{title:"Id", field:"id", width:100}, //column has a fixed width of 100px;
                  {title:"#", field:"", formatter:"rownum"},
                  {title:"Name", field:"name", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                  {title:"User", field:"userUid", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                  {title:"Project", field:"project", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                  {title:"Client", field:"client", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                  {title:"When", field:"time", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                  {title:"Total Duration", field:"totalDuration",formatter:function(cell, formatterParams, onRendered){
                    //cell - the cell component
                    //formatterParams - parameters set for the column
                    //onRendered - function to call when the formatter has been rendered
                    var duration = cell.getValue();
                    var s = Math.floor( (duration) % 60 );
                    var m = Math.floor( (duration/60) % 60 );
                    var h = Math.floor( (duration/(60*60)));
                    
                    return h + ':' + m + ':' + s;
                    
                  },}, //column will be allocated 1/5 of the remaining space
              ],
                ajaxResponse:function(url, params, response){
          
                  return response.items; //return the tableData property of a response json object
              },
              });
              $("#timeline-csv").click(function(){
                var baseUrl = OC.generateUrl('/apps/timetracker/ajax/timeline');
                $.post(baseUrl,   // url
                  { 
                    from: start.unix(),
                    to: end.unix(),
                    group1: group1,
                    group2: group2,
                    timegroup: group3,
                    filterProjectId: filterProjectId,
                    filterClientId: filterClientId
                   }, // data to be submit
                  function(data, status, jqXHR) {// success callback
                    getTimelines();
                    });
                return false;
            });
            
          }


          function getTimelines(){
            var baseUrl = OC.generateUrl('/apps/timetracker/ajax/timelines');
            function pad(n, width, z) {
              z = z || '0';
              n = n + '';
              return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            }
            var table = new Tabulator("#timelines", {
              ajaxURL:baseUrl,
              layout:"fitColumns",
              // rowClick:function(e, row){
              // },
              columns:[
                //{title:"Id", field:"id", width:100}, //column has a fixed width of 100px;
                {title:"#", field:"", formatter:"rownum"},
                {title:"Id", field:"id", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                {title:"Status", field:"status", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                //{title:"User", field:"userUid", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                //{title:"Project", field:"projectName", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                //{title:"Client", field:"clientName", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                {title:"When", field:"timeInterval", widthGrow:1}, //column will be allocated 1/5 of the remaining space
                {title:"Total Duration", field:"totalDuration",formatter:function(cell, formatterParams, onRendered){
                  //cell - the cell component
                  //formatterParams - parameters set for the column
                  //onRendered - function to call when the formatter has been rendered
                  var duration = cell.getValue();
                  var s = Math.floor( (duration) % 60 );
                  var m = Math.floor( (duration/60) % 60 );
                  var h = Math.floor( (duration/(60*60)));
                  
                  return pad(h,2) + ':' + pad(m,2) + ':' + pad(s,2);
                  
                },}, //column will be allocated 1/5 of the remaining space
                {title:"created At", field:"createdAt",formatter:function(cell, formatterParams, onRendered){
                  //cell - the cell component
                  //formatterParams - parameters set for the column
                  //onRendered - function to call when the formatter has been rendered
                  var unix = cell.getValue();

                  return timeConverter(unix);
                  

                  
                },}, //column will be allocated 1/5 of the remaining space
                {title:"Download", field:"", formatter:"rownum",formatter:function(cell, formatterParams, onRendered){
                  //cell - the cell component
                  //formatterParams - parameters set for the column
                  //onRendered - function to call when the formatter has been rendered
                  //debugger;
                  var baseUrl = OC.generateUrl('/apps/timetracker/ajax/download-timeline/'+cell.getRow().getData()["id"]);
                  
                  return '<a href="'+baseUrl+'">'+"Download"+'</a>';
                  
                }},
               
            ],
              ajaxResponse:function(url, params, response){
        
                return response.Timelines; //return the tableData property of a response json object
            },
            });
         
        }
      });


      } );
}());