feat(settings): load nsdoc to local storage (openscd#502)

* Implemented adding document to localStorage

* Refactor

* Fix unit tests

* Adding unit tests

* Refactor

* Refactor translation

* Fixing snapshot test

* Review comments

* Added version text for NSDocs

* Review comments

* Merge with stash

* feat(wizards/settings): Added Nsdoc plugin + Show LN names (openscd#516)

* Added first version nsdoc plugin

* Added plugin

* Refactoring

* Refactoring with Jakob

* Added LN name

* Removed multiple usages of DOMParser

* Added refactored nsdoc foundation

* Added tests

* Changed name of testfile to lowercase

* Fixed double names

* review comments

* Review comment

Co-authored-by: Dennis Labordus <[email protected]>

Author: Rob Tjalma

src/Plugging.ts

@@ -26,6 +26,7 @@ import { TextField } from '@material/mwc-textfield';
 import { ifImplemented, LitElementConstructor, Mixin } from './foundation.js';
 import { EditingElement } from './Editing.js';
 import { officialPlugins } from '../public/js/plugins.js';
+import { initializeNsdoc } from './foundation/nsdoc.js';
 
 type PluginKind = 'editor' | 'menu' | 'validator';
 const menuPosition = ['top', 'middle', 'bottom'] as const;
@@ -208,6 +209,7 @@ export function Plugging<TBase extends new (...args: any[]) => EditingElement>(
             .docName=${this.docName}
             .docId=${this.docId}
             .pluginId=${plugin.src}
+            .nsdoc=${await initializeNsdoc()}
           ></${loadedPlugins.get(plugin.src)}>`;
         },
       };

src/Setting.ts

@@ -1,31 +1,42 @@
 import { html, property, query, TemplateResult } from 'lit-element';
-import { registerTranslateConfig, translate, use } from 'lit-translate';
+import { get, registerTranslateConfig, translate, use } from 'lit-translate';
 
 import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@material/mwc-formfield';
 import '@material/mwc-list/mwc-list-item';
 import '@material/mwc-select';
 import '@material/mwc-switch';
+
 import { Dialog } from '@material/mwc-dialog';
 import { Select } from '@material/mwc-select';
 import { Switch } from '@material/mwc-switch';
 
-import { ifImplemented, LitElementConstructor, Mixin } from './foundation.js';
+import { ifImplemented, LitElementConstructor, Mixin, newLogEvent } from './foundation.js';
 import { Language, languages, loader } from './translations/loader.js';
+
+import './WizardDivider.js';
 import { WizardDialog } from './wizard-dialog.js';
 
 export type Settings = {
   language: Language;
   theme: 'light' | 'dark';
   mode: 'safe' | 'pro';
   showieds: 'on' | 'off';
+  'IEC 61850-7-2': string | undefined;
+  'IEC 61850-7-3': string | undefined;
+  'IEC 61850-7-4': string | undefined;
+  'IEC 61850-8-1': string | undefined;
 };
 export const defaults: Settings = {
   language: 'en',
   theme: 'light',
   mode: 'safe',
   showieds: 'off',
+  'IEC 61850-7-2': undefined,
+  'IEC 61850-7-3': undefined,
+  'IEC 61850-7-4': undefined,
+  'IEC 61850-8-1': undefined
 };
 
 /** Mixin that saves [[`Settings`]] to `localStorage`, reflecting them in the
@@ -42,6 +53,10 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
         theme: this.getSetting('theme'),
         mode: this.getSetting('mode'),
         showieds: this.getSetting('showieds'),
+        'IEC 61850-7-2': this.getSetting('IEC 61850-7-2'),
+        'IEC 61850-7-3': this.getSetting('IEC 61850-7-3'),
+        'IEC 61850-7-4': this.getSetting('IEC 61850-7-4'),
+        'IEC 61850-8-1': this.getSetting('IEC 61850-8-1')
       };
     }
 
@@ -56,11 +71,15 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
     @query('#showieds')
     showiedsUI!: Switch;
 
+    @query('#nsdoc-file')
+    private nsdocFileUI!: HTMLInputElement;
+
     private getSetting<T extends keyof Settings>(setting: T): Settings[T] {
       return (
         <Settings[T] | null>localStorage.getItem(setting) ?? defaults[setting]
       );
     }
+
     /** Update the `value` of `setting`, storing to `localStorage`. */
     setSetting<T extends keyof Settings>(setting: T, value: Settings[T]): void {
       localStorage.setItem(setting, <string>(<unknown>value));
@@ -70,6 +89,15 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
       this.requestUpdate();
     }
 
+    /** Remove the `setting` in `localStorage`. */
+    removeSetting<T extends keyof Settings>(setting: T): void {
+      localStorage.removeItem(setting);
+      this.shadowRoot
+        ?.querySelector<WizardDialog>('wizard-dialog')
+        ?.requestUpdate();
+      this.requestUpdate();
+    }
+
     private onClosing(ae: CustomEvent<{ action: string } | null>): void {
       if (ae.detail?.action === 'reset') {
         Object.keys(this.settings).forEach(item =>
@@ -90,6 +118,78 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
       if (changedProperties.has('settings')) use(this.settings.language);
     }
 
+    private renderFileSelect(): TemplateResult {
+      return html `
+        <input id="nsdoc-file" accept=".nsdoc" type="file" hidden required multiple
+          @change=${(evt: Event) => this.loadNsdocFile(evt)}}>
+        <mwc-button label="${translate('settings.selectFileButton')}"
+                    id="selectFileButton"
+                    @click=${() => {
+                      const input = <HTMLInputElement | null>this.shadowRoot!.querySelector("#nsdoc-file");
+                      input?.click();
+                    }}>
+        </mwc-button>
+      `;
+    }
+
+    private async loadNsdocFile(evt: Event): Promise<void> {
+      const files = Array.from(
+        (<HTMLInputElement | null>evt.target)?.files ?? []
+      );
+      
+      if (files.length == 0) return;
+      files.forEach(async file => {
+        const text = await file.text();
+        const id = this.parseToXmlObject(text).querySelector('NSDoc')?.getAttribute('id');
+        if (!id) {
+          document
+          .querySelector('open-scd')!
+          .dispatchEvent(
+              newLogEvent({ kind: 'error', title: get('settings.invalidFileNoIdFound') })
+            );
+          return;
+        }
+  
+        this.setSetting(id as keyof Settings, text);
+      })
+
+      this.nsdocFileUI.value = '';
+      this.requestUpdate();
+    }
+
+    /**
+     * Render one .nsdoc item in the Settings wizard
+     * @param key - The key of the nsdoc file in the settings.
+     * @returns a .nsdoc item for the Settings wizard
+     */
+    private renderNsdocItem<T extends keyof Settings>(key: T): TemplateResult {
+      const nsdSetting = this.settings[key];
+      let nsdVersion: string | undefined | null;
+      let nsdRevision: string | undefined | null;
+      let nsdRelease: string | undefined | null;
+      
+      if (nsdSetting) {
+        const nsdoc = this.parseToXmlObject(nsdSetting)!.querySelector('NSDoc');
+        nsdVersion = nsdoc?.getAttribute('version');
+        nsdRevision = nsdoc?.getAttribute('revision');
+        nsdRelease = nsdoc?.getAttribute('release');
+      }
+
+      return html`<mwc-list-item id=${key} graphic="avatar" hasMeta twoline .disabled=${!nsdSetting}>
+        <span>${key}</span>
+        ${nsdSetting ? html`<span slot="secondary">${nsdVersion}${nsdRevision}${nsdRelease}</span>` :
+          html``}
+        ${nsdSetting ? html`<mwc-icon slot="graphic" style="color:green;">done</mwc-icon>` :
+          html`<mwc-icon slot="graphic" style="color:red;">close</mwc-icon>`}
+        ${nsdSetting ? html`<mwc-icon id="deleteNsdocItem" slot="meta" @click=${() => {this.removeSetting(key)}}>delete</mwc-icon>` :
+          html``}
+      </mwc-list-item>`;
+    }
+
+    private parseToXmlObject(text: string): XMLDocument {
+      return new DOMParser().parseFromString(text, 'application/xml');
+    }
+
     constructor(...params: any[]) {
       super(...params);
 
@@ -140,6 +240,17 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
               ></mwc-switch>
             </mwc-formfield>
           </form>
+          <wizard-divider></wizard-divider>
+          <section>
+            <h3>${translate('settings.loadNsdTranslations')}</h3>
+            ${this.renderFileSelect()}
+          </section>
+          <mwc-list id="nsdocList">
+            ${this.renderNsdocItem('IEC 61850-7-2')}
+            ${this.renderNsdocItem('IEC 61850-7-3')}
+            ${this.renderNsdocItem('IEC 61850-7-4')}
+            ${this.renderNsdocItem('IEC 61850-8-1')}
+          </mwc-list>
           <mwc-button slot="secondaryAction" dialogAction="close">
             ${translate('cancel')}
           </mwc-button>

src/WizardDivider.ts

@@ -0,0 +1,22 @@
+import {css, customElement, html, LitElement, TemplateResult} from "lit-element";
+
+@customElement('wizard-divider')
+export class WizardDividerElement extends LitElement {
+  render(): TemplateResult {
+    return html `
+      <div role="separator"></div>
+    `
+  }
+
+  static styles = css`
+    div {
+      height: 0px;
+      margin: 10px 0px 10px 0px;
+      border-top: none;
+      border-right: none;
+      border-left: none;
+      border-image: initial;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  `
+}

src/editors/IED.ts

@@ -10,6 +10,7 @@ import './ied/ied-container.js'
 import { translate } from 'lit-translate';
 import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
 import { compareNames, getDescriptionAttribute, getNameAttribute } from '../foundation.js';
+import { Nsdoc } from '../foundation/nsdoc.js';
 
 /*
  * We need a variable outside the plugin to save the selected IED, because the Plugin is created
@@ -31,6 +32,10 @@ export default class IedPlugin extends LitElement {
   @property()
   doc!: XMLDocument;
 
+  /** All the nsdoc files that are being uploaded via the settings. */
+  @property()
+  nsdoc!: Nsdoc;
+
   private get alphabeticOrderedIeds() : Element[] {
     return (this.doc)
       ? Array.from(this.doc.querySelectorAll(':root > IED'))
@@ -81,7 +86,10 @@ export default class IedPlugin extends LitElement {
                   </mwc-list-item>`
             )}
           </mwc-select>
-          <ied-container .element=${selectedIedElement}></ied-container>
+          <ied-container
+            .element=${selectedIedElement}
+            .nsdoc=${this.nsdoc}
+          ></ied-container>
         </section>`;
     }
     return html `

src/editors/ied/access-point-container.ts

@@ -11,13 +11,17 @@ import '../../action-pane.js';
 import './server-container.js'
 import { nothing } from 'lit-html';
 import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
+import { Nsdoc } from '../../foundation/nsdoc.js';
 
 /** [[`IED`]] plugin subeditor for editing `AccessPoint` element. */
 @customElement('access-point-container')
 export class AccessPointContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
 
+  @property()
+  nsdoc!: Nsdoc;
+
   private header(): TemplateResult {
     const name = getNameAttribute(this.element);
     const desc = getDescriptionAttribute(this.element);
@@ -30,6 +34,7 @@ export class AccessPointContainer extends LitElement {
     ${Array.from(this.element.querySelectorAll(':scope > Server')).map(
       server => html`<server-container
         .element=${server}
+        .nsdoc=${this.nsdoc}
       ></server-container>`)}
     </action-pane>`;
   }

src/editors/ied/ied-container.ts

@@ -11,8 +11,9 @@ import { translate } from "lit-translate";
 
 import {wizards} from "../../wizards/wizard-library.js";
 import '../../action-pane.js';
-import {getDescriptionAttribute, getNameAttribute, newWizardEvent} from '../../foundation.js';
 import './access-point-container.js';
+import { Nsdoc } from '../../foundation/nsdoc.js';
+import { getDescriptionAttribute, getNameAttribute, newWizardEvent } from '../../foundation.js';
 
 /** [[`IED`]] plugin subeditor for editing `IED` element. */
 @customElement('ied-container')
@@ -21,6 +22,9 @@ export class IedContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
 
+  @property()
+  nsdoc!: Nsdoc;
+  
   private openEditWizard(): void {
     const wizard = wizards['IED'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -45,6 +49,7 @@ export class IedContainer extends LitElement {
       ${Array.from(this.element.querySelectorAll(':scope > AccessPoint')).map(
         ap => html`<access-point-container
           .element=${ap}
+          .nsdoc=${this.nsdoc}
         ></access-point-container>`)}
       </action-pane>`;
   }

src/editors/ied/ldevice-container.ts

@@ -14,12 +14,16 @@ import { nothing } from 'lit-html';
 import { getDescriptionAttribute, getInstanceAttribute, getNameAttribute } from '../../foundation.js';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import { translate } from 'lit-translate';
+import { Nsdoc } from '../../foundation/nsdoc.js';
 
 /** [[`IED`]] plugin subeditor for editing `LDevice` element. */
 @customElement('ldevice-container')
 export class LDeviceContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
+
+  @property()
+  nsdoc!: Nsdoc;
 
   @query('#toggleButton') toggleButton!: IconButtonToggle | undefined;
 
@@ -48,8 +52,9 @@ export class LDeviceContainer extends LitElement {
         ></mwc-icon-button-toggle>
       </abbr>` : nothing}
       <div id="lnContainer">
-        ${this.toggleButton?.on ? lnElements.map(server => html`<ln-container
-            .element=${server}
+        ${this.toggleButton?.on ? lnElements.map(ln => html`<ln-container
+            .element=${ln}
+            .nsdoc=${this.nsdoc}
           ></ln-container>
           `) : nothing}
       </div>

src/editors/ied/ln-container.ts

@@ -14,22 +14,28 @@ import './do-container.js';
 import { getInstanceAttribute, getNameAttribute } from '../../foundation.js';
 import { translate } from 'lit-translate';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
+import { until } from 'lit-html/directives/until';
+import { Nsdoc } from '../../foundation/nsdoc.js';
 
 /** [[`IED`]] plugin subeditor for editing `LN` and `LN0` element. */
 @customElement('ln-container')
 export class LNContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
+
+  @property()
+  nsdoc!: Nsdoc;
 
   @query('#toggleButton') toggleButton!: IconButtonToggle | undefined;
 
-  private header(): TemplateResult {
+  private async header(): Promise<TemplateResult> {
     const prefix = this.element.getAttribute('prefix');
-    const lnClass = this.element.getAttribute('lnClass');
     const inst = getInstanceAttribute(this.element);
 
+    const data = this.nsdoc.getDataDescription(this.element);
+
     return html`${prefix != null ? html`${prefix} &mdash; ` : nothing}
-            ${lnClass}
+            ${data.label}
             ${inst ? html` &mdash; ${inst}` : nothing}`;
   }
 
@@ -59,7 +65,7 @@ export class LNContainer extends LitElement {
   render(): TemplateResult {
     const doElements = this.getDOElements();
 
-    return html`<action-pane .label="${this.header()}">
+    return html`<action-pane .label="${until(this.header())}">
       ${doElements.length > 0 ? html`<abbr slot="action" title="${translate('iededitor.toggleChildElements')}">
         <mwc-icon-button-toggle
           id="toggleButton"