feat(editors/substation): add eq-function-editor

src/editors/substation/conducting-equipment-editor.ts

@@ -14,8 +14,13 @@ import '@material/mwc-icon-button';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
+import './eq-function-editor.js';
 import { startMove, getIcon } from './foundation.js';
-import { newActionEvent, newWizardEvent } from '../../foundation.js';
+import {
+  getChildElementsByTagName,
+  newActionEvent,
+  newWizardEvent,
+} from '../../foundation.js';
 import { BayEditor } from './bay-editor.js';
 import { wizards } from '../../wizards/wizard-library.js';
 
@@ -57,6 +62,16 @@ export class ConductingEquipmentEditor extends LitElement {
       );
   }
 
+  renderEqFunctions(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction');
+    return html` ${eqFunctions.map(
+      eqFunction =>
+        html`<eq-function-editor .element=${eqFunction}></eq-function-editor>`
+    )}`;
+  }
+
   renderContentPane(): TemplateResult {
     return html`<mwc-icon slot="icon" style="width:24px;height:24px"
         >${getIcon(this.element)}</mwc-icon
@@ -128,7 +143,7 @@ export class ConductingEquipmentEditor extends LitElement {
   render(): TemplateResult {
     if (this.showfunctions)
       return html`<action-pane label="${this.name}"
-        >${this.renderContentPane()}</action-pane
+        >${this.renderContentPane()}${this.renderEqFunctions()}</action-pane
       >`;
 
     return html`<action-icon label="${this.name}"

src/editors/substation/eq-function-editor.ts

@@ -0,0 +1,35 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../../action-pane.js';
+
+/** Pane rendering `Function` element with its children */
+@customElement('eq-function-editor')
+export class EqFunctionEditor extends LitElement {
+  /** The edited `EqFunction` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  get header(): string {
+    const name = this.element.getAttribute('name');
+    const desc = this.element.getAttribute('desc');
+    const type = this.element.getAttribute('type');
+
+    return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
+  }
+
+  render(): TemplateResult {
+    return html`<action-pane
+      label="${this.header}"
+      icon="functions"
+      secondary
+      highlighted
+    ></action-pane>`;
+  }
+}

src/editors/substation/powertransformer-editor.ts

@@ -16,7 +16,11 @@ import '../../action-icon.js';
 import '../../action-pane.js';
 import { powerTransformerTwoWindingIcon } from '../../icons/icons.js';
 import { wizards } from '../../wizards/wizard-library.js';
-import { newActionEvent, newWizardEvent } from '../../foundation.js';
+import {
+  getChildElementsByTagName,
+  newActionEvent,
+  newWizardEvent,
+} from '../../foundation.js';
 import { startMove } from './foundation.js';
 import { SubstationEditor } from './substation-editor.js';
 import { BayEditor } from './bay-editor.js';
@@ -61,6 +65,16 @@ export class PowerTransformerEditor extends LitElement {
       );
   }
 
+  renderEqFunctions(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction');
+    return html` ${eqFunctions.map(
+      eqFunction =>
+        html`<eq-function-editor .element=${eqFunction}></eq-function-editor>`
+    )}`;
+  }
+
   renderContentPane(): TemplateResult {
     return html`<mwc-icon slot="icon" style="width:24px;height:24px"
         >${powerTransformerTwoWindingIcon}</mwc-icon
@@ -145,7 +159,7 @@ export class PowerTransformerEditor extends LitElement {
   render(): TemplateResult {
     if (this.showfunctions)
       return html`<action-pane label="${this.name}"
-        >${this.renderContentPane()}</action-pane
+        >${this.renderContentPane()}${this.renderEqFunctions()}</action-pane
       > `;
 
     return html`<action-icon label="${this.name}"

test/testfiles/zeroline/functions.scd

@@ -20,7 +20,11 @@
 					</SubFunction>
 				</SubFunction> 
             </Function>
-			<PowerTransformer name="myPtr2" type="PTR"/>
+			<PowerTransformer name="myPtr2" type="PTR">
+				<EqFunction name="myEqFuncPtr2">
+                    <EqSubFunction name="myEqSubFunc"/> 
+                </EqFunction> 
+			</PowerTransformer>
 			<Bay name="COUPLING_BAY" desc="Bay">
 				<Function name="bayName">
 					<SubFunction name="myBaySubFunc" desc="myDesc" type="myBaySubFuncType"/>
@@ -29,8 +33,23 @@
 					<SubFunction name="myBaySubFunc" desc="myDesc" type="myBaySubFuncType"/>
 				</Function>
 				<PowerTransformer name="myPtr3" type="PTR"/>
-                <ConductingEquipment>
-                    <EqFunction name="myEqFunc">
+                <ConductingEquipment name="QA1" desc="some desc" type="CRB">
+                    <EqFunction name="myEqFuncQA1" desc="funcForQA1" type="eqFuncType">
+                        <EqSubFunction name="myEqSubFunc"/> 
+                    </EqFunction> 
+                </ConductingEquipment>
+				<ConductingEquipment name="QB1" type="DIS">
+                    <EqFunction name="myEqFuncQB1">
+                        <EqSubFunction name="myEqSubFunc"/> 
+                    </EqFunction> 
+                </ConductingEquipment>
+				<ConductingEquipment name="QB1" type="DIS">
+                    <EqFunction name="myEqFuncQB1">
+                        <EqSubFunction name="myEqSubFunc"/> 
+                    </EqFunction> 
+                </ConductingEquipment>
+				<ConductingEquipment name="QC9" type="DIS">
+                    <EqFunction name="myEqFuncQC9">
                         <EqSubFunction name="myEqSubFunc"/> 
                     </EqFunction> 
                 </ConductingEquipment>

test/unit/editors/substation/__snapshots__/bay-editor.test.snap.js

@@ -300,6 +300,12 @@ snapshots["bay-editor with function filter deactivated looks like the latest sna
     </powertransformer-editor>
     <conducting-equipment-editor showfunctions="">
     </conducting-equipment-editor>
+    <conducting-equipment-editor showfunctions="">
+    </conducting-equipment-editor>
+    <conducting-equipment-editor showfunctions="">
+    </conducting-equipment-editor>
+    <conducting-equipment-editor showfunctions="">
+    </conducting-equipment-editor>
   </div>
 </action-pane>
 `;

test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js

@@ -94,3 +94,63 @@ snapshots["conducting-equipment-editor rendered as action pane looks like the la
 `;
 /* end snapshot conducting-equipment-editor rendered as action pane looks like the latest snapshot */
 
+snapshots["conducting-equipment-editor rendered as action pane with EqFunction children looks like the latest snapshot"] = 
+`<action-pane
+  label="QA1"
+  tabindex="0"
+>
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
+  <abbr
+    slot="action"
+    title="[lnode.tooltip]"
+  >
+    <mwc-icon-button
+      icon="account_tree"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[move]"
+  >
+    <mwc-icon-button
+      icon="forward"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button
+      icon="delete"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <eq-function-editor>
+  </eq-function-editor>
+</action-pane>
+`;
+/* end snapshot conducting-equipment-editor rendered as action pane with EqFunction children looks like the latest snapshot */
+

test/unit/editors/substation/__snapshots__/eq-function-editor.test.snap.js

@@ -0,0 +1,27 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["web component rendering EqFunction element with complete attribute set and existing children looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="myEqFuncQA1 - funcForQA1 (eqFuncType)"
+  secondary=""
+  tabindex="0"
+>
+</action-pane>
+`;
+/* end snapshot web component rendering EqFunction element with complete attribute set and existing children looks like the latest snapshot */
+
+snapshots["web component rendering EqFunction element with missing desc and type attribute looks like the latest snapshot"] = 
+`<action-pane
+  highlighted=""
+  icon="functions"
+  label="myEqFuncPtr2"
+  secondary=""
+  tabindex="0"
+>
+</action-pane>
+`;
+/* end snapshot web component rendering EqFunction element with missing desc and type attribute looks like the latest snapshot */
+

test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js

@@ -95,3 +95,63 @@ snapshots["powertransformer-editor rendered as action pane looks like the latest
 `;
 /* end snapshot powertransformer-editor rendered as action pane looks like the latest snapshot */
 
+snapshots["powertransformer-editor rendered as action pane with EqFunction childrend looks like the latest snapshot"] = 
+`<action-pane
+  label="myPtr2"
+  tabindex="0"
+>
+  <mwc-icon
+    slot="icon"
+    style="width:24px;height:24px"
+  >
+  </mwc-icon>
+  <abbr
+    slot="action"
+    title="[lnode.tooltip]"
+  >
+    <mwc-icon-button
+      icon="account_tree"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[move]"
+  >
+    <mwc-icon-button
+      icon="forward"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <abbr
+    slot="action"
+    title="[remove]"
+  >
+    <mwc-icon-button
+      icon="delete"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
+  <eq-function-editor>
+  </eq-function-editor>
+</action-pane>
+`;
+/* end snapshot powertransformer-editor rendered as action pane with EqFunction childrend looks like the latest snapshot */
+

test/unit/editors/substation/conducting-equipment-editor.test.ts

@@ -98,6 +98,22 @@ describe('conducting-equipment-editor', () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
 
+    describe('with EqFunction children', () => {
+      beforeEach(async () => {
+        const doc = await fetch('/test/testfiles/zeroline/functions.scd')
+          .then(response => response.text())
+          .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+        element.element = doc.querySelector(
+          'Bay[name="COUPLING_BAY"] > ConductingEquipment[name="QA1"]'
+        )!;
+        await element.requestUpdate();
+      });
+
+      it('looks like the latest snapshot', async () =>
+        await expect(element).shadowDom.to.equalSnapshot());
+    });
+
     it('renders empty string in case ConductingEquipment name attribute is missing', async () => {
       const condEq = validSCL.querySelector('ConductingEquipment');
       condEq?.removeAttribute('name');

test/unit/editors/substation/eq-function-editor.test.ts

@@ -0,0 +1,45 @@
+import { fixture, html, expect } from '@open-wc/testing';
+
+import '../../../../src/editors/substation/eq-function-editor.js';
+import { EqFunctionEditor } from '../../../../src/editors/substation/eq-function-editor.js';
+
+describe('web component rendering EqFunction element', () => {
+  let element: EqFunctionEditor;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/zeroline/functions.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('with complete attribute set and existing children', () => {
+    beforeEach(async () => {
+      element = <EqFunctionEditor>(
+        await fixture(
+          html`<eq-function-editor
+            .element=${doc.querySelector('ConductingEquipment EqFunction')}
+          ></eq-function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () =>
+      await expect(element).shadowDom.to.equalSnapshot());
+  });
+
+  describe('with missing desc and type attribute', () => {
+    beforeEach(async () => {
+      element = <EqFunctionEditor>(
+        await fixture(
+          html`<eq-function-editor
+            .element=${doc.querySelector('EqFunction')}
+          ></eq-function-editor>`
+        )
+      );
+    });
+
+    it('looks like the latest snapshot', async () =>
+      await expect(element).shadowDom.to.equalSnapshot());
+  });
+});