var StairsViewModel = function() { var self = this; self.mode = ko.observable('Static'); self.static = { brightness: ko.observable(0) }; self.custom = { brightness: ko.observableArray([]) }; self.alternate = { interval: ko.observable(500), brightness: ko.observable(0) } self.slide = { interval: ko.observable(500), brightness: ko.observable(4096), direction: ko.observable(0), fadeOutTime: ko.observable(0) } self.loading = ko.observable(true); self.updatingFromServer = false; self.autoSetTimeout = null; self.autoSetMode = ko.computed(function() { if (self.loading()) return; var url = '/setMode/' + encodeURIComponent(self.mode()); switch (self.mode()) { case 'Static': url += '?brightness=' + encodeURIComponent(self.static.brightness()); break; case 'Custom': var values = self.custom.brightness().map(function(item) { return item.value(); }); values.reverse(); url += '?brightness=' + encodeURIComponent(values.join()); break; case 'Alternate': url += '?interval=' + encodeURIComponent(self.alternate.interval()) + '&brightness=' + encodeURIComponent(self.alternate.brightness()); break; case 'Slide': url += '?interval=' + encodeURIComponent(self.slide.interval()) + '&brightness=' + encodeURIComponent(self.slide.brightness()) + '&direction=' + encodeURIComponent(self.slide.direction()) + '&fadeOutTime=' + encodeURIComponent(self.slide.fadeOutTime()); break; } // Exit after checking all the parameters, so the observers // are properly subscribed if (self.updatingFromServer) return; if (self.autoSetTimeout !== null) { clearTimeout(self.autoSetTimeout); self.autoSetTimeout = null; } self.autoSetTimeout = setTimeout(function() { // TODO retry on failure $.ajax( { url: url, dataType: 'json', cache: false }); clearTimeout(self.autoSetTimeout); self.autoSetTimeout = null; }, 200); return true; }); self.ping = function() { self.loading(true); $.ajax( { url: '/ping', dataType: 'json', cache: false }) .done(function(data) { self.updatingFromServer = true; // Initialize the 'Custom' values based on the step count. // Each item is an object containing an observable; we can't // add the observable directly otherwise the foreach template // will unwrap it before we can attach it to the range input. var values = []; for (var index = 0; index < data.stepCount; index++) values.push({ value: ko.observable(0) }); self.custom.brightness(values); // TODO get current mode // TODO get range settings // TODO allow tweaking of range settings self.loading(false); self.updatingFromServer = false; }) .fail(function() { setTimeout(self.ping, 1000); }); }; }; $(function() { var viewModel = new StairsViewModel(); ko.applyBindings(viewModel); viewModel.ping(); });