Feat: Added Private section for ied

Author: pascalwilbrink

public/js/init.js

@@ -0,0 +1,181 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+
+import '@material/mwc-icon';
+import { nothing } from 'lit-html';
+
+function closestTo<E extends Element>(node: Node, selector: string): E | null {
+  const closest =
+    node.nodeType === Node.ELEMENT_NODE
+      ? (<Element>node).closest<E>(selector)
+      : null;
+
+  if (closest) return closest;
+
+  const root = <Document | DocumentFragment>node.getRootNode();
+
+  if (root instanceof ShadowRoot) return closestTo(root.host, selector);
+
+  return null;
+}
+
+/**
+ * A responsive container rendering actions in a header.
+ *
+ * The "action" slot may contain up to eight icon buttons.
+ * The "icon" slot, if filled overrides the icon property.
+ * The default slot will be rendered into the pane body in a single column.
+ */
+@customElement('action-pane')
+export class ActionPane extends LitElement {
+  /** caption text, displayed in the header */
+  @property({ type: String })
+  label?: string;
+  /** icon name, displayed unless the "icon" slot is filled */
+  @property({ type: String })
+  icon?: string;
+  /** color header with secondary theme color while focus is within */
+  @property({ type: Boolean })
+  secondary = false;
+  /** highlight pane with dotted outline */
+  @property({ type: Boolean })
+  highlighted = false;
+  /** nesting level, default (closest pane ancestor's level) + 1 */
+  @property({ type: Number })
+  level = 1;
+
+  async firstUpdated(): Promise<void> {
+    this.tabIndex = 0;
+
+    const parentPane = closestTo<ActionPane>(this.parentNode!, 'action-pane');
+    if (parentPane) this.level = parentPane.level + 1;
+
+    this.level = Math.floor(this.level);
+  }
+
+  private renderHeader(): TemplateResult {
+    const content = html`<span
+        ><slot name="icon"
+          >${this.icon
+            ? html`<mwc-icon>${this.icon}</mwc-icon>`
+            : nothing}</slot
+        ></span
+      >
+      ${this.label ?? nothing}
+      <nav><slot name="action"></slot></nav>`;
+
+    const headingLevel = Math.floor(Math.max(this.level, 1));
+    // Sometimes a TemplateResult is passed in as Label, not a string. So only when it's a string show a title.
+    const title = typeof this.label === 'string' ? this.label : '';
+    switch (headingLevel) {
+      case 1:
+        return html`<h1 title="${title}">${content}</h1>`;
+      case 2:
+        return html`<h2 title="${title}">${content}</h2>`;
+      case 3:
+        return html`<h3 title="${title}">${content}</h3>`;
+      default:
+        return html`<h4 title="${title}">${content}</h4>`;
+    }
+  }
+
+  render(): TemplateResult {
+    return html`<section
+      class="${classMap({
+        secondary: this.secondary,
+        highlighted: this.highlighted,
+        contrasted: this.level % 2 === 0,
+      })}"
+    >
+      ${this.renderHeader()}
+      <div><slot></slot></div>
+    </section>`;
+  }
+
+  static styles = css`
+    :host {
+      outline: none;
+    }
+
+    :host(:focus-within) section {
+      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+      outline-width: 4px;
+      transition: all 250ms linear;
+    }
+
+    section {
+      background-color: var(--mdc-theme-surface);
+      transition: all 200ms linear;
+      outline-style: solid;
+      margin: 0px;
+      outline-width: 0px;
+      outline-color: var(--mdc-theme-primary);
+    }
+
+    section.secondary {
+      outline-color: var(--mdc-theme-secondary);
+    }
+
+    section > div {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 8px 12px 16px;
+      clear: right;
+    }
+
+    .highlighted {
+      outline-style: dotted;
+      outline-width: 2px;
+    }
+
+    :host(:focus-within) .highlighted {
+      outline-style: solid;
+    }
+
+    .contrasted {
+      background-color: var(--mdc-theme-on-primary);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      color: var(--mdc-theme-on-surface);
+      font-family: 'Roboto', sans-serif;
+      font-weight: 300;
+      overflow: clip visible;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0px;
+      line-height: 52px;
+      padding-left: 0.3em;
+    }
+
+    nav {
+      float: right;
+    }
+
+    mwc-icon {
+      vertical-align: middle;
+      position: relative;
+      top: -0.1em;
+      --mdc-icon-size: 1em;
+    }
+
+    ::slotted([slot='icon']) {
+      vertical-align: middle;
+      position: relative;
+      top: -0.1em;
+      --mdc-icon-size: 1em;
+    }
+  `;
+}

src/components/action-pane/action-pane.ts

@@ -0,0 +1 @@
+export * from './action-pane.js';

src/components/action-pane/index.ts

@@ -13,3 +13,5 @@ export const selectors = <Record<SubstationTag, string>>(
 export const SIEMENS_SITIPE_IED_REF = 'Siemens-SITIPE-IEDRef';
 
 export const SIEMENS_SITIPE_BAY_TEMPLATE = 'Siemens-SITIPE-BayTemplate';
+
+export const SIEMENS_SITIPE_IED_TEMPLATE_REF = 'Siemens-SITIPE-IEDTemplateRef';

src/editors/sitipe/foundation.ts

@@ -32,13 +32,16 @@ import '../../action-icon.js';
 import {
   SIEMENS_SITIPE_IED_REF,
   SIEMENS_SITIPE_BAY_TEMPLATE,
+  SIEMENS_SITIPE_IED_TEMPLATE_REF,
 } from './foundation.js';
 
 import {
   BayTypical,
+  BTComponent,
   getBayTypicalComponents,
   getImportedBTComponentData,
   getImportedBtComponents,
+  ImportedBTComponent,
 } from './sitipe-service.js';
 import { defaultNamingStrategy, NamingStrategy } from './sitipe-substation.js';
 import { get } from 'lit-translate';
@@ -461,6 +464,7 @@ export class SitipeBay extends LitElement {
       actions: [],
       title: 'Sitipe',
     };
+
     const bayTypicalElement: Element = createElement(this.doc, 'Private', {
       type: SIEMENS_SITIPE_BAY_TEMPLATE,
     });
@@ -497,7 +501,9 @@ export class SitipeBay extends LitElement {
                 'application/xml'
               );
 
-              this.prepareImport(doc, iedName);
+              if (this.isValidDoc(doc)) {
+                this.prepareImport(doc, iedName, btComponent);
+              }
             });
           });
         });
@@ -506,15 +512,15 @@ export class SitipeBay extends LitElement {
     });
   }
 
-  public prepareImport(doc: Document, iedName: string): void {
+  private isValidDoc(doc: Document): boolean {
     if (!doc) {
       this.dispatchEvent(
         newLogEvent({
           kind: 'error',
           title: get('import.log.loaderror'),
         })
       );
-      return;
+      return false;
     }
 
     if (doc.querySelector('parsererror')) {
@@ -524,11 +530,23 @@ export class SitipeBay extends LitElement {
           title: get('import.log.parsererror'),
         })
       );
-      return;
+      return false;
     }
 
-    const ieds = Array.from(doc.querySelectorAll(':root > IED'));
-    if (ieds.length === 0) {
+    return true;
+  }
+
+  private getIeds(doc: Document): Element[] {
+    return Array.from(doc.querySelectorAll(':root > IED'));
+  }
+
+  protected prepareImport(
+    doc: Document,
+    iedName: string,
+    btComponent: BTComponent
+  ): void {
+    const ieds: Element[] = this.getIeds(doc);
+    if (!ieds.length) {
       this.dispatchEvent(
         newLogEvent({
           kind: 'error',
@@ -537,15 +555,51 @@ export class SitipeBay extends LitElement {
       );
       return;
     }
-
-    if (ieds.length === 1) {
-      this.importIED(ieds[0], iedName);
+    if (ieds.length > 1) {
       return;
     }
-  }
 
-  private importIED(ied: Element, iedName: string): void {
+    const ied: Element = ieds[0];
+
+    const oldIEDName: string = ied.getAttribute('name') || '';
     ied.setAttribute('name', iedName);
+
+    this.importIED(ied);
+
+    if (iedName || oldIEDName) {
+      console.log('just before createelement');
+      console.log('doc element: ', this.doc.documentElement);
+
+      const privateIEDRef: Element = createElement(this.doc, 'Private', {
+        type: SIEMENS_SITIPE_IED_TEMPLATE_REF,
+      });
+      privateIEDRef.textContent = btComponent.name || oldIEDName;
+
+      console.log(
+        'Adding private iedRef element',
+        privateIEDRef,
+        'to ied: ',
+        ied
+      );
+
+      this.dispatchEvent(
+        newActionEvent({
+          title: get('editing.import', { name: ied.getAttribute('name')! }),
+          actions: [
+            {
+              new: {
+                parent: ied,
+                element: privateIEDRef,
+              },
+            },
+          ],
+        })
+      );
+    }
+    return;
+  }
+
+  private importIED(ied: Element): void {
     if (!isIedNameUnique(ied, this.doc)) {
       this.dispatchEvent(
         newLogEvent({

src/editors/sitipe/sitipe-bay.ts

@@ -689,6 +689,7 @@ export const de: Translations = {
       loaderror: 'Datei kann nicht geladen werden',
       importerror: 'IED Element kann nicht importiert werden',
       missingied: 'Kein IED Element in der Datei',
+      multipleied: 'Mehrere IED-Elemente in einer Datei',
       nouniqueied: 'IED Element {{ name }} bereits geladen',
     },
   },

src/translations/de.ts

@@ -688,6 +688,7 @@ export const en = {
       loaderror: 'Could not load file',
       importerror: 'Could not import IED',
       missingied: 'No IED element in the file',
+      multipleied: 'Multiple IED elements found',
       nouniqueied: 'IED element {{ name }} already in the file',
     },
   },

src/translations/en.ts

@@ -0,0 +1,19 @@
+import { html, TemplateResult } from 'lit-html';
+import { get } from 'lit-translate';
+import { getBayTypicals } from '../editors/sitipe/sitipe-service.js';
+import { Wizard } from '../foundation.js';
+
+function render(): TemplateResult {
+  getBayTypicals().then(res => {
+    console.log('res', res);
+  });
+  return html`<span>Test</span>`;
+}
+export function bayTypicalWizard(): Wizard {
+  return [
+    {
+      title: get('voltagelevel.wizard.title.edit'),
+      content: [render()],
+    },
+  ];
+}

src/wizards/bayTypical.ts

@@ -0,0 +1,27 @@
+import { Browser, launch, Page } from 'puppeteer';
+import { CucumberWorld } from '../support/cucumber-world';
+
+export class BrowserDelegate {
+    
+    browser!: Browser;
+    page!: Page;
+
+    constructor(private world: CucumberWorld) {
+    }
+
+    async init(): Promise<void> {
+        this.browser = await launch({
+            headless: false
+        });
+        this.page = (await this.browser.pages())[0];
+    }
+
+    async destroy(): Promise<void> {
+        await this.browser.close();
+    }
+
+    async navigate(): Promise<void> {
+
+    }
+
+}