browser/views/status/component.html

<link rel="import" href="../../third-party/polymer/polymer.html">
<link rel="import" href="../../third-party/paper-button/paper-button.html">

<polymer-element name="p2b-status" attributes="status">

  <template>
    <link rel="stylesheet" href="../common/common.css">
    <link rel="stylesheet" href="component.css">
    <h3>Status</h3>
    <p>{{ serviceState | formatServiceState }}</p>
    <div class="{{ {hidden : !serviceState.published} | tokenList }}">
      <h3>Name</h3>
      <p>{{ serviceState.fullServiceName }}</p>

      <h3>Published on</h3>
      <p>{{ serviceState.date | formatDate }}</p>

      <h3>Running Since</h3>
      <p>{{ runningSince }}</p>

      <h3>Number of pipe requests</h3>
      <p>{{ serviceState.numPipes | formatInteger }}</p>

      <h3>Total bytes received</h3>
      <p>{{ serviceState.numBytes | formatBytes }}</p>
    </div>
    <paper-button class="paper colored red" inkColor="#A9352C" on-click="{{ stopAction }}">Stop</paper-button>
  </template>
  <script>
    System.import('libs/utils/formatting').then(function(formatter) {
      Polymer('p2b-status', {

        ready: function() {
          this.runningSince = 'just now';
        },

        attached: function() {
          // Update the running since every second.
          this.runningSinceIntervalId = setInterval(this.updateRunningSince.bind(this), 1000);
        },

        detached: function() {
          clearInterval(this.runningSinceIntervalId);
        },

        /*
         * Dynamic binding for the state of publishing p2b service.
         * Any changes to this object will be reflected in the UI automatically
         */
        serviceState: null,

        /*
         * Human friendly formatting functions. Because polymer filter expressions
         * don't accept obj.func we wrap them here
         * @private
         */
        formatDate: formatter.formatDate,
        formatInteger: formatter.formatInteger,
        formatBytes: formatter.formatBytes,

        /*
         * Auto-updating Uptime text
         * @private
         * @type {string}
         */
        updateRunningSince: function() {
          if (!this.serviceState) { return; }
          this.runningSince = formatter.formatRelativeTime(this.serviceState.date);
        },

        /*
         * Status text
         * @private
         * @type {string}
         */
        formatServiceState: function(serviceState) {
          if (!serviceState) {
            return '';
          }
          if (serviceState.published) {
            return 'Published';
          } else if(serviceState.publishing) {
            return 'Publishing';
          } else if(serviceState.stopping) {
            return 'Stopping';
          }  else {
            return 'Stopped';
          }
        },

        /*
         * Stop action. Fires when user decides to stop the p2b service.
         * @event
         */
        stopAction: function() {
          this.fire('stop');
        }

      });
    });
  </script>
</polymer-element>