@record-evolution/widget-switch 1.0.1

package/package.json

@@ -0,0 +1,69 @@
+{
+    "name": "@record-evolution/widget-switch",
+    "description": "IronFlock Widget widget-switch",
+    "license": "MIT",
+    "author": "widget-switch",
+    "version": "1.0.1",
+    "engines": {
+        "node": "18.18.2",
+        "npm": ">=10.0.2"
+    },
+    "type": "module",
+    "main": "dist/widget-switch.js",
+    "types": "dist/src/widget-switch.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "analyze": "cem analyze --litelement",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
+        "build": "rollup -c rollup.config.js",
+        "watch": "rollup -w -c rollup.config.js",
+        "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-switch",
+        "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-switch && npm i @record-evolution/widget-switch",
+        "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
+        "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open",
+        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
+    },
+    "dependencies": {
+        "@material/web": "^2.3.0",
+        "lit": "^3.3.0"
+    },
+    "devDependencies": {
+        "@custom-elements-manifest/analyzer": "^0.10.4",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.3",
+        "@typescript-eslint/eslint-plugin": "^8.34.1",
+        "@typescript-eslint/parser": "^8.34.1",
+        "@web/dev-server": "^0.4.6",
+        "concurrently": "^9.1.2",
+        "deepmerge": "^4.3.1",
+        "es-dev-server": "^2.1.0",
+        "eslint": "^9.29.0",
+        "eslint-config-prettier": "^10.1.5",
+        "husky": "^9.1.7",
+        "json-schema-to-typescript": "^15.0.4",
+        "lint-staged": "^16.1.2",
+        "prettier": "^3.5.3",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.43.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.8.3"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/RecordEvolution/widget-switch.git"
+    },
+    "keywords": [
+        "widget",
+        "switch"
+    ],
+    "bugs": {
+        "url": "https://github.com/RecordEvolution/widget-switch/issues"
+    },
+    "homepage": "https://github.com/RecordEvolution/widget-switch#readme"
+}

package/src/default-data.json

@@ -0,0 +1,46 @@
+{
+    "title": "Machine Switch Panel",
+    "subTitle": "Main Line Controls",
+    "dataseries": [
+        {
+            "label": "Lamp",
+            "stateMap": {
+                "on": ">1",
+                "off": "<=1"
+            },
+            "styling": {
+                "labelColor": "#000000",
+                "valueColor": "#00cc66"
+            },
+            "data": [
+                {
+                    "tsp": "2025-07-15T10:00:00.000Z",
+                    "value": 1,
+                    "actionApp": "machineControlApp",
+                    "actionDevice": 1,
+                    "actionTopic": "lamp"
+                }
+            ]
+        },
+        {
+            "label": "Cooling",
+            "stateMap": {
+                "on": "COOL_ON,1",
+                "off": "COOL_OFF,0"
+            },
+            "styling": {
+                "labelColor": "#0033cc",
+                "valueColor": "#0099ff"
+            },
+            "data": [
+                {
+                    "tsp": "2025-07-15T10:05:00.000Z",
+                    "value": "COOL_ON",
+                    "actionApp": "coolingSystemApp",
+                    "actionDevice": 1,
+                    "actionTopic": "cooling"
+                }
+            ]
+        }
+    ]
+}

package/src/definition-schema.d.ts

@@ -0,0 +1,91 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type Title = string;
+export type Subtitle = string;
+/**
+ * The label for the switch.
+ */
+export type Label = string;
+/**
+ * The value or list of values that represent the ON state. You can also use an expression like <4 or >33 to specify a numeric range. If a value matches an ON and an OFF state, the ON state will be used.
+ */
+export type ONValues = string;
+/**
+ * The value or list of values that represent the OFF state. You can also use an expression like <4 or >33 to specify a numeric range. If a value matches an ON and an OFF state, the ON state will be used.
+ */
+export type OFFValues = string;
+/**
+ * This should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. Will only be used to detect age of data.
+ */
+export type Timestamp = string;
+export type Value = string;
+/**
+ * The action topic that is called when clicking the switch. The arguments will be True for ON and False for OFF. Refer to the app documentation for available topics to call.
+ */
+export type ActionTopic = string;
+/**
+ * You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify 'city' as split column, then you will get a value field for each city.
+ */
+export type SplitDataBy = string;
+/**
+ * The data for the switch state.
+ */
+export type SwitchStateData = {
+  tsp?: Timestamp;
+  value?: Value;
+  actionApp?: ActionApp;
+  actionDevice?: ActionDeviceTarget;
+  actionTopic?: ActionTopic;
+  pivot?: SplitDataBy;
+  [k: string]: unknown;
+}[];
+export type Switches = {
+  label?: Label;
+  stateMap?: StateMap;
+  styling?: Styling;
+  data?: SwitchStateData;
+  [k: string]: unknown;
+}[];
+
+export interface InputData {
+  title?: Title;
+  subTitle?: Subtitle;
+  dataseries?: Switches;
+  [k: string]: unknown;
+}
+/**
+ * Specify the values for the ON and OFF states. Any value that does not match to either an ON or OFF state will be considered as UNKNOWN.
+ */
+export interface StateMap {
+  on?: ONValues;
+  off?: OFFValues;
+  [k: string]: unknown;
+}
+export interface Styling {
+  labelColor?: LabelColor;
+  valueColor?: ValueColor;
+  [k: string]: unknown;
+}
+export interface LabelColor {
+  [k: string]: unknown;
+}
+export interface ValueColor {
+  [k: string]: unknown;
+}
+/**
+ * The app that should handle the click on the switch.
+ */
+export interface ActionApp {
+  [k: string]: unknown;
+}
+/**
+ * The device that should handele the click on the switch. The 'Device ID' column can be used here when using data driven mode.
+ */
+export interface ActionDeviceTarget {
+  [k: string]: unknown;
+}

package/src/definition-schema.json

@@ -0,0 +1,121 @@
+{
+    "title": "InputData",
+    "type": "object",
+    "properties": {
+        "title": {
+            "title": "Title",
+            "type": "string",
+            "order": 1
+        },
+        "subTitle": {
+            "title": "Subtitle",
+            "type": "string",
+            "order": 2
+        },
+        "dataseries": {
+            "title": "Switches",
+            "type": "array",
+            "dataDrivenDisabled": true,
+            "order": 2,
+            "items": {
+                "type": "object",
+                "properties": {
+                    "label": {
+                        "title": "Label",
+                        "description": "The label for the switch.",
+                        "type": "string",
+                        "order": 1
+                    },
+                    "stateMap": {
+                        "title": "State Map",
+                        "description": "Specify the values for the ON and OFF states. Any value that does not match to either an ON or OFF state will be considered as UNKNOWN.",
+                        "type": "object",
+                        "required": true,
+                        "order": 3,
+                        "properties": {
+                            "on": {
+                                "title": "ON Values",
+                                "description": "The value or list of values that represent the ON state. You can also use an expression like <4 or >33 to specify a numeric range. If a value matches an ON and an OFF state, the ON state will be used.",
+                                "type": "string",
+                                "required": true
+                            },
+                            "off": {
+                                "title": "OFF Values",
+                                "description": "The value or list of values that represent the OFF state. You can also use an expression like <4 or >33 to specify a numeric range. If a value matches an ON and an OFF state, the ON state will be used.",
+                                "type": "string",
+                                "required": true
+                            }
+                        }
+                    },
+                    "styling": {
+                        "title": "Styling",
+                        "description": "",
+                        "type": "object",
+                        "order": 6,
+                        "properties": {
+                            "labelColor": {
+                                "title": "Label Color",
+                                "type": "color",
+                                "color": true,
+                                "order": 4
+                            },
+                            "valueColor": {
+                                "title": "Value Color",
+                                "type": "color",
+                                "color": true,
+                                "order": 5
+                            }
+                        }
+                    },
+                    "data": {
+                        "title": "Switch State Data",
+                        "description": "The data for the switch state.",
+                        "type": "array",
+                        "order": 4,
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "tsp": {
+                                    "title": "Timestamp",
+                                    "description": "This should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. Will only be used to detect age of data.",
+                                    "type": "string",
+                                    "order": 1
+                                },
+                                "value": {
+                                    "title": "Value",
+                                    "type": "string",
+                                    "required": true,
+                                    "order": 2
+                                },
+                                "actionApp": {
+                                    "title": "Action App",
+                                    "description": "The app that should handle the click on the switch.",
+                                    "type": "actionApp",
+                                    "order": 3
+                                },
+                                "actionDevice": {
+                                    "title": "Action Device Target",
+                                    "description": "The device that should handele the click on the switch. The 'Device ID' column can be used here when using data driven mode.",
+                                    "type": "actionDevice",
+                                    "order": 4
+                                },
+                                "actionTopic": {
+                                    "title": "Action Topic",
+                                    "description": "The action topic that is called when clicking the switch. The arguments will be True for ON and False for OFF. Refer to the app documentation for available topics to call.",
+                                    "type": "string",
+                                    "order": 5
+                                },
+                                "pivot": {
+                                    "title": "Split Data by",
+                                    "description": "You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify 'city' as split column, then you will get a value field for each city.",
+                                    "type": "string",
+                                    "order": 6
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/widget-switch.ts

@@ -0,0 +1,307 @@
+import { html, css, LitElement, PropertyValueMap } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { InputData } from './definition-schema.js'
+import '@material/web/switch/switch.js'
+import { MdSwitch } from '@material/web/switch/switch.js'
+
+type Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }
+type Data = Exclude<Dataseries['data'], undefined>[number]
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
+@customElement('widget-switch-versionplaceholder')
+export class WidgetSwitch extends LitElement {
+    @property({ type: Object })
+    inputData?: InputData
+
+    @property({ type: Object })
+    theme?: Theme
+
+    @state()
+    private dataSets: Map<string, Dataseries> = new Map()
+
+    @state()
+    private textActive: boolean = true
+
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
+
+    version: string = 'versionplaceholder'
+
+    private resizeObserver: ResizeObserver
+
+    valueContainer?: HTMLDivElement
+    boxes?: HTMLDivElement[]
+    origWidth: number = 0
+    origHeight: number = 0
+    constructor() {
+        super()
+        this.resizeObserver = new ResizeObserver(this.applyData.bind(this))
+        this.resizeObserver.observe(this)
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+        }
+    }
+
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
+        this.valueContainer = this?.shadowRoot?.querySelector('.value-container') as HTMLDivElement
+
+        this.registerTheme(this.theme)
+        this.transformData()
+        this.applyData()
+    }
+
+    update(changedProperties: Map<string, any>) {
+        if (changedProperties.has('inputData')) {
+            this.transformData()
+            this.applyData()
+        }
+
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
+        }
+
+        super.update(changedProperties)
+    }
+
+    registerTheme(theme?: Theme) {
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
+        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+        this.themeSubtitleColor =
+            cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
+    }
+
+    applyData() {}
+
+    async transformData() {
+        if (!this.inputData) return
+        this.dataSets.forEach((d) => {
+            d.label ??= ''
+        })
+        this.dataSets = new Map()
+        this.inputData?.dataseries
+            // ?.sort((a, b) => a.order - b.order)
+            ?.forEach((ds) => {
+                // pivot data
+                const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))].sort() as string[]
+                ds.selected = undefined
+
+                distincts.forEach((piv) => {
+                    const prefix = piv ?? ''
+                    const label = ds.label ?? ''
+                    const value =
+                        distincts.length === 1 ? ds.data?.[0] : ds.data?.filter((d) => d.pivot === piv)?.[0]
+                    const pds: Dataseries = {
+                        label: prefix + (!!prefix && !!label ? ' - ' : '') + label,
+                        actionApp: value?.actionApp,
+                        actionDevice: value?.actionDevice,
+                        actionTopic: value?.actionTopic,
+                        styling: ds.styling,
+                        selected: this.isSelected(ds, value)
+                    }
+                    this.dataSets.set(pds.label ?? '', pds)
+                })
+            })
+        // console.log('Value Datasets', this.dataSets)
+    }
+
+    isSelected(ds: Dataseries, value?: Data): boolean | undefined {
+        if (!value) return undefined
+        const on = ds?.stateMap?.on
+        if (on?.startsWith('<=')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(on.substring(2))
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp
+        }
+        if (on?.startsWith('<')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(on.substring(1))
+            return isNaN(val) || isNaN(comp) ? undefined : val < comp
+        }
+        if (on?.startsWith('>=')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(on.substring(2))
+            return isNaN(val) || isNaN(comp) ? undefined : val >= comp
+        }
+        if (on?.startsWith('>')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(on.substring(1))
+            return isNaN(val) || isNaN(comp) ? undefined : val > comp
+        }
+
+        const off = ds?.stateMap?.off
+        if (off?.startsWith('<=')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(off.substring(2))
+            return isNaN(val) || isNaN(comp) ? undefined : val > comp
+        }
+        if (off?.startsWith('<')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(off.substring(1))
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp
+        }
+        if (off?.startsWith('>=')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(off.substring(2))
+            return isNaN(val) || isNaN(comp) ? undefined : val < comp
+        }
+        if (off?.startsWith('>')) {
+            const val = parseFloat(value.value ?? '')
+            const comp = parseFloat(off.substring(1))
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp
+        }
+
+        const onValues = on?.split(',').map((v) => v.trim().replace('"', '').replace("'", '')) ?? []
+        if (onValues.includes(String(value.value) ?? '')) return true
+
+        const offValues = off?.split(',').map((v) => v.trim().replace('"', '').replace("'", '')) ?? []
+        if (offValues.includes(String(value.value) ?? '')) return false
+
+        return undefined
+    }
+
+    handleActionSubmit(e: any) {
+        const switchEl = e.target
+        const payload = {
+            args: switchEl?.selected,
+            actionApp: switchEl?.actionApp,
+            actionDevice: switchEl?.actionDevice,
+            actionTopic: switchEl?.actionTopic,
+            label: switchEl?.label
+        }
+        console.log('Action Submit', payload)
+        this.dispatchEvent(
+            new CustomEvent('action-submit', {
+                detail: payload,
+                bubbles: false,
+                composed: false
+            })
+        )
+    }
+
+    static styles = css`
+        :host {
+            display: block;
+            font-family: sans-serif;
+            box-sizing: border-box;
+            position: relative;
+            margin: auto;
+        }
+
+        .paging:not([active]) {
+            display: none !important;
+        }
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            padding: 16px;
+            box-sizing: border-box;
+        }
+
+        h3 {
+            margin: 0;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            margin: 10px 0 0 0;
+            max-width: 300px;
+            font-size: 14px;
+            line-height: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .value-container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            line-height: 0.9;
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+            gap: 12px;
+        }
+
+        .switch {
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            box-sizing: border-box;
+            /* border-left: 4px solid #ddd; */
+        }
+
+        .no-data {
+            font-size: 20px;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
+    `
+
+    render() {
+        return html`
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
+                <header>
+                    <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
+                    <p
+                        class="paging"
+                        ?active=${this.inputData?.subTitle}
+                        style="color: ${this.themeSubtitleColor}"
+                    >
+                        ${this.inputData?.subTitle}
+                    </p>
+                </header>
+
+                <div class="paging no-data" ?active=${!this.dataSets.size}>No Data</div>
+                <div class="value-container">
+                    ${repeat(
+                        [...this.dataSets.entries()].sort(),
+                        ([label]) => label,
+                        ([label, ds]) => {
+                            return html`
+                                <div class="switch" label="${label}">
+                                    ${label}
+                                    <label
+                                        ><md-switch
+                                            aria-label="${label}"
+                                            ?selected="${!!ds.selected}"
+                                            .actionApp="${ds?.actionApp}"
+                                            .actionDevice="${ds?.actionDevice}"
+                                            .actionTopic="${ds?.actionTopic}"
+                                            .label="${label}"
+                                            @change="${this.handleActionSubmit}"
+                                        ></md-switch
+                                    ></label>
+                                </div>
+                            `
+                        }
+                    )}
+                </div>
+            </div>
+        `
+    }
+}