From 6cfe89645c3e7f2a586db89d2b6ad683f70de7c8 Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Mon, 22 Jan 2024 22:30:44 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts                |  2 +-
 ts_web/elements/dees-simple-appdash.demo.ts | 18 ++++++-
 ts_web/elements/dees-simple-appdash.ts      | 52 ++++++++++++++++++++-
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index c91caeb..b4ad513 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.274',
+  version: '1.0.275',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-simple-appdash.demo.ts b/ts_web/elements/dees-simple-appdash.demo.ts
index b529079..a1f7e2e 100644
--- a/ts_web/elements/dees-simple-appdash.demo.ts
+++ b/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>
 `;
diff --git a/ts_web/elements/dees-simple-appdash.ts b/ts_web/elements/dees-simple-appdash.ts
index 8387a13..37bbbf9 100644
--- a/ts_web/elements/dees-simple-appdash.ts
+++ b/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
@@ -31,6 +36,9 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public name = 'Dees Simple Login';
 
+  @property()
+  public viewTabs: IView[] = [];
+
   @property()
   public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
     [];
@@ -72,6 +80,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;
       }
@@ -126,7 +155,15 @@ export class DeesSimpleAppDash extends DeesElement {
       <div class="maincontainer">
         <div class="appbar">
           <div class="appName">${this.name}</div>
-          <div class="viewTabs"></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'));
@@ -134,7 +171,7 @@ export class DeesSimpleAppDash extends DeesElement {
           </div>
         </div>
         <div class="appcontent">
-          <slot></slot>
+          
         </div>
         <div class="controlbar">
           <div class="control">
@@ -170,4 +207,15 @@ export class DeesSimpleAppDash extends DeesElement {
     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;
+  }
 }