perf/res/imp/domain-picker-sk.html

<!-- The <domain-picker-sk> custom element declaration.

  Allows picking either a date range for commits, or for
  picking a number of commits to show before a selected
  date.

  Properties:
    state - An object that contains the following state:
      {
        begin:         // unix timestamp in seconds.
        end:           // unix timestamp in seconds.
        num_commits:   // Number of commits.
        request_type:  // 0 for date range, 1 for dense. See dataframe.RequestType.
      }

  Attributes:
    force_request_type - A value of 'dense' or 'range' will force the corresponding
      request_type to be always set.

  Events:
    domain-changed - The event detail will contain the updated 'state'.

  Methods:
    None.
-->

<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/paper-radio-button/paper-radio-button.html">

<link rel="import" href="/res/common/imp/date-picker-sk.html" />

<dom-module id="domain-picker-sk">
  <style>
    #controls {
      justify-content: flex-end;
      display: flex;
    }

    label {
      display: inline-block;
      width: 4em;
    }

    #description {
      text-transform: initial;
    }
  </style>
  <template>
    <paper-dialog id=dialog>
      <h2>Graph Domain</h2>
        <paper-radio-button on-change=_typeRange checked='[[_isEqual(_state.request_type,0)]]'>Date Range</paper-radio-button>
        <paper-radio-button on-change=_typeDense checked='[[_isEqual(_state.request_type,1)]]'>Dense</paper-radio-button>
        <div>
          <template is='dom-if' if='[[_isEqual(_state.request_type,0)]]'>
            <p>Display all points in the date range.</p>
            <label>Begin:</label> <date-picker-sk on-date-changed=_beginChange date=[[_state.begin]]></date-picker-sk>
          </template>
          <template is='dom-if' if='[[_isEqual(_state.request_type,1)]]'>
            <p>Display only the points that have data before the date.</p>
            <paper-input on-change=_numChanged type=number value='[[_state.num_commits]]' label='Number of points: ' prevent-invalid-input></paper-input>
          </template>
        </div>
        <div>
          <label>End:</label> <date-picker-sk on-date-changed=_endChange date=[[_state.end]]></date-picker-sk>
        </div>
      <div id=controls>
        <button on-click=_cancel>Cancel</button>
        <button on-click=_ok disabled='[[_isInvalid(_state.begin,_state.end,_state.request_type)]]'>OK</button>
      </div>
    </paper-dialog>
    <button id=description on-click=_edit>{{description}}</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'domain-picker-sk',

    properties: {
      description: {
        type: String,
        value: '',
        reflectToAttribute: false,
      },
      state: {
        type: Object,
        value: {},
        reflectToAttribute: false,
        observer: 'stateChange',
      },
      _state: {
        type: Object,
        value: {},
        reflectToAttribute: false,
        observer: '_stateChange',
      },
      force_request_type: {
        type: String,
        value: '',
        reflectToAttribute: true,
        observer: '_forceRequestTypeChange',
      },
    },

    stateChange: function() {
      this._state = Object.assign({}, this.state);
    },

    _stateChange: function() {
      let begin = new Date();
      begin.setTime(this._state.begin*1000);
      let end = new Date();
      end.setTime(this._state.end*1000);
      if (this._state.request_type === 0) {
        this.set('description', `${begin.toLocaleDateString()} - ${end.toLocaleDateString()}`);
      } else {
        this.set('description', `${this._state.num_commits} commits ending at ${end.toLocaleDateString()}`);
      }
    },

    _edit: function() {
      this.$.dialog.open();
    },

    _cancel: function() {
      this.$.dialog.close();
    },

    _numChanged: function(e) {
      this.set('_state.num_commits', +e.srcElement.value);
      this._stateChange();
    },

    _ok: function() {
      this.$.dialog.close();
      this.fire('domain-changed', {state: this._state, bubbles: true});
    },

    _beginChange: function(e) {
      this.set('_state.begin', e.detail.date);
      this._stateChange();
    },

    _endChange: function(e) {
      this.set('_state.end', e.detail.date);
      this._stateChange();
    },

    _isEqual: function(a,b) {
      return a === b;
    },

    _typeRange: function() {
      if (this.force_request_type === 'dense') {
        this._typeDense();
        return
      }
      this.set('_state.request_type', 0);
      this._state = Object.assign({}, this._state);
      this._stateChange();
    },

    _typeDense: function() {
      if (this.force_request_type === 'range') {
        this._typeRange();
        return
      }
      this.set('_state.request_type', 1);
      this._state = Object.assign({}, this._state);
      this._stateChange();
    },

    _forceRequestTypeChange: function() {
      if (this.force_request_type === 'dense') {
        this._typeDense();
      } else if (this.force_request_type === 'range') {
        this._typeRange();
      }
    },

    _isInvalid: function(begin, end, request_type) {
      if (request_type === 0 && (end < begin)) {
        return true;
      }
      return false;
    }

  });
</script>