@things-factory/integration-influxdb 8.0.0-beta.9 → 8.0.2

package/client/bootstrap.ts

@@ -0,0 +1,9 @@
+import { OxPropertyEditor } from '@operato/property-editor'
+
+import './editors/property-editor'
+
+export default function bootstrap() {
+  OxPropertyEditor.register({
+    'influxdb-point-scheme': 'property-editor-influxdb-point-scheme'
+  })
+}

package/client/editors/property-editor.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import './things-editor-influxdb-point-scheme'
+
+import { html } from 'lit'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+export class PropertyEditorInfluxDBScheme extends OxPropertyEditor {
+  static get styles() {
+    return [...OxPropertyEditor.styles]
+  }
+
+  editorTemplate(value, spec) {
+    return html` <things-editor-influxdb-point-scheme id="editor" .value=${value}></things-editor-influxdb-point-scheme> `
+  }
+}
+
+customElements.define('property-editor-influxdb-point-scheme', PropertyEditorInfluxDBScheme)

package/client/editors/things-editor-influxdb-point-scheme.ts

@@ -0,0 +1,308 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from '@operato/input'
+
+type InfluxDBPointScheme = {
+  name: string
+  type: string
+  val?: any
+  accessor?: string
+}
+
+/**
+ input component for influxdb point scheme
+ 
+ Example:
+ 
+   <things-editor-influxdb-point-scheme 
+     value=${map}
+   </things-editor-influxdb-point-scheme>
+ */
+@customElement('things-editor-influxdb-point-scheme')
+export class ThingsEditorInfluxPointScheme extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        gap: var(--spacing-medium);
+      }
+
+      div {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--spacing-medium);
+      }
+
+      button {
+        border: var(--button-border);
+        border-radius: var(--border-radius);
+        background-color: var(--button-background-color);
+        padding: var(--spacing-small) var(--spacing-medium);
+        line-height: 0.8;
+        color: var(--button-color);
+        cursor: pointer;
+      }
+
+      button + button {
+        margin-left: -5px;
+      }
+
+      button md-icon {
+        font-size: var(--fontsize-default);
+      }
+
+      button:focus,
+      button:hover,
+      button:active {
+        border: var(--button-activ-border);
+        background-color: var(--button-background-focus-color);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      input {
+        flex: 1;
+        border: 0;
+        border-bottom: var(--border-dim-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+        min-width: 50px;
+      }
+
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--md-sys-color-primary);
+      }
+
+      button.hidden {
+        opacity: 0;
+        cursor: default;
+      }
+
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value: InfluxDBPointScheme[] = []
+
+  private _changingNow: boolean = false
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
+
+  render() {
+    const parameters = this.value || []
+
+    return html`
+      ${parameters.map(
+        item => html`
+          <div data-record>
+            <input type="text" data-name placeholder="name" .value=${item.name} />
+            <select data-type placeholder="type" .value=${item.type}>
+              <option value="" ?selected=${item.type == ''}>&nbsp;</option>
+              <option value="Tag" ?selected=${item.type == 'Tag'}>Tag</option>
+              <option value="String" ?selected=${item.type == 'String'}>String</option>
+              <option value="Integer" ?selected=${item.type == 'Integer'}>Integer</option>
+              <option value="Unsigned" ?selected=${item.type == 'Unsigned'}>Unsigned</option>
+              <option value="Float" ?selected=${item.type == 'Float'}>Float</option>
+              <option value="Boolean" ?selected=${item.type == 'Boolean'}>Boolean</option>
+            </select>
+
+            <input type="text" data-accessor placeholder="accessor" .value=${item.accessor || ''} list="step-list" />
+            <input type="text" data-val placeholder="val" .value=${item.val || ''} />
+
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <md-icon>remove</md-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+              <md-icon>arrow_upward</md-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+              <md-icon>arrow_downward</md-icon>
+            </button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-name placeholder="name" value="" />
+        <select data-type placeholder="type" value="">
+          <option value="" selected>&nbsp;</option>
+          <option value="Tag">Tag</option>
+          <option value="String">String</option>
+          <option value="Integer">Integer</option>
+          <option value="Unsigned">Unsigned</option>
+          <option value="Float">Float</option>
+          <option value="Boolean">Boolean</option>
+        </select>
+        <input type="text" data-accessor placeholder="accessor" value="" list="step-list" />
+        <input type="text" data-val placeholder="val" value="" />
+
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <md-icon>add</md-icon>
+        </button>
+        <button class="hidden"><md-icon>arrow_upward</md-icon></button>
+        <button class="hidden"><md-icon>arrow_downward</md-icon></button>
+      </div>
+    `
+  }
+
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    const input = e.target as HTMLInputElement
+
+    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
+
+    if (record.hasAttribute('data-record')) {
+      this._build()
+    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _adjust({ name, type, val, accessor }: InfluxDBPointScheme): InfluxDBPointScheme {
+    const entry = {
+      name: name && String(name).trim(),
+      type,
+      accessor: accessor && String(accessor).trim(),
+      val
+    } as InfluxDBPointScheme
+
+    return entry
+  }
+
+  _build(includeNewRecord?: boolean) {
+    if (includeNewRecord) {
+      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>
+    } else {
+      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+    }
+
+    var newmap: InfluxDBPointScheme[] = []
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+      const type = (record.querySelector('[data-type]') as HTMLInputElement).value
+      const val = (record.querySelector('[data-val]') as HTMLInputElement).value
+      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
+
+      const inputs = record.querySelectorAll(
+        '[data-type]:not([style*="display: none"])'
+      ) as NodeListOf<HTMLInputElement>
+
+      if (!inputs || inputs.length == 0) {
+        continue
+      }
+
+      if (name) {
+        newmap.push(this._adjust({ name, type, val, accessor }))
+      }
+    }
+
+    this.value = newmap
+    this._updateValue()
+  }
+
+  _updateValue() {
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    const inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement & { value: any }>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+
+      input.value = ''
+    }
+
+    inputs[0].focus()
+  }
+
+  _delete(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+
+    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''
+
+    this._build()
+  }
+
+  _up(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record) - 1
+
+    if (index < 0) {
+      return
+    }
+
+    const deleted = array.splice(index, 1)
+    array.splice(index + 1, 0, ...deleted)
+
+    this.value = array.map(record => {
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+      const type = (record.querySelector('[data-type]') as HTMLInputElement).value
+      const val = (record.querySelector('[data-val]') as HTMLInputElement).value
+      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
+
+      return this._adjust({ name, type, val, accessor })
+    })
+
+    this._updateValue()
+  }
+
+  _down(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
+    const array = Array.from(this.records)
+    const index = array.indexOf(record)
+
+    if (index > array.length) {
+      return
+    }
+
+    array.splice(index, 1)
+    array.splice(index + 1, 0, record)
+
+    this.value = array.map(record => {
+      const name = (record.querySelector('[data-name]') as HTMLInputElement).value
+      const type = (record.querySelector('[data-type]') as HTMLInputElement).value
+      const val = (record.querySelector('[data-val]') as HTMLInputElement).value
+      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
+
+      return this._adjust({ name, type, val, accessor })
+    })
+
+    this._updateValue()
+  }
+}