feat(editors/publisher): filter for control blocks and DataSets (open…

…scd#844)

* feat(editors/publisher): filter for control blocks and DataSets

Initial publisher plugin allowing to filter for ReportControl, GSEControl, SampledValueControl and DataSets without showing and editing their details

* test(open-scd): update snapshots

public/js/plugins.js

@@ -55,6 +55,13 @@ export const officialPlugins = [
     default: true,
     kind: 'editor',
   },
+  {
+    name: 'Publisher',
+    src: '/src/editors/Publisher.js',
+    icon: 'publish',
+    default: false,
+    kind: 'editor',
+  },
   {
     name: 'Open project',
     src: '/src/menu/OpenProject.js',

src/editors/Publisher.ts

@@ -0,0 +1,94 @@
+import {
+  css,
+  html,
+  LitElement,
+  property,
+  state,
+  TemplateResult,
+} from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+
+import '@material/mwc-formfield';
+import '@material/mwc-radio';
+
+import './publisher/report-control-editor.js';
+import './publisher/gse-control-editor.js';
+import './publisher/sampled-value-control-editor.js';
+import './publisher/data-set-editor.js';
+
+/** An editor [[`plugin`]] to configure `Report`, `GOOSE`, `SampledValue` control blocks and its `DataSet` */
+export default class PublisherPlugin extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property({ attribute: false })
+  doc!: XMLDocument;
+  @state()
+  private publisherType: 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet' =
+    'GOOSE';
+
+  render(): TemplateResult {
+    return html`<div class="publishertypeselector">
+        <mwc-formfield label="Report"
+          ><mwc-radio
+            value="Report"
+            ?checked=${this.publisherType === 'Report'}
+            @checked=${() => (this.publisherType = 'Report')}
+          ></mwc-radio></mwc-formfield
+        ><mwc-formfield label="GOOSE"
+          ><mwc-radio
+            value="GOOSE"
+            ?checked=${this.publisherType === 'GOOSE'}
+            @checked=${() => (this.publisherType = 'GOOSE')}
+          ></mwc-radio></mwc-formfield
+        ><mwc-formfield label="SampledValue"
+          ><mwc-radio
+            value="SampledValue"
+            ?checked=${this.publisherType === 'SampledValue'}
+            @checked=${() => (this.publisherType = 'SampledValue')}
+          ></mwc-radio></mwc-formfield
+        ><mwc-formfield label="DataSet"
+          ><mwc-radio
+            value="DataSet"
+            ?checked=${this.publisherType === 'DataSet'}
+            @checked=${() => (this.publisherType = 'DataSet')}
+          ></mwc-radio
+        ></mwc-formfield>
+      </div>
+      <report-control-editor
+        .doc=${this.doc}
+        class="${classMap({
+          hidden: this.publisherType !== 'Report',
+        })}"
+      ></report-control-editor
+      ><gse-control-editor
+        .doc=${this.doc}
+        class="${classMap({
+          hidden: this.publisherType !== 'GOOSE',
+        })}"
+      ></gse-control-editor
+      ><sampled-value-control-editor
+        .doc=${this.doc}
+        class="${classMap({
+          hidden: this.publisherType !== 'SampledValue',
+        })}"
+      ></sampled-value-control-editor
+      ><data-set-editor
+        .doc=${this.doc}
+        class="${classMap({
+          hidden: this.publisherType !== 'DataSet',
+        })}"
+      ></data-set-editor>`;
+  }
+
+  static styles = css`
+    .hidden {
+      display: none;
+    }
+
+    .publishertypeselector {
+      margin: 4px 8px 16px;
+      background-color: var(--mdc-theme-surface);
+      width: calc(100% - 16px);
+      justify-content: space-around;
+    }
+  `;
+}

src/editors/publisher/data-set-editor.ts

@@ -0,0 +1,59 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+import { compareNames, identity } from '../../foundation.js';
+
+@customElement('data-set-editor')
+export class DataSetEditor extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  renderList(): TemplateResult {
+    return html`<filtered-list
+      >${Array.from(this.doc.querySelectorAll('IED'))
+        .sort(compareNames)
+        .flatMap(ied => {
+          const ieditem = html`<mwc-list-item
+              class="listitem header"
+              noninteractive
+              graphic="icon"
+            >
+              <span>${ied.getAttribute('name')}</span>
+              <mwc-icon slot="graphic">developer_board</mwc-icon>
+            </mwc-list-item>
+            <li divider role="separator"></li>`;
+
+          const dataSets = Array.from(ied.querySelectorAll('DataSet')).map(
+            reportCb =>
+              html`<mwc-list-item twoline value="${identity(reportCb)}"
+                ><span>${reportCb.getAttribute('name')}</span
+                ><span slot="secondary">${identity(reportCb)}</span>
+              </mwc-list-item>`
+          );
+
+          return [ieditem, ...dataSets];
+        })}</filtered-list
+    >`;
+  }
+
+  render(): TemplateResult {
+    return html`${this.renderList()}`;
+  }
+
+  static styles = css`
+    filtered-list {
+      margin: 4px 8px 16px;
+      background-color: var(--mdc-theme-surface);
+    }
+
+    .listitem.header {
+      font-weight: 500;
+    }
+  `;
+}

src/editors/publisher/gse-control-editor.ts

@@ -0,0 +1,71 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-icon';
+
+import '../../filtered-list.js';
+import { compareNames, identity } from '../../foundation.js';
+import { gooseIcon } from '../../icons/icons.js';
+
+@customElement('gse-control-editor')
+export class GseControlEditor extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  renderList(): TemplateResult {
+    return html`<filtered-list
+      >${Array.from(this.doc.querySelectorAll('IED'))
+        .sort(compareNames)
+        .flatMap(ied => {
+          const ieditem = html`<mwc-list-item
+              class="listitem header"
+              noninteractive
+              graphic="icon"
+            >
+              <span>${ied.getAttribute('name')}</span>
+              <mwc-icon slot="graphic">developer_board</mwc-icon>
+            </mwc-list-item>
+            <li divider role="separator"></li>`;
+
+          const gseControls = Array.from(
+            ied.querySelectorAll('GSEControl')
+          ).map(
+            reportCb =>
+              html`<mwc-list-item
+                twoline
+                value="${identity(reportCb)}"
+                graphic="icon"
+                ><span>${reportCb.getAttribute('name')}</span
+                ><span slot="secondary">${identity(reportCb)}</span>
+                <mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
+              </mwc-list-item>`
+          );
+
+          return [ieditem, ...gseControls];
+        })}</filtered-list
+    >`;
+  }
+
+  render(): TemplateResult {
+    return html`${this.renderList()}`;
+  }
+
+  static styles = css`
+    filtered-list {
+      margin: 4px 8px 16px;
+      background-color: var(--mdc-theme-surface);
+    }
+
+    .listitem.header {
+      font-weight: 500;
+    }
+  `;
+}

src/editors/publisher/report-control-editor.ts

@@ -0,0 +1,69 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-icon';
+
+import '../../filtered-list.js';
+import { compareNames, identity } from '../../foundation.js';
+import { reportIcon } from '../../icons/icons.js';
+
+@customElement('report-control-editor')
+export class ReportControlEditor extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  renderList(): TemplateResult {
+    return html`<filtered-list
+      >${Array.from(this.doc.querySelectorAll('IED'))
+        .sort(compareNames)
+        .flatMap(ied => {
+          const ieditem = html`<mwc-list-item
+              class="listitem header"
+              noninteractive
+              graphic="icon"
+            >
+              <span>${ied.getAttribute('name')}</span>
+              <mwc-icon slot="graphic">developer_board</mwc-icon>
+            </mwc-list-item>
+            <li divider role="separator"></li>`;
+
+          const reports = Array.from(ied.querySelectorAll('ReportControl')).map(
+            reportCb =>
+              html`<mwc-list-item
+                twoline
+                value="${identity(reportCb)}"
+                graphic="icon"
+                ><span>${reportCb.getAttribute('name')}</span
+                ><span slot="secondary">${identity(reportCb)}</span>
+                <mwc-icon slot="graphic">${reportIcon}</mwc-icon>
+              </mwc-list-item>`
+          );
+
+          return [ieditem, ...reports];
+        })}</filtered-list
+    >`;
+  }
+
+  render(): TemplateResult {
+    return html`${this.renderList()}`;
+  }
+
+  static styles = css`
+    filtered-list {
+      margin: 4px 8px 16px;
+      background-color: var(--mdc-theme-surface);
+    }
+
+    .listitem.header {
+      font-weight: 500;
+    }
+  `;
+}

src/editors/publisher/sampled-value-control-editor.ts

@@ -0,0 +1,71 @@
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
+
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-icon';
+
+import '../../filtered-list.js';
+import { compareNames, identity } from '../../foundation.js';
+import { smvIcon } from '../../icons/icons.js';
+
+@customElement('sampled-value-control-editor')
+export class SampledValueControlEditor extends LitElement {
+  /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  renderList(): TemplateResult {
+    return html`<filtered-list
+      >${Array.from(this.doc.querySelectorAll('IED'))
+        .sort(compareNames)
+        .flatMap(ied => {
+          const ieditem = html`<mwc-list-item
+              class="listitem header"
+              noninteractive
+              graphic="icon"
+            >
+              <span>${ied.getAttribute('name')}</span>
+              <mwc-icon slot="graphic">developer_board</mwc-icon>
+            </mwc-list-item>
+            <li divider role="separator"></li>`;
+
+          const sampledValueControls = Array.from(
+            ied.querySelectorAll('SampledValueControl')
+          ).map(
+            reportCb =>
+              html`<mwc-list-item
+                twoline
+                value="${identity(reportCb)}"
+                graphic="icon"
+                ><span>${reportCb.getAttribute('name')}</span
+                ><span slot="secondary">${identity(reportCb)}</span>
+                <mwc-icon slot="graphic">${smvIcon}</mwc-icon>
+              </mwc-list-item>`
+          );
+
+          return [ieditem, ...sampledValueControls];
+        })}</filtered-list
+    >`;
+  }
+
+  render(): TemplateResult {
+    return html`${this.renderList()}`;
+  }
+
+  static styles = css`
+    filtered-list {
+      margin: 4px 8px 16px;
+      background-color: var(--mdc-theme-surface);
+    }
+
+    .listitem.header {
+      font-weight: 500;
+    }
+  `;
+}