feat(plugins/Subscription): Create 'Subscription' plugin for GOOSE subscriptions

public/js/plugins.js

@@ -20,6 +20,13 @@ export const officialPlugins = [
     default: false,
     kind: 'editor',
   },
+  {
+    name: 'Subscription',
+    src: '/src/editors/Subscription.js',
+    icon: 'link',
+    default: true,
+    kind: 'editor',
+  },
   {
     name: 'Communication',
     src: '/src/editors/Communication.js',

src/editors/Subscription.ts

@@ -0,0 +1,49 @@
+import { LitElement, html, TemplateResult, property, css } from 'lit-element';
+
+import '@material/mwc-fab';
+
+import './subscription/subscriber-ied-list.js';
+import './subscription/publisher-goose-list.js';
+
+/** An editor [[`plugin`]] for subscribing IEDs to GOOSE messages using the ABB subscription method. */
+export default class SubscriptionABBPlugin extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property()
+  doc!: XMLDocument;
+
+  render(): TemplateResult {
+    return html`
+    <div id="containerTemplates">
+      <section>
+        <publisher-goose-list .doc=${this.doc}></publisher-goose-list>
+      </section>
+      <section>
+        <subscriber-ied-list .doc=${this.doc}></subscriber-ied-list>
+      </section>
+    </div>`;
+  }
+
+  static styles = css`
+    :host {
+      width: 100vw;
+    }
+
+    section {
+      width: 49vw;
+    }
+
+    #containerTemplates {
+      display: grid;
+      grid-gap: 12px;
+      padding: 8px 12px 16px;
+      box-sizing: border-box;
+      grid-template-columns: repeat(auto-fit, minmax(316px, auto));
+    }
+
+    @media (max-width: 387px) {
+      #containerTemplates {
+        grid-template-columns: repeat(auto-fit, minmax(196px, auto));
+      }
+    }
+  `;
+}

src/editors/subscription/goose-message.ts

@@ -0,0 +1,40 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+import { newGOOSEDataSetEvent } from '../../foundation.js';
+import { gooseIcon } from '../../icons.js';
+
+@customElement('goose-message')
+export class GOOSEMessage extends LitElement {
+  /** Holding the GSEControl element */
+  @property({ attribute: false })
+  element!: Element;
+
+  private onGooseSelect = () => {
+    const ln = this.element.parentElement;
+    const dataset = ln?.querySelector(`DataSet[name=${this.element.getAttribute('datSet')}]`);
+    document.querySelector('open-scd')!.dispatchEvent(
+      newGOOSEDataSetEvent(
+        this.element.closest('IED')?.getAttribute('name') ?? '',
+        this.element.getAttribute('name') ?? '',
+        dataset!
+      )
+    );
+  };
+
+  render(): TemplateResult {
+    return html`<mwc-list-item
+      @click=${this.onGooseSelect}
+      graphic="large">
+      <span>${this.element.getAttribute('name')}</span>
+      <mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
+    </mwc-list-item>`;
+  }
+
+  static styles = css``;
+}

src/editors/subscription/publisher-goose-list.ts

@@ -0,0 +1,73 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import './goose-message.js';
+
+import { translate } from 'lit-translate';
+import { compareNames, getNameAttribute } from '../../foundation.js';
+import { styles } from '../templates/foundation.js';
+
+/** An sub element for showing all published GOOSE messages per IED. */
+@customElement('publisher-goose-list')
+export class PublisherGOOSEList extends LitElement {
+  @property()
+  doc!: XMLDocument;
+
+  private get ieds() : Element[] {
+    return (this.doc)
+      ? Array.from(this.doc.querySelectorAll(':root > IED')).sort((a,b) => compareNames(a,b))
+      : [];
+  }
+
+  /**
+   * Get all the published GOOSE messages.
+   * @param ied - The IED to search through.
+   * @returns All the published GOOSE messages of this specific IED.
+   */
+  private getGSEControls(ied: Element) : Element[] {
+    return Array.from(ied.querySelectorAll(':scope > AccessPoint > Server > LDevice > LN0[lnClass="LLN0"] > GSEControl'));
+  }
+
+  render(): TemplateResult {
+    return html`
+    <section>
+      <h1>${translate('subscription.publisherGoose.title')}</h1>
+      <mwc-list>
+        ${this.ieds.map(ied =>
+          ied.querySelector('GSEControl') ?
+            html`
+              <mwc-list-item noninteractive graphic="icon">
+                <span class="iedListTitle">${getNameAttribute(ied)}</span>
+                <mwc-icon slot="graphic">developer_board</mwc-icon>
+              </mwc-list-item>
+              <li divider role="separator"></li>
+              ${this.getGSEControls(ied).map(control =>
+                html`<goose-message
+                  .element=${control}
+                ></goose-message>`)}
+            ` : ``
+          )
+        }
+        </mwc-list>
+      </section>`;
+  }
+
+  static styles = css`
+    ${styles}
+
+    mwc-list {
+      height: 100vh;
+      overflow-y: scroll;
+    }
+
+    .iedListTitle {
+      font-weight: bold;
+    }
+  `;
+}