feat(zeroline-pane): add combined Substation and IED overview (#251)

* feat(zeroline-pane): add web-component that displays the substation sections

* test(substation/guesswizard): restore tests

* refactor(substation/foundation): remove unwanted dependencies

* test(zeroline-pane): add unit tests

* fix(zeroline-pane/foundation): improve ied allocation

* style(zeroline-pane): improve styling

* refactor(zeroline/foundation): improve ied allocation

* test(zeroline-pane): update snapshots

* feat(Substation): show ieds in substation structure

* style(iedcontainer): fix styling on zero-pane-level

* fix(zeroline-pane): fix rebase break

* refactor(zeroline-pane): faster loading of iedcontainers

* feat(Substation): allow adding more than one substation

* refactor(zeroline-pane): move substation showieds toggle button

* style(zeroline-pane): remove superfluous div

* refactor(Zeroline-pane): move nav bar from Substation to zeroline-pane

Co-authored-by: Christian Dinkel <[email protected]>

Author: JakobVogelsang

__snapshots__/Substation Plugin.md

@@ -5,10 +5,9 @@
 ####   `looks like the latest snapshot`
 
 ```html
+<zeroline-pane>
+</zeroline-pane>
 <h1>
-  <span style="color: var(--base1)">
-    [substation.missing]
-  </span>
   <mwc-fab
     extended=""
     icon="add"

__snapshots__/bay-editor wizarding integration.md

@@ -5,36 +5,36 @@
 ```html
 <mwc-dialog
   defaultaction="close"
-  heading="[bay.wizard.title.edit]"
+  heading="Edit bay"
   open=""
 >
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
-      helper="[bay.wizard.nameHelper]"
+      helper="Bay name"
       label="name"
       required=""
-      validationmessage="[textfield.required]"
+      validationmessage="Required"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[bay.wizard.descHelper]"
+      helper="Bay description"
       label="desc"
       nullable=""
     >
     </wizard-textfield>
   </div>
   <mwc-button
     dialogaction="close"
-    label="[cancel]"
+    label="Cancel"
     slot="secondaryAction"
     style="--mdc-theme-primary: var(--mdc-theme-error)"
   >
   </mwc-button>
   <mwc-button
     dialoginitialfocus=""
     icon="edit"
-    label="[save]"
+    label="Save"
     slot="primaryAction"
     trailingicon=""
   >

__snapshots__/bay-editor.md

@@ -33,17 +33,46 @@
       </abbr>
     </nav>
   </h3>
-  <div id="ceContainer">
-    <conducting-equipment-editor>
-    </conducting-equipment-editor>
-    <conducting-equipment-editor>
-    </conducting-equipment-editor>
-    <conducting-equipment-editor>
-    </conducting-equipment-editor>
-    <conducting-equipment-editor>
-    </conducting-equipment-editor>
-    <conducting-equipment-editor>
-    </conducting-equipment-editor>
+  <div>
+    <div id="ceContainer">
+      <conducting-equipment-editor>
+      </conducting-equipment-editor>
+      <conducting-equipment-editor>
+      </conducting-equipment-editor>
+      <conducting-equipment-editor>
+      </conducting-equipment-editor>
+      <conducting-equipment-editor>
+      </conducting-equipment-editor>
+      <conducting-equipment-editor>
+      </conducting-equipment-editor>
+    </div>
+  </div>
+</section>
+
+```
+
+## `with readonly property`
+
+####   `looks like the latest snapshot`
+
+```html
+<section tabindex="0">
+  <h3>
+    COUPLING_BAY — Bay
+  </h3>
+  <div>
+    <div id="ceContainer">
+      <conducting-equipment-editor readonly="">
+      </conducting-equipment-editor>
+      <conducting-equipment-editor readonly="">
+      </conducting-equipment-editor>
+      <conducting-equipment-editor readonly="">
+      </conducting-equipment-editor>
+      <conducting-equipment-editor readonly="">
+      </conducting-equipment-editor>
+      <conducting-equipment-editor readonly="">
+      </conducting-equipment-editor>
+    </div>
   </div>
 </section>
 

__snapshots__/conducting-equipment-editor wizarding integration.md

@@ -5,15 +5,15 @@
 ```html
 <mwc-dialog
   defaultaction="close"
-  heading="[conductingequipment.wizard.title.edit]"
+  heading="Edit conducting equipment"
   open=""
 >
   <div id="wizard-content">
     <mwc-select
       disabled=""
-      helper="[conductingequipment.wizard.typeHelper]"
+      helper="Conducting equipment type"
       label="type"
-      validationmessage="[textfield.required]"
+      validationmessage="Required"
     >
       <mwc-list-item
         aria-disabled="false"
@@ -27,30 +27,30 @@
     </mwc-select>
     <wizard-textfield
       dialoginitialfocus=""
-      helper="[conductingequipment.wizard.nameHelper]"
+      helper="Conducting equipment name"
       label="name"
       required=""
-      validationmessage="[textfield.required]"
+      validationmessage="Required"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[conductingequipment.wizard.descHelper]"
+      helper="Conducting equipment description"
       label="desc"
       nullable=""
     >
     </wizard-textfield>
   </div>
   <mwc-button
     dialogaction="close"
-    label="[cancel]"
+    label="Cancel"
     slot="secondaryAction"
     style="--mdc-theme-primary: var(--mdc-theme-error)"
   >
   </mwc-button>
   <mwc-button
     dialoginitialfocus=""
     icon="edit"
-    label="[save]"
+    label="Save"
     slot="primaryAction"
     trailingicon=""
   >

__snapshots__/conducting-equipment-editor.md

@@ -38,3 +38,19 @@
 
 ```
 
+## `with readonly property`
+
+####   `looks like the latest snapshot`
+
+```html
+<div
+  id="container"
+  tabindex="0"
+>
+</div>
+<h4>
+  QA1
+</h4>
+
+```
+

__snapshots__/open-scd.md

@@ -977,6 +977,10 @@
       <mwc-switch id="mode">
       </mwc-switch>
     </mwc-formfield>
+    <mwc-formfield label="Show IEDs in substation editor">
+      <mwc-switch id="showieds">
+      </mwc-switch>
+    </mwc-formfield>
   </form>
   <mwc-button
     dialogaction="close"

__snapshots__/substation-editor wizarding integration.md

@@ -5,36 +5,36 @@
 ```html
 <mwc-dialog
   defaultaction="close"
-  heading="[substation.wizard.title.edit]"
+  heading="Edit substation"
   open=""
 >
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
-      helper="[substation.wizard.nameHelper]"
+      helper="Substation name"
       label="name"
       required=""
-      validationmessage="[textfield.required]"
+      validationmessage="Required"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[substation.wizard.descHelper]"
+      helper="Substation description"
       label="desc"
       nullable=""
     >
     </wizard-textfield>
   </div>
   <mwc-button
     dialogaction="close"
-    label="[cancel]"
+    label="Cancel"
     slot="secondaryAction"
     style="--mdc-theme-primary: var(--mdc-theme-error)"
   >
   </mwc-button>
   <mwc-button
     dialoginitialfocus=""
     icon="edit"
-    label="[save]"
+    label="Save"
     slot="primaryAction"
     trailingicon=""
   >

__snapshots__/substation-editor.md

@@ -33,3 +33,20 @@
 
 ```
 
+## `with readonly property`
+
+####   `looks like the latest snapshot`
+
+```html
+<section tabindex="0">
+  <h1>
+    AA1 — Substation
+  </h1>
+  <voltage-level-editor readonly="">
+  </voltage-level-editor>
+  <voltage-level-editor readonly="">
+  </voltage-level-editor>
+</section>
+
+```
+

__snapshots__/voltage-level-editor wizarding integration.md

@@ -5,68 +5,68 @@
 ```html
 <mwc-dialog
   defaultaction="close"
-  heading="[voltagelevel.wizard.title.edit]"
+  heading="Edit voltage level"
   open=""
 >
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
-      helper="[voltagelevel.wizard.nameHelper]"
+      helper="Voltage level name"
       label="name"
       required=""
-      validationmessage="[textfield.required]"
+      validationmessage="Required"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[voltagelevel.wizard.descHelper]"
+      helper="Voltage level description"
       label="desc"
       nullable=""
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[voltagelevel.wizard.nomFreqHelper]"
+      helper="Nominal frequency"
       label="nomFreq"
       nullable=""
       pattern="\+?([0-9]+(\.[0-9]*)?|\.[0-9]+)"
       required=""
       suffix="Hz"
-      validationmessage="[textfield.nonempty]"
+      validationmessage="Must not be empty"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[voltagelevel.wizard.numPhaseHelper]"
+      helper="Number of phases"
       label="numPhases"
       max="255"
       min="1"
       nullable=""
       required=""
       suffix="#"
       type="number"
-      validationmessage="[textfield.nonempty]"
+      validationmessage="Must not be empty"
     >
     </wizard-textfield>
     <wizard-textfield
-      helper="[voltagelevel.wizard.voltageHelper]"
+      helper="Nominal voltage"
       label="Voltage"
       nullable=""
       pattern="((-|\+)?([0-9]+(\.[0-9]*)?|\.[0-9]+))"
       required=""
       unit="V"
-      validationmessage="[textfield.nonempty]"
+      validationmessage="Must not be empty"
     >
     </wizard-textfield>
   </div>
   <mwc-button
     dialogaction="close"
-    label="[cancel]"
+    label="Cancel"
     slot="secondaryAction"
     style="--mdc-theme-primary: var(--mdc-theme-error)"
   >
   </mwc-button>
   <mwc-button
     dialoginitialfocus=""
     icon="edit"
-    label="[save]"
+    label="Save"
     slot="primaryAction"
     trailingicon=""
   >

__snapshots__/voltage-level-editor.md

@@ -44,3 +44,23 @@
 
 ```
 
+## `with readonly property`
+
+####   `looks like the latest snapshot`
+
+```html
+<section tabindex="0">
+  <h2>
+    E1 — Voltage Level
+      (110.0 kV)
+  </h2>
+  <div id="bayContainer">
+    <bay-editor readonly="">
+    </bay-editor>
+    <bay-editor readonly="">
+    </bay-editor>
+  </div>
+</section>
+
+```
+