From e07220392d466925a73d24343bd23e591901f7de Mon Sep 17 00:00:00 2001 From: nathan Date: Mon, 17 Jan 2022 15:12:46 -0700 Subject: [PATCH] Select widgets with static options as WebComponents --- .../Et2InputWidget/Et2InputWidget.ts | 4 +- api/js/etemplate/Et2Select/Et2Select.ts | 156 ++++++++++++- .../etemplate/Et2Select/Et2SelectReadonly.ts | 217 +++++++++++++++++- 3 files changed, 359 insertions(+), 18 deletions(-) diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts index f7f4310146..66bbec2fdd 100644 --- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts +++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts @@ -38,7 +38,7 @@ const Et2InputWidgetMixin = (superclass) => { class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode { - protected value : string | number | Object; + protected _value : string | number | Object; protected _oldValue : string | number | Object; protected node : HTMLElement; @@ -112,7 +112,7 @@ const Et2InputWidgetMixin = (superclass) => set_value(new_value) { - this.value = new_value; + this._value = new_value; } get_value() diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 041a58b4fd..fb5adb3bd4 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -17,10 +17,10 @@ import {StaticOptions} from "./StaticOptions"; export interface SelectOption { - value : String; - label : String; + value : string; + label : string; // Hover help text - title? : String; + title? : string; } /** @@ -449,12 +449,48 @@ export function find_select_options(widget, attr_options?, attrs = {}) : SelectO // @ts-ignore TypeScript is not recognizing that this widget is a LitElement customElements.define("et2-select", Et2Select); +export class Et2SelectApp extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.app(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-app", Et2SelectApp); + +export class Et2SelectBitwise extends Et2Select +{ + set value(new_value) + { + let oldValue = this._value; + let expanded_value = []; + let options = this.get_select_options(); + for(let index in options) + { + let right = parseInt(options[index].value); + if(!!(new_value & right)) + { + expanded_value.push(right); + } + } + this._value = expanded_value; + + this.requestUpdate("value", oldValue); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-bitwise", Et2SelectBitwise); + export class Et2SelectBool extends Et2Select { get_select_options() : SelectOption[] { return so.bool(this); } + } // @ts-ignore TypeScript is not recognizing that this widget is a LitElement @@ -464,7 +500,7 @@ export class Et2SelectCategory extends Et2Select { get_select_options() : SelectOption[] { - return so.cat(this, {}); + return so.cat(this, {other: this.other || []}); } } @@ -480,4 +516,114 @@ export class Et2SelectPercent extends Et2Select } // @ts-ignore TypeScript is not recognizing that this widget is a LitElement -customElements.define("et2-select-percent", Et2SelectPercent); \ No newline at end of file +customElements.define("et2-select-percent", Et2SelectPercent); + +export class Et2SelectCountry extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.country(this, {}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-country", Et2SelectCountry); + +export class Et2SelectDay extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.day(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-day", Et2SelectDay); + +export class Et2SelectDayOfWeek extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.dow(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-dow", Et2SelectDayOfWeek); + +export class Et2SelectHour extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.hour(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-hour", Et2SelectHour); + +export class Et2SelectMonth extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.month(this); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-month", Et2SelectMonth); + +export class Et2SelectNumber extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.number(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-number", Et2SelectNumber); + +export class Et2SelectPriority extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.priority(this); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-priority", Et2SelectPriority); + +export class Et2SelectState extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.state(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-state", Et2SelectState); + +export class Et2SelectTimezone extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.timezone(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-timezone", Et2SelectTimezone); + +export class Et2SelectYear extends Et2Select +{ + get_select_options() : SelectOption[] + { + return so.year(this, {other: this.other || []}); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-year", Et2SelectYear); diff --git a/api/js/etemplate/Et2Select/Et2SelectReadonly.ts b/api/js/etemplate/Et2Select/Et2SelectReadonly.ts index 1e6fcd46c6..b6563bd396 100644 --- a/api/js/etemplate/Et2Select/Et2SelectReadonly.ts +++ b/api/js/etemplate/Et2Select/Et2SelectReadonly.ts @@ -8,7 +8,7 @@ */ -import {html, LitElement} from "@lion/core"; +import {html, LitElement, TemplateResult} from "@lion/core"; import {et2_IDetachedDOM} from "../et2_core_interfaces"; import {Et2Widget} from "../Et2Widget/Et2Widget"; import {find_select_options, SelectOption} from "./Et2Select"; @@ -22,7 +22,6 @@ const so = new StaticOptions(); */ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM { - protected value : any; protected _options : SelectOption[] = []; static get styles() @@ -37,11 +36,7 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet return { ...super.properties, value: String, - select_options: Object, - /** - * Specific sub-type of select. Most are just static lists (percent, boolean) - */ - type: {type: String} + select_options: Object } } @@ -107,9 +102,22 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet render() { - let current = this._options.find(option => option.value == this.value); - let label = current ? current.label : ""; + let label = ""; + if(this.value) + { + let current = this._options.find(option => option.value == this.value); + label = current ? current.label : ""; + } + else if(this.empty_text) + { + label = this.empty_text; + } + return this._readonlyRender(label) + } + + _readonlyRender(label) : TemplateResult + { return html` ${label} `; @@ -139,6 +147,45 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet // @ts-ignore TypeScript is not recognizing that this widget is a LitElement customElements.define("et2-select_ro", Et2SelectReadonly); +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-access_ro", Et2SelectAccessReadonly); + +export class Et2SelectAppReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.app(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-app_ro", Et2SelectAppReadonly); + +export class Et2SelectBitwiseReadonly extends Et2SelectReadonly +{ + render() + { + let new_value = []; + for(var index in this.options.select_options) + { + var option = this.options.select_options[index]; + var right = option && option.value ? option.value : index; + if(!!(this.value & right)) + { + new_value.push(right); + } + } + return this._readonlyRender(new_value); + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-bitwise_ro", Et2SelectBitwiseReadonly); + export class Et2SelectBoolReadonly extends Et2SelectReadonly { constructor() @@ -159,7 +206,7 @@ export class Et2SelectCategoryReadonly extends Et2SelectReadonly { super(); - this._options = so.cat(this, {}); + this._options = so.cat(this, {other: this.other || []}); } protected find_select_options(_attrs) {} @@ -180,4 +227,152 @@ export class Et2SelectPercentReadonly extends Et2SelectReadonly } // @ts-ignore TypeScript is not recognizing that this widget is a LitElement -customElements.define("et2-select-percent_ro", Et2SelectPercentReadonly); \ No newline at end of file +customElements.define("et2-select-percent_ro", Et2SelectPercentReadonly); + +export class Et2SelectCountryReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + this._options = so.country(this, {}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-country_ro", Et2SelectCountryReadonly); + +export class Et2SelectDayReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.day(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-day_ro", Et2SelectDayReadonly); + +export class Et2SelectDayOfWeekReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.dow(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-dow_ro", Et2SelectDayOfWeekReadonly); + +export class Et2SelectHourReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.hour(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-hour_ro", Et2SelectHourReadonly); + +export class Et2SelectMonthReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.month(this); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-month_ro", Et2SelectMonthReadonly); + +export class Et2SelectNumberReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.number(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-number_ro", Et2SelectNumberReadonly); + +export class Et2SelectPriorityReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + this._options = so.priority(this); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-priority_ro", Et2SelectPriorityReadonly); + +export class Et2SelectStateReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.state(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-state_ro", Et2SelectStateReadonly); + +export class Et2SelectTimezoneReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.timezone(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-timezone_ro", Et2SelectTimezoneReadonly); + +export class Et2SelectYearReadonly extends Et2SelectReadonly +{ + constructor() + { + super(); + + this._options = so.year(this, {other: this.other || []}); + } + + protected find_select_options(_attrs) {} +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-year_ro", Et2SelectYearReadonly);