feat(editor/subscriber): Show counter for Subscriber Plugins (Logical Nodes / Later) (GOOSE/SMV)

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',

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/**/*"
-  ],  
-});
+  ],
+});

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';
+
+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"
+          .includeLaterBinding="${false}"
+          .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;
+    }
+  `;
+}

src/editors/GooseSubscriberLaterBinding.ts

@@ -1,6 +1,6 @@
-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';
 
 export default class GooseSubscribeLaterBindingPlugin extends LitElement {
@@ -10,16 +10,17 @@ export default class GooseSubscribeLaterBindingPlugin extends LitElement {
   render(): TemplateResult {
     return html`<div>
       <div class="container">
-        <fcda-later-binding-list
+        <fcda-binding-list
           class="column"
-          .doc=${this.doc}
           controlTag="GSEControl"
+          .includeLaterBinding="${true}"
+          .doc="${this.doc}"
         >
-        </fcda-later-binding-list>
+        </fcda-binding-list>
         <extref-later-binding-list
           class="column"
           controlTag="GSEControl"
-          .doc=${this.doc}
+          .doc="${this.doc}"
         >
         </extref-later-binding-list>
       </div>

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}

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';
+
+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"
+          .includeLaterBinding="${false}"
+          .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;
+    }
+  `;
+}

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,16 +11,17 @@ 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"
+          .includeLaterBinding="${true}"
+          .doc="${this.doc}"
         >
-        </fcda-later-binding-list>
+        </fcda-binding-list>
         <extref-later-binding-list
           class="column"
-          .doc=${this.doc}
           controlTag="SampledValueControl"
+          .doc="${this.doc}"
         >
         </extref-later-binding-list>
       </div>

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>`;