Added new Communication 104 Editor framework.

Signed-off-by: Dennis Labordus <dennis.labordus@alliander.com>

public/js/plugins.js

@@ -41,6 +41,13 @@ export const officialPlugins = [
     default: true,
     kind: 'editor',
   },
+  {
+    name: '104',
+    src: '/src/editors/Communication104.js',
+    icon: 'settings_ethernet',
+    default: false,
+    kind: 'editor',
+  },
   {
     name: 'Templates',
     src: '/src/editors/Templates.js',

src/editors/Communication104.ts

@@ -0,0 +1,106 @@
+import {
+  css,
+  html,
+  LitElement,
+  property,
+  query,
+  TemplateResult
+} from "lit-element";
+import {translate} from "lit-translate";
+
+import '@material/mwc-fab';
+import '@material/mwc-radio';
+import '@material/mwc-formfield';
+
+import {RadioListItem} from "@material/mwc-list/mwc-radio-list-item";
+
+import './communication104/network-container.js'
+import './communication104/values-container.js'
+
+import {
+  newViewEvent,
+  View,
+  VIEW_EVENT_NAME,
+  ViewEvent
+} from "./communication104/foundation/foundation.js";
+
+/** Defining view outside the class, which makes it persistent. */
+let selectedViewCommunication104Plugin: View = View.VALUES;
+
+/** An editor [[`plugin`]] for editing the `IED` section. */
+export default class Communication104Plugin extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property()
+  doc!: XMLDocument;
+
+  @query('#byValuesRadio')
+  byValuesRadio!: RadioListItem;
+
+  @query('#byNetworkRadio')
+  byNetworkRadio!: RadioListItem;
+
+  @query('div[class="container"]')
+  listDiv!: Element;
+
+  constructor() {
+    super();
+
+    this.addEventListener(VIEW_EVENT_NAME, (evt: ViewEvent) => {
+      selectedViewCommunication104Plugin = evt.detail.view;
+      this.requestUpdate();
+    });
+  }
+
+  firstUpdated(): void {
+    selectedViewCommunication104Plugin == View.VALUES
+      ? this.byValuesRadio.setAttribute('checked', '')
+      : this.byNetworkRadio.setAttribute('checked', '')
+  }
+
+  render(): TemplateResult {
+    return html`<div>
+      <mwc-formfield label="${translate('communication104.view.valuesView')}">
+        <mwc-radio
+          id="byValuesRadio"
+          name="view"
+          value="values"
+          @checked=${() => this.listDiv.dispatchEvent(newViewEvent(View.VALUES))}
+        ></mwc-radio>
+      </mwc-formfield>
+      <mwc-formfield label="${translate('communication104.view.networkView')}">
+        <mwc-radio
+          id="byNetworkRadio"
+          name="view"
+          value="network"
+          @checked=${() => this.listDiv.dispatchEvent(newViewEvent(View.NETWORK))}
+        ></mwc-radio>
+      </mwc-formfield>
+      <div class="container">
+        ${selectedViewCommunication104Plugin == View.VALUES
+            ? html`<values-104-container class="row" .doc=${this.doc}></values-104-container>`
+            : html`<network-104-container class="row" .doc=${this.doc}></network-104-container>`
+        }
+      </div>
+    </div>`;
+  }
+
+  static styles = css`
+     :host {
+      width: 100vw;
+    }
+
+    .container {
+      display: flex;
+      padding: 8px 6px 16px;
+      height: 86vh;
+    }
+
+    .row {
+      flex: 50%;
+      margin: 0px 6px 0px;
+      min-width: 300px;
+      height: 100%;
+      overflow-y: scroll;
+    }
+ `;
+}

src/editors/communication104/foundation/foundation.ts

@@ -0,0 +1,32 @@
+/**
+ * Enumeration stating the current view of the 104 plugin.
+ */
+export enum View {
+  VALUES,
+  NETWORK
+}
+
+export const VIEW_EVENT_NAME = 'view-change-104-plugin';
+
+// Objects needed to register and fire the change of a view within the Communication 104 Plugin
+export interface ViewDetail {
+  view: View;
+}
+export type ViewEvent = CustomEvent<ViewDetail>;
+export function newViewEvent(
+  view: View,
+  eventInitDict?: CustomEventInit<ViewDetail>
+): ViewEvent {
+  return new CustomEvent<ViewDetail>(VIEW_EVENT_NAME, {
+    bubbles: true,
+    composed: true,
+    ...eventInitDict,
+    detail: { view, ...eventInitDict?.detail },
+  });
+}
+
+declare global {
+  interface ElementEventMap {
+    [VIEW_EVENT_NAME]: ViewEvent;
+  }
+}

src/editors/communication104/network-container.ts

@@ -0,0 +1,13 @@
+import {css, customElement, html, LitElement, TemplateResult} from "lit-element";
+
+@customElement('network-104-container')
+export class NetworkContainer extends LitElement {
+  render(): TemplateResult {
+    return html`
+      <p>Network Container</p>
+    `;
+  }
+
+  static styles = css`
+  `;
+}

src/editors/communication104/values-container.ts

@@ -0,0 +1,13 @@
+import {css, customElement, html, LitElement, TemplateResult} from "lit-element";
+
+@customElement('values-104-container')
+export class ValuesContainer extends LitElement {
+  render(): TemplateResult {
+    return html`
+      <p>Values Container</p>
+    `;
+  }
+
+  static styles = css`
+  `;
+}

src/translations/de.ts

@@ -355,6 +355,12 @@ export const de: Translations = {
       noSampledValuesSelected: 'Keinen Kontrollblock ausgewählt',
     },
   },
+  communication104: {
+    view: {
+      valuesView: 'Values',
+      networkView: 'Network',
+    }
+  },
   'enum-val': {
     wizard: {
       title: {

src/translations/en.ts

@@ -352,6 +352,12 @@ export const en = {
       noSampledValuesSelected: 'No control block selected',
     },
   },
+  communication104: {
+    view: {
+      valuesView: 'Values',
+      networkView: 'Network',
+    }
+  },
   'enum-val': {
     wizard: {
       title: {

test/integration/__snapshots__/open-scd.test.snap.js

@@ -652,6 +652,21 @@ snapshots["open-scd looks like its snapshot"] =
       </mwc-icon>
       Communication
     </mwc-check-list-item>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      tabindex="-1"
+      value="/src/editors/Communication104.js"
+    >
+      <mwc-icon slot="meta">
+        settings_ethernet
+      </mwc-icon>
+      104
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"

test/integration/editors/Communication104.test.ts

@@ -0,0 +1,44 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import '../../mock-wizard.js';
+
+import Communication104 from '../../../src/editors/Communication104.js';
+import { Editing } from '../../../src/Editing.js';
+import { Wizarding } from '../../../src/Wizarding.js';
+
+describe('Communication 104 Plugin', () => {
+  customElements.define(
+    'communication104-plugin',
+    Wizarding(Editing(Communication104))
+  );
+  let element: Communication104;
+  let doc: XMLDocument;
+
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/communication.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+    element = await fixture(
+      html`<communication104-plugin .doc=${doc}></communication104-plugin>`
+    );
+  });
+
+  describe('in Values view', () => {
+      it('the plugin looks like the latest snapshot', async () => {
+        await expect(element).shadowDom.to.equalSnapshot();
+      });
+  });
+
+  describe('in Network view', () => {
+    beforeEach(async () => {
+      const radioButton = element.shadowRoot?.querySelector('#byNetworkRadio');
+      (<HTMLElement>radioButton).click();
+      await element.updateComplete;
+    });
+
+    it('the plugin looks like the latest snapshot', async () => {
+      await expect(element).shadowDom.to.equalSnapshot();
+    });
+  });
+});

test/integration/editors/sampledvalues/SampledValues.test.ts → test/integration/editors/SampledValues.test.ts

@@ -1,10 +1,10 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
-import '../../../mock-wizard.js';
+import '../../mock-wizard.js';
 
-import SampledValues from '../../../../src/editors/SampledValues.js';
-import { Editing } from '../../../../src/Editing.js';
-import { Wizarding } from '../../../../src/Wizarding.js';
+import SampledValues from '../../../src/editors/SampledValues.js';
+import { Editing } from '../../../src/Editing.js';
+import { Wizarding } from '../../../src/Wizarding.js';
 
 describe('Sampled Values Plugin', () => {
   customElements.define('smv-plugin', Wizarding(Editing(SampledValues)));

test/integration/editors/subscription/Subscription.test.ts → test/integration/editors/Subscription.test.ts

@@ -1,10 +1,10 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
-import '../../../mock-wizard.js';
+import '../../mock-wizard.js';
 
-import Subscription from '../../../../src/editors/Subscription.js';
-import { Editing } from '../../../../src/Editing.js';
-import { Wizarding } from '../../../../src/Wizarding.js';
+import Subscription from '../../../src/editors/Subscription.js';
+import { Editing } from '../../../src/Editing.js';
+import { Wizarding } from '../../../src/Wizarding.js';
 
 describe('Subscription Plugin', () => {
   customElements.define(
@@ -197,7 +197,7 @@ describe('Subscription Plugin', () => {
       (<HTMLElement>radioButton).click();
       await element.updateComplete;
     });
-    
+
     describe('initially', () => {
       it('the plugin looks like the latest snapshot', async () => {
         await expect(element).shadowDom.to.equalSnapshot();

test/integration/editors/__snapshots__/Communication104.test.snap.js

@@ -0,0 +1,61 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["Communication 104 Plugin in Values view the plugin looks like the latest snapshot"] = 
+`<div>
+  <mwc-formfield label="[communication104.view.valuesView]">
+    <mwc-radio
+      checked=""
+      id="byValuesRadio"
+      name="view"
+      value="values"
+    >
+    </mwc-radio>
+  </mwc-formfield>
+  <mwc-formfield label="[communication104.view.networkView]">
+    <mwc-radio
+      id="byNetworkRadio"
+      name="view"
+      value="network"
+    >
+    </mwc-radio>
+  </mwc-formfield>
+  <div class="container">
+    <values-104-container class="row">
+    </values-104-container>
+  </div>
+</div>
+<wizard-dialog>
+</wizard-dialog>
+`;
+/* end snapshot Communication 104 Plugin in Values view the plugin looks like the latest snapshot */
+
+snapshots["Communication 104 Plugin in Network view the plugin looks like the latest snapshot"] = 
+`<div>
+  <mwc-formfield label="[communication104.view.valuesView]">
+    <mwc-radio
+      id="byValuesRadio"
+      name="view"
+      value="values"
+    >
+    </mwc-radio>
+  </mwc-formfield>
+  <mwc-formfield label="[communication104.view.networkView]">
+    <mwc-radio
+      checked=""
+      id="byNetworkRadio"
+      name="view"
+      value="network"
+    >
+    </mwc-radio>
+  </mwc-formfield>
+  <div class="container">
+    <network-104-container class="row">
+    </network-104-container>
+  </div>
+</div>
+<wizard-dialog>
+</wizard-dialog>
+`;
+/* end snapshot Communication 104 Plugin in Network view the plugin looks like the latest snapshot */
+