feat(zeroline): show SampledValueControl for IED and whole project (openscd#477)

* feat(wizards/sampledvaluecontrol): add select wizard

* feat(zeroline-pane): add button to trigger SMV select wizard

* feat(zeroline/ied-editor): access SampledValueControl elements

Author: JakobVogelsang

src/translations/de.ts

@@ -66,6 +66,7 @@ export const de: Translations = {
     iedsloading: 'IEDs werden geladen...',
     commmap: 'Kommunikationszuordnung',
     gsecontrol: 'GOOSEs anzeigen',
+    smvcontrol: 'Sampled Values anzeigen',
   },
   editing: {
     created: '{{ name }} hinzugefügt',
@@ -162,7 +163,7 @@ export const de: Translations = {
     searchHelper: 'IED auswählen',
     searchHelperDesc: '({{description}})',
     missing: 'Kein IED vorhanden',
-    toggleChildElements: "???"
+    toggleChildElements: '???',
   },
   powertransformer: {
     wizard: {

src/translations/en.ts

@@ -64,6 +64,7 @@ export const en = {
     iedsloading: 'Loading IEDs...',
     commmap: 'Communication mapping',
     gsecontrol: 'Show all GOOSEs',
+    smvcontrol: 'Show all Sampled Values',
   },
   editing: {
     created: 'Added {{ name }}',
@@ -156,10 +157,10 @@ export const en = {
     },
   },
   iededitor: {
-    searchHelper: "Select IED",
-    searchHelperDesc: "({{description}})",
+    searchHelper: 'Select IED',
+    searchHelperDesc: '({{description}})',
     missing: 'No IED',
-    toggleChildElements: "Toggle child elements"
+    toggleChildElements: 'Toggle child elements',
   },
   powertransformer: {
     wizard: {
@@ -168,7 +169,7 @@ export const en = {
       title: {
         edit: 'Edit power transformer',
       },
-    }
+    },
   },
   voltagelevel: {
     name: 'Voltage level',

src/wizards/sampledvaluecontrol.ts

@@ -0,0 +1,29 @@
+import { html } from 'lit-element';
+import { get } from 'lit-translate';
+
+import { identity, isPublic, Wizard } from '../foundation.js';
+
+export function selectSampledValueControlWizard(element: Element): Wizard {
+  const smvControls = Array.from(
+    element.querySelectorAll('SampledValueControl')
+  ).filter(isPublic);
+
+  return [
+    {
+      title: get('wizard.title.select', { tagName: 'SampledValueControl' }),
+      content: [
+        html`<filtered-list
+          >${smvControls.map(
+            smvControl =>
+              html`<mwc-list-item twoline value="${identity(smvControl)}"
+                ><span>${smvControl.getAttribute('name')}</span
+                ><span slot="secondary"
+                  >${identity(smvControl)}</span
+                ></mwc-list-item
+              >`
+          )}</filtered-list
+        >`,
+      ],
+    },
+  ];
+}

src/zeroline-pane.ts

@@ -18,11 +18,12 @@ import './zeroline/substation-editor.js';
 import './zeroline/ied-editor.js';
 import { Settings } from './Setting.js';
 import { communicationMappingWizard } from './wizards/commmap-wizards.js';
-import { gooseIcon } from './icons.js';
+import { gooseIcon, smvIcon } from './icons.js';
 import { isPublic, newWizardEvent } from './foundation.js';
 import { selectGseControlWizard } from './wizards/gsecontrol.js';
 import { wizards } from './wizards/wizard-library.js';
 import { getAttachedIeds } from './zeroline/foundation.js';
+import { selectSampledValueControlWizard } from './wizards/sampledvaluecontrol.js';
 
 function shouldShowIEDs(): boolean {
   return localStorage.getItem('showieds') === 'on';
@@ -47,6 +48,7 @@ export class ZerolinePane extends LitElement {
   @query('#commmap') commmap!: IconButton;
   @query('#showieds') showieds!: IconButtonToggle;
   @query('#gsecontrol') gsecontrol!: IconButton;
+  @query('#smvcontrol') smvcontrol!: IconButton;
   @query('#createsubstation') createsubstation!: IconButton;
 
   openCommunicationMapping(): void {
@@ -65,6 +67,11 @@ export class ZerolinePane extends LitElement {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  openSampledValueControlSelection(): void {
+    const wizard = selectSampledValueControlWizard(this.doc.documentElement);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   toggleShowIEDs(): void {
     if (shouldShowIEDs()) setShowIEDs('off');
     else setShowIEDs('on');
@@ -119,6 +126,13 @@ export class ZerolinePane extends LitElement {
               >${gooseIcon}</mwc-icon-button
             ></abbr
           >
+          <abbr title="${translate('zeroline.smvcontrol')}"
+            ><mwc-icon-button
+              id="smvcontrol"
+              @click="${() => this.openSampledValueControlSelection()}"
+              >${smvIcon}</mwc-icon-button
+            ></abbr
+          >
         </nav>
       </h1>
       ${this.renderIedContainer()}

src/zeroline/ied-editor.ts

@@ -13,9 +13,10 @@ import { Fab } from '@material/mwc-fab';
 
 import '../action-icon.js';
 import { createClientLnWizard } from '../wizards/clientln.js';
-import { gooseIcon } from '../icons.js';
+import { gooseIcon, smvIcon } from '../icons.js';
 import { newWizardEvent } from '../foundation.js';
 import { selectGseControlWizard } from '../wizards/gsecontrol.js';
+import { selectSampledValueControlWizard } from '../wizards/sampledvaluecontrol.js';
 
 /** [[`SubstationEditor`]] subeditor for a child-less `IED` element. */
 @customElement('ied-editor')
@@ -44,6 +45,11 @@ export class IedEditor extends LitElement {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  private openSmvControlSelection(): void {
+    const wizard = selectSampledValueControlWizard(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   render(): TemplateResult {
     return html`<action-icon label="${this.name}" icon="developer_board"
       ><mwc-fab
@@ -59,6 +65,12 @@ export class IedEditor extends LitElement {
         mini
         @click="${() => this.openGseControlSelection()}"
         ><mwc-icon slot="icon">${gooseIcon}</mwc-icon></mwc-fab
+      ><mwc-fab
+        slot="action"
+        class="selectsmv"
+        mini
+        @click="${() => this.openSmvControlSelection()}"
+        ><mwc-icon slot="icon">${smvIcon}</mwc-icon></mwc-fab
       ></action-icon
     > `;
   }

test/integration/zeroline-pane.test.ts

@@ -44,6 +44,20 @@ describe('zeroline-pane wizarding editing integration', () => {
     );
   });
 
+  it('opens selectSampledValueControlWizard for the complete SCL file', async () => {
+    zeroline.smvcontrol.click();
+    await parent.updateComplete;
+
+    expect(parent.wizardUI.dialog).to.exist;
+    const smvControlList = <FilteredList>(
+      parent.wizardUI.dialog?.querySelector('filtered-list')
+    );
+    await smvControlList.updateComplete;
+    expect(smvControlList.items.length).to.equal(
+      doc.querySelectorAll('SampledValueControl').length
+    );
+  });
+
   it('add Substation element with createSubstationWizard', async () => {
     expect(doc.querySelector('Substation[name="newSubstation"]')).to.not.exist;
     zeroline.createsubstation.click();