feat(wizards/settings): Added Nsdoc plugin + Show LN names

src/Plugging.ts

@@ -23,7 +23,7 @@ import { Select } from '@material/mwc-select';
 import { Switch } from '@material/mwc-switch';
 import { TextField } from '@material/mwc-textfield';
 
-import { ifImplemented, LitElementConstructor, Mixin } from './foundation.js';
+import { ifImplemented, initializeNsdoc, LitElementConstructor, Mixin } from './foundation.js';
 import { EditingElement } from './Editing.js';
 import { officialPlugins } from '../public/js/plugins.js';
 
@@ -208,6 +208,7 @@ export function Plugging<TBase extends new (...args: any[]) => EditingElement>(
             .docName=${this.docName}
             .docId=${this.docId}
             .pluginId=${plugin.src}
+            .nsdoc=${initializeNsdoc()}
           ></${loadedPlugins.get(plugin.src)}>`;
         },
       };

src/Setting.ts

@@ -16,16 +16,9 @@ import { ifImplemented, LitElementConstructor, Mixin } from './foundation.js';
 import { Language, languages, loader } from './translations/loader.js';
 
 import './WizardDivider.js';
+import { WizardDialog } from './wizard-dialog.js';
 
-function NsdocSettings() {
-  return {
-
-  }
-}
-
-export const nsdocSettings = NsdocSettings();
-
-export type SettingsRecord = {
+export type Settings = {
   language: Language;
   theme: 'light' | 'dark';
   mode: 'safe' | 'pro';
@@ -35,11 +28,26 @@ export type SettingsRecord = {
   '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
+};
 
-export function Settings() {
-  return {
-    /** Current [[`CompasSettings`]] in `localStorage`, default to [[`defaults`]]. */
-    get settings(): SettingsRecord {
+/** Mixin that saves [[`Settings`]] to `localStorage`, reflecting them in the
+ * `settings` property, setting them through `setSetting(setting, value)`. */
+export type SettingElement = Mixin<typeof Setting>;
+
+export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
+  class SettingElement extends Base {
+    /** Current [[`Settings`]] in `localStorage`, default to [[`defaults`]]. */
+    @property()
+    get settings(): Settings {
       return {
         language: this.getSetting('language'),
         theme: this.getSetting('theme'),
@@ -50,49 +58,6 @@ export function Settings() {
         'IEC 61850-7-4': this.getSetting('IEC 61850-7-4'),
         'IEC 61850-8-1': this.getSetting('IEC 61850-8-1')
       };
-    },
-
-    get defaultSettings(): SettingsRecord {
-      return {
-        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
-      }
-    },
-
-    /** Update the `value` of `setting`, storing to `localStorage`. */
-    setSetting<T extends keyof SettingsRecord>(setting: T, value: SettingsRecord[T]): void {
-      localStorage.setItem(setting, <string>(<unknown>value));
-    },
-
-    /** Update the `value` of `setting`, storing to `localStorage`. */
-    removeSetting<T extends keyof SettingsRecord>(setting: T): void {
-      localStorage.removeItem(setting);
-    },
-
-    getSetting<T extends keyof SettingsRecord>(setting: T): SettingsRecord[T] {
-      return (
-        <SettingsRecord[T] | null>localStorage.getItem(setting) ?? this.defaultSettings[setting]
-      );
-    }
-  }
-}
-
-/** Mixin that saves [[`Settings`]] to `localStorage`, reflecting them in the
- * `settings` property, setting them through `setSetting(setting, value)`. */
-export type SettingElement = Mixin<typeof Setting>;
-
-export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
-  class SettingElement extends Base {
-    /** Current [[`Settings`]] in `localStorage`, default to [[`defaults`]]. */
-    @property()
-    get settings(): SettingsRecord {
-      return Settings().settings;
     }
 
     @query('#settings')
@@ -109,17 +74,41 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
     @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));
+      this.shadowRoot
+        ?.querySelector<WizardDialog>('wizard-dialog')
+        ?.requestUpdate();
+      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 =>
           localStorage.removeItem(item)
         );
         this.requestUpdate('settings');
       } else if (ae.detail?.action === 'save') {
-        Settings().setSetting('language', <Language>this.languageUI.value);
-        Settings().setSetting('theme', this.darkThemeUI.checked ? 'dark' : 'light');
-        Settings().setSetting('mode', this.modeUI.checked ? 'pro' : 'safe');
-        Settings().setSetting('showieds', this.showiedsUI.checked ? 'on' : 'off');
+        this.setSetting('language', <Language>this.languageUI.value);
+        this.setSetting('theme', this.darkThemeUI.checked ? 'dark' : 'light');
+        this.setSetting('mode', this.modeUI.checked ? 'pro' : 'safe');
+        this.setSetting('showieds', this.showiedsUI.checked ? 'on' : 'off');
         this.requestUpdate('settings');
       }
     }
@@ -154,7 +143,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
         const id = this.parseToXmlObject(text).querySelector('NSDoc')?.getAttribute('id');
         if (!id) return;
 
-        Settings().setSetting(id as keyof SettingsRecord, text);
+        this.setSetting(id as keyof Settings, text);
       })
 
       this.nsdocFileUI.value = '';
@@ -166,7 +155,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
      * @param key - The key of the nsdoc file in the settings.
      * @returns a .nsdoc item for the Settings wizard
      */
-    private renderNsdocItem<T extends keyof SettingsRecord>(key: T): TemplateResult {
+    private renderNsdocItem<T extends keyof Settings>(key: T): TemplateResult {
       const nsdSetting = this.settings[key];
       let nsdVersion: string | undefined | null;
       let nsdRevision: string | undefined | null;
@@ -185,10 +174,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
           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=${() => {
-          Settings().removeSetting(key);
-          this.requestUpdate();
-        }}>delete</mwc-icon>` :
+        ${nsdSetting ? html`<mwc-icon id="deleteNsdocItem" slot="meta" @click=${() => {this.removeSetting(key)}}>delete</mwc-icon>` :
           html``}
       </mwc-list-item>`;
     }

src/editors/IED.ts

@@ -10,14 +10,18 @@ import './ied/ied-container.js'
 import { translate } from 'lit-translate';
 import { Select } from '@material/mwc-select';
 import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
-import { compareNames, getDescriptionAttribute, getNameAttribute } from '../foundation.js';
+import { compareNames, getDescriptionAttribute, getNameAttribute, Nsdoc } from '../foundation.js';
 
 /** An editor [[`plugin`]] for editing the `IED` section. */
 export default class IedPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
 
+  /** All the nsdoc files that are being uploaded via the settings. */
+  @property()
+  nsdoc!: Nsdoc;
+
   /** Query holding the current selected IEDs. */
   @state()
   currentSelectedIEDs = ':root > IED';
@@ -60,6 +64,7 @@ export default class IedPlugin extends LitElement {
         ${Array.from(this.doc?.querySelectorAll(this.currentSelectedIEDs)).map(
           ied => html`<ied-container
             .element=${ied}
+            .nsdoc=${this.nsdoc}
           ></ied-container>`
         )}</section>`
       : html`<h1>

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

@@ -10,14 +10,17 @@ import {
 import '../../action-pane.js';
 import './server-container.js'
 import { nothing } from 'lit-html';
-import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
+import { getDescriptionAttribute, getNameAttribute, Nsdoc } from '../../foundation.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 +33,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

@@ -9,7 +9,7 @@ import {
 import { nothing } from 'lit-html';
 
 import '../../action-pane.js';
-import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
+import { getDescriptionAttribute, getNameAttribute, Nsdoc } from '../../foundation.js';
 import './access-point-container.js';
 
 /** [[`IED`]] plugin subeditor for editing `IED` element. */
@@ -19,6 +19,9 @@ export class IedContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
 
+  @property()
+  nsdoc!: Nsdoc;
+
   private header(): TemplateResult {
     const name = getNameAttribute(this.element);
     const desc = getDescriptionAttribute(this.element);
@@ -31,6 +34,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

@@ -11,7 +11,7 @@ import {
 import '../../action-pane.js';
 import './ln-container.js'
 import { nothing } from 'lit-html';
-import { getDescriptionAttribute, getInstanceAttribute, getNameAttribute } from '../../foundation.js';
+import { getDescriptionAttribute, getInstanceAttribute, getNameAttribute, Nsdoc } from '../../foundation.js';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import { translate } from 'lit-translate';
 
@@ -20,6 +20,9 @@ import { translate } from 'lit-translate';
 export class LDeviceContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
+
+  @property()
+  nsdoc!: Nsdoc;
 
   @query('#toggleButton') toggleButton!: IconButtonToggle | undefined;
 
@@ -48,8 +51,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

@@ -11,25 +11,30 @@ import { nothing } from 'lit-html';
 
 import '../../action-pane.js';
 import './do-container.js';
-import { getInstanceAttribute, getNameAttribute } from '../../foundation.js';
+import { getInstanceAttribute, getNameAttribute, Nsdoc } from '../../foundation.js';
 import { translate } from 'lit-translate';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
+import { until } from 'lit-html/directives/until';
 
 /** [[`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 = await this.nsdoc.getDataDescription(this.element);
+
     return html`${prefix != null ? html`${prefix} &mdash; ` : nothing}
-            ${lnClass}
+            ${data.label}
             ${inst ? html` &mdash; ${inst}` : nothing}`;
   }
 
@@ -59,7 +64,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"

src/editors/ied/server-container.ts

@@ -8,6 +8,7 @@ import {
 } from 'lit-element';
 
 import '../../action-pane.js';
+import { Nsdoc } from '../../foundation.js';
 import './ldevice-container.js';
 
 /** [[`IED`]] plugin subeditor for editing `Server` element. */
@@ -16,6 +17,9 @@ export class ServerContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
 
+  @property()
+  nsdoc!: Nsdoc;
+
   private header(): string {
     return 'Server';
   }
@@ -25,6 +29,7 @@ export class ServerContainer extends LitElement {
     ${Array.from(this.element.querySelectorAll(':scope > LDevice')).map(
       server => html`<ldevice-container
         .element=${server}
+        .nsdoc=${this.nsdoc}
       ></ldevice-container>`)}
     </action-pane>`;
   }