1.0.276

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.270",
+  "version": "1.0.276",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.270',
+  version: '1.0.276',
   description: 'website for lossless.com'
 }

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

@@ -1,5 +1,21 @@
 import { html } from '@design.estate/dees-element';
+import type { IView } from './dees-simple-appdash.js';
 
 export const demoFunc = () => html`
-  <dees-simple-appdash>Hello there</dees-simple-appdash>
+  <dees-simple-appdash
+    .viewTabs=${[
+      {
+        name: 'View 1',
+        element: null,
+      },
+      {
+        name: 'View 2',
+        element: null,
+      },
+      {
+        name: 'View 3',
+        element: null,
+      }
+    ] as IView[]}
+  >Hello there</dees-simple-appdash>
 `;

ts_web/elements/dees-simple-appdash.ts

@@ -22,6 +22,11 @@ declare global {
   }
 }
 
+export interface IView {
+  name: string;
+  element: DeesElement['constructor']['prototype'];
+}
+
 @customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
   // STATIC
@@ -32,8 +37,7 @@ export class DeesSimpleAppDash extends DeesElement {
   public name = 'Dees Simple Login';
 
   @property()
-  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
+  public viewTabs: IView[] = [];
-    [];
 
   public static styles = [
     cssManager.defaultStyles,
@@ -45,6 +49,16 @@ export class DeesSimpleAppDash extends DeesElement {
         position: relative;
         height: 100%;
       }
+
+      .maincontainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+      }
+
       .appbar {
         position: fixed;
         top: 0;
@@ -62,6 +76,27 @@ export class DeesSimpleAppDash extends DeesElement {
         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;
       }
@@ -113,22 +148,34 @@ export class DeesSimpleAppDash extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="appbar">
+      <div class="maincontainer">
-        <div class="appName">${this.name}</div>
+        <div class="appbar">
-        <div class="viewTabs"></div>
+          <div class="appName">${this.name}</div>
-        <div class="appActions">
+          <div class="viewTabs">
-          <div class="action">Logout</div>
+            ${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>
+        <div class="appcontent">
-      <div class="appcontent">
+          
-        <slot></slot>
-      </div>
-      <div class="controlbar">
-        <div class="control">
-          <dees-icon .iconFA=${'networkWired'}></dees-icon>
         </div>
-        <div class="control" @click=${this.launchTerminal}>
+        <div class="controlbar">
-          <dees-icon .iconFA=${'terminal'}></dees-icon>
+          <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>
     `;
@@ -140,19 +187,31 @@ export class DeesSimpleAppDash extends DeesElement {
   }
 
   public async launchTerminal() {
-    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
     const terminal = new DeesTerminal();
+    maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
-    terminal.style.top = '0px';
+    terminal.style.zIndex = '1';
+    terminal.style.top = '32px';
     terminal.style.left = '0px';
     terminal.style.right = '0px';
-    terminal.style.bottom = '0px';
+    terminal.style.bottom = '24px';
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(20px)';
     terminal.style.transition = 'all 0.2s';
-    appcontent.appendChild(terminal);
     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;
+  }
 }

ts_web/elements/dees-simple-login.ts

@@ -103,7 +103,6 @@ export class DeesSimpleLogin extends DeesElement {
     const submit = this.shadowRoot.querySelector('dees-form-submit');
     form.addEventListener('formData', (event: CustomEvent) => {
       this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
-      // this.switchToSlottedContent();
     });
   }
 

ts_web/elements/dees-terminal.ts

@@ -27,6 +27,9 @@ export class DeesTerminal extends DeesElement {
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
+  @property()
+  public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`;
+
   constructor() {
     super();
     this.resizeObserver = new ResizeObserver((entries) => {
@@ -278,8 +281,9 @@ export class DeesTerminal extends DeesElement {
     term.onData((data) => {
       input.write(data);
     });
-    await domtools.convenience.smartdelay.delayFor(5000);
+    await this.waitForPrompt(term, '~/');
-    input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`);
+    input.write(this.setupCommand);
+    input.write(`\n`);
   }
 
   async connectedCallback(): Promise<void> {
@@ -295,4 +299,22 @@ export class DeesTerminal extends DeesElement {
   handleResize() {
     this.fitAddon.fit();
   }
+
+  private async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const checkPrompt = () => {
+        const lines = term.buffer.active;
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines.getLine(i);
+          if (line && line.translateToString().includes(prompt)) {
+            resolve();
+            return;
+          }
+        }
+        setTimeout(checkPrompt, 100); // check every 100 ms
+      };
+  
+      checkPrompt();
+    });
+  }
 }