+/*jslint devel: true, nomen: true*/
+/*global $, GraphSchedule, confirm, range, history */
+function UI() {
+ "use strict";
+}
+
+(function () {
+ "use strict";
+ UI.prototype = {
+ sentence : {
+ 'lazy' : {
+ text : 'He does not seem to me to be a free man who does not sometimes do nothing.',
+ signature : 'Marcus T. Cicero'
+ },
+ 'run' : {
+ text : 'A journey of a thousand miles begins with a single step.',
+ signature : 'Lao-tzu'
+ }
+ },
+ graphSchedule : null,
+ app : null
+ };
+
+ UI.prototype.fillExercises = function (exercisesData) {
+ console.log('UI_fillExercises', exercisesData);
+ var i, len, self = this;
+
+ $('#exercises').replaceWith(
+ $('<div id="exercises"></div>')
+ );
+ for (i = 0, len = exercisesData.length; i < len; i += 1) {
+ $('#exercises').append(
+ $(this.getExercisesTemplate(exercisesData[i], i))
+ );
+ }
+ $('#exercises :jqmData(role="slider")').slider();
+
+ $('#exercises :jqmData(role="slider")').on('change', function (e) {
+ console.log('slider:change');
+ self.app.saveExercises(self.getExercisesList());
+ });
+ };
+
+ UI.prototype.fillTimesRanges = function (timesData) {
+ console.log('UI_fillTimesRanges', timesData);
+ var self = this, len, i;
+
+ $('#availableTime').replaceWith(
+ $('<ul data-role="listview" id="availableTime"></ul>')
+ );
+ for (i = 0, len = timesData.length; i < len; i += 1) {
+ $('#availableTime')
+ .append($(this.getAvailableTimeTemplate(timesData[i])));
+ }
+ $('#availableTime').trigger('create');
+ $('#availableTime').listview();
+ $('#availableTime :jqmData(name=edit)').on('tap', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ self.editTimeRange($(this).data('val'));
+ });
+ $('#availableTime :jqmData(name=disable)').on('tap', function (e) {
+ e.stopPropagation();
+ self.app.disableTimeRange($(this).data('val'));
+ });
+ $('#availableTime :jqmData(name=delete)').on('tap', function (e) {
+ e.stopPropagation();
+ if (confirm('Are you sure?')) {
+ self.app.deleteTimeRange($(this).data('val'));
+ }
+ });
+ };
+
+ UI.prototype.fillTimeRangeForm = function fillTimeRangeForm(timeRange) {
+ console.log('UI.fillTimeRangeForm', timeRange);
+ var tmpData = new Date();
+ // Filling form;
+ $('#startTime').attr('data-val',
+ new Date(tmpData.setHours(timeRange.start)));
+ $('#duration').attr('data-val', timeRange.duration);
+
+ if ($('#startTime').data('datetimepicker')) {
+ $('#startTime').data('datetimepicker').options.date
+ .setHours(timeRange.start);
+ $('#startTime').data('datetimepicker').ui
+ .find('.ui-datefield-hour').html(
+ (timeRange.start < 10) ? '0' + timeRange.start : timeRange.start
+ );
+ }
+ if ($('#duration').data('datetimepicker')) {
+ $('#duration').data('datetimepicker').options.date
+ .setHours(timeRange.duration);
+ $('#duration').data('datetimepicker').ui.find('.ui-datefield-hour')
+ .html(
+ (timeRange.duration < 10) ? '0'
+ + timeRange.duration : timeRange.duration
+ );
+ $('#duration').data('datetimepicker')._populateDataSelector = function (field, pat) {
+ var result = $.tizen.datetimepicker.prototype._populateDataSelector
+ .call(this, field, pat);
+ result.values = range(1, 20);
+ result.data = range(1, 20);
+ return result;
+ };
+ }
+
+ $('#formEnablePeriod')[0].value = timeRange.enabled ? 'on' : 'off';
+ $('#formEnablePeriod').slider('refresh');
+ };
+
+ UI.prototype.editTimeRange = function (nr, event) {
+ console.log('UI_editTimerange', nr, this);
+ if (event && typeof event.stopPropagation === 'function') {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ if (this.app.editTimeRange(nr) >= 0) {
+ $('#updateTime').val('modify');
+ } else {
+ $('#updateTime').val('add');
+ }
+
+ // change page to form;
+ $.mobile.changePage("#rangesOfTimes");
+ };
+
+ UI.prototype.getExercisesList = function () {
+ console.log('UI_getExercisesList');
+ return $('#exercises :jqmData(role=slider)').map(function (o, v) {
+ return ({
+ index : $(v).attr('data-index'),
+ checked : ($(v).val() === 'on') ? true : false
+ });
+ });
+ };
+
+ UI.prototype.addExercise = function () {
+ console.log('UI_addExercise');
+ if ($("#newExerciseName").val()) {
+ if (this.app.addExercise($("#newExerciseName").val())) {
+ history.back();
+ }
+ } else {
+ this.showErrors([ {
+ name : 'Name of exercise is not correct.',
+ code : 100
+ } ]);
+ }
+ };
+
+ UI.prototype.configToUI = function () {
+ console.log('UI_configToUI');
+ };
+
+ UI.prototype.updateMainUI = function () {
+ console.log('updateMainUI');
+ this.setStatusRun(this.app.config.trainingEnabled);
+ console.log('updateMainUI: graphSchedule: ', this.graphSchedule);
+ this.graphSchedule.setTimeRanges(this.app.periodsWeekToBoolArray());
+ };
+
+ UI.prototype.getTimeRangeFromForm = function () {
+ return {
+ start : $('#startTime').data('datetimepicker').options.date
+ .getHours(),
+ duration : $('#duration').data('datetimepicker').options.date
+ .getHours(),
+ stop : $('#startTime').data('datetimepicker').options.date
+ .getHours()
+ + $('#duration').data('datetimepicker').options.date
+ .getHours(),
+ style : $('.selectPeriodType :radio:checked').val(),
+ enabled : ($('#formEnablePeriod')[0].value === 'on' ? true : false)
+ };
+ };
+
+ UI.prototype.editTimeRangeAction = function (nr) {
+ console.log('UI_editTimeRangeAction', nr);
+ if (this.app.saveTimeRange(nr, this.getTimeRangeFromForm())) {
+ history.back();
+ } else {
+ throw ({
+ message : 'Time start and stop is not present.',
+ code : 1
+ });
+ }
+ };
+
+ UI.prototype.showNoticeInMonitor = function (notice, alarm) {
+ console.log('UI_showNoticeInMonitor', notice, alarm);
+ $('#communicate').html(notice);
+ $('#communicate').toggleClass('onAlert', alarm);
+ };
+
+ UI.prototype.changeButtonAddTime = function (text) {
+ console.log('UI_changeButtonAddTime', text);
+ $('#addTime').html(text);
+ };
+
+ UI.prototype.showErrors = function (errors) {
+ console.log('UI_showErrors', errors);
+ var i; // count;
+ for (i = 0; i < errors.length; i += 1) {
+ alert(errors[i].name);
+ }
+ };
+
+ UI.prototype.showAlarmInMonitor = function (data) {
+ console.log('UI_showAlarmInMonitor', data);
+ var notice = '';
+ function formatNN(val) {
+ return (val < 10) ? ('0' + val) : val;
+ }
+
+ if (data && data.alarm && this.app.config.trainingEnabled) {
+ this.app.currentAlarm = this.app.findCurrentAlarm();
+ if (this.app.currentAlarm.length > 0) {
+ notice += 'Go... go... go...!<br>' + data.exerciseName + ' x '
+ + data.numberOfTimes;
+ } else {
+ notice += 'Next exercises set at: '
+ + formatNN(data.alarm.getHours()) + ':'
+ + formatNN(data.alarm.getMinutes()) + '<br>'
+ + data.exerciseName + ' x ' + data.numberOfTimes;
+ }
+ } else {
+ notice += '<br/>You have no workouts scheduled for now.<br/>';
+ }
+ this.showNoticeInMonitor(notice, false);
+ };
+
+ UI.prototype.getSentence = function (type) {
+ console.log('UIgetSentence', type);
+ return (this.sentence[type] || {
+ text : 'No sentence',
+ signature : 'anonymous'
+ });
+ };
+
+ UI.prototype.setSentence = function (type) {
+ console.log('UI_setSentence');
+ var sentence = this.getSentence(type);
+ $('#sentence').html('"' + sentence.text + '"');
+ $('#signature').html('- ' + sentence.signature);
+ };
+
+ UI.prototype.showWaitOk = function () {
+ console.log('UI_showWaitOk');
+ $('#mainControl').hide();
+ $('#one .ui-btn-back').hide();
+
+ $('#onAlertControl').tabbar();
+ $('#onAlertControl').show();
+ $('#onAlertControl').css('width', '');
+ };
+
+ UI.prototype.setStatusRun = function (bool) {
+ console.log('UI_setStatusRun', bool);
+ if (bool) {
+ // icon;
+ $('#status').removeClass('lazy').addClass('run');
+ // sentence;
+ this.setSentence('run');
+ // button in control bar;
+ $('#startStop .ui-btn-text').html('stop training');
+ } else {
+ $('#status').removeClass('run').addClass('lazy');
+ this.setSentence('lazy');
+ $('#communicate').html('');
+ $('#startStop .ui-btn-text').html('start training');
+ }
+ };
+
+ UI.prototype.bindEvents = function bindEvents() {
+ var self = this;
+
+ // bind events;
+ $('#one .ui-btn-back').on('tap', this.app.exit.bind(this.app));
+
+ $('#ok').on('tap', self.app.ok.bind(self.app));
+ $('#wait').on('tap', self.app.wait.bind(self.app));
+ $('#todayOffAll').on('tap', self.app.todayOffAll.bind(self.app));
+
+ $('#startStop').on('tap', function () {
+ self.app.appStartStop();
+ });
+
+ $('#one').on(
+ 'pageshow',
+ function (page, options) {
+ console.log('#one pageshow');
+ if (self.graphSchedule.ui) {
+ $('#one .schedule').append(self.graphSchedule.ui);
+ self.app.updateGraph();
+ self.graphSchedule.refresh();
+ self.graphSchedule.setVisibleWeekend(!self.app
+ .todayIsWorkday());
+ self.graphSchedule.setVisibleWorkdays(self.app
+ .todayIsWorkday());
+ }
+ $('#one .schedule').on('touchstart', function (ev) {
+ ev.stopPropagation();
+ });
+ }
+ );
+
+ $('#two').on('pageshow', function (page, options) {
+ console.log('#two pageshow');
+ if (self.graphSchedule.ui) {
+ $('#two .scheduleOptions').append(self.graphSchedule.ui);
+ self.graphSchedule.refresh();
+ self.graphSchedule.setVisibleWeekend(true);
+ self.graphSchedule.setVisibleWorkdays(true);
+ }
+ });
+
+ $('#two').on('pageinit', function (page, options) {
+ console.log('#two pageinit');
+ $('.ui-radio input', $('#frequency')).change(function (ev) {
+ self.app.setFrequency(this.value);
+ self.updateMainUI();
+ });
+
+ $('.ui-radio input', $('#strength')).change(function (ev) {
+ self.app.setStrength(this.value);
+ self.updateMainUI();
+ });
+
+ $('#frequency')[0].select(self.app.config.frequency);
+ $('#strength')[0].select(self.app.config.strength);
+
+ $('#two .scheduleOptions').append(self.graphSchedule.ui);
+ $('#two .scheduleOptions').on('touchstart', function (ev) {
+ ev.stopPropagation();
+ });
+
+ $('#workdaysType').on('tap', function (ev) {
+ self.app.changeTypeOfPeriods('workday');
+ });
+
+ $('#weekendType').on('tap', function (ev) {
+ self.app.changeTypeOfPeriods('weekend');
+ });
+
+ $('#addTimeRange').on('tap', self.editTimeRange.bind(self, -1));
+
+ self.app.updateTimesRanges();
+ self.configToUI();
+ });
+
+ $('#selectExercises').on('pageinit', function (page, options) {
+ self.app.updateExercises();
+ self.configToUI();
+
+ $('#btnNewExercise').on('tap', self.addExercise.bind(self));
+ });
+
+ $('#customExercises').on('pageshow', function (page, options) {
+ $('#newExerciseName').val('');
+ $('#newExerciseName').trigger('focus');
+ });
+
+ $('#rangesOfTimes').on('pageinit', function (page, options) {
+ console.log('#rangesOfTimes init');
+ $("#updateTime").on("tap", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ self.editTimeRangeAction(self.app.currentEditingTimePeriodId);
+ });
+ });
+
+ $('#rangesOfTimes').on('pageshow', function (page, options) {
+ console.log('#rangesOfTimes pageshow');
+ $('#updateTime').data('button').refresh();
+ self.fillTimeRangeForm(self.app.currentEditingTimePeriod);
+ });
+
+ $('#increasingStrength').on('change', function () {
+ self.app.config.increasingStrength = this.checked;
+ self.app.saveConfig();
+
+ self.configToUI();
+ });
+ };
+
+ UI.prototype.onGraphSchedule = function onGraphSchedule(onInitEnd) {
+ console.log('(UI..initialize).onGraphSchedule');
+ this.updateMainUI();
+
+ $('#one .schedule').append(this.graphSchedule.ui);
+ this.app.updateGraph();
+ this.graphSchedule.refresh();
+ this.graphSchedule.setVisibleWeekend(!this.app.todayIsWorkday());
+ this.graphSchedule.setVisibleWorkdays(this.app.todayIsWorkday());
+
+ if (typeof onInitEnd === 'function') {
+ onInitEnd();
+ }
+ };
+
+ UI.prototype.initialize = function (onInitEnd) {
+ console.log('UI..initialize');
+
+ this.bindEvents();
+
+ $('html').css('font-size', '');
+ $('body').css('font-size', '');
+
+ this.graphSchedule = new GraphSchedule({
+ onSuccess : this.onGraphSchedule.bind(this, onInitEnd)
+ });
+ };
+
+}());