feat: edit and delete virtual IED elements

packages/openscd/src/translations/de.ts

@@ -284,10 +284,23 @@ export const de: Translations = {
       noResults: 'Keine Logical Node Types gefunden',
     },
   },
+  accesspoint: {
+    wizard: {
+      nameHelper: 'AccessPoint Name',
+      descHelper: 'AccessPoint Beschreibung',
+      title: {
+        add: 'AccessPoint hinzufügen',
+        edit: 'AccessPoint bearbeiten',
+        delete: 'AccessPoint mit Abhängigkeiten entfernen',
+        references: 'Gelöschte Abhängikeiten',
+      },
+    },
+  },
   ied: {
     wizard: {
       nameHelper: 'Name des IED',
       descHelper: 'Beschreibung des IED',
+      manufacturerHelper: 'Hersteller des IED',
       title: {
         edit: 'IED bearbeiten',
         delete: 'IED mit Abhängigkeiten entfernen',
@@ -304,6 +317,7 @@ export const de: Translations = {
       nameHelper: 'Name des Logisches Gerät',
       noNameSupportHelper: 'IED unterstützt keine funktionale Benennung',
       descHelper: 'Beschreibung des Logisches Gerät',
+      instHelper: 'Instanz des Logisches Gerät',
       title: {
         edit: 'Logisches Gerät bearbeiten',
       },

packages/openscd/src/translations/en.ts

@@ -281,10 +281,23 @@ export const en = {
       noResults: 'No Logical Node Types found',
     },
   },
+  accesspoint: {
+    wizard: {
+      nameHelper: 'AccessPoint name',
+      descHelper: 'AccessPoint description',
+      title: {
+        add: 'Add AccessPoint',
+        edit: 'Edit AccessPoint',
+        delete: 'Remove AccessPoint with references',
+        references: 'References to be removed',
+      },
+    },
+  },
   ied: {
     wizard: {
       nameHelper: 'IED name',
       descHelper: 'IED description',
+      manufacturerHelper: 'IED manufacturer',
       title: {
         edit: 'Edit IED',
         delete: 'Remove IED with references',
@@ -301,6 +314,7 @@ export const en = {
       nameHelper: 'Logical device name',
       noNameSupportHelper: "IED doesn't support Functional Naming",
       descHelper: 'Logical device description',
+      instHelper: 'Logical device inst',
       title: {
         edit: 'Edit logical device',
       },

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

@@ -8,15 +8,18 @@ import {
   TemplateResult,
 } from 'lit-element';
 import { nothing } from 'lit-html';
-import { get } from 'lit-translate';
+import { get, translate } from 'lit-translate';
 
 import {
   getDescriptionAttribute,
   getNameAttribute,
   newWizardEvent,
 } from '@openscd/open-scd/src/foundation.js';
 import { accessPointIcon } from '@openscd/open-scd/src/icons/ied-icons.js';
+import { newActionEvent } from '@openscd/core/foundation/deprecated/editor.js';
+import { wizards } from '../../wizards/wizard-library.js';
 import { editServicesWizard } from '../../wizards/services.js';
+import { removeAccessPointWizard } from '../../wizards/accesspoint.js';
 
 import '@openscd/open-scd/src/action-pane.js';
 import './server-container.js';
@@ -29,6 +32,16 @@ export class AccessPointContainer extends Container {
   @property()
   selectedLNClasses: string[] = [];
 
+  @state()
+  private get lnElements(): Element[] {
+    return Array.from(this.element.querySelectorAll(':scope > LN')).filter(
+      element => {
+        const lnClass = element.getAttribute('lnClass') ?? '';
+        return this.selectedLNClasses.includes(lnClass);
+      }
+    );
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
     super.updated(_changedProperties);
 
@@ -45,27 +58,22 @@ export class AccessPointContainer extends Container {
       return html``;
     }
 
-    return html` <abbr slot="action" title="${get('iededitor.settings')}">
-      <mwc-icon-button
-        icon="settings"
-        @click=${() => this.openSettingsWizard(services)}
-      ></mwc-icon-button>
-    </abbr>`;
+    return html` <mwc-icon-button
+      slot="action"
+      icon="settings"
+      title="${get('iededitor.settings')}"
+      @click=${() => this.openSettingsWizard(services)}
+    ></mwc-icon-button>`;
   }
 
-  private openSettingsWizard(services: Element): void {
-    const wizard = editServicesWizard(services);
+  private openEditWizard(): void {
+    const wizard = wizards['AccessPoint'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
-  @state()
-  private get lnElements(): Element[] {
-    return Array.from(this.element.querySelectorAll(':scope > LN')).filter(
-      element => {
-        const lnClass = element.getAttribute('lnClass') ?? '';
-        return this.selectedLNClasses.includes(lnClass);
-      }
-    );
+  private openSettingsWizard(services: Element): void {
+    const wizard = editServicesWizard(services);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   private header(): TemplateResult {
@@ -75,11 +83,37 @@ export class AccessPointContainer extends Container {
     return html`${name}${desc ? html` &mdash; ${desc}` : nothing}`;
   }
 
+  private removeAccessPoint(): void {
+    const wizard = removeAccessPointWizard(this.element);
+    if (wizard) {
+      this.dispatchEvent(newWizardEvent(() => wizard));
+    } else {
+      // If no Wizard is needed, just remove the element.
+      this.dispatchEvent(
+        newActionEvent({
+          old: { parent: this.element.parentElement!, element: this.element },
+        })
+      );
+    }
+  }
+
   render(): TemplateResult {
     const lnElements = this.lnElements;
 
     return html`<action-pane .label="${this.header()}">
       <mwc-icon slot="icon">${accessPointIcon}</mwc-icon>
+      <mwc-icon-button
+        slot="action"
+        icon="delete"
+        title="${translate('remove')}"
+        @click=${() => this.removeAccessPoint()}
+      ></mwc-icon-button>
+      <mwc-icon-button
+        slot="action"
+        icon="edit"
+        title="${translate('edit')}"
+        @click=${() => this.openEditWizard()}
+      ></mwc-icon-button>
       ${this.renderServicesIcon()}
       ${Array.from(this.element.querySelectorAll(':scope > Server')).map(
         server =>

packages/plugins/src/editors/ied/ldevice-container.ts

@@ -23,6 +23,7 @@ import {
   getLdNameAttribute,
   newWizardEvent,
 } from '@openscd/open-scd/src/foundation.js';
+import { newActionEvent } from '@openscd/core/foundation/deprecated/editor.js';
 
 import { wizards } from '../../wizards/wizard-library.js';
 import { Container } from './foundation.js';
@@ -104,11 +105,25 @@ export class LDeviceContainer extends Container {
     this.dispatchEvent(newEditEventV2(inserts));
   }
 
+  private removeLDevice(): void {
+    this.dispatchEvent(
+      newActionEvent({
+        old: { parent: this.element.parentElement!, element: this.element },
+      })
+    );
+  }
+
   render(): TemplateResult {
     const lnElements = this.lnElements;
 
     return html`<action-pane .label="${this.header()}">
       <mwc-icon slot="icon">${logicalDeviceIcon}</mwc-icon>
+      <mwc-icon-button
+        slot="action"
+        icon="delete"
+        title="${translate('remove')}"
+        @click=${() => this.removeLDevice()}
+      ></mwc-icon-button>
       <abbr slot="action" title="${get('edit')}">
         <mwc-icon-button
           icon="edit"

packages/plugins/src/editors/ied/ln-container.ts

@@ -1,13 +1,14 @@
 import { customElement, html, query, TemplateResult } from 'lit-element';
 import { nothing } from 'lit-html';
 import { until } from 'lit-html/directives/until';
-import { get } from 'lit-translate';
+import { get, translate } from 'lit-translate';
 
 import {
   getInstanceAttribute,
   getNameAttribute,
   newWizardEvent,
 } from '@openscd/open-scd/src/foundation.js';
+import { newActionEvent } from '@openscd/core/foundation/deprecated/editor.js';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 
 import '@openscd/open-scd/src/action-pane.js';
@@ -65,30 +66,44 @@ export class LNContainer extends Container {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  private removeElement(): void {
+    if (this.element.tagName === 'LN') {
+      this.dispatchEvent(
+        newActionEvent({
+          old: { parent: this.element.parentElement!, element: this.element },
+        })
+      );
+    }
+  }
+
   render(): TemplateResult {
     const doElements = this.getDOElements();
 
     return html`<action-pane .label="${until(this.header())}">
       ${doElements.length > 0
-        ? html`<abbr slot="action">
-          <mwc-icon-button
-            slot="action"
-            mini
-            icon="edit"
-            @click="${() => this.openEditWizard()}}"
-          ></mwc-icon-button>
-        </abbr>
-        <abbr
-            slot="action"
-            title="${get('iededitor.toggleChildElements')}"
-          >
-            <mwc-icon-button-toggle
-              id="toggleButton"
-              onIcon="keyboard_arrow_up"
-              offIcon="keyboard_arrow_down"
-              @click=${() => this.requestUpdate()}
-            ></mwc-icon-button-toggle>
-          </abbr>`
+        ? html`${this.element.tagName === 'LN'
+              ? html`<mwc-icon-button
+                  slot="action"
+                  icon="delete"
+                  title="${translate('remove')}"
+                  @click=${() => this.removeElement()}
+                ></mwc-icon-button>`
+              : nothing}<abbr slot="action">
+              <mwc-icon-button
+                slot="action"
+                mini
+                icon="edit"
+                @click="${() => this.openEditWizard()}}"
+              ></mwc-icon-button>
+            </abbr>
+            <abbr slot="action" title="${get('iededitor.toggleChildElements')}">
+              <mwc-icon-button-toggle
+                id="toggleButton"
+                onIcon="keyboard_arrow_up"
+                offIcon="keyboard_arrow_down"
+                @click=${() => this.requestUpdate()}
+              ></mwc-icon-button-toggle>
+            </abbr>`
         : nothing}
       ${this.toggleButton?.on
         ? doElements.map(

packages/plugins/src/editors/ied/server-container.ts

@@ -81,6 +81,7 @@ export class ServerContainer extends Container {
 
     const ln0 = createElement(this.doc, 'LN0', {
       lnClass: 'LLN0',
+      inst: '',
       lnType: lnTypeId,
     });