${Array.from(
getChildElementsByTagName(this.element, 'PowerTransformer')
).map(
pwt =>
- html`
`
+ html`
`
)}
${Array.from(
getChildElementsByTagName(this.element, 'ConductingEquipment')
diff --git a/src/zeroline/foundation.ts b/src/zeroline/foundation.ts
index 2040aad229..f846ecf7b3 100644
--- a/src/zeroline/foundation.ts
+++ b/src/zeroline/foundation.ts
@@ -1,5 +1,6 @@
import { css, TemplateResult } from 'lit-element';
+import './function-editor.js';
import { newActionEvent, isPublic } from '../foundation.js';
import {
circuitBreakerIcon,
@@ -156,12 +157,8 @@ export type ElementEditorClass
= new () => T;
export function startMove<
E extends ElementEditor,
C extends ElementEditorClass,
- P extends ElementEditorClass>
-(
- editor: E,
- childClass: C,
- parentClasses: P[]
-): void {
+ P extends ElementEditorClass
+>(editor: E, childClass: C, parentClasses: P[]): void {
if (!editor.element) return;
editor.classList.add('moving');
@@ -184,8 +181,13 @@ export function startMove<
if (e instanceof KeyboardEvent && e.key === 'Escape') return;
- const targetEditor = e.composedPath()
- .find(et => et instanceof childClass || checkInstanceOfParentClass(et, parentClasses));
+ const targetEditor = e
+ .composedPath()
+ .find(
+ et =>
+ et instanceof childClass ||
+ checkInstanceOfParentClass(et, parentClasses)
+ );
if (targetEditor === undefined || targetEditor === editor) return;
const destination =
@@ -227,7 +229,8 @@ export function startMove<
*/
function checkInstanceOfParentClass(
et: EventTarget,
- classes: ElementEditorClass[]): boolean {
+ classes: ElementEditorClass[]
+): boolean {
const targetEditor = classes.find(clazz => et instanceof clazz);
return targetEditor !== undefined;
}
diff --git a/src/zeroline/function-editor.ts b/src/zeroline/function-editor.ts
new file mode 100644
index 0000000000..2ed81f255b
--- /dev/null
+++ b/src/zeroline/function-editor.ts
@@ -0,0 +1,46 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ property,
+ customElement,
+ state,
+} from 'lit-element';
+
+import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
+
+/** Pane rendering `Function` element with its children */
+@customElement('function-editor')
+export class FunctionEditor extends LitElement {
+ /** The edited `Function` 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})` : ''}`;
+ }
+
+ renderSubFunctions(): TemplateResult {
+ const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+ return html` ${subfunctions.map(
+ subFunction =>
+ html``
+ )}`;
+ }
+
+ render(): TemplateResult {
+ return html`${this.renderSubFunctions()}`;
+ }
+}
diff --git a/src/zeroline/subfunction-editor.ts b/src/zeroline/subfunction-editor.ts
new file mode 100644
index 0000000000..6e12ef7605
--- /dev/null
+++ b/src/zeroline/subfunction-editor.ts
@@ -0,0 +1,42 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ property,
+ customElement,
+ state,
+} from 'lit-element';
+
+import '../action-pane.js';
+import './subfunction-editor.js';
+import { getChildElementsByTagName } from '../foundation.js';
+
+/** Pane rendering `SubFunction` element with its children */
+@customElement('subfunction-editor')
+export class SubFunctionEditor extends LitElement {
+ /** The edited `SubFunction` 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})` : ''}`;
+ }
+
+ renderSubFunctions(): TemplateResult {
+ const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
+ return html` ${subfunctions.map(
+ subFunction =>
+ html``
+ )}`;
+ }
+
+ render(): TemplateResult {
+ return html`${this.renderSubFunctions()}`;
+ }
+}
diff --git a/src/zeroline/substation-editor.ts b/src/zeroline/substation-editor.ts
index e12a1d96d0..2f0dbf86aa 100644
--- a/src/zeroline/substation-editor.ts
+++ b/src/zeroline/substation-editor.ts
@@ -18,7 +18,13 @@ import '../action-pane.js';
import './ied-editor.js';
import './powertransformer-editor.js';
import './voltage-level-editor.js';
-import { newActionEvent, newWizardEvent, SCLTag, tags } from '../foundation.js';
+import {
+ getChildElementsByTagName,
+ newActionEvent,
+ newWizardEvent,
+ SCLTag,
+ tags,
+} from '../foundation.js';
import { emptyWizard, wizards } from '../wizards/wizard-library.js';
import {
cloneSubstationElement,
@@ -43,6 +49,9 @@ export class SubstationEditor extends LitElement {
element!: Element;
@property({ type: Boolean })
readonly = false;
+ /** Wheter `Function` and `SubFunction` are rendered */
+ @property({ type: Boolean })
+ showfunctions = false;
@property({ type: String })
get header(): string {
@@ -95,6 +104,15 @@ export class SubstationEditor extends LitElement {
this.addMenu.anchor = this.addButton;
}
+ renderFunctions(): TemplateResult {
+ if (!this.showfunctions) return html``;
+
+ const functions = getChildElementsByTagName(this.element, 'Function');
+ return html` ${functions.map(
+ fUnction => html``
+ )}`;
+ }
+
renderIedContainer(): TemplateResult {
const ieds = this.getAttachedIeds?.(this.element) ?? [];
return ieds?.length
@@ -105,11 +123,20 @@ export class SubstationEditor extends LitElement {
}
renderPowerTransformerContainer(): TemplateResult {
- const pwts = Array.from(this.element?.querySelectorAll(selectors.Substation + ' > PowerTransformer') ?? []);
+ const pwts = Array.from(
+ this.element?.querySelectorAll(
+ selectors.Substation + ' > PowerTransformer'
+ ) ?? []
+ );
return pwts?.length
? html``
+ ${pwts.map(
+ pwt =>
+ html``
+ )}
+