jviz-queue-item.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import dependencies -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-styles/jviz-styles.html">
<link rel="import" href="../jviz-btn/jviz-btn.html">
<link rel="import" href="../jviz-loading/jviz-loading.html">

<!-- Initialize the queue item element -->
<dom-module id="jviz-queue-item">
  <template>
    <style>
      :host
      {
        display: block;
        padding: 5px;
        border-radius: 5px;
        background-color: var(--jviz-grey);
        margin-top: 0px;
        margin-bottom: 10px;
      }
      :host .head
      {
        display: block;
        height: 26px;
      }
      :host .head .status
      {
        float: left;
        margin-right: 10px;
      }
      :host .head .header
      {
        display: inline-block;
        width: calc(100% - 90px);
        height: 26px;
        line-height: 26px;
        float: left;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
      }
      :host .head .arrow
      {
        display: inline-block;
        width: 26px;
        height: 26px;
        background-color: var(--jviz-grey-1);
        border-radius: 5px;
        float: right;
        transition: all 0.3s;
        cursor: pointer;
      }
      :host[open] .head .arrow { transform: rotate(180deg); }
      :host .body
      {
        display: none;
        width: calc(100% - 20px);
        padding: 5px;
        line-height: 20px;
        color: var(--jviz-navy-4);
      }
      :host[open] .body { display: block; }
    </style>
    <div class="head">
      <jviz-btn id="status" class="status" height="26px" icon=""></jviz-btn>
      <div class="header" on-tap="toggle">{{ header }}</div>
      <div class="arrow" on-tap="toggle">
        <jviz-icons icon="chevron_down" size="26px" color="navy"></jviz-icons>
      </div>
    </div>
    <template is="dom-if" if="{{ detail }}">
      <div class="body">{{ detail }}</div>
    </template>
  </template>
</dom-module>

<!-- Queue item logic -->
<script>
  //Initialize the queue item object
  var jviz_queue_item = { is: 'jviz-queue-item' };

  //Initialize the properties
  jviz_queue_item.properties = {};
  jviz_queue_item.properties.header = { type: String, reflectToAttribute: false, value: '' };
  jviz_queue_item.properties.detail = { type: String, reflectToAttribute: false, value: '' };
  jviz_queue_item.properties.status = { type: String, reflectToAttribute: true, value: 'waiting', observer: '_update_status' };
  jviz_queue_item.properties.open = { type: Boolean, reflectToAttribute: true, value: false };

  //Update the status
  jviz_queue_item._update_status = function()
  {
    //Check the status value
    switch (this.status.toLowerCase())
    {
      //Status is running
      case 'running':
        this.$.status.color = 'blue';
        this.$.status.icon = 'star';
        break;

      //Status is done
      case 'done':
        this.$.status.color = 'green';
        this.$.status.icon = 'done';
        break;

      //Status is error
      case 'error':
        this.$.status.color = 'red';
        this.$.status.icon = 'close';
        break;

      //Satus is warning
      case 'warning':
        this.$.status.color = 'yellow';
        this.$.status.icon = 'warning';
        break;

      //Default case
      default:
        this.$.status.color = 'navy';
        this.$.status.icon = 'star';
    }
  };

  //Toggle the view
  jviz_queue_item.toggle = function()
  {
    //Toggle the open
    this.open = !this.open;
  };

  //Set a status value
  jviz_queue_item.set_status = function(status, message)
  {
    //Set the item status
    this.status = status.trim().toLowerCase();

    //Check the status message
    if(typeof message === 'string')
    {
      //Set the detail message
      this.detail = message.trim();
    }
  };

  //Set a done status
  jviz_queue_item.set_done = function(message){ return this.set_status('done', message); };

  //Set an error status
  jviz_queue_item.set_error = function(message){ return this.set_status('error', message); };

  //Set a warning status
  jviz_queue_item.set_warning = function(message){ return this.set_status('warning', message); };

  //Set a running status
  jviz_queue_item.set_running = function(message){ return this.set_status('running', message); };

  //Set a waiting status
  jviz_queue_item.set_waiting = function(message){ return this.set_status('waiting', message); };

  //Register the queue item element
  Polymer(jviz_queue_item);
</script>