fix(core): update

ts_web/elements/wcc-properties.ts

@@ -1,6 +1,15 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import {
+  LitElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  internalProperty,
+} from 'lit-element';
 import { WccDashboard } from './wcc-dashboard';
 
+export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
+
 export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 export type TTheme = 'bright' | 'dark';
 
@@ -27,6 +36,9 @@ export class WccProperties extends LitElement {
   @property()
   public warning: string = null;
 
+  @internalProperty()
+  propertyContent: TemplateResult[] = [];
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@@ -60,6 +72,16 @@ export class WccProperties extends LitElement {
           background: #444;
           border: 1px solid #000;
         }
+
+        .properties input, .properties select {
+          display: block;
+          width: 100%;
+          background: #333;
+          border: none;
+          color: #fff;
+        }
+
+
         .viewportSelector,
         .themeSelector {
           user-select: none;
@@ -128,22 +150,7 @@ export class WccProperties extends LitElement {
       <div class="grid">
         <div class="properties">
           <div class="panelheading">Properties</div>
-          ${(() => {
-            if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
-              const anonItem: any = this.selectedItem;
-              if (!anonItem._classProperties) {
-                return `You have selected a page!`;
-              }
-              const classProperties: Map<string, any> = anonItem._classProperties;
-              const returnArray: TemplateResult[] = [];
-              for (const key of classProperties.keys()) {
-                returnArray.push(
-                  html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
-                );
-              }
-              return returnArray;
-            }
-          })()}
+          ${this.propertyContent}
         </div>
         <div class="themeSelector">
           <div class="panelheading">Theme</div>
@@ -212,6 +219,121 @@ export class WccProperties extends LitElement {
     `;
   }
 
+  public async createProperties() {
+    console.log('creating properties');
+    const isEnumeration = (propertyArg): boolean => {
+      const keys = Object.keys(propertyArg.type);
+      const values = [];
+      for (const key of keys) {
+        let value = propertyArg.type[key];
+        if (typeof value === 'number') {
+          value = value.toString();
+        }
+        values.push(value);
+      }
+      for (const key of keys) {
+        if (values.indexOf(key) < 0) {
+          return false;
+        }
+      }
+      return true;
+    };
+    const getEnumValues = (propertyArg): any[] => {
+      console.log(JSON.stringify(propertyArg));
+      const enumValues : any[] = [];
+      Object.keys(propertyArg.type).forEach((valueArg: string) => {
+        enumValues.push(valueArg);
+      });
+      return enumValues;
+    };
+    const determinePropertyType = (propertyArg: any): TPropertyType => {
+      const typeName: any | undefined = propertyArg.type.name;
+      if (typeName) {
+        return typeName;
+      } else {
+        return Array.isArray(propertyArg)
+          ? 'Array'
+          : isEnumeration(propertyArg)
+          ? 'Enum'
+          : 'Object';
+      }
+    };
+    if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
+      const anonItem: any = this.selectedItem;
+      if (!anonItem._classProperties) {
+        return html`You have selected a page!`;
+      }
+      const wccFrame = await this.dashboardRef.wccFrame;
+      let selectedElement: HTMLElement;
+      for (const element of Array.from(wccFrame.children)) {
+        if (element instanceof (this.selectedItem as any)) {
+          selectedElement = element as HTMLElement;
+          break;
+        }
+      }
+      console.log(selectedElement);
+      const classProperties: Map<string, any> = anonItem._classProperties;
+      const propertyArray: TemplateResult[] = [];
+      for (const key of classProperties.keys()) {
+        if (key === 'goBright' || key === 'domtools') {
+          continue;
+        }
+        const property = classProperties.get(key);
+        const propertyTypeString = determinePropertyType(property);
+        propertyArray.push(
+          html`
+            <div class="property">
+              ${key} / ${propertyTypeString}<br>
+              ${(() => {
+                switch (propertyTypeString) {
+                  case 'Boolean':
+                    return html`<input
+                      type="checkbox"
+                      ?checked=${selectedElement[key]}
+                      @input="${(eventArg: any) => {
+                        selectedElement[key] = eventArg.target.checked;
+                      }}"
+                    />`;
+                  case 'String':
+                    return html`<input
+                      type="text"
+                      value=${selectedElement[key]}
+                      @input="${(eventArg: any) => {
+                        selectedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Number':
+                    return html`<input
+                      type="number"
+                      value=${selectedElement[key]}
+                      @input="${(eventArg: any) => {
+                        selectedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Enum':
+                    const enumValues: any[] = getEnumValues(property);
+                    return html`<select
+                        @change="${(eventArg:any)=>{
+                        selectedElement[key]=eventArg.target.value;
+                    }}">
+                    ${enumValues.map(valueArg => {
+                      return html`
+                        <option ?selected=${valueArg === selectedElement[key] ? true : false} name="${valueArg}">${valueArg}</option>
+                      `;
+                    })}
+                    </select>`;
+                }
+              })()}
+            </div>
+          `
+        );
+      }
+      this.propertyContent = propertyArray;
+    } else {
+      return null;
+    }
+  }
+
   public selectTheme(themeArg: TTheme) {
     this.selectedTheme = themeArg;
     this.dispatchEvent(
@@ -223,6 +345,11 @@ export class WccProperties extends LitElement {
     this.dashboardRef.buildUrl();
   }
 
+  public async performUpdate() {
+    await this.createProperties();
+    super.performUpdate();
+  }
+
   public selectViewport(viewport: TEnvironment) {
     this.selectedViewport = viewport;
     setEnvironment(viewport);