feat(public/templates): add logical node classes (#320)

* feat(public/templates): add more LNodeTypes and its children

* fix(public/templates): missing references

* fix(public/templates): found by the validators :)

* fix(templates): fix reference issues on create DataTypeTemplates

* feat(lnodetype-wizard): allow multiple lnClass from templates

* test(templates): update snapshots

* test(templates): update tests on templates update

* feat(public/templates): add LLN0 and LPHD

Author: JakobVogelsang

__snapshots__/DAType wizards.md

@@ -2,6 +2,7 @@ import { LitElement, html, TemplateResult, property, css } from 'lit-element';
 import { translate } from 'lit-translate';
 
 import {
+  createElement,
   getReference,
   identity,
   newActionEvent,
@@ -125,7 +126,7 @@ export default class TemplatesPlugin extends LitElement {
         newActionEvent({
           new: {
             parent: this.doc.documentElement,
-            element: this.doc.createElement('DataTypeTemplates'),
+            element: createElement(this.doc, 'DataTypeTemplates', {}),
             reference: getReference(
               this.doc.documentElement,
               'DataTypeTemplates'

__snapshots__/DOType wizards.md

@@ -6,6 +6,7 @@ import {
   Create,
   createElement,
   EditorAction,
+  getChildElementsByTagName,
   getReference,
   getValue,
   identity,
@@ -378,29 +379,25 @@ function startLNodeTypeCreate(
 
     const desc = getValue(inputs.find(i => i.label === 'desc')!);
 
-    const lnClass = (<Select>inputs.find(i => i.label === 'lnClass'))?.selected
+    const value = (<Select>inputs.find(i => i.label === 'lnClass'))?.selected
       ?.value;
-    const templateLNodeType = templates.querySelector(
-      `LNodeType[lnClass="${lnClass}"]`
-    );
-
-    const autoimport =
-      wizard.shadowRoot?.querySelector<Switch>('#autoimport')?.checked;
+    const templateLNodeType = value
+      ? templates.querySelector(selector('LNodeType', value))
+      : null;
 
-    const newLNodeType =
-      templateLNodeType && autoimport
-        ? <Element>templateLNodeType!.cloneNode(true)
-        : createElement(parent.ownerDocument, 'LNodeType', {
-            lnClass: lnClass ?? '',
-          });
+    const newLNodeType = templateLNodeType
+      ? <Element>templateLNodeType!.cloneNode(true)
+      : createElement(parent.ownerDocument, 'LNodeType', {
+          lnClass: value ?? '',
+        });
 
     newLNodeType.setAttribute('id', id);
     if (desc) newLNodeType.setAttribute('desc', desc);
 
-    if (autoimport && templateLNodeType)
+    if (templateLNodeType)
       return addPredefinedLNodeType(parent, newLNodeType, templateLNodeType);
 
-    const allDo = getAllDataObjects(nsd74, lnClass!);
+    const allDo = getAllDataObjects(nsd74, value!);
     wizard.dispatchEvent(
       newWizardEvent(createLNodeTypeHelperWizard(parent, newLNodeType, allDo))
     );
@@ -411,54 +408,25 @@ function startLNodeTypeCreate(
 }
 
 function onLnClassChange(e: Event, templates: XMLDocument): void {
-  const lnClass = (<Select>e.target).selected?.value;
-  const autoimport = (<Select>e.target).parentElement!.querySelector<Switch>(
-    '#autoimport'
-  )!;
+  const identity = (<Select>e.target).selected?.value;
+  const lnodetype = identity
+    ? templates.querySelector(selector('LNodeType', identity))
+    : null;
 
   const primaryAction =
     (<Element>e.target)
       ?.closest('mwc-dialog')
       ?.querySelector('mwc-button[slot="primaryAction"]') ?? null;
 
-  autoimport.parentElement!.removeAttribute('style');
-
-  if (templates.querySelector(`LNodeType[lnClass="${lnClass}"]`)) {
-    autoimport.checked = true;
-    autoimport.disabled = false;
-    autoimport.parentElement!.setAttribute(
-      'label',
-      get('lnodetype.autoimport')
-    );
+  if (lnodetype) {
     primaryAction?.setAttribute('label', get('save'));
     primaryAction?.setAttribute('icon', 'save');
   } else {
-    autoimport.checked = false;
-    autoimport.disabled = true;
-    autoimport.parentElement!.setAttribute(
-      'label',
-      get('lnodetype.missinglnclass')
-    );
     primaryAction?.setAttribute('label', get('next') + '...');
     primaryAction?.setAttribute('icon', '');
   }
 }
 
-function toggleAutoimport(e: Event): void {
-  const autoimport = <Switch>e.target;
-  const primaryAction =
-    (<Element>e.target)
-      ?.closest('mwc-dialog')
-      ?.querySelector('mwc-button[slot="primaryAction"]') ?? null;
-
-  autoimport.checked
-    ? primaryAction?.setAttribute('label', get('save'))
-    : primaryAction?.setAttribute('label', get('next') + '...');
-  autoimport.checked
-    ? primaryAction?.setAttribute('icon', 'save')
-    : primaryAction?.setAttribute('icon', '');
-}
-
 export function createLNodeTypeWizard(
   parent: Element,
   templates: Document,
@@ -484,6 +452,33 @@ export function createLNodeTypeWizard(
           dialogInitialFocus
           @selected=${(e: Event) => onLnClassChange(e, templates)}
         >
+          <mwc-list-item noninteractive
+            >Pre-defined lnClasses from templates</mwc-list-item
+          >
+          <li divider role="separator"></li>
+          ${Array.from(templates.querySelectorAll('LNodeType')).map(
+            lnodetpye => {
+              const lnClass = lnodetpye.getAttribute('lnClass') ?? '';
+              const desc = lnodetpye.getAttribute('desc') ?? '';
+
+              return html`<mwc-list-item
+                twoline
+                style="min-width:200px"
+                graphic="icon"
+                hasMeta
+                value="${identity(lnodetpye)}"
+                ><span>${lnClass}</span>
+                <span slot="secondary">${desc}</span>
+                <span slot="meta"
+                  >${getChildElementsByTagName(lnodetpye, 'DO').length}</span
+                >
+              </mwc-list-item>`;
+            }
+          )}
+          <mwc-list-item noninteractive
+            >Empty lnClasses from IEC 61850-7-4</mwc-list-item
+          >
+          <li divider role="separator"></li>
           ${Array.from(nsd74.querySelectorAll('LNClasses > LNClass')).map(
             lnClass => {
               const className = lnClass.getAttribute('name') ?? '';
@@ -500,13 +495,6 @@ export function createLNodeTypeWizard(
             }
           )}
         </mwc-select>`,
-        html`<mwc-formfield style="display:none"
-          ><mwc-switch
-            id="autoimport"
-            @change=${(e: Event) => toggleAutoimport(e)}
-          ></mwc-switch
-          ><mwc-formfield></mwc-formfield
-        ></mwc-formfield>`,
         html`<wizard-textfield
           label="id"
           helper="${translate('scl.id')}"

__snapshots__/LNodeType wizards.md

@@ -82,7 +82,7 @@ describe('DAType wizards', () => {
       expect(element?.nextElementSibling?.tagName).to.equal('DAType');
       expect(element?.previousElementSibling?.tagName).to.equal('DOType');
     });
-    it('recursevly add missing! subsequent EnumType elements', async () => {
+    it('recursively add missing! subsequent EnumType elements', async () => {
       expect(doc.querySelector('DAType[id="myOriginator"]')).to.not.exist;
       selector.value = 'OpenSCD_Originator';
       idField.maybeValue = 'myOriginator';
@@ -96,18 +96,19 @@ describe('DAType wizards', () => {
         doc.querySelectorAll('EnumType[id="OriginatorCategoryKind"]').length
       ).to.equal(1);
     });
-    it('recursevly add missing! subsequent DAType elements', async () => {
-      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValueFloat32"]')).to
+    it('recursively add missing! subsequent DAType elements', async () => {
+      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValue_FLOAT32"]')).to
         .not.exist;
       selector.value = 'OpenSCD_RangeConfig';
       idField.maybeValue = 'myOriginator';
       await parent.requestUpdate();
       primayAction.click();
       await parent.updateComplete;
-      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValueFloat32"]')).to
+      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValue_FLOAT32"]')).to
         .exist;
       expect(
-        doc.querySelectorAll('DAType[id="OpenSCD_AnalogueValueFloat32"]').length
+        doc.querySelectorAll('DAType[id="OpenSCD_AnalogueValue_FLOAT32"]')
+          .length
       ).to.equal(1);
     });
   });

public/xml/templates.scd

@@ -81,10 +81,10 @@ describe('DOType wizards', () => {
       expect(element?.nextElementSibling?.tagName).to.equal('DOType');
       expect(element?.previousElementSibling?.tagName).to.equal('LNodeType');
     });
-    it('recursevly add missing! subsequent EnumType elements', async () => {
+    it('recursively add missing! subsequent EnumType elements', async () => {
       expect(doc.querySelector('DOType[id="myENSHealth"]')).to.not.exist;
       expect(doc.querySelector('EnumType[id="HealthKind"]')).to.not.exist;
-      selector.value = 'OpenSCD_ENSHealth';
+      selector.value = 'OpenSCD_ENS_Health';
       idField.maybeValue = 'myENSHealth';
       await parent.requestUpdate();
       primayAction.click();
@@ -95,19 +95,18 @@ describe('DOType wizards', () => {
         1
       );
     });
-    it('recursevly add missing! subsequent DAType elements', async () => {
-      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValueFloat32"]')).to
+    it('recursively add missing! subsequent DAType elements', async () => {
+      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValue_INT32"]')).to
         .not.exist;
-      selector.value = 'OpenSCD_MVinst';
+      selector.value = 'OpenSCD_MV_int';
       idField.maybeValue = 'myMV';
       await parent.requestUpdate();
       primayAction.click();
       await parent.updateComplete;
-      await new Promise(resolve => setTimeout(resolve, 1000)); // await animation
-      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValueFloat32"]')).to
+      expect(doc.querySelector('DAType[id="OpenSCD_AnalogueValue_INT32"]')).to
         .exist;
       expect(
-        doc.querySelectorAll('DAType[id="OpenSCD_AnalogueValueFloat32"]').length
+        doc.querySelectorAll('DAType[id="OpenSCD_AnalogueValue_INT32"]').length
       ).to.equal(1);
     });
   });