js/UI.js

   1 /*jslint nomen: true*/
   2 /*global $, GraphSchedule, confirm, range, history, setTimeout */
   3 function UI() {
   4         "use strict";
   5 }
   6
   7 (function () {
   8         "use strict";
   9         UI.prototype = {
  10                 sentence : {
  11                         'lazy' : {
  12                                 text : 'He does not seem to me to be a free man who does not sometimes do nothing.',
  13                                 signature : 'Marcus T. Cicero'
  14                         },
  15                         'run' : {
  16                                 text : 'A journey of a thousand miles begins with a  single step.',
  17                                 signature : 'Lao-tzu'
  18                         }
  19                 },
  20                 graphSchedule : null,
  21                 app : null
  22         };
  23
  24         UI.prototype.fillExercises = function (exercisesData) {
  25                 var i, len, self = this;
  26
  27                 $('#exercises').replaceWith(
  28                         $('<ul data-role="listview" id="exercises"></ul>')
  29                 );
  30                 for (i = 0, len = exercisesData.length; i < len; i += 1) {
  31                         $('#exercises').append(
  32                                 $(this.getExercisesTemplate(exercisesData[i], i))
  33                         );
  34                 }
  35                 $('#exercises').listview();
  36                 $('#exercises :jqmData(role="slider")').slider();
  37                 $('#exercises li').on('tap', function () {
  38                         var $toggle = $(this).find(':jqmData(role="slider")');
  39                         $toggle.val(($toggle.val() === 'off') ? 'on' : 'off');
  40                         $toggle.slider('refresh');
  41                         self.app.saveExercises(self.getExercisesList());
  42                 });
  43                 $('#exercises :jqmData(role="slider")').on('change', function (e) {
  44                         e.preventDefault();
  45                         e.stopPropagation();
  46                         self.app.saveExercises(self.getExercisesList());
  47                 });
  48         };
  49
  50         UI.prototype.fillTimesRanges = function (timesData) {
  51                 var self = this, len, i;
  52
  53                 $('#availableTime').replaceWith(
  54                         $('<ul data-role="listview" id="availableTime"></ul>')
  55                 );
  56                 for (i = 0, len = timesData.length; i < len; i += 1) {
  57                         $('#availableTime')
  58                                 .append($(this.getAvailableTimeTemplate(timesData[i])));
  59                 }
  60                 $('#availableTime').trigger('create');
  61                 $('#availableTime').listview().listview('refresh');
  62                 $('#availableTime :jqmData(name=edit)').on('tap', function (e) {
  63                         e.preventDefault();
  64                         e.stopPropagation();
  65                         self.editTimeRange($(this).data('val'));
  66                 });
  67                 $('#availableTime :jqmData(name=disable)').on('tap', function (e) {
  68                         e.stopPropagation();
  69                         self.app.disableTimeRange($(this).data('val'));
  70                 });
  71                 $('#availableTime :jqmData(name=delete)').on('tap', function (e) {
  72                         e.stopPropagation();
  73                         if (confirm('Are you sure?')) {
  74                                 self.app.deleteTimeRange($(this).data('val'));
  75                         }
  76                 });
  77         };
  78
  79         UI.prototype.fillTimeRangeForm = function fillTimeRangeForm(timeRange) {
  80                 var tmpData = new Date();
  81                 // Filling form;
  82                 $('#startTime').attr('data-val',
  83                                 new Date(tmpData.setHours(timeRange.start)));
  84                 $('#duration').attr('data-val', timeRange.duration);
  85
  86                 if ($('#startTime').data('datetimepicker')) {
  87                         $('#startTime').data('datetimepicker').options.date
  88                                 .setHours(timeRange.start);
  89                         $('#startTime').data('datetimepicker').ui
  90                                 .find('.ui-datefield-hour').html(
  91                                         (timeRange.start < 10) ? '0' + timeRange.start : timeRange.start
  92                                 );
  93                 }
  94                 if ($('#duration').data('datetimepicker')) {
  95                         $('#duration').data('datetimepicker').options.date
  96                                 .setHours(timeRange.duration);
  97                         $('#duration').data('datetimepicker').ui.find('.ui-datefield-hour')
  98                                 .html(
  99                                         (timeRange.duration < 10) ? '0'
 100                                                 + timeRange.duration : timeRange.duration
 101                                 );
 102                         $('#duration').data('datetimepicker')._populateDataSelector = function (field, pat) {
 103                                 var result = $.tizen.datetimepicker.prototype._populateDataSelector
 104                                                 .call(this, field, pat);
 105                                 result.values = range(1, 20);
 106                                 result.data = range(1, 20);
 107                                 result.current -= 1;
 108                                 return result;
 109                         };
 110                 }
 111
 112                 $('#formEnablePeriod')[0].value = timeRange.enabled ? 'on' : 'off';
 113                 $('#formEnablePeriod').slider('refresh');
 114         };
 115
 116         UI.prototype.editTimeRange = function (nr, event) {
 117                 if (event && typeof event.stopPropagation === 'function') {
 118                         event.preventDefault();
 119                         event.stopPropagation();
 120                 }
 121
 122                 if (this.app.editTimeRange(nr) >= 0) {
 123                         $('#updateTime').val('modify');
 124                 } else {
 125                         $('#updateTime').val('add');
 126                 }
 127
 128                 // change page to form;
 129                 $.mobile.changePage("#rangesOfTimes");
 130         };
 131
 132         UI.prototype.getExercisesList = function () {
 133                 return $('#exercises :jqmData(role=slider)').map(function (o, v) {
 134                         return ({
 135                                 index : $(v).attr('data-index'),
 136                                 checked : ($(v).val() === 'on') ? true : false
 137                         });
 138                 });
 139         };
 140
 141         UI.prototype.addExercise = function () {
 142                 if ($("#newExerciseName").val()) {
 143                         if (this.app.addExercise($("#newExerciseName").val())) {
 144                                 $("#newExerciseName").trigger('blur');
 145                                 setTimeout(history.back.bind(history), 50);
 146                         }
 147                 } else {
 148                         this.showErrors([ {
 149                                 name : 'Name of exercise is not correct.',
 150                                 code : 100
 151                         } ]);
 152                 }
 153         };
 154
 155         UI.prototype.configToUI = function () {
 156         };
 157
 158         UI.prototype.updateMainUI = function () {
 159                 this.setStatusRun(this.app.config.trainingEnabled);
 160                 this.graphSchedule.setTimeRanges(this.app.periodsWeekToBoolArray());
 161         };
 162
 163         UI.prototype.getTimeRangeFromForm = function () {
 164                 return {
 165                         start : $('#startTime').data('datetimepicker').options.date
 166                                         .getHours(),
 167                         duration : $('#duration').data('datetimepicker').options.date
 168                                         .getHours(),
 169                         stop : $('#startTime').data('datetimepicker').options.date
 170                                         .getHours()
 171                                         + $('#duration').data('datetimepicker').options.date
 172                                                         .getHours(),
 173                         style : $('.selectPeriodType :radio:checked').val(),
 174                         enabled : ($('#formEnablePeriod')[0].value === 'on' ? true : false)
 175                 };
 176         };
 177
 178         UI.prototype.editTimeRangeAction = function (nr) {
 179                 if (this.app.saveTimeRange(nr, this.getTimeRangeFromForm())) {
 180                         history.back();
 181                 } else {
 182                         throw ({
 183                                 message : 'Time start and stop is not present.',
 184                                 code : 1
 185                         });
 186                 }
 187         };
 188
 189         UI.prototype.showNoticeInMonitor = function (notice, alarm) {
 190                 $('#communicate').html(notice);
 191                 $('#communicate').toggleClass('onAlert', alarm);
 192         };
 193
 194         UI.prototype.changeButtonAddTime = function (text) {
 195                 $('#addTime').html(text);
 196         };
 197
 198         UI.prototype.showErrors = function (errors) {
 199                 var i; // count;
 200                 for (i = 0; i < errors.length; i += 1) {
 201                         alert(errors[i].name);
 202                 }
 203         };
 204
 205         UI.prototype.showAlarmInMonitor = function (data) {
 206                 var notice = '';
 207                 function formatNN(val) {
 208                         return (val < 10) ? ('0' + val) : val;
 209                 }
 210
 211                 if (data && data.alarm && this.app.config.trainingEnabled) {
 212                         this.app.currentAlarm = this.app.findCurrentAlarm();
 213                         if (this.app.currentAlarm.length > 0) {
 214                                 notice += 'Go... go... go...!<br>' + data.exerciseName + ' x '
 215                                         + data.numberOfTimes;
 216                         } else {
 217                                 notice += 'Next exercises set at: '
 218                                         + formatNN(data.alarm.getHours()) + ':'
 219                                         + formatNN(data.alarm.getMinutes()) + '<br>'
 220                                         + data.exerciseName + ' x ' + data.numberOfTimes;
 221                         }
 222                 } else {
 223                         notice += '<br/>You have no workouts scheduled for now.<br/>';
 224                 }
 225                 this.showNoticeInMonitor(notice, false);
 226         };
 227
 228         UI.prototype.getSentence = function UI_getSentence(type) {
 229                 return (this.sentence[type] || {
 230                         text : 'No sentence',
 231                         signature : 'anonymous'
 232                 });
 233         };
 234
 235         UI.prototype.setSentence = function (type) {
 236                 var sentence = this.getSentence(type);
 237                 $('#sentence').html('"' + sentence.text + '"');
 238                 $('#signature').html('- ' + sentence.signature);
 239         };
 240
 241         UI.prototype.showWaitOk = function () {
 242                 $('#mainControl').hide();
 243                 $('#one .ui-btn-back').hide();
 244
 245                 $('#onAlertControl').tabbar();
 246                 $('#onAlertControl').show();
 247                 $('#onAlertControl').css('width', '');
 248         };
 249
 250         UI.prototype.setStatusRun = function (bool) {
 251                 if (bool) {
 252                         // icon;
 253                         $('#status').removeClass('lazy').addClass('run');
 254                         // sentence;
 255                         this.setSentence('run');
 256                         // button in control bar;
 257                         $('#startStop .ui-btn-text').html('stop training');
 258                 } else {
 259                         $('#status').removeClass('run').addClass('lazy');
 260                         this.setSentence('lazy');
 261                         $('#communicate').html('');
 262                         $('#startStop .ui-btn-text').html('start training');
 263                 }
 264         };
 265
 266         UI.prototype.bindEvents = function bindEvents() {
 267                 var self = this;
 268
 269                 // bind events;
 270                 $('#one .ui-btn-back').on('tap', this.app.exit.bind(this.app));
 271
 272                 $('#ok').on('tap', self.app.ok.bind(self.app));
 273                 $('#wait').on('tap', self.app.wait.bind(self.app));
 274                 $('#todayOffAll').on('tap', self.app.todayOffAll.bind(self.app));
 275
 276                 $('#startStop').on('tap', function () {
 277                         self.app.appStartStop();
 278                 });
 279
 280                 $('#one').on(
 281                         'pageshow',
 282                         function (page, options) {
 283                                 if (self.graphSchedule.ui) {
 284                                         $('#one .schedule').append(self.graphSchedule.ui);
 285                                         self.app.updateGraph();
 286                                         self.graphSchedule.refresh();
 287                                         self.graphSchedule.setVisibleWeekend(!self.app
 288                                                 .todayIsWorkday());
 289                                         self.graphSchedule.setVisibleWorkdays(self.app
 290                                                 .todayIsWorkday());
 291                                 }
 292                                 $('#one .schedule').on('touchstart', function (ev) {
 293                                         ev.stopPropagation();
 294                                 });
 295
 296                                 // workaround for scroll lock;
 297                                 $.mobile.activePage.css('position', 'fixed');
 298                         }
 299                 );
 300
 301                 $('#two').on('pageshow', function (page, options) {
 302
 303                         //FIXME (two scrollbar workaround)
 304                         setTimeout(
 305                                 function () {
 306                                         var newHeight = $('#two').find('[data-role="content"]').prop('style').height;
 307                                         $('#two').css({'min-height': newHeight, 'height': newHeight});
 308                                 },
 309                                 0
 310                         );
 311
 312                         if (self.graphSchedule.ui) {
 313                                 $('#two .scheduleOptions').append(self.graphSchedule.ui);
 314                                 self.graphSchedule.refresh();
 315                                 self.graphSchedule.setVisibleWeekend(true);
 316                                 self.graphSchedule.setVisibleWorkdays(true);
 317                         }
 318                 });
 319
 320                 $('#two').on('pageinit', function (page, options) {
 321                         $('.ui-radio input', $('#frequency')).change(function (ev) {
 322                                 self.app.setFrequency(this.value);
 323                                 self.updateMainUI();
 324                         });
 325
 326                         $('.ui-radio input', $('#strength')).change(function (ev) {
 327                                 self.app.setStrength(this.value);
 328                                 self.updateMainUI();
 329                         });
 330
 331                         $('#frequency')[0].select(self.app.config.frequency);
 332                         $('#strength')[0].select(self.app.config.strength);
 333
 334                         $('#two .scheduleOptions').append(self.graphSchedule.ui);
 335                         $('#two .scheduleOptions').on('touchstart', function (ev) {
 336                                 ev.stopPropagation();
 337                         });
 338
 339                         $('#workdaysType').on('tap', function (ev) {
 340                                 self.app.changeTypeOfPeriods('workday');
 341                         });
 342
 343                         $('#weekendType').on('tap', function (ev) {
 344                                 self.app.changeTypeOfPeriods('weekend');
 345                         });
 346
 347                         $('#addTimeRange').on('tap', self.editTimeRange.bind(self, -1));
 348
 349                         self.app.updateTimesRanges();
 350                         self.configToUI();
 351                 });
 352
 353                 $('#selectExercises').on('pageinit', function (page, options) {
 354                         self.app.updateExercises();
 355                         self.configToUI();
 356                 });
 357
 358                 $('#customExercises').on('pageinit', function (page, options) {
 359                         $('#btnNewExercise').on('click', self.addExercise.bind(self));
 360                 });
 361
 362                 $('#customExercises').on('pageshow', function (page, options) {
 363                         $('#newExerciseName').val('');
 364                         $('#newExerciseName').trigger('focus');
 365                 });
 366
 367                 $('#rangesOfTimes').on('pageinit', function (page, options) {
 368                         $("#updateTime").on("tap", function (e) {
 369                                 e.preventDefault();
 370                                 e.stopPropagation();
 371                                 self.editTimeRangeAction(self.app.currentEditingTimePeriodId);
 372                         });
 373                 });
 374
 375                 $('#rangesOfTimes').on('pageshow', function (page, options) {
 376                         $('#updateTime').data('button').refresh();
 377                         self.fillTimeRangeForm(self.app.currentEditingTimePeriod);
 378                 });
 379
 380                 $('#increasingStrength').on('change', function () {
 381                         self.app.config.increasingStrength = this.checked;
 382                         self.app.saveConfig();
 383
 384                         self.configToUI();
 385                 });
 386         };
 387
 388         UI.prototype.onGraphSchedule = function onGraphSchedule(onInitEnd) {
 389                 this.updateMainUI();
 390
 391                 $('#one .schedule').append(this.graphSchedule.ui);
 392                 this.app.updateGraph();
 393                 this.graphSchedule.refresh();
 394                 this.graphSchedule.setVisibleWeekend(!this.app.todayIsWorkday());
 395                 this.graphSchedule.setVisibleWorkdays(this.app.todayIsWorkday());
 396
 397                 if (typeof onInitEnd === 'function') {
 398                         onInitEnd();
 399                 }
 400         };
 401
 402         UI.prototype.initialize = function (onInitEnd) {
 403                 $.mobile.tizen.disableSelection(document);
 404
 405                 this.bindEvents();
 406
 407                 $('html').css('font-size', '');
 408                 $('body').css('font-size', '');
 409
 410                 this.graphSchedule = new GraphSchedule({
 411                         onSuccess : this.onGraphSchedule.bind(this, onInitEnd)
 412                 });
 413         };
 414
 415 }());