dees-wcctools/ts_web/elements/wcc-properties.ts

391 lines
12 KiB
TypeScript
Raw Normal View History

2023-08-07 16:20:17 +00:00
import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
2022-03-24 14:39:17 +00:00
import { WccDashboard } from './wcc-dashboard.js';
2020-05-11 00:36:58 +00:00
2021-04-01 19:09:57 +00:00
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
2020-05-11 00:36:58 +00:00
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
2020-11-26 02:28:17 +00:00
export type TTheme = 'bright' | 'dark';
2020-05-11 00:36:58 +00:00
let environment: TEnvironment = 'native';
2020-11-26 02:28:17 +00:00
export const setEnvironment = (envArg) => {
2020-05-11 00:36:58 +00:00
environment = envArg;
};
@customElement('wcc-properties')
2022-03-24 14:53:02 +00:00
export class WccProperties extends DeesElement {
@property({
type: WccDashboard
})
public dashboardRef: WccDashboard;
2020-11-26 02:28:17 +00:00
2020-05-11 00:36:58 +00:00
@property()
2022-03-24 14:53:02 +00:00
public selectedItem: (() => TemplateResult) | DeesElement;
2020-05-11 00:36:58 +00:00
@property()
2020-11-26 02:28:17 +00:00
public selectedViewport: TEnvironment = 'native';
@property()
public selectedTheme: TTheme = 'dark';
2020-05-11 00:36:58 +00:00
2020-05-24 19:37:43 +00:00
@property()
public warning: string = null;
2021-09-27 11:30:02 +00:00
@state()
2021-04-01 19:09:57 +00:00
propertyContent: TemplateResult[] = [];
2020-05-11 00:36:58 +00:00
public render(): TemplateResult {
return html`
<style>
:host {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
position: absolute;
left: 200px;
height: 100px;
bottom: 0px;
right: 0px;
overflow: hidden;
background: #111;
color: #fff;
}
.grid {
display: grid;
2020-11-26 02:28:17 +00:00
grid-template-columns: auto 150px 300px 70px;
2020-05-11 00:36:58 +00:00
}
.properties {
border-right: 1px solid #999;
height: 100px;
overflow-y: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
2023-01-07 13:05:25 +00:00
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
2023-01-07 13:14:12 +00:00
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
2023-01-07 13:05:25 +00:00
}
2020-05-11 00:36:58 +00:00
.properties .property {
padding: 5px;
background: #444;
border: 1px solid #000;
}
2021-04-01 19:09:57 +00:00
2021-09-27 12:45:05 +00:00
.properties input,
.properties select {
2021-04-01 19:09:57 +00:00
display: block;
width: 100%;
background: #333;
border: none;
color: #fff;
}
2020-11-26 02:28:17 +00:00
.viewportSelector,
.themeSelector {
2020-12-09 18:35:49 +00:00
user-select: none;
2020-05-11 00:36:58 +00:00
border-right: 1px solid #999;
}
2020-11-26 02:28:17 +00:00
.selectorButtons2 {
display: grid;
grid-template-columns: 50% 50%;
}
.selectorButtons4 {
2020-05-11 00:36:58 +00:00
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
2020-11-26 02:28:17 +00:00
.button {
2020-05-11 00:36:58 +00:00
padding: 10px;
text-align: center;
border: 1px solid #000;
transition: all 0.2s;
}
2020-11-26 02:28:17 +00:00
.button:hover {
2020-05-11 00:36:58 +00:00
color: #333;
background: #fff;
}
2020-11-26 02:28:17 +00:00
.button.selected {
background: #455a64;
2020-05-11 00:36:58 +00:00
}
2020-11-26 02:28:17 +00:00
.button.selected:hover {
2020-05-11 00:36:58 +00:00
color: #ffffff;
background: #455a64;
}
.panelheading {
padding: 5px;
font-weight: bold;
background: #444;
border: 1px solid #000;
}
.docs {
text-align: center;
line-height: 100px;
text-transform: uppercase;
}
.docs:hover {
color: #333;
background: #fff;
}
2020-05-24 19:37:43 +00:00
.warning {
position: absolute;
2021-11-26 18:16:09 +00:00
background: #222;
color: #CCC;
2020-05-24 19:37:43 +00:00
top: 0px;
bottom: 0px;
left: 0px;
2021-11-26 18:16:09 +00:00
right: 520px;
2020-05-24 19:37:43 +00:00
text-align: center;
2021-11-26 18:16:09 +00:00
padding: 35px;
2020-05-24 19:37:43 +00:00
font-size: 25px;
}
2020-05-11 00:36:58 +00:00
</style>
<div class="grid">
<div class="properties">
<div class="panelheading">Properties</div>
2021-04-01 19:09:57 +00:00
${this.propertyContent}
2020-05-11 00:36:58 +00:00
</div>
2020-11-26 02:28:17 +00:00
<div class="themeSelector">
<div class="panelheading">Theme</div>
<div class="selectorButtons2">
<div
class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
@click=${() => {
this.selectTheme('dark');
}}
>
2023-01-07 13:05:25 +00:00
Dark<br /><i class="material-symbols-outlined">brightness_3</i>
2020-11-26 02:28:17 +00:00
</div>
<div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@click=${() => {
this.selectTheme('bright');
}}
>
2023-01-07 13:05:25 +00:00
Bright<br /><i class="material-symbols-outlined">flare</i>
2020-11-26 02:28:17 +00:00
</div>
</div>
</div>
<div class="viewportSelector">
<div class="panelheading">Viewport</div>
<div class="selectorButtons4">
2020-05-11 00:36:58 +00:00
<div
2020-11-26 02:28:17 +00:00
class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
2020-05-11 00:36:58 +00:00
@click=${() => {
this.selectViewport('phone');
}}
>
2023-01-07 13:05:25 +00:00
Phone<br /><i class="material-symbols-outlined">smartphone</i>
2020-05-11 00:36:58 +00:00
</div>
<div
2020-11-26 02:28:17 +00:00
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
2020-05-11 00:36:58 +00:00
@click=${() => {
this.selectViewport('phablet');
}}
>
2023-01-07 13:05:25 +00:00
Phablet<br /><i class="material-symbols-outlined">smartphone</i>
2020-05-11 00:36:58 +00:00
</div>
<div
2020-11-26 02:28:17 +00:00
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
2020-05-11 00:36:58 +00:00
@click=${() => {
this.selectViewport('tablet');
}}
>
2023-01-07 13:05:25 +00:00
Tablet<br /><i class="material-symbols-outlined">tablet</i>
2020-05-11 00:36:58 +00:00
</div>
<div
2020-11-26 02:28:17 +00:00
class="button ${this.selectedViewport === 'desktop' ||
this.selectedViewport === 'native'
? 'selected'
: null}"
2020-05-11 00:36:58 +00:00
@click=${() => {
this.selectViewport('native');
}}
>
2023-01-07 13:05:25 +00:00
Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
2020-05-11 00:36:58 +00:00
</div>
</div>
</div>
<div class="docs">Docs</div>
</div>
2020-11-26 02:28:17 +00:00
${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
2020-05-11 00:36:58 +00:00
`;
}
2021-04-01 19:09:57 +00:00
public async createProperties() {
2021-09-27 12:45:05 +00:00
console.log('creating properties for:');
console.log(this.selectedItem);
2021-04-01 19:09:57 +00:00
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));
2021-09-27 12:45:05 +00:00
const enumValues: any[] = [];
2021-04-01 19:09:57 +00:00
Object.keys(propertyArg.type).forEach((valueArg: string) => {
enumValues.push(valueArg);
});
return enumValues;
};
2022-04-14 14:56:04 +00:00
const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
2021-04-01 19:09:57 +00:00
const typeName: any | undefined = propertyArg.type.name;
if (typeName) {
return typeName;
} else {
return Array.isArray(propertyArg)
? 'Array'
: isEnumeration(propertyArg)
? 'Enum'
: 'Object';
}
};
2021-09-27 12:45:05 +00:00
if (this.selectedItem && (this.selectedItem as any).demo) {
console.log(`Got Dees-Element for property evaluation.`);
2021-04-01 19:09:57 +00:00
const anonItem: any = this.selectedItem;
2021-11-26 17:27:29 +00:00
if (!anonItem) {
2021-11-26 18:16:09 +00:00
this.warning = 'no element selected';
2021-11-26 17:27:29 +00:00
return;
}
2021-09-27 12:45:05 +00:00
console.log(anonItem.elementProperties);
2021-04-01 19:09:57 +00:00
const wccFrame = await this.dashboardRef.wccFrame;
2021-11-26 18:05:04 +00:00
let firstFoundInstantiatedElement: HTMLElement;
2022-04-14 14:56:04 +00:00
for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
2021-04-01 19:09:57 +00:00
if (element instanceof (this.selectedItem as any)) {
2021-11-26 18:05:04 +00:00
firstFoundInstantiatedElement = element as HTMLElement;
2021-04-01 19:09:57 +00:00
break;
}
}
2021-11-26 18:05:04 +00:00
if (!firstFoundInstantiatedElement) {
2021-11-26 18:16:09 +00:00
this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
2021-11-26 18:05:04 +00:00
return;
}
2021-09-27 12:45:05 +00:00
const classProperties: Map<string, any> = anonItem.elementProperties;
2021-11-26 17:52:44 +00:00
if (!classProperties) {
2021-11-26 18:16:09 +00:00
this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
2021-11-26 17:52:44 +00:00
return;
}
2021-11-26 18:16:09 +00:00
this.warning = null;
2021-04-01 19:09:57 +00:00
const propertyArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {
2021-09-27 12:45:05 +00:00
if (key === 'goBright' || key === 'domtools') {
2021-04-01 19:09:57 +00:00
continue;
}
const property = classProperties.get(key);
2022-04-14 14:56:04 +00:00
const propertyTypeString = await determinePropertyType(property);
2021-04-01 19:09:57 +00:00
propertyArray.push(
html`
<div class="property">
2021-09-27 12:45:05 +00:00
${key} / ${propertyTypeString}<br />
2021-04-01 19:09:57 +00:00
${(() => {
switch (propertyTypeString) {
case 'Boolean':
return html`<input
type="checkbox"
2021-11-26 18:05:04 +00:00
?checked=${firstFoundInstantiatedElement[key]}
2021-04-01 19:09:57 +00:00
@input="${(eventArg: any) => {
2021-11-26 18:05:04 +00:00
firstFoundInstantiatedElement[key] = eventArg.target.checked;
2021-04-01 19:09:57 +00:00
}}"
/>`;
case 'String':
return html`<input
type="text"
2021-11-26 18:05:04 +00:00
value=${firstFoundInstantiatedElement[key]}
2021-04-01 19:09:57 +00:00
@input="${(eventArg: any) => {
2021-11-26 18:05:04 +00:00
firstFoundInstantiatedElement[key] = eventArg.target.value;
2021-04-01 19:09:57 +00:00
}}"
/>`;
case 'Number':
return html`<input
type="number"
2021-11-26 18:05:04 +00:00
value=${firstFoundInstantiatedElement[key]}
2021-04-01 19:09:57 +00:00
@input="${(eventArg: any) => {
2021-11-26 18:05:04 +00:00
firstFoundInstantiatedElement[key] = eventArg.target.value;
2021-04-01 19:09:57 +00:00
}}"
/>`;
case 'Enum':
const enumValues: any[] = getEnumValues(property);
return html`<select
2021-09-27 12:45:05 +00:00
@change="${(eventArg: any) => {
2021-11-26 18:05:04 +00:00
firstFoundInstantiatedElement[key] = eventArg.target.value;
2021-09-27 12:45:05 +00:00
}}"
>
${enumValues.map((valueArg) => {
return html`
<option
2021-11-26 18:05:04 +00:00
?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
2021-09-27 12:45:05 +00:00
name="${valueArg}"
>
${valueArg}
</option>
`;
})}
2021-04-01 19:09:57 +00:00
</select>`;
}
})()}
</div>
`
);
}
this.propertyContent = propertyArray;
} else {
2021-11-26 18:16:09 +00:00
console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
this.warning = `You selected a page.`;
2021-04-01 19:09:57 +00:00
return null;
}
}
2020-11-26 02:28:17 +00:00
public selectTheme(themeArg: TTheme) {
this.selectedTheme = themeArg;
this.dispatchEvent(
new CustomEvent('selectedTheme', {
detail: themeArg,
})
);
console.log(this.dashboardRef.selectedType);
this.dashboardRef.buildUrl();
}
2021-11-26 18:18:14 +00:00
public async scheduleUpdate() {
2021-04-01 19:09:57 +00:00
await this.createProperties();
2021-11-26 18:18:14 +00:00
super.scheduleUpdate();
2021-04-01 19:09:57 +00:00
}
2020-05-11 00:36:58 +00:00
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
2020-11-26 02:28:17 +00:00
detail: viewport,
2020-05-11 00:36:58 +00:00
})
);
2020-11-26 02:28:17 +00:00
this.dashboardRef.buildUrl();
2020-05-11 00:36:58 +00:00
}
}