tree_status/modules/display-tree-status-sk/display-tree-status-sk.ts

/**
 * @module display-tree-status-sk
 * @description <h2><code>display-tree-status-sk</code></h2>
 *
 * <p>
 *   Displays recent tree statuses in a table with rows colored occording to
 *   the tree status (green=open,yellow=caution,red=closed).
 * </p>
 *
 */

import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { Status } from '../json';

// States of the tree.
const OPEN = 'open';
const CAUTION = 'caution';
const CLOSED = 'closed';

export class DisplayTreeStatusSk extends ElementSk {
  statusesData: Status[] = [];

  constructor() {
    super(DisplayTreeStatusSk.template);
  }

  private static template = (ele: DisplayTreeStatusSk) => html`
  <table class="recent_statuses">
    <tr>
      <th>Who</th>
      <th>When</th>
      <th>Message</th>
      <th>Wait for</th>
    </tr>
    ${ele.recentStatuses()}
  </table>
  `;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
  }

  private getLocalDate(timestamp: string) {
    return new Date(timestamp).toLocaleString();
  }

  private getStatusClass(message: string) {
    let treeState = '';
    const lowerCaseMessage = message.toLowerCase();
    if (lowerCaseMessage.includes(OPEN)) {
      treeState = OPEN;
    } else if (lowerCaseMessage.includes(CAUTION)) {
      treeState = CAUTION;
    } else if (lowerCaseMessage.includes(CLOSED)) {
      treeState = CLOSED;
    }
    return treeState;
  }

  private recentStatuses() {
    return this.statusesData.map((status) => html`
  <tr class=${this.getStatusClass(status.message)}>
    <td>${status.username}</td>
    <td>${this.getLocalDate(status.date)}</td>
    <td>${status.message}</td>
    <td>${status.rollers}</td>
  </tr>`);
  }

  /** @prop statuses {string} The list of recent tree statuses. */
  get statuses(): Status[] {
    return this.statusesData;
  }

  set statuses(val: Status[]) {
    this.statusesData = val;
    this._render();
  }
}

define('display-tree-status-sk', DisplayTreeStatusSk);