statuspage/ts_web/elements/upl-statuspage-incidents.ts

import * as plugins from '../plugins';
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-incidents': UplStatuspageIncidents;
  }
}

@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
  // STATIC
  public static demo = () => html`
    <upl-statuspage-incidents></upl-statuspage-incidents>
  `;

  // INSTANCE
  @property({
    type: Array
  })
  public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];

  @property({
    type: Array
  })
  public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];

  @property({
    type: Boolean
  })
  public whitelabel = false;
  

  constructor() {
    super();
  }

  public static styles = [
    plugins.domtools.elementBasic.staticStyles,
    css`
      :host {
          display: block;
          background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
          font-family: Roboto Mono;
          color: ${cssManager.bdTheme('#333333', '#ffffff')};
        }

        .mainbox {
          max-width: 900px;
          margin: auto;
        }

        .noIncidentBox {
          background: #333;
          padding: 10px;
          margin-bottom: 15px;
          border-radius: 3px;

        }
        
    `
  ]

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="mainbox">
       <uplinternal-miniheading>
         Current Incidents
       </uplinternal-miniheading>
       <div class="noIncidentBox">
          No incidents ongoing.
       </div>
       <uplinternal-miniheading>
         Past Incidents
       </uplinternal-miniheading>
       <div class="noIncidentBox">
          No past incidents in the last 90 days.
       </div>
      </div>
    `;
  }

  public dispatchReportNewIncident() {
    this.dispatchEvent(new CustomEvent('reportNewIncident', {
      
    }))
  }

  public dispatchStatusSubscribe() {
    this.dispatchEvent(new CustomEvent('statusSubscribe', {
      
    }))
  }
}