feat(wizards/dai): Change DAI values

src/editors/ied/da-container.ts

@@ -16,6 +16,8 @@ import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import '../../action-pane.js';
 import { getNameAttribute, newWizardEvent } from '../../foundation.js';
 import { Nsdoc } from '../../foundation/nsdoc.js';
+import { wizards } from '../../wizards/wizard-library.js';
+import { DaiValidationTypes, getCustomField } from './foundation/foundation.js';
 import { createDaInfoWizard } from "./da-wizard.js";
 import { getValueElement } from './foundation.js';
 
@@ -60,12 +62,12 @@ export class DAContainer extends LitElement {
    * If there is a DAI, it get's priority on top of (B)DA values.
    * @returns TemplateResult containing the value of the instance, element or nothing.
    */
-  private renderValue(): TemplateResult {
+  private getValue(): string | null | undefined {
     if (this.instanceElement) {
-      return html`${getValueElement(this.instanceElement)?.textContent}`
+      return getValueElement(this.instanceElement)?.textContent?.trim()
     }
 
-    return html`${getValueElement(this.element)?.textContent}`;
+    return getValueElement(this.element)?.textContent?.trim();
   }
 
   /**
@@ -80,9 +82,15 @@ export class DAContainer extends LitElement {
     }
     return [];
   }
+
+  private openEditWizard(): void {
+    const wizard = wizards['DAI'].edit(this.element, this.instanceElement);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
 
   render(): TemplateResult {
     const bType = this.element!.getAttribute('bType');
+    const value = this.getValue() ?? '';
 
     return html`<action-pane .label="${this.header()}" icon="${this.instanceElement != null ? 'done' : ''}">
       <abbr slot="action">
@@ -101,7 +109,19 @@ export class DAContainer extends LitElement {
           @click=${() => this.requestUpdate()}
         ></mwc-icon-button-toggle>
       </abbr>` : nothing}
-      <h6>${this.renderValue()}</h6>
+      ${this.instanceElement && getCustomField()[<DaiValidationTypes>bType] ?
+        html`<div style="display: flex; flex-direction: row;">
+          <div style="display: flex; align-items: center; flex: auto;">
+            <h4>${value}</h4>
+          </div>
+          <div style="display: flex; align-items: center;">
+            <mwc-icon-button
+              icon="edit"
+              @click=${() => this.openEditWizard()}
+            ></mwc-icon-button>
+          </div>
+        </div>` :
+        html`<h4>${value}</h4>`}
       ${this.toggleButton?.on && bType == 'Struct' ? this.getBDAElements().map(element =>
         html`<da-container
           .element=${element}
@@ -113,16 +133,18 @@ export class DAContainer extends LitElement {
   }
 
   static styles = css`
-    h6 {
+    h4 {
       color: var(--mdc-theme-on-surface);
       font-family: 'Roboto', sans-serif;
-      font-weight: 500;
-      font-size: 0.8em;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       margin: 0px;
       padding-left: 0.3em;
     }
+
+    mwc-icon-button {
+      color: var(--mdc-theme-on-surface);
+    }
   `;
 }

src/editors/ied/foundation/foundation.ts

@@ -0,0 +1,97 @@
+import { html, TemplateResult } from "lit-html";
+import { translate } from "lit-translate";
+
+import '../../../../src/wizard-textfield.js';
+import '../../../../src/wizard-select.js';
+
+export interface CustomField {
+  render(value: string): TemplateResult;
+}
+
+const daiValidationTypes = ['BOOLEAN', 'INT8', 'INT16', 'INT24', 'INT32', 'INT64',
+  'INT128', 'INT8U', 'INT16U', 'INT24U', 'INT32U', 'FLOAT32', 'FLOAT64', 'VisString32', 'VisString64',
+  'VisString65', 'VisString129', 'VisString255'] as const;
+export type DaiValidationTypes = typeof daiValidationTypes[number];
+
+export function getCustomField(): Record<DaiValidationTypes, CustomField> {
+  return {
+    BOOLEAN: booleanField(),
+    INT8: integerField('INT8', -(2**8), 2**8-1),
+    INT16: integerField('INT16', -(2**16), 2**16-1),
+    INT24: integerField('INT24', -(2**24), 2**24-1),
+    INT32: integerField('INT32', -(2**32), 2**32-1),
+    INT64: integerField('INT64', -(2**64), 2**64-1),
+    INT128: integerField('INT128', -(2**128), 2**128-1),
+    INT8U: integerField('INT8U', 0, 2**8-1),
+    INT16U: integerField('INT16U', 0, 2**16-1),
+    INT24U: integerField('INT24U', 0, 2**24-1),
+    INT32U: integerField('INT32U', 0, 2**32-1),
+    FLOAT32: floatField('FLOAT32', -(2**32), 2**32-1),
+    FLOAT64: floatField('FLOAT64', -(2**64), 2**64-1),
+    VisString32: stringField('VisString32', 32),
+    VisString64: stringField('VisString64', 64),
+    VisString65: stringField('VisString65', 65),
+    VisString129: stringField('VisString129', 129),
+    VisString255: stringField('VisString255', 255)
+  }
+
+  function booleanField(): CustomField {
+    return {
+      render: (value: string) => {
+        return html`<wizard-select
+          label="Val"
+          .maybeValue=${value}
+          fixedMenuPosition
+        >
+          <mwc-list-item value="true">true</mwc-list-item>
+          <mwc-list-item value="false">false</mwc-list-item>
+        </wizard-select>`;
+      }
+    }
+  }
+
+  function integerField(type: string, min: number, max: number): CustomField {
+    return {
+      render: (value: string) => {
+        return html`<wizard-textfield
+          label="Val"
+          .maybeValue=${value}
+          helper="${translate('dai.wizard.valueHelper', { type })}"
+          type="number"
+          min=${min}
+          max=${max}
+        ></wizard-textfield>`;
+      }
+    }
+  }
+
+  function floatField(type: string, min: number, max: number): CustomField {
+    return {
+      render: (value: string) => {
+        return html`<wizard-textfield
+          label="Val"
+          .maybeValue=${value}
+          helper="${translate('dai.wizard.valueHelper', { type })}"
+          type="number"
+          min=${min}
+          max=${max}
+          step="0.1"
+        ></wizard-textfield>`;
+      }
+    }
+  }
+
+  function stringField(type: string, maxNrOfCharacters: number): CustomField {
+    return {
+      render: (value: string) => {
+        return html`<wizard-textfield
+          label="Val"
+          .maybeValue=${value}
+          helper="${translate('dai.wizard.valueHelper', { type })}"
+          maxLength=${maxNrOfCharacters}
+          type="text"
+        ></wizard-textfield>`;
+      }
+    }
+  }
+}

src/translations/de.ts

@@ -381,6 +381,17 @@ export const de: Translations = {
       },
     },
   },
+  dai: {
+    wizard: {
+      valueHelper: 'Der Wert sollte vom Typ sein {{type}}',
+      title: {
+        edit: 'Edit {{daiName}}',
+      },
+    },
+    action: {
+      updatedai: 'DAI "{{daiName}} bearbeitet"',
+    }
+  },
   sdo: {
     wizard: {
       title: {

src/translations/en.ts

@@ -378,6 +378,17 @@ export const en = {
       },
     },
   },
+  dai: {
+    wizard: {
+      valueHelper: 'Value should be of type {{type}}',
+      title: {
+        edit: 'Edit {{daiName}}',
+      },
+    },
+    action: {
+      updatedai: 'Edited DAI "{{daiName}}"',
+    }
+  },
   sdo: {
     wizard: {
       title: {

src/wizards/dai.ts

@@ -0,0 +1,64 @@
+import { html, TemplateResult } from 'lit-element';
+import { get } from 'lit-translate';
+import { DaiValidationTypes, getCustomField } from '../editors/ied/foundation/foundation.js';
+
+import {
+  ComplexAction,
+  EditorAction,
+  getValue,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '../foundation.js';
+
+export function updateValue(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): EditorAction[] => {
+    const newValue = getValue(inputs.find(i => i.value)!)!;
+    const name = element.getAttribute('name');
+
+    const oldVal = element.querySelector('Val')!;
+
+    const complexAction: ComplexAction = {
+      actions: [],
+      title: get('dai.action.updatedai', {daiName: name!}),
+    };
+
+    const newVal = <Element>oldVal.cloneNode(false);
+    newVal.textContent = newValue;
+
+    complexAction.actions.push({ old: { element: oldVal }, new: { element: newVal } });
+    return [complexAction];
+  };
+}
+
+export function renderDAIWizard(
+  element: Element,
+  instanceElement?: Element
+): TemplateResult[] {
+  const bType = element.getAttribute('bType')!;
+  const value = instanceElement!.querySelector('Val')?.textContent?.trim() ?? '';
+
+  return [
+    html`${getCustomField()[<DaiValidationTypes>bType].render(value)}`,
+  ];
+}
+
+export function editDAIWizard(element: Element, instanceElement?: Element): Wizard {
+  return [
+    {
+      title: get('dai.wizard.title.edit', {
+        daiName: instanceElement?.getAttribute('name') ?? ''
+      }),
+      element: instanceElement,
+      primary: {
+        icon: 'edit',
+        label: get('save'),
+        action: updateValue(instanceElement!),
+      },
+      content: renderDAIWizard(
+        element,
+        instanceElement
+      ),
+    },
+  ];
+}

src/wizards/wizard-library.ts

@@ -19,8 +19,10 @@ import { createPowerTransformerWizard, editPowerTransformerWizard } from './powe
 import { editSubNetworkWizard } from './subnetwork.js';
 import { editIEDWizard } from './ied.js';
 import { editTrgOpsWizard } from './trgops.js';
+import { createDaWizard } from './da.js';
+import { editDAIWizard } from './dai.js';
 
-type SclElementWizard = (element: Element) => Wizard | undefined;
+type SclElementWizard = (element: Element, instanceElement?: Element) => Wizard | undefined;
 
 export function emptyWizard(): Wizard | undefined {
   return;
@@ -122,11 +124,11 @@ export const wizards: Record<
     create: emptyWizard,
   },
   DA: {
-    edit: emptyWizard,
+    edit: createDaWizard,
     create: emptyWizard,
   },
   DAI: {
-    edit: emptyWizard,
+    edit: editDAIWizard,
     create: emptyWizard,
   },
   DAType: {