feat(editor/subscriber): Added plugin for Subscriber Logical Nodes (G…

…OOSE/SMV) (#1036) * Added plugin and show FCDA Elements including edit button * Added plugin and show FCDA Elements including edit button * Added plugin and show FCDA Elements including edit button + renaming other subscriber plugins * Fixed plugin test * Show connected and available LN + small fixes * Processed review comments.
openscd · Oct 13, 2022 · 971f0c1 · 971f0c1
1 parent a8e7859
commit 971f0c1
Show file tree

Hide file tree

Showing 39 changed files with 3,383 additions and 508 deletions.
diff --git a/public/js/plugins.js b/public/js/plugins.js
@@ -21,8 +21,15 @@ export const officialPlugins = [
     kind: 'editor',
   },
   {
-    name: 'Subscriber (GOOSE)',
-    src: '/src/editors/GooseControlSubscription.js',
+    name: 'Subscriber Message Binding (GOOSE)',
+    src: '/src/editors/GooseSubscriberMessageBinding.js',
+    icon: 'link',
+    default: true,
+    kind: 'editor',
+  },
+  {
+    name: 'Subscriber Data Binding (GOOSE)',
+    src: '/src/editors/GooseSubscriberDataBinding.js',
     icon: 'link',
     default: true,
     kind: 'editor',
@@ -31,12 +38,19 @@ export const officialPlugins = [
     name: 'Subscriber Later Binding (GOOSE)',
     src: '/src/editors/GooseSubscriberLaterBinding.js',
     icon: 'link',
-    default: false,
+    default: true,
+    kind: 'editor',
+  },
+  {
+    name: 'Subscriber Message Binding (SMV)',
+    src: '/src/editors/SMVSubscriberMessageBinding.js',
+    icon: 'link',
+    default: true,
     kind: 'editor',
   },
   {
-    name: 'Subscriber (SMV)',
-    src: '/src/editors/SampledValuesSubscription.js',
+    name: 'Subscriber Data Binding (SMV)',
+    src: '/src/editors/SMVSubscriberDataBinding.js',
     icon: 'link',
     default: true,
     kind: 'editor',

diff --git a/snowpack.config.mjs b/snowpack.config.mjs
@@ -11,10 +11,11 @@ export default ({
     "**/.eslintrc.cjs",
     "**/.git/**/*",
     "**/.gitignore",
+    "**/.idea/**/*",
     "**/.travis.yml",
     "**/package*",
     "**/tsconfig.json",
     "**/web-test-runner.config.mjs",
     "**/node_modules/**/*"
-  ],  
-});
+  ],
+});
diff --git a/src/editors/GooseSubscriberDataBinding.ts b/src/editors/GooseSubscriberDataBinding.ts
@@ -0,0 +1,54 @@
+import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+
+import { Nsdoc } from '../foundation/nsdoc.js';
+
+import './subscription/fcda-binding-list.js';
+import './subscription/later-binding/ext-ref-ln-binding-list.js';
+
+/** An editor [[`plugin`]] for Subscribe Data Binding (GOOSE). */
+export default class GooseSubscribeDataBindingPlugin extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+  @property()
+  nsdoc!: Nsdoc;
+
+  render(): TemplateResult {
+    return html`<div>
+      <div class="container">
+        <fcda-binding-list
+          class="column"
+          controlTag="GSEControl"
+          .doc=${this.doc}
+        >
+        </fcda-binding-list>
+        <extref-ln-binding-list
+          class="column"
+          controlTag="GSEControl"
+          .doc="${this.doc}"
+          .nsdoc="${this.nsdoc}"
+        >
+        </extref-ln-binding-list>
+      </div>
+    </div>`;
+  }
+
+  static styles = css`
+    :host {
+      width: 100vw;
+    }
+
+    .container {
+      display: flex;
+      padding: 8px 6px 16px;
+      height: calc(100vh - 136px);
+    }
+
+    .column {
+      flex: 50%;
+      margin: 0px 6px 0px;
+      min-width: 300px;
+      height: 100%;
+      overflow-y: auto;
+    }
+  `;
+}
diff --git a/src/editors/GooseSubscriberLaterBinding.ts b/src/editors/GooseSubscriberLaterBinding.ts
@@ -1,21 +1,22 @@
-import { LitElement, property, html, TemplateResult, css } from 'lit-element';
+import { css, html, LitElement, property, TemplateResult } from 'lit-element';
 
-import './subscription/later-binding/fcda-later-binding-list.js';
+import './subscription/fcda-binding-list.js';
 import './subscription/later-binding/ext-ref-later-binding-list.js';
 
+/** An editor [[`plugin`]] for Subscribe Later Binding (GOOSE). */
 export default class GooseSubscribeLaterBindingPlugin extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
 
   render(): TemplateResult {
     return html`<div>
       <div class="container">
-        <fcda-later-binding-list
+        <fcda-binding-list
           class="column"
           .doc=${this.doc}
           controlTag="GSEControl"
         >
-        </fcda-later-binding-list>
+        </fcda-binding-list>
         <extref-later-binding-list
           class="column"
           controlTag="GSEControl"

diff --git a/src/editors/GooseControlSubscription.ts → src/editors/GooseSubscriberMessageBinding.ts b/src/editors/GooseControlSubscription.ts → src/editors/GooseSubscriberMessageBinding.ts
@@ -1,10 +1,10 @@
 import {
-  LitElement,
+  css,
   html,
-  TemplateResult,
+  LitElement,
   property,
-  css,
   query,
+  TemplateResult,
 } from 'lit-element';
 import { translate } from 'lit-translate';
 
@@ -21,7 +21,7 @@ import { newViewEvent, View, ViewEvent } from './subscription/foundation.js';
 let view: View = View.PUBLISHER;
 
 /** An editor [[`plugin`]] for subscribing IEDs to GOOSE messages. */
-export default class GooseControlSubscriptionPlugin extends LitElement {
+export default class GooseSubscriberMessageBindingPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
@@ -76,7 +76,11 @@ export default class GooseControlSubscriptionPlugin extends LitElement {
       <div class="container">
         ${view == View.PUBLISHER
           ? html`<goose-list class="row" .doc=${this.doc}></goose-list>`
-          : html`<ied-list class="row" .doc=${this.doc} serviceType="goose"></ied-list>`}
+          : html`<ied-list
+              class="row"
+              .doc=${this.doc}
+              serviceType="goose"
+            ></ied-list>`}
         <subscriber-list-goose
           class="row"
           .doc=${this.doc}

diff --git a/src/editors/SMVSubscriberDataBinding.ts b/src/editors/SMVSubscriberDataBinding.ts
@@ -0,0 +1,54 @@
+import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+
+import { Nsdoc } from '../foundation/nsdoc.js';
+
+import './subscription/fcda-binding-list.js';
+import './subscription/later-binding/ext-ref-ln-binding-list.js';
+
+/** An editor [[`plugin`]] for Subscribe Data Binding (SMV). */
+export default class SMVSubscribeDataBindingPlugin extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+  @property()
+  nsdoc!: Nsdoc;
+
+  render(): TemplateResult {
+    return html`<div>
+      <div class="container">
+        <fcda-binding-list
+          class="column"
+          controlTag="SampledValueControl"
+          .doc=${this.doc}
+        >
+        </fcda-binding-list>
+        <extref-ln-binding-list
+          class="column"
+          controlTag="SampledValueControl"
+          .doc="${this.doc}"
+          .nsdoc="${this.nsdoc}"
+        >
+        </extref-ln-binding-list>
+      </div>
+    </div>`;
+  }
+
+  static styles = css`
+    :host {
+      width: 100vw;
+    }
+
+    .container {
+      display: flex;
+      padding: 8px 6px 16px;
+      height: calc(100vh - 136px);
+    }
+
+    .column {
+      flex: 50%;
+      margin: 0px 6px 0px;
+      min-width: 300px;
+      height: 100%;
+      overflow-y: auto;
+    }
+  `;
+}
diff --git a/src/editors/SMVSubscriberLaterBinding.ts b/src/editors/SMVSubscriberLaterBinding.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement, property, TemplateResult } from 'lit-element';
 
-import './subscription/later-binding/fcda-later-binding-list.js';
+import './subscription/fcda-binding-list.js';
 import './subscription/later-binding/ext-ref-later-binding-list.js';
 
 /** An editor [[`plugin`]] for Subscribe Later Binding (SMV). */
@@ -11,12 +11,12 @@ export default class SMVSubscribeLaterBindingPlugin extends LitElement {
   render(): TemplateResult {
     return html`<div>
       <div class="container">
-        <fcda-later-binding-list
+        <fcda-binding-list
           class="column"
           .doc=${this.doc}
           controlTag="SampledValueControl"
         >
-        </fcda-later-binding-list>
+        </fcda-binding-list>
         <extref-later-binding-list
           class="column"
           .doc=${this.doc}

diff --git a/src/editors/SampledValuesSubscription.ts → src/editors/SMVSubscriberMessageBinding.ts b/src/editors/SampledValuesSubscription.ts → src/editors/SMVSubscriberMessageBinding.ts
@@ -1,10 +1,10 @@
 import {
-  LitElement,
+  css,
   html,
-  TemplateResult,
+  LitElement,
   property,
-  css,
   query,
+  TemplateResult,
 } from 'lit-element';
 import { translate } from 'lit-translate';
 
@@ -19,7 +19,7 @@ import { newViewEvent, View, ViewEvent } from './subscription/foundation.js';
 let view: View = View.PUBLISHER;
 
 /** An editor [[`plugin`]] for subscribing IEDs to Sampled Values. */
-export default class SampledValuesSubscriberPlugin extends LitElement {
+export default class SMVSubscriberMessageBindingPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
@@ -74,7 +74,11 @@ export default class SampledValuesSubscriberPlugin extends LitElement {
       <div class="container">
         ${view == View.PUBLISHER
           ? html`<smv-list class="row" .doc=${this.doc}></smv-list>`
-          : html`<ied-list class="row" .doc=${this.doc} serviceType="smv"></ied-list>`}
+          : html`<ied-list
+              class="row"
+              .doc=${this.doc}
+              serviceType="smv"
+            ></ied-list>`}
         <subscriber-list-smv class="row" .doc=${this.doc}></subscriber-list-smv>
       </div>
     </div>`;

diff --git a/.../later-binding/fcda-later-binding-list.ts → ...editors/subscription/fcda-binding-list.ts b/.../later-binding/fcda-later-binding-list.ts → ...editors/subscription/fcda-binding-list.ts
@@ -21,13 +21,11 @@ import {
   getNameAttribute,
   identity,
   newWizardEvent,
-} from '../../../foundation.js';
-import { gooseIcon, smvIcon } from '../../../icons/icons.js';
-import { wizards } from '../../../wizards/wizard-library.js';
+} from '../../foundation.js';
+import { gooseIcon, smvIcon } from '../../icons/icons.js';
+import { wizards } from '../../wizards/wizard-library.js';
 
-import { styles } from '../foundation.js';
-
-import { getFcdaTitleValue, newFcdaSelectEvent } from './foundation.js';
+import { getFcdaTitleValue, newFcdaSelectEvent, styles } from './foundation.js';
 
 type controlTag = 'SampledValueControl' | 'GSEControl';
 
@@ -38,8 +36,8 @@ type iconLookup = Record<controlTag, SVGTemplateResult>;
  * A control can be edited using the standard wizard.
  * And when selecting a FCDA Element a custom event is fired, so other list can be updated.
  */
-@customElement('fcda-later-binding-list')
-export class FCDALaterBindingList extends LitElement {
+@customElement('fcda-binding-list')
+export class FcdaBindingList extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
   @property()
@@ -51,16 +49,14 @@ export class FCDALaterBindingList extends LitElement {
   @state()
   selectedFcdaElement: Element | undefined;
 
-  @property({ attribute: false })
-  iconControlLookup: iconLookup;
+  iconControlLookup: iconLookup = {
+    SampledValueControl: smvIcon,
+    GSEControl: gooseIcon,
+  };
 
   constructor() {
     super();
 
-    this.iconControlLookup = {
-      SampledValueControl: smvIcon,
-      GSEControl: gooseIcon,
-    };
     this.resetSelection = this.resetSelection.bind(this);
     parent.addEventListener('open-doc', this.resetSelection);
   }
@@ -151,7 +147,7 @@ export class FCDALaterBindingList extends LitElement {
       ${controlElements.length > 0
         ? html`<h1>
               ${translate(
-                `subscription.laterBinding.${this.controlTag}.controlBlockList.title`
+                `subscription.${this.controlTag}.controlBlockList.title`
               )}
             </h1>
             <filtered-list activatable>
@@ -193,7 +189,7 @@ export class FCDALaterBindingList extends LitElement {
             </filtered-list>`
         : html`<h1>
             ${translate(
-              `subscription.laterBinding.${this.controlTag}.controlBlockList.noControlBlockFound`
+              `subscription.${this.controlTag}.controlBlockList.noControlBlockFound`
             )}
           </h1>`}
     </section>`;

diff --git a/src/editors/subscription/foundation.ts b/src/editors/subscription/foundation.ts
@@ -53,6 +53,32 @@ export function newIEDSelectEvent(
   });
 }
 
+export interface FcdaSelectDetail {
+  controlElement: Element | undefined;
+  fcda: Element | undefined;
+}
+export type FcdaSelectEvent = CustomEvent<FcdaSelectDetail>;
+export function newFcdaSelectEvent(
+  controlElement: Element | undefined,
+  fcda: Element | undefined,
+  eventInitDict?: CustomEventInit<FcdaSelectDetail>
+): FcdaSelectEvent {
+  return new CustomEvent<FcdaSelectDetail>('fcda-select', {
+    bubbles: true,
+    composed: true,
+    ...eventInitDict,
+    detail: { controlElement, fcda, ...eventInitDict?.detail },
+  });
+}
+
+export function getFcdaTitleValue(fcdaElement: Element): string {
+  return `${fcdaElement.getAttribute('doName')}${
+    fcdaElement.hasAttribute('doName') && fcdaElement.hasAttribute('daName')
+      ? `.`
+      : ``
+  }${fcdaElement.getAttribute('daName')}`;
+}
+
 export function existExtRef(parentInputs: Element, fcda: Element): boolean {
   const iedName = fcda.closest('IED')?.getAttribute('name');
   if (!iedName) return false;
@@ -381,5 +407,6 @@ declare global {
   interface ElementEventMap {
     ['view']: ViewEvent;
     ['ied-select']: IEDSelectEvent;
+    ['fcda-select']: FcdaSelectEvent;
   }
 }