dees-catalog/ts_web/elements/dees-simple-appdash.ts

import { demoFunc } from './dees-simple-appdash.demo.js';
import * as colors from './00colors.js';

import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
  type CSSResult,
  state,
  domtools,
} from '@design.estate/dees-element';
import { DeesTerminal } from './dees-terminal.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-simple-appdash': DeesSimpleAppDash;
  }
}

export interface IView {
  name: string;
  element: DeesElement['constructor']['prototype'];
}

@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
  // STATIC
  public static demo = demoFunc;
  // INSTANCE

  @property()
  public name = 'Dees Simple Login';

  @property()
  public viewTabs: IView[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#ccc')};
        user-select: none;
        display: block;
        position: relative;
        height: 100%;
      }

      .maincontainer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        overflow: hidden;
      }

      .appbar {
        position: fixed;
        top: 0;
        height: 32px;
        width: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
        font-size: 14px;
        line-height: 32px;
        font-family: 'Roboto', 'Inter', sans-serif;
        padding: 0px 16px;
        z-index: 2;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8);
        display: grid;
        grid-template-columns: min-content 1fr auto;
      }

      .appbar .viewTabs {
        padding: 0px 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .viewTab {
        padding: 0px 8px;
      }

      .viewTab:hover {
        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
        color: ${cssManager.bdTheme('#000', '#fff')};
      }

      .viewTab:active {
        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
        color: ${cssManager.bdTheme('#000', '#fff')};
      }

      .appName {
        white-space: nowrap;
      }

      .appActions {
        display: flex;
      }

      .appActions .action {
      }
      .appActions .action:hover {
        color: ${cssManager.bdTheme('#000', '#fff')};
      }

      .appcontent {
        z-index: 1;
        position: fixed;
        top: 32px;
        height: calc(100vh - 32px - 24px);
        bottom: 24px;
        width: 100%;
        overflow: auto;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
        overscroll-behavior: contain;
      }

      .controlbar {
        color: #fff;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 24px;
        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
      }

      .control {
        width: min-content;
        margin-right: 16px;
        font-size: 12px;
        white-space: nowrap;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <div class="appbar">
          <div class="appName">${this.name}</div>
          <div class="viewTabs">
            ${this.viewTabs.map(
              (view) => html`
                <div class="viewTab" @click=${() => {
                  this.loadView(view);
                }}>${view.name}</div>
              `
            )}
          </div>
          <div class="appActions">
            <div class="action" @click=${() => {
              this.dispatchEvent(new CustomEvent('logout'));
            }}>Logout</div>
          </div>
        </div>
        <div class="appcontent">
          
        </div>
        <div class="controlbar">
          <div class="control">
            <dees-icon .iconFA=${'networkWired'}></dees-icon>
          </div>
          <div class="control" @click=${this.launchTerminal}>
            <dees-icon .iconFA=${'terminal'}></dees-icon>
          </div>
        </div>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    await this.loadView(this.viewTabs[0]);
  }

  public async launchTerminal() {
    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
    const terminal = new DeesTerminal();
    maincontainer.appendChild(terminal);
    terminal.style.position = 'absolute';
    terminal.style.zIndex = '1';
    terminal.style.top = '32px';
    terminal.style.left = '0px';
    terminal.style.right = '0px';
    terminal.style.bottom = '24px';
    terminal.style.opacity = '0';
    terminal.style.transform = 'translateY(20px)';
    terminal.style.transition = 'all 0.2s';
    await domtools.plugins.smartdelay.delayFor(0);
    terminal.style.opacity = '1';
    terminal.style.transform = 'translateY(0px)';
  }

  private currentView: DeesElement;
  public async loadView(viewArg: IView) {
    const appcontent = this.shadowRoot.querySelector('.appcontent');
    const view = new viewArg.element();
    if (this.currentView) {
      this.currentView.remove();
    }
    appcontent.appendChild(view);
    this.currentView = view;
  }
}