feat(editors/Substation): Add PowerTransformer Components to Substation Editor

Author: Dennis Labordus

src/editors/singlelinediagram/wizards/powertransformer.ts

@@ -20,11 +20,12 @@ import {
 function render(
   name: string | null,
   desc: string | null,
+  type: string | null,
   xCoordinate: string | null,
   yCoordinate: string | null,
   reservedNames: string[]
 ): TemplateResult[] {
-  return renderPowerTransformerWizard(name, desc, reservedNames)
+  return renderPowerTransformerWizard(name, desc, type, reservedNames)
     .concat(renderXYCoordinateFields(xCoordinate, yCoordinate));
 }
 
@@ -41,6 +42,7 @@ export function editPowerTransformerWizard(element: Element): Wizard {
       content: render(
         getNameAttribute(element),
         getDescAttribute(element),
+        element.getAttribute('type'),
         getXCoordinateAttribute(element),
         getYCoordinateAttribute(element),
         reservedNamesPowerTransformer(element)

src/foundation.ts

@@ -2307,7 +2307,10 @@ export const tags: Record<
     identity: namingIdentity,
     selector: namingSelector,
     parents: ['SCL'],
-    children: [...tEquipmentContainerSequence, 'VoltageLevel', 'Function'],
+    children: [...tEquipmentContainerSequence,
+      'VoltageLevel',
+      'Function',
+    ],
   },
   SupSubscription: {
     identity: singletonIdentity,
@@ -2384,7 +2387,11 @@ export const tags: Record<
     identity: namingIdentity,
     selector: namingSelector,
     parents: ['Substation'],
-    children: [...tEquipmentContainerSequence, 'Voltage', 'Bay', 'Function'],
+    children: [...tEquipmentContainerSequence,
+      'Voltage',
+      'Bay',
+      'Function',
+    ],
   },
 };
 

src/translations/de.ts

@@ -217,7 +217,9 @@ export const de: Translations = {
     wizard: {
       nameHelper: '`Name des Leistungstransformators',
       descHelper: 'Beschreibung des Leistungstransformators',
+      typeHelper: 'Type des Leistungstransformators',
       title: {
+        add: 'Leistungstransformator hinzufügen',
         edit: 'Leistungstransformator bearbeiten',
       },
     },

src/translations/en.ts

@@ -213,7 +213,9 @@ export const en = {
     wizard: {
       nameHelper: 'Power transformer name',
       descHelper: 'Power transformer description',
+      typeHelper: 'Power transformer type',
       title: {
+        add: 'Add power transformer',
         edit: 'Edit power transformer',
       },
     },

src/wizards/powertransformer.ts

@@ -2,15 +2,44 @@ import { html, TemplateResult } from 'lit-element';
 import { get, translate } from 'lit-translate';
 
 import {
+  createElement,
+  EditorAction,
+  getValue,
   isPublic,
   Wizard,
+  WizardActor,
+  WizardInput,
 } from '../foundation.js';
 
 import { updateNamingAction } from "./foundation/actions.js";
 
+const defaultPowerTransformerType = 'PTR';
+
+export function createAction(parent: Element): WizardActor {
+  return (inputs: WizardInput[]): EditorAction[] => {
+    const name = getValue(inputs.find(i => i.label === 'name')!);
+    const desc = getValue(inputs.find(i => i.label === 'desc')!);
+    const element = createElement(parent.ownerDocument, 'PowerTransformer', {
+      name,
+      desc,
+      type: defaultPowerTransformerType
+    });
+
+    const action = {
+      new: {
+        parent,
+        element,
+      },
+    };
+
+    return [action];
+  };
+}
+
 export function renderPowerTransformerWizard(
   name: string | null,
   desc: string | null,
+  type: string | null,
   reservedNames: string[]
 ): TemplateResult[] {
   return [
@@ -29,19 +58,44 @@ export function renderPowerTransformerWizard(
       nullable
       helper="${translate('powertransformer.wizard.descHelper')}"
     ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="type"
+      .maybeValue=${type}
+      disabled
+      helper="${translate('powertransformer.wizard.typeHelper')}"
+    ></wizard-textfield>`,
   ];
 }
 
-export function reservedNamesPowerTransformer(currentElement: Element): string[] {
-  return Array.from(
-    currentElement.parentNode!.querySelectorAll('PowerTransformer')
-  )
+export function reservedNamesPowerTransformer(parent: Element, currentName?: string | null): string[] {
+  return Array.from(parent.querySelectorAll('PowerTransformer'))
     .filter(isPublic)
-    .map(cNode => cNode.getAttribute('name') ?? '')
-    .filter(name => name !== currentElement.getAttribute('name'));
+    .map(pwt => pwt.getAttribute('name') ?? '')
+    .filter(name => currentName && name !== currentName);
+}
+
+export function createPowerTransformerWizard(parent: Element): Wizard {
+  const reservedNames = reservedNamesPowerTransformer(parent);
+
+  return [
+    {
+      title: get('powertransformer.wizard.title.add'),
+      element: undefined,
+      primary: {
+        icon: '',
+        label: get('add'),
+        action: createAction(parent),
+      },
+      content: renderPowerTransformerWizard('', null, defaultPowerTransformerType, reservedNames),
+    },
+  ];
 }
 
 export function editPowerTransformerWizard(element: Element): Wizard {
+  const reservedNames = reservedNamesPowerTransformer(
+    <Element>element.parentNode!,
+    element.getAttribute('name'));
+
   return [
     {
       title: get('powertransformer.wizard.title.edit'),
@@ -54,7 +108,8 @@ export function editPowerTransformerWizard(element: Element): Wizard {
       content: renderPowerTransformerWizard(
         element.getAttribute('name'),
         element.getAttribute('desc'),
-        reservedNamesPowerTransformer(element)
+        element.getAttribute('type'),
+        reservedNames
       ),
     },
   ];

src/wizards/wizard-library.ts

@@ -15,7 +15,7 @@ import {
   voltageLevelCreateWizard,
   voltageLevelEditWizard,
 } from './voltagelevel.js';
-import { editPowerTransformerWizard } from './powertransformer.js';
+import { createPowerTransformerWizard, editPowerTransformerWizard } from './powertransformer.js';
 import { editSubNetworkWizard } from './subnetwork.js';
 import { editIEDWizard } from './ied.js';
 import { editTrgOpsWizard } from './trgops.js';
@@ -347,7 +347,7 @@ export const wizards: Record<
   },
   PowerTransformer: {
     edit: editPowerTransformerWizard,
-    create: emptyWizard,
+    create: createPowerTransformerWizard,
   },
   Private: {
     edit: emptyWizard,

src/zeroline/bay-editor.ts

@@ -17,6 +17,7 @@ import { ListItem } from '@material/mwc-list/mwc-list-item';
 import '../action-pane.js';
 import './ied-editor.js';
 import './conducting-equipment-editor.js';
+import './powertransformer-editor.js';
 import { VoltageLevelEditor } from './voltage-level-editor.js';
 import {
   getChildElementsByTagName,
@@ -26,6 +27,11 @@ import {
   tags,
 } from '../foundation.js';
 import { emptyWizard, wizards } from '../wizards/wizard-library.js';
+import {
+  cloneSubstationElement,
+  startMove,
+  styles,
+} from './foundation.js';
 
 function childTags(element: Element | null | undefined): SCLTag[] {
   if (!element) return [];
@@ -34,7 +40,6 @@ function childTags(element: Element | null | undefined): SCLTag[] {
     child => wizards[child].create !== emptyWizard
   );
 }
-import { startMove, styles, cloneSubstationElement } from './foundation.js';
 
 /** [[`SubstationEditor`]] subeditor for a `Bay` element. */
 @customElement('bay-editor')
@@ -135,7 +140,7 @@ export class BayEditor extends LitElement {
       <abbr slot="action" title="${translate('move')}">
         <mwc-icon-button
           icon="forward"
-          @click=${() => startMove(this, BayEditor, VoltageLevelEditor)}
+          @click=${() => startMove(this, BayEditor, [VoltageLevelEditor])}
         ></mwc-icon-button>
       </abbr>
       <abbr slot="action" title="${translate('remove')}">
@@ -165,6 +170,12 @@ export class BayEditor extends LitElement {
       </abbr>
       ${this.renderIedContainer()}
       <div id="ceContainer">
+        ${Array.from(
+          getChildElementsByTagName(this.element, 'PowerTransformer')
+        ).map(
+          pwt =>
+            html`<powertransformer-editor .element=${pwt}></powertransformer-editor>`
+        )}
         ${Array.from(
           getChildElementsByTagName(this.element, 'ConductingEquipment')
         ).map(

src/zeroline/conducting-equipment-editor.ts

@@ -68,7 +68,7 @@ export class ConductingEquipmentEditor extends LitElement {
       <mwc-fab
         slot="action"
         mini
-        @click="${() => startMove(this, ConductingEquipmentEditor, BayEditor)}"
+        @click="${() => startMove(this, ConductingEquipmentEditor, [BayEditor])}"
         icon="forward"
       ></mwc-fab>
       <mwc-fab

src/zeroline/foundation.ts

@@ -100,10 +100,6 @@ export function getAttachedIeds(
   };
 }
 
-export type ElementEditor = Element & {
-  element: Element;
-};
-
 export function cloneSubstationElement(
   editor: BayEditor | VoltageLevelEditor | SubstationEditor
 ): void {
@@ -144,6 +140,11 @@ export function cloneSubstationElement(
   );
 }
 
+export type ElementEditor = Element & {
+  element: Element;
+};
+export type ElementEditorClass<T extends ElementEditor> = new () => T;
+
 /**
  * Moves the element edited by `editor` to the place before the next `Child`
  * editor selected or to the end of the next `Parent` editor selected by mouse
@@ -152,10 +153,14 @@ export function cloneSubstationElement(
  * The move action can be aborted by clicking on something other than a `Child`
  * or `Parent` editor or by hitting the escape key on the keyboard.
  */
-export function startMove<E extends ElementEditor, P extends ElementEditor>(
+export function startMove<
+  E extends ElementEditor,
+  C extends ElementEditorClass<ElementEditor>,
+  P extends ElementEditorClass<ElementEditor>>
+(
   editor: E,
-  Child: new () => E,
-  Parent: new () => P
+  childClass: C,
+  parentClasses: P[]
 ): void {
   if (!editor.element) return;
 
@@ -179,19 +184,17 @@ export function startMove<E extends ElementEditor, P extends ElementEditor>(
 
     if (e instanceof KeyboardEvent && e.key === 'Escape') return;
 
-    const targetEditor = e
-      .composedPath()
-      .find(e => e instanceof Child || e instanceof Parent);
-
+    const targetEditor = e.composedPath()
+      .find(et => et instanceof childClass || checkInstanceOfParentClass(et, parentClasses));
     if (targetEditor === undefined || targetEditor === editor) return;
 
     const destination =
-      targetEditor instanceof Child
+      targetEditor instanceof childClass
         ? {
             parent: targetEditor.element.parentElement!,
             reference: targetEditor.element,
           }
-        : { parent: (<P>targetEditor).element, reference: null };
+        : { parent: (<E>targetEditor).element, reference: null };
 
     if (!destination.parent) return;
 
@@ -215,6 +218,20 @@ export function startMove<E extends ElementEditor, P extends ElementEditor>(
   window.addEventListener('keydown', moveToTarget, true);
 }
 
+/**
+ * Check if the eventTarget that triggered the event is one of the classes that
+ * we accepted as target to use to move an element to.
+ *
+ * @param et - The Event Target.
+ * @param classes - The list of Classes which are acceptable.
+ */
+function checkInstanceOfParentClass<E extends ElementEditor>(
+  et: EventTarget,
+  classes: ElementEditorClass<E>[]): boolean {
+  const targetEditor = classes.find(clazz => et instanceof clazz);
+  return targetEditor !== undefined;
+}
+
 /**
  * Get the correct icon for a specific Conducting Equipment.
  * @param condEq - The Conducting Equipment to search the icon for.
@@ -261,6 +278,14 @@ export const styles = css`
     border-bottom: none;
   }
 
+  #powertransformercontainer {
+    display: grid;
+    grid-gap: 12px;
+    padding: 8px 12px 16px;
+    box-sizing: border-box;
+    grid-template-columns: repeat(auto-fit, minmax(64px, auto));
+  }
+
   #iedcontainer {
     display: grid;
     grid-gap: 12px;