dees-catalog/ts_web/elements/dees-dataview-statusobject.ts

import * as colors from './00colors.js';
import * as plugins from './00plugins.js';

import { demoFunc } from './dees-dataview-statusobject.demo.js';
import {
  DeesElement,
  html,
  customElement,
  type TemplateResult,
  property,
  state,
  cssManager,
  css,
  type CSSResult,
} from '@design.estate/dees-element';

import * as tsclass from '@tsclass/tsclass';

declare global {
  interface HTMLElementTagNameMap {
    'dees-dataview-statusobject': DeesDataviewStatusobject;
  }
}

@customElement('dees-dataview-statusobject')
export class DeesDataviewStatusobject extends DeesElement {
  public static demo = demoFunc;

  @property({ type: Object }) statusObject: tsclass.code.IStatusObject;

  public static styles = [
    cssManager.defaultStyles,
    css`
      .mainbox {
        border-radius: 8px;
        background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
        box-shadow: 0px 1px 3px #00000030;
        min-height: 48px;
        color: ${cssManager.bdTheme('#000', '#fff')};
        border-top: ${cssManager.bdTheme('none', '1px solid #ffffff10')};
        cursor: default;
      }

      .heading {
        display: grid;
        align-items: center;
        grid-template-columns: 40px auto 120px;
      }

      h1 {
        display: block;
        margin: 0px;
        padding: 0px;
        height: 48px;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 48px;
      }

      .statusdot {
        height: 8px;
        width: 8px;
        border-radius: 6px;
        background: grey;
        margin: auto;
      }

      .copyMain {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
        text-align: center;
        padding: 4px;
        border-radius: 3px;
        margin-right: 16px;
        color: ${cssManager.bdTheme('#333', '#ffffff80')};
        user-select: none;
      }

      .copyMain:hover {
        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
        border: 1px solid ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
        color: #fff;
      }

      .copyMain:active {
        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
        border: 1px solid ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
        color: #fff;
      }

      .statusdot.ok {
        background: green;
      }

      .statusdot.not_ok{
        background: red;
      }

      .statusdot.partly_ok {
        background: orange;
      }

      .detail {
        min-height: 60px;
        align-items: center;
        display: grid;
        grid-template-columns: 40px auto;
        border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#282828')};
        transition: all 0.2s;
      }

      .detail:hover {
        background: #ffffff05;
      }

      .detail:active {
        background: #ffffff10;
      }

      .detail .detailsText {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 8px;
        word-break: break-all;
      }

      .detail .detailsText .label {
        font-size: 12px;
        color: #ffffff80
      }

      .detail .detailsText .value {
        font-size: 14px;
        font-family: 'Intel One Mono', 'Geist Mono';
      }
    `,
  ];

  render(): TemplateResult {
    return html`
      <div class="mainbox">
        <div class="heading">
          <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
          <h1>${this.statusObject?.name || 'no status object assigned'}</h1>
          <div class="copyMain">Copy as JSON</div>
        </div>
        ${this.statusObject?.details?.map((detailArg) => {
          return html`
            <div class="detail">
              <div class="statusdot ${detailArg.status}"></div>
              <div class="detailsText">
                <div class="label">${detailArg.name}</div>
                <div class="value">${detailArg.value}</div>
              </div>
            </div>
          `;
        })}
      </div>
    `;
  }

  async firstUpdated() {}
}