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