feat(plugins/IED): Add icon set to IED editor containers

Rob Tjalma · web-flow · commit 9878259665be · 2022-03-09T15:18:52.000+01:00
diff --git a/src/Logging.ts b/src/Logging.ts
@@ -35,7 +35,7 @@ import {
   OpenDocEvent,
   SclhistoryEntry,
 } from './foundation.js';
-import { getFilterIcon, iconColors } from './icons.js';
+import { getFilterIcon, iconColors } from './icons/icons.js';
 import { Plugin } from './Plugging.js';
 
 const icons = {
diff --git a/src/editors/ied/access-point-container.ts b/src/editors/ied/access-point-container.ts
@@ -12,6 +12,7 @@ import './server-container.js'
 import { nothing } from 'lit-html';
 import { getDescriptionAttribute, getNameAttribute } from '../../foundation.js';
 import { Nsdoc } from '../../foundation/nsdoc.js';
+import { accessPointIcon } from '../../icons/ied-icons.js';
 
 /** [[`IED`]] plugin subeditor for editing `AccessPoint` element. */
 @customElement('access-point-container')
@@ -34,12 +35,13 @@ export class AccessPointContainer extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane .label="${this.header()}">
-    ${Array.from(this.element.querySelectorAll(':scope > Server')).map(
-      server => html`<server-container
-        .element=${server}
-        .nsdoc=${this.nsdoc}
-        .ancestors=${[this.element, ...this.ancestors]}
-      ></server-container>`)}
+      <mwc-icon slot="icon">${accessPointIcon}</mwc-icon>
+      ${Array.from(this.element.querySelectorAll(':scope > Server')).map(server =>
+        html`<server-container
+          .element=${server}
+          .nsdoc=${this.nsdoc}
+          .ancestors=${[this.element, ...this.ancestors]}
+        ></server-container>`)}
     </action-pane>`;
   }
 
diff --git a/src/editors/ied/ied-container.ts b/src/editors/ied/ied-container.ts
@@ -39,13 +39,13 @@ export class IedContainer extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane .label="${this.header()}">
+      <mwc-icon slot="icon">developer_board</mwc-icon>
       <abbr slot="action" title="${translate('edit')}">
         <mwc-icon-button
           icon="edit"
           @click=${() => this.openEditWizard()}
         ></mwc-icon-button>
       </abbr>
-
       ${Array.from(this.element.querySelectorAll(':scope > AccessPoint')).map(
         ap => html`<access-point-container
           .element=${ap}
diff --git a/src/editors/ied/ldevice-container.ts b/src/editors/ied/ldevice-container.ts
@@ -15,6 +15,7 @@ import { getDescriptionAttribute, getInstanceAttribute, getNameAttribute } from
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import { translate } from 'lit-translate';
 import { Nsdoc } from '../../foundation/nsdoc.js';
+import { logicalDeviceIcon } from '../../icons/ied-icons.js';
 
 /** [[`IED`]] plugin subeditor for editing `LDevice` element. */
 @customElement('ldevice-container')
@@ -45,6 +46,7 @@ export class LDeviceContainer extends LitElement {
     const lnElements = Array.from(this.element.querySelectorAll(':scope > LN,LN0'));
     
     return html`<action-pane .label="${this.header()}">
+      <mwc-icon slot="icon">${logicalDeviceIcon}</mwc-icon>
       ${lnElements.length > 0 ? html`<abbr slot="action" title="${translate('iededitor.toggleChildElements')}">
         <mwc-icon-button-toggle
           on
diff --git a/src/editors/ied/server-container.ts b/src/editors/ied/server-container.ts
@@ -9,6 +9,7 @@ import {
 
 import '../../action-pane.js';
 import { Nsdoc } from '../../foundation/nsdoc.js';
+import { serverIcon } from '../../icons/ied-icons.js';
 import './ldevice-container.js';
 
 /** [[`IED`]] plugin subeditor for editing `Server` element. */
@@ -29,12 +30,13 @@ export class ServerContainer extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label="${this.header()}">
-    ${Array.from(this.element.querySelectorAll(':scope > LDevice')).map(
-      server => html`<ldevice-container
-        .element=${server}
-        .nsdoc=${this.nsdoc}
-        .ancestors=${[this.element, ...this.ancestors]}
-      ></ldevice-container>`)}
+      <mwc-icon slot="icon">${serverIcon}</mwc-icon>
+      ${Array.from(this.element.querySelectorAll(':scope > LDevice')).map(server => 
+        html`<ldevice-container
+          .element=${server}
+          .nsdoc=${this.nsdoc}
+          .ancestors=${[this.element, ...this.ancestors]}
+        ></ldevice-container>`)}
     </action-pane>`;
   }
 
diff --git a/src/editors/singlelinediagram/sld-drawing.ts b/src/editors/singlelinediagram/sld-drawing.ts
@@ -4,7 +4,7 @@ import {
   connectivityNodeIcon,
   editIcon,
   powerTransformerTwoWindingIcon,
-} from '../../icons.js';
+} from '../../icons/icons.js';
 
 import {
   getRelativeCoordinates,
diff --git a/src/icons/icons.ts b/src/icons/icons.ts
@@ -82,50 +82,6 @@ export function getFilterIcon(
   </svg> `;
 }
 
-export const iedIcon = html`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
->
-  <rect
-    width="20"
-    height="20"
-    x="2"
-    y="2"
-    rx="2"
-    ry="2"
-    fill="transparent"
-    stroke="currentColor"
-    stroke-width="1.5"
-  />
-  <rect width="8" height="10" x="12" y="4" />
-
-  <circle cx="4" cy="6" r="0.5" />
-  <line x1="6" y1="6" x2="10" y2="6" stroke="currentColor" stroke-width="1.5" />
-  <circle cx="4" cy="8" r="0.5" />
-  <line x1="6" y1="8" x2="10" y2="8" stroke="currentColor" stroke-width="1.5" />
-  <circle cx="4" cy="10" r="0.5" />
-  <line
-    x1="6"
-    y1="10"
-    x2="10"
-    y2="10"
-    stroke="currentColor"
-    stroke-width="1.5"
-  />
-
-  <rect x="4" y="13.5" width="2" height="2" />
-  <rect x="4" y="16" width="2" height="2" />
-  <rect x="4" y="18.5" width="2" height="2" />
-  <rect x="6.5" y="13.5" width="2" height="2" />
-  <rect x="6.5" y="16" width="2" height="2" />
-  <rect x="6.5" y="18.5" width="2" height="2" />
-  <rect x="9" y="13.5" width="2" height="2" />
-  <rect x="9" y="16" width="2" height="2" />
-  <rect x="9" y="18.5" width="2" height="2" />
-</svg>`;
-
 export const networkConfigIcon = html`<svg
   xmlns="http://www.w3.org/2000/svg"
   slot="icon"
diff --git a/src/icons/ied-icons.ts b/src/icons/ied-icons.ts
@@ -0,0 +1,13 @@
+import { svg } from "lit-element";
+
+export const accessPointIcon = svg`<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+<path fill="currentColor" d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" />
+</svg>`;
+
+export const serverIcon = svg`<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+<path fill="currentColor" d="M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z" />
+</svg>`;
+
+export const logicalDeviceIcon = svg`<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+<path fill="currentColor" d="M13,13H18V15H13M13,9H18V11H13M6.91,7.41L11.5,12L6.91,16.6L5.5,15.18L8.68,12L5.5,8.82M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5Z" />
+</svg>`;
diff --git a/src/menu/Help.ts b/src/menu/Help.ts
@@ -6,7 +6,7 @@ import '@material/mwc-icon';
 
 import '../finder-list.js';
 import { newWizardEvent, Wizard } from '../foundation.js';
-import { openSCDIcon } from '../icons.js';
+import { openSCDIcon } from '../icons/icons.js';
 import { Directory } from '../finder-list.js';
 
 function aboutBox(version: string) {
diff --git a/src/wizards/clientln.ts b/src/wizards/clientln.ts
@@ -17,7 +17,7 @@ import {
   WizardActor,
   WizardInput,
 } from '../foundation.js';
-import { clientIcon } from '../icons.js';
+import { clientIcon } from '../icons/icons.js';
 import { openCommunicationMappingWizard } from './commmap-wizards.js';
 
 function getPath(identity: string | number): string {
diff --git a/src/wizards/commmap-wizards.ts b/src/wizards/commmap-wizards.ts
@@ -17,7 +17,7 @@ import {
 } from '../foundation.js';
 import { selectClientLNsWizard } from './clientln.js';
 import { selectExtRefsWizard } from './controlwithiedname.js';
-import { controlBlockIcons } from '../icons.js';
+import { controlBlockIcons } from '../icons/icons.js';
 
 export function openCommunicationMappingWizard(
   root: XMLDocument | Element
diff --git a/src/wizards/controlwithiedname.ts b/src/wizards/controlwithiedname.ts
@@ -18,7 +18,7 @@ import {
   WizardInput,
 } from '../foundation.js';
 
-import { inputIcon } from '../icons.js';
+import { inputIcon } from '../icons/icons.js';
 import {
   getSourceReferences,
   openCommunicationMappingWizard,
diff --git a/src/zeroline-pane.ts b/src/zeroline-pane.ts
@@ -17,7 +17,7 @@ import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import './zeroline/substation-editor.js';
 import './zeroline/ied-editor.js';
 import { communicationMappingWizard } from './wizards/commmap-wizards.js';
-import { gooseIcon, smvIcon, reportIcon } from './icons.js';
+import { gooseIcon, smvIcon, reportIcon } from './icons/icons.js';
 import { isPublic, newWizardEvent } from './foundation.js';
 import { selectGseControlWizard } from './wizards/gsecontrol.js';
 import { wizards } from './wizards/wizard-library.js';
diff --git a/src/zeroline/foundation.ts b/src/zeroline/foundation.ts
@@ -8,7 +8,7 @@ import {
   voltageTransformerIcon,
   earthSwitchIcon,
   generalConductingEquipmentIcon,
-} from '../icons.js';
+} from '../icons/icons.js';
 import { BayEditor } from './bay-editor.js';
 import { SubstationEditor } from './substation-editor.js';
 import { VoltageLevelEditor } from './voltage-level-editor.js';
diff --git a/src/zeroline/ied-editor.ts b/src/zeroline/ied-editor.ts
@@ -13,7 +13,7 @@ import { Fab } from '@material/mwc-fab';
 
 import '../action-icon.js';
 import { createClientLnWizard } from '../wizards/clientln.js';
-import { gooseIcon, smvIcon, reportIcon } from '../icons.js';
+import { gooseIcon, smvIcon, reportIcon } from '../icons/icons.js';
 import { wizards } from '../wizards/wizard-library.js';
 import { newWizardEvent } from '../foundation.js';
 import { selectGseControlWizard } from '../wizards/gsecontrol.js';
diff --git a/test/unit/editors/ied/__snapshots__/access-point-container.test.snap.js b/test/unit/editors/ied/__snapshots__/access-point-container.test.snap.js
@@ -3,6 +3,8 @@ export const snapshots = {};
 
 snapshots["access-point-container looks like the latest snapshot"] = 
 `<action-pane tabindex="0">
+  <mwc-icon slot="icon">
+  </mwc-icon>
   <server-container>
   </server-container>
 </action-pane>
diff --git a/test/unit/editors/ied/__snapshots__/da-container.test.snap.js b/test/unit/editors/ied/__snapshots__/da-container.test.snap.js
@@ -1,43 +1,6 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["looks like the latest snapshot with a DA element containing and a DAI"] = 
-`<action-pane
-  icon="done"
-  tabindex="0"
->
-  <abbr slot="action">
-    <mwc-icon-button
-      icon="info"
-      title="ctlModel"
-    >
-    </mwc-icon-button>
-  </abbr>
-  <h6>
-    status-only
-  </h6>
-</action-pane>
-`;
-/* end snapshot looks like the latest snapshot with a DA element containing and a DAI */
-
-snapshots["with a DA element looks like the latest snapshot"] = 
-`<action-pane
-  icon=""
-  tabindex="0"
->
-  <abbr slot="action">
-    <mwc-icon-button
-      icon="info"
-      title="ctlModel"
-    >
-    </mwc-icon-button>
-  </abbr>
-  <h6>
-  </h6>
-</action-pane>
-`;
-/* end snapshot with a DA element looks like the latest snapshot */
-
 snapshots["with a BDA element looks like the latest snapshot"] = 
 `<action-pane
   icon=""
diff --git a/test/unit/editors/ied/__snapshots__/do-container.test.snap.js b/test/unit/editors/ied/__snapshots__/do-container.test.snap.js
@@ -1,93 +1,6 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["looks like the latest snapshot with a DO element."] = 
-`<action-pane
-  icon=""
-  tabindex="0"
->
-  <abbr slot="action">
-    <mwc-icon-button
-      icon="info"
-      title="Mod"
-    >
-    </mwc-icon-button>
-  </abbr>
-  <abbr
-    slot="action"
-    title="[iededitor.toggleChildElements]"
-  >
-    <mwc-icon-button-toggle
-      id="toggleButton"
-      officon="keyboard_arrow_down"
-      onicon="keyboard_arrow_up"
-    >
-    </mwc-icon-button-toggle>
-  </abbr>
-</action-pane>
-`;
-/* end snapshot looks like the latest snapshot with a DO element. */
-
-snapshots["looks like the latest snapshot with a DO element and child elements are toggled."] = 
-`<action-pane
-  icon=""
-  tabindex="0"
->
-  <abbr slot="action">
-    <mwc-icon-button
-      icon="info"
-      title="Mod"
-    >
-    </mwc-icon-button>
-  </abbr>
-  <abbr
-    slot="action"
-    title="[iededitor.toggleChildElements]"
-  >
-    <mwc-icon-button-toggle
-      id="toggleButton"
-      officon="keyboard_arrow_down"
-      on=""
-      onicon="keyboard_arrow_up"
-    >
-    </mwc-icon-button-toggle>
-  </abbr>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <da-container>
-  </da-container>
-  <do-container>
-  </do-container>
-  <do-container>
-  </do-container>
-</action-pane>
-`;
-/* end snapshot looks like the latest snapshot with a DO element and child elements are toggled. */
-
 snapshots["looks like the latest snapshot with a SDO element."] = 
 `<action-pane
   icon=""
diff --git a/test/unit/editors/ied/__snapshots__/ied-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ied-container.test.snap.js
@@ -3,6 +3,9 @@ export const snapshots = {};
 
 snapshots["ied-container looks like the latest snapshot"] = 
 `<action-pane tabindex="0">
+  <mwc-icon slot="icon">
+    developer_board
+  </mwc-icon>
   <abbr
     slot="action"
     title="[edit]"
diff --git a/test/unit/editors/ied/__snapshots__/ldevice-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ldevice-container.test.snap.js
diff --git a/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js b/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js
diff --git a/test/unit/editors/ied/__snapshots__/server-container.test.snap.js b/test/unit/editors/ied/__snapshots__/server-container.test.snap.js
