feat(Subscription): Select by Subscriber in Subscriptions Editor

Author: Rob Tjalma

src/editors/Subscription.ts

@@ -1,23 +1,76 @@
-import { LitElement, html, TemplateResult, property, css } from 'lit-element';
+import { LitElement, html, TemplateResult, property, css, query } from 'lit-element';
 
 import '@material/mwc-fab';
+import '@material/mwc-radio';
+import '@material/mwc-formfield';
 
-import './subscription/subscriber-ied-list-goose.js';
-import './subscription/publisher-goose-list.js';
+import './subscription/subscriber-list.js';
+import './subscription/goose-publisher-list.js';
+import './subscription/goose-subscriber-list.js';
+import { translate } from 'lit-translate';
+import { newViewEvent, View, ViewEvent } from './subscription/foundation.js';
+import { RadioListItem } from '@material/mwc-list/mwc-radio-list-item';
+
+/** Defining view outside the class, which makes it persistent. */
+let view: View = View.GOOSE_PUBLISHER;
 
 /** 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;
 
+  @query('#byGooseRadio')
+  byGooseRadio!: RadioListItem;
+
+  @query('#byIedRadio')
+  byIedRadio!: RadioListItem;
+
+  @query('div[class="container"]')
+  listDiv!: Element;
+
+  constructor() {
+    super();
+    this.addEventListener('view', (evt: ViewEvent) => {
+      view = evt.detail.view;
+      this.requestUpdate();
+    });
+  }
+
+  firstUpdated(): void {
+    view == View.GOOSE_PUBLISHER
+      ? this.byGooseRadio.setAttribute('checked', '')
+      : this.byIedRadio.setAttribute('checked', '')
+  }
+
   render(): TemplateResult {
-    return html` <div class="container">
-      <publisher-goose-list class="row" .doc=${this.doc}></publisher-goose-list>
-      <subscriber-ied-list-goose
-        class="row"
-        .doc=${this.doc}
-      ></subscriber-ied-list-goose>
+    return html`<div>
+      <mwc-formfield label="${translate('subscription.view.publisherView')}">
+        <mwc-radio
+          id="byGooseRadio"
+          name="view"
+          value="goose"
+          @checked=${() => this.listDiv.dispatchEvent(newViewEvent(View.GOOSE_PUBLISHER))}
+        ></mwc-radio>
+      </mwc-formfield>
+      <mwc-formfield label="${translate('subscription.view.subscriberView')}">
+        <mwc-radio
+          id="byIedRadio"
+          name="view"
+          value="ied"
+          @checked=${() => this.listDiv.dispatchEvent(newViewEvent(View.GOOSE_SUBSCRIBER))}
+        ></mwc-radio>
+      </mwc-formfield>
+      <div class="container">
+        ${view == View.GOOSE_PUBLISHER
+          ? html`<goose-publisher-list class="row" .doc=${this.doc}></goose-publisher-list>`
+          : html`<goose-subscriber-list class="row" .doc=${this.doc}></goose-subscriber-list>`
+        }
+        <subscriber-list
+          class="row"
+          .doc=${this.doc}
+        ></subscriber-list>
+      </div>
     </div>`;
   }
 

src/editors/subscription/foundation.ts

@@ -9,6 +9,14 @@ export enum SubscribeStatus {
   None,
 }
 
+/**
+ * Enumeration stating the current view of the Subscription plugin.
+ */
+export enum View {
+  GOOSE_PUBLISHER,
+  GOOSE_SUBSCRIBER
+}
+
 export interface GOOSESelectDetail {
   gseControl: Element | undefined;
   dataset: Element | undefined;
@@ -27,16 +35,48 @@ export function newGOOSESelectEvent(
   });
 }
 
-export interface IEDSubscriptionDetail {
+export interface IEDSelectDetail {
+  ied: Element | undefined;
+}
+export type IEDSelectEvent = CustomEvent<IEDSelectDetail>;
+export function newIEDSelectEvent(
+  ied: Element | undefined,
+  eventInitDict?: CustomEventInit<IEDSelectDetail>
+): IEDSelectEvent {
+  return new CustomEvent<IEDSelectDetail>('ied-select', {
+    bubbles: true,
+    composed: true,
+    ...eventInitDict,
+    detail: { ied, ...eventInitDict?.detail },
+  });
+}
+
+export interface ViewDetail {
+  view: View;
+}
+export type ViewEvent = CustomEvent<ViewDetail>;
+export function newViewEvent(
+  view: View,
+  eventInitDict?: CustomEventInit<ViewDetail>
+): ViewEvent {
+  return new CustomEvent<ViewDetail>('view', {
+    bubbles: true,
+    composed: true,
+    ...eventInitDict,
+    detail: { view, ...eventInitDict?.detail },
+  });
+}
+
+export interface SubscriptionDetail {
   element: Element;
   subscribeStatus: SubscribeStatus;
 }
-export type IEDSubscriptionEvent = CustomEvent<IEDSubscriptionDetail>;
-export function newIEDSubscriptionEvent(
+export type SubscriptionEvent = CustomEvent<SubscriptionDetail>;
+export function newSubscriptionEvent(
   element: Element,
   subscribeStatus: SubscribeStatus
-): IEDSubscriptionEvent {
-  return new CustomEvent<IEDSubscriptionDetail>('ied-subscription', {
+): SubscriptionEvent {
+  return new CustomEvent<SubscriptionDetail>('subscription', {
     bubbles: true,
     composed: true,
     detail: { element, subscribeStatus },
@@ -114,6 +154,8 @@ export const styles = css`
 declare global {
   interface ElementEventMap {
     ['goose-dataset']: GOOSESelectEvent;
-    ['ied-subscription']: IEDSubscriptionEvent;
+    ['subscription']: SubscriptionEvent;
+    ['ied-select']: IEDSelectEvent;
+    ['view']: ViewEvent;
   }
 }

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

@@ -26,8 +26,8 @@ function onOpenDocResetSelectedGooseMsg() {
 addEventListener('open-doc', onOpenDocResetSelectedGooseMsg);
 
 /** An sub element for showing all published GOOSE messages per IED. */
-@customElement('publisher-goose-list')
-export class PublisherGOOSEList extends LitElement {
+@customElement('goose-publisher-list')
+export class GoosePublisherList extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
 
@@ -52,13 +52,13 @@ export class PublisherGOOSEList extends LitElement {
     );
   }
 
-  private onGooseSelect(element: Element): void {
-    const ln = element.parentElement;
+  private onGooseSelect(gseControl: Element): void {
+    const ln = gseControl.parentElement;
     const dataset = ln?.querySelector(
-      `DataSet[name=${element.getAttribute('datSet')}]`
+      `DataSet[name=${gseControl.getAttribute('datSet')}]`
     );
 
-    selectedGooseMsg = element;
+    selectedGooseMsg = gseControl;
     selectedDataSet = dataset;
 
     this.dispatchEvent(
@@ -69,12 +69,12 @@ export class PublisherGOOSEList extends LitElement {
     );
   }
 
-  renderGoose(element: Element): TemplateResult {
+  renderGoose(gseControl: Element): TemplateResult {
     return html`<mwc-list-item
-      @click=${() => this.onGooseSelect(element)}
+      @click=${() => this.onGooseSelect(gseControl)}
       graphic="large"
     >
-      <span>${element.getAttribute('name')}</span>
+      <span>${gseControl.getAttribute('name')}</span>
       <mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
     </mwc-list-item>`;
   }
@@ -100,8 +100,8 @@ export class PublisherGOOSEList extends LitElement {
                 <mwc-icon slot="graphic">developer_board</mwc-icon>
               </mwc-list-item>
               <li divider role="separator"></li>
-              ${this.getGSEControls(ied).map(control =>
-                this.renderGoose(control)
+              ${this.getGSEControls(ied).map(gseControl =>
+                this.renderGoose(gseControl)
               )}
             `
         )}

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

@@ -0,0 +1,79 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+import { translate } from 'lit-translate';
+
+import '@material/mwc-icon';
+import '@material/mwc-list/mwc-list-item';
+
+import '../../filtered-list.js';
+import { compareNames, getNameAttribute } from '../../foundation.js';
+import { newIEDSelectEvent, styles } from './foundation.js';
+
+let selectedIed: Element | undefined;
+
+function onOpenDocResetSelectedGooseMsg() {
+  selectedIed = undefined;
+}
+addEventListener('open-doc', onOpenDocResetSelectedGooseMsg);
+
+@customElement('goose-subscriber-list')
+export class GooseSubscriberList extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  private get ieds(): Element[] {
+    return this.doc
+      ? Array.from(this.doc.querySelectorAll(':root > IED')).sort((a, b) =>
+          compareNames(a, b)
+        )
+      : [];
+  }
+
+  private onIedSelect(element: Element): void {
+    selectedIed = element;
+
+    this.dispatchEvent(
+      newIEDSelectEvent(
+        selectedIed
+      )
+    );
+  }
+
+  protected firstUpdated(): void {
+    this.dispatchEvent(
+      newIEDSelectEvent(
+        selectedIed
+      )
+    );
+  }
+
+  render(): TemplateResult {
+    return html` <section tabindex="0">
+      <h1>${translate('subscription.subscriberGoose.title')}</h1>
+      <filtered-list>
+        ${this.ieds.map(
+          ied =>
+            html`
+              <mwc-list-item
+                @click=${() => this.onIedSelect(ied)}
+                graphic="icon"
+              >
+                <span>${getNameAttribute(ied)}</span>
+                <mwc-icon slot="graphic">developer_board</mwc-icon>
+              </mwc-list-item>
+            `
+        )}
+      </filtered-list>
+    </section>`;
+  }
+
+  static styles = css`
+    ${styles}
+  `;
+}