Initial commit

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-none-option-model.js

@@ -0,0 +1,22 @@
+var _ = require('underscore');
+var WidgetOptionModel = require('builder/components/modals/add-widgets/widget-option-model');
+
+/**
+ * Special case for the time-series type, when if selected it deletes an existing time-series if there is one,
+ * otherwise it does nothing.
+ */
+module.exports = WidgetOptionModel.extend({
+
+  defaults: _.defaults({type: 'time-series'}, WidgetOptionModel.defaults),
+
+  save: function (widgetDefinitionsCollection) {
+    var m = widgetDefinitionsCollection.find(this._isTimesSeries);
+    if (m) {
+      m.destroy({ wait: true });
+    }
+  },
+
+  _isTimesSeries: function (m) {
+    return m.get('type') === 'time-series';
+  }
+});

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-none-option-view.js

@@ -0,0 +1,37 @@
+var CoreView = require('backbone/core-view');
+var template = require('./time-series-none-option.tpl');
+
+/**
+ * Represents the (default) no-option view, i.e. since time-series options only can have one selection,
+ * this serves as the "unselect" option.
+ */
+module.exports = CoreView.extend({
+
+  events: {
+    'click': '_onSelect'
+  },
+
+  initialize: function (opts) {
+    this.listenTo(this.model, 'change:selected', this.render);
+  },
+
+  render: function () {
+    this.$el.html(this._html());
+    return this;
+  },
+
+  _html: function () {
+    var isSelected = !!this.model.get('selected');
+
+    this.$el.toggleClass('is-selected', isSelected);
+
+    return template({
+      isSelected: isSelected
+    });
+  },
+
+  _onSelect: function () {
+    this.model.set('selected', !this.model.get('selected'));
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-none-option.tpl

@@ -0,0 +1,9 @@
+<div class="WidgetList-option">
+  <input class="CDB-Radio u-iBlock js-radio" type="radio" <% if (isSelected) { %>checked="checked"<% } %> />
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+
+<div class="WidgetList-inner js-inner">
+  <h3 class="WidgetList-title CDB-Text CDB-Size-large u-bSpace--xl"><%- _t('components.modals.add-widgets.time-series-no-option-title') %></h3>
+  <p class="CDB-Text CDB-Size-small u-altTextColor"><%- _t('components.modals.add-widgets.time-series-no-option-desc') %></p>
+</div>

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-option-model.js

@@ -0,0 +1,81 @@
+var _ = require('underscore');
+var WidgetOptionModel = require('builder/components/modals/add-widgets/widget-option-model');
+var WidgetDefinitionModel = require('builder/data/widget-definition-model');
+
+var TIME_SERIES_TYPE = 'time-series';
+
+module.exports = WidgetOptionModel.extend({
+  defaults: _.defaults({type: TIME_SERIES_TYPE}, WidgetOptionModel.defaults),
+
+  save: function (widgetDefinitionsCollection) {
+    var model = this;
+    var columnName = this.columnName();
+    var layerId = this.layerDefinitionModel().id;
+
+    var attrs = {
+      type: TIME_SERIES_TYPE,
+      layer_id: layerId,
+      source: {
+        id: this.analysisDefinitionNodeModel().id
+      },
+      options: {
+        column: columnName,
+        title: this.get('title')
+      },
+      style: {
+        widget_style: {
+          definition: WidgetDefinitionModel.getDefaultWidgetStyle(TIME_SERIES_TYPE)
+        }
+      }
+    };
+
+    var attrsSave = {
+      type: TIME_SERIES_TYPE,
+      layer_id: layerId,
+      source: this.analysisDefinitionNodeModel().id,
+      column: columnName,
+      title: this.get('title'),
+      widget_style_definition: WidgetDefinitionModel.getDefaultWidgetStyle(TIME_SERIES_TYPE)
+    };
+
+    // Depending on column type, widget should have bins or aggregation
+    if (this.get('aggregation')) {
+      attrs.options.aggregation = this.get('aggregation');
+      attrsSave.aggregation = this.get('aggregation');
+    } else if (this.get('bins')) {
+      attrs.options.bins = this.get('bins');
+      attrsSave.bins = this.get('bins');
+    }
+
+    var successReplaceHandler = function () {
+      widgetDefinitionsCollection.trigger('successReplace', model);
+    };
+
+    var errorHandler = function (model, e) {
+      widgetDefinitionsCollection.trigger('error', model, e);
+    };
+
+    var createUpdatingNotification = function () {
+      widgetDefinitionsCollection.trigger('updating', model);
+    };
+
+    var existingModel = widgetDefinitionsCollection.find(this._isTimesSeries);
+    if (existingModel) {
+      // Update existing widget, but only if the column or layer differs
+      if (existingModel.get('column') !== columnName || existingModel.get('layer_id') !== layerId) {
+        createUpdatingNotification();
+        return existingModel.save(attrsSave, {
+          wait: true,
+          success: successReplaceHandler,
+          error: errorHandler
+        });
+      }
+    } else {
+      return widgetDefinitionsCollection.addWidget(model, attrs);
+    }
+  },
+
+  _isTimesSeries: function (model) {
+    return model.get('type') === TIME_SERIES_TYPE;
+  }
+});

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-option-view.js

@@ -0,0 +1,49 @@
+var CoreView = require('backbone/core-view');
+var LayerSelectorView = require('builder/components/modals/add-widgets/layer-selector-view');
+var template = require('./time-series-option.tpl');
+
+/**
+ * View for an individual time-series option.
+ */
+module.exports = CoreView.extend({
+
+  events: {
+    'click': '_onSelect'
+  },
+
+  initialize: function (opts) {
+    this.listenTo(this.model, 'change:layer_index', this.render);
+    this.listenTo(this.model, 'change:selected', this.render);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(this._html());
+    this._renderLayerSelector();
+    return this;
+  },
+
+  _html: function () {
+    var isSelected = !!this.model.get('selected');
+
+    this.$el.toggleClass('is-selected', isSelected);
+
+    return template({
+      columnName: this.model.columnName(),
+      isSelected: isSelected
+    });
+  },
+
+  _renderLayerSelector: function () {
+    var view = new LayerSelectorView({
+      model: this.model
+    });
+    this.addView(view);
+    this.$('.js-inner').append(view.render().el);
+  },
+
+  _onSelect: function () {
+    this.model.set('selected', !this.model.get('selected'));
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-option.tpl

@@ -0,0 +1,8 @@
+<div class="WidgetList-option">
+  <input class="CDB-Radio u-iBlock js-radio" type="radio" <% if (isSelected) { %>checked="checked"<% } %> />
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+
+<div class="WidgetList-inner js-inner">
+  <h3 class="u-ellipsis CDB-Text CDB-Size-large u-bSpace--m"><%- columnName %></h3>
+</div>

lib/assets/javascripts/builder/components/modals/add-widgets/time-series/time-series-options-view.js

@@ -0,0 +1,56 @@
+var CoreView = require('backbone/core-view');
+var TimeSeriesOptionView = require('./time-series-option-view.js');
+var TimeSeriesNoneOptionView = require('./time-series-none-option-view.js');
+
+/**
+ * View to select time-series widget options
+ */
+module.exports = CoreView.extend({
+  module: 'components/modals/add-widgets/time-series/time-series-options-view',
+
+  className: 'WidgetList',
+
+  initialize: function () {
+    this.listenTo(this.collection, 'change:selected', this._onSelectedChange);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    this.collection
+      .chain()
+      .filter(this._isTimeSeries)
+      .each(this._renderOption, this);
+    return this;
+  },
+
+  _renderOption: function (m) {
+    var ViewClass = m.has('tuples')
+      ? TimeSeriesOptionView
+      : TimeSeriesNoneOptionView;
+
+    var view = new ViewClass({
+      className: 'WidgetList-item js-WidgetList-item',
+      model: m
+    });
+    this.addView(view);
+    this.$el.append(view.render().el);
+  },
+
+  _isTimeSeries: function (m) {
+    return m.get('type') === 'time-series';
+  },
+
+  _onSelectedChange: function (selectedModel, isSelected) {
+    // Make sure there can only be one selected time-series widget option
+    if (isSelected) {
+      this.collection.each(function (m) {
+        if (this._isTimeSeries(m) && m !== selectedModel) {
+          m.set('selected', false);
+        }
+      }, this);
+    }
+  }
+
+});