js/GraphSchedule.js

   1 /*jslint devel: true*/
   2 /*global $ */
   3 /**
   4  * Constructor
   5  *
   6  * @param {object} params
   7  * @returns
   8  */
   9 function GraphSchedule(params) {
  10         "use strict";
  11         this.init(params);
  12 }
  13
  14 (function () {
  15         "use strict";
  16         GraphSchedule.prototype = {
  17                 template: '',
  18                 ui: null,
  19                 $flag: null,
  20                 $graph: null,
  21                 timeRanges: {
  22                         workday: [],
  23                         weekend: []
  24                 },
  25                 flags: []
  26         };
  27
  28         GraphSchedule.prototype.createUI = function createUI() {
  29                 var $tmp = $('<div></div>');
  30
  31                 $tmp.html(this.template);
  32                 this.$flag = $tmp.find('.flag');
  33                 this.$graph = $tmp.find('.GraphSchedule');
  34                 this.ui = this.$graph;
  35
  36                 this.addCurrentTimeBar();
  37                 this.showFlags();
  38
  39                 this.center();
  40         };
  41
  42         GraphSchedule.prototype.center = function center() {
  43                 // set scroll position;
  44                 this.$graph[0].scrollLeft = 1000 * ((new Date().getHours() - 4) / 24);
  45         };
  46
  47         GraphSchedule.prototype.refresh = function refresh() {
  48                 this.updateTimeRanges();
  49                 this.showFlags();
  50                 this.center();
  51         };
  52
  53         GraphSchedule.prototype.onTemplateLoad = function onTemplateLoad() {
  54         };
  55
  56         GraphSchedule.prototype.init = function init(params) {
  57                 var $loader = $('<div></div>');
  58
  59                 if (params && params.onSuccess) {
  60                         this.onTemplateLoad = params.onSuccess;
  61                 }
  62
  63                 this.flags = [];
  64                 $loader.load('templates/GraphSchedule.tmpl', null, function (data) {
  65                         this.template = data;
  66                         this.createUI();
  67                         this.onTemplateLoad();
  68                 }.bind(this));
  69         };
  70
  71         /**
  72          *
  73          * @param {Array} times
  74          * @returns
  75          */
  76         GraphSchedule.prototype.pushTimeOfFlags = function pushTimeOfFlags(times) {
  77                 var i, count;
  78
  79                 // clear previous times;
  80                 this.flags = [];
  81
  82                 if (times instanceof Array) {
  83                         count = times.length;
  84                         for (i = 0; i < count; i += 1) {
  85                                 if (times[i] instanceof Date) {
  86                                         this.flags.push({ time: times[i] });
  87                                 } else {
  88                                         throw {message: 'Bag argument at [' + i + '] element of Array. Expected {Date}'};
  89                                 }
  90                         }
  91                 } else {
  92                         throw {message: 'Bad argument. Expected {Array} of {Date}'};
  93                 }
  94         };
  95
  96         GraphSchedule.prototype.addCurrentTimeBar = function addCurrentTimeBar() {
  97                 // remove old time bar;
  98                 var $currentTimeBar = this.$graph.find('.currentTimeBar'),
  99                         currentTime = new Date(),
 100                         hours = currentTime.getHours();
 101
 102                 if ($currentTimeBar.length === 0) {
 103                         // add new;
 104                         $currentTimeBar = $('<div class="currentTimeBar"></div>');
 105                 }
 106
 107                 if (hours < 10) {
 108                         hours = '0' + hours;
 109                 }
 110
 111                 this.$graph.find('.ranges .h' + hours).append($currentTimeBar);
 112                 $currentTimeBar.css('left', 100 * currentTime.getMinutes() / 60 + '%');
 113
 114                 setTimeout(this.addCurrentTimeBar.bind(this), 5 * 60 * 1000);
 115         };
 116
 117         GraphSchedule.prototype.addFlag = function addFlag(newFlag) {
 118                 var $flagClone, hours = newFlag.time.getHours();
 119                 if (hours < 10) {
 120                         hours = '0' + hours;
 121                 }
 122                 $flagClone = this.$flag.clone();
 123                 this.$graph.find('.grid td:contains(' + hours + ')').append($flagClone);
 124                 $flagClone.css('left', 100 * newFlag.time.getMinutes() / 60 + '%');
 125         };
 126
 127         GraphSchedule.prototype.showFlags = function showFlags() {
 128                 var i, len = this.flags.length;
 129                 // remove old flags;
 130                 this.removeFlags();
 131
 132                 // add all flags to view;
 133                 for (i = 0; i < len; i += 1) {
 134                         this.addFlag(this.flags[i]);
 135                 }
 136
 137                 this.center();
 138         };
 139
 140         GraphSchedule.prototype.removeFlags = function removeFlags() {
 141                 this.$graph.find('.flag').remove();
 142         };
 143
 144         GraphSchedule.prototype.setTimeRanges = function setTimeRanges(ranges) {
 145                 this.timeRanges = ranges;
 146         };
 147
 148         GraphSchedule.prototype.setVisibleWeekend = function (bool) {
 149                 var row = this.ui.find('.rangesWeekend');
 150                 return bool ? row.show() : row.hide();
 151         };
 152
 153         GraphSchedule.prototype.setVisibleWorkdays = function (bool) {
 154                 var row = this.ui.find('.ranges');
 155                 return bool ? row.show() : row.hide();
 156         };
 157
 158         /**
 159          * Update time ranges on graph
 160          * @param ranges {array} array of boolen, keys are hours, example: [false, false, false, true, true]
 161          */
 162         GraphSchedule.prototype.updateTimeRanges = function updateTimeRanges() {
 163                 var i, len, hours;
 164
 165                 this.$graph.find('.th').removeClass('th');
 166
 167                 // workdays;
 168                 hours = this.timeRanges.workday;
 169                 len = hours.length;
 170                 for (i = 0; i < len; i += 1) {
 171                         if (hours[i]) {
 172                                 this.$graph.find('.ranges .h' + ((i < 10) ? '0' + i : i)).addClass('th');
 173                         }
 174                 }
 175
 176                 //weekends;
 177                 hours = this.timeRanges.weekend;
 178                 len = hours.length;
 179                 for (i = 0; i < len; i += 1) {
 180                         if (hours[i]) {
 181                                 this.$graph.find('.rangesWeekend .h' + ((i < 10) ? '0' + i : i)).addClass('th');
 182                         }
 183                 }
 184         };
 185
 186 }());