debugger/res/imp/op.html

<!-- The <op-sk> custom element declaration.

  Attributes:
    op - A deserialized JSON object that describes the operation.

    Presumes ops are structured as below, where the "details" will
    change based on the name of the opertion.

      {
        visible: true,
        command: "line",
        ...,
      }

    selected - True if this op has been selected.

    index - The index of this command.

    prefix - An array of icons and their color to display
      before the command name. The look like:

       {
         icon: "icons:image",
         color: "green",
       }

  Events:
    op-toggled - This event is sent when a paper-checkbox is toggled.
        The checked status and index of the op are returned in e.detail.

        {
          checked: false,
          index: 102,
        }

  Methods:
    None.
-->

<link rel=import href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
<link rel=import href="/res/imp/bower_components/iron-icon/iron-icon.html">
<link rel=import href="/res/imp/bower_components/iron-icons/image-icons.html">
<link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel=import href="/res/common/imp/9/details-summary.html">
<dom-module id="op-sk">
  <style type="text/css" media="screen">
    details-sk {
      display: block;
    }

    details-sk[selected] {
      background: #eee;
    }

    pre {
      margin-left: 3em;
    }

    iron-icon {
      opacity: 0.7;
    }

    details-sk div {
      margin-left: 2em;
    }

    summary-sk {
      display: block;
      margin-left: 2.5em;
      margin-top: -2.5em;
      padding: 0.25em;
    }

    .batchid {
      float: right;
      background: #1B9E77;
      color: white;
      border-radius: 5px;
      padding: 0.2em 0.4em;
      margin-right: 0.5em;
      margin-top: -0.05em;
    }

  </style>
  <template>
    <details-sk selected$="{{ selected }}">
      <summary-sk id=summary><paper-checkbox id=toggle checked$="{{ op.details.visible }}" on-tap="_check"></paper-checkbox>
        <template is="dom-repeat" items="{{ prefix }}">
          <iron-icon icon="{{ item.icon }}" style$="color: {{ item.color }};"><iron-icon>
        </template>
        {{ op.details.command }}
        <template is="dom-repeat" items="{{ _fixList(op.details.auditTrail.Batches) }}" as=batch>
          <span class=batchid style$="background: {{ _bgColor(batch.BatchListID) }}">{{ _smartNumber(batch.BatchListID) }}</span>
        </template>
      </summary-sk>
      <div>
        <strong>Index: </strong> <span id=index>{{ index }}</span>
      </div>
      <pre>
{{ _display(op) }}
      </pre>
    </details-sk>
  </template>
</dom-module>

<script>
  (function () {
    var colors = [
      "#1B9E77",
      "#D95F02",
      "#7570B3",
      "#E7298A",
      "#66A61E",
      "#E6AB02",
      "#A6761D",
      "#666666"
    ];

    Polymer({
      is: "op-sk",

      properties: {
        op: {
          type: Object,
          value: function() { return {}; },
          reflectToAttribute: false,
        },
        selected: {
          type: Boolean,
          value: false,
          reflectToAttribute: false,
        },
        index: {
          type: Number,
          value: 0,
          reflectToAttribute: true,
        },
        prefix: {
          type: Array,
          value: function() { return []; },
          reflectToAttribute: false,
        },
      },

      _display: function(op) {
        return JSON.stringify(op.details, null, 2);
      },

      _check: function(e) {
        var detail = {
          checked: this.$.toggle.checked,
          index: this.index,
        };
        this.dispatchEvent(new CustomEvent('op-toggled', { detail: detail, bubbles: true }));
        e.stopPropagation();
      },

      _smartNumber: function(index) {
        if (index == -1) {
          return "...";
        } else {
          return index;
        }
      },

      _bgColor: function(index) {
        if (index == -1) {
          return "black";
        } else {
          return colors[index % colors.length];
        }
      },

      _fixList: function(list) {
        if (!list) {
          return
        }
        var ret = list.slice();
        ret.reverse();
        if (ret.length > 4) {
          ret = [ret[0], ret[1], { BatchListID: -1 }, ret[ret.length-2], ret[ret.length-1]];
        }
        return ret;
      },

    });
  })();
</script>