merge with first

openscd · May 9, 2022 · ea1f997 · ea1f997
1 parent b7e57d6
commit ea1f997
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 0 deletions.
diff --git a/src/editors/substation/l-node-editor.ts b/src/editors/substation/l-node-editor.ts
@@ -0,0 +1,88 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  state,
+} from 'lit-element';
+
+import '../../action-icon.js';
+import { identity } from '../../foundation.js';
+import {
+  automationLogicalNode,
+  controlLogicalNode,
+  functionalLogicalNode,
+  furtherPowerSystemEquipmentLogicalNode,
+  generalLogicalNode,
+  interfacingLogicalNode,
+  measurementLogicalNode,
+  nonElectricalLogicalNode,
+  powerTransformerLogicalNode,
+  protectionLogicalNode,
+  protectionRelatedLogicalNode,
+  qualityLogicalNode,
+  supervisionLogicalNode,
+  switchgearLogicalNode,
+  systemLogicalNode,
+  transformerLogicalNode,
+} from '../../icons/lnode.js';
+
+export function getLNodeIcon(lNode: Element): TemplateResult {
+  const lnClassGroup = lNode.getAttribute('lnClass')?.charAt(0) ?? '';
+  return lnClassIcons[lnClassGroup] ?? systemLogicalNode;
+}
+
+const lnClassIcons: Partial<Record<string, TemplateResult>> = {
+  L: systemLogicalNode,
+  A: automationLogicalNode,
+  C: controlLogicalNode,
+  F: functionalLogicalNode,
+  G: generalLogicalNode,
+  I: interfacingLogicalNode,
+  K: nonElectricalLogicalNode,
+  M: measurementLogicalNode,
+  P: protectionLogicalNode,
+  Q: qualityLogicalNode,
+  R: protectionRelatedLogicalNode,
+  S: supervisionLogicalNode,
+  T: transformerLogicalNode,
+  X: switchgearLogicalNode,
+  Y: powerTransformerLogicalNode,
+  Z: furtherPowerSystemEquipmentLogicalNode,
+};
+
+/** Pane rendering `LNode` element with its children */
+@customElement('l-node-editor')
+export class LNodeEditor extends LitElement {
+  /** The edited `LNode` element */
+  @property({ attribute: false })
+  element!: Element;
+  @state()
+  private get header(): string {
+    const prefix = this.element.getAttribute('prefix') ?? '';
+    const lnClass = this.element.getAttribute('lnClass');
+    const lnInst = this.element.getAttribute('lnInst');
+
+    const header = this.missingIedReference
+      ? `${prefix} ${lnClass} ${lnInst}`
+      : identity(this.element);
+
+    return typeof header === 'string' ? header : '';
+  }
+  @state()
+  private get missingIedReference(): boolean {
+    return this.element.getAttribute('iedName') === 'None' ?? false;
+  }
+
+  render(): TemplateResult {
+    return html`<action-icon
+      label="${this.header}"
+      ?secondary=${this.missingIedReference}
+      ?highlighted=${this.missingIedReference}
+      ><mwc-icon slot="icon"
+        >${getLNodeIcon(this.element)}</mwc-icon
+      ></action-icon
+    >`;
+  }
+}
diff --git a/src/icons/lnode.ts b/src/icons/lnode.ts
@@ -0,0 +1,65 @@
+import { svg } from 'lit-element';
+
+export const systemLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H11V15H15V17H9V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const automationLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11,7H13A2,2 0 0,1 15,9V17H13V13H11V17H9V9A2,2 0 0,1 11,7M11,9V11H13V9H11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
+</svg>`;
+
+export const controlLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11,7H13A2,2 0 0,1 15,9V10H13V9H11V15H13V14H15V15A2,2 0 0,1 13,17H11A2,2 0 0,1 9,15V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const functionalLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H15V9H11V11H14V13H11V17H9V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const generalLogicalNode = svg`<svg  viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11,7H15V9H11V15H13V11H15V15A2,2 0 0,1 13,17H11A2,2 0 0,1 9,15V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const interfacingLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M14,7V9H13V15H14V17H10V15H11V9H10V7H14M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const nonElectricalLogicalNode = svg`<svg viewBox="0 0 24 24">
+<path fill="currentColor" d="M9,7H11V10.33L13,7H15L12,12L15,17H13L11,13.67V17H9V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const measurementLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H15A2,2 0 0,1 17,9V17H15V9H13V16H11V9H9V17H7V9A2,2 0 0,1 9,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const protectionLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H13A2,2 0 0,1 15,9V11A2,2 0 0,1 13,13H11V17H9V7M11,9V11H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const qualityLogicalNode = svg`<svg  viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,7H13A2,2 0 0,1 15,9V15A2,2 0 0,1 13,17V19H11V17A2,2 0 0,1 9,15V9A2,2 0 0,1 11,7M11,9V15H13V9H11Z" />
+</svg>`;
+
+export const protectionRelatedLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H13A2,2 0 0,1 15,9V11C15,11.84 14.5,12.55 13.76,12.85L15,17H13L11.8,13H11V17H9V7M11,9V11H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,16.41 7.58,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const supervisionLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M11,7H15V9H11V11H13A2,2 0 0,1 15,13V15A2,2 0 0,1 13,17H9V15H13V13H11A2,2 0 0,1 9,11V9A2,2 0 0,1 11,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const transformerLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H15V9H13V17H11V9H9V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const switchgearLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H11L12,9.5L13,7H15L13,12L15,17H13L12,14.5L11,17H9L11,12L9,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const powerTransformerLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H11L12,10L13,7H15L13,13V17H11V13L9,7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;
+
+export const furtherPowerSystemEquipmentLogicalNode = svg`<svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9,7H15V9L11,15H15V17H9V15L13,9H9V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
+</svg>`;