-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #461 from openscd/add-da-container
feat(editors/ied): add DA elements to IED editor
- Loading branch information
Showing
11 changed files
with
579 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { | ||
| css, | ||
| customElement, | ||
| html, | ||
| LitElement, | ||
| property, | ||
| query, | ||
| TemplateResult, | ||
| } from 'lit-element'; | ||
| import { nothing } from 'lit-html'; | ||
| import { translate } from 'lit-translate'; | ||
|
|
||
| import '@material/mwc-icon-button-toggle'; | ||
| import { IconButtonToggle } from '@material/mwc-icon-button-toggle'; | ||
|
|
||
| import '../../action-pane.js'; | ||
| import { getNameAttribute } from '../../foundation.js'; | ||
|
|
||
| /** [[`IED`]] plugin subeditor for editing `(B)DA` element. */ | ||
| @customElement('da-container') | ||
| export class DAContainer extends LitElement { | ||
| /** | ||
| * The DA itself. | ||
| */ | ||
| @property({ attribute: false }) | ||
| element!: Element; | ||
|
|
||
| /** | ||
| * The optional DAI of this (B)DA. | ||
| */ | ||
| @property({ attribute: false }) | ||
| instanceElement!: Element; | ||
|
|
||
| @query('#toggleButton') toggleButton: IconButtonToggle | undefined; | ||
|
|
||
| private header(): TemplateResult { | ||
| const name = getNameAttribute(this.element); | ||
| const bType = this.element!.getAttribute('bType') ?? nothing; | ||
|
|
||
| if (this.instanceElement) { | ||
| return html`<b>${name}</b> — ${bType}`; | ||
| } else { | ||
| return html`${name} — ${bType}`; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Rendering an optional value of this (B)DA container. | ||
| * If there is a DAI, it get's priority on top of (B)DA values. | ||
| * @returns TemplateResult containing the value of the instance, element or nothing. | ||
| */ | ||
| private renderValue(): TemplateResult { | ||
| if (this.instanceElement) { | ||
| return html`${this.getValueElement(this.instanceElement)?.textContent}` | ||
| } | ||
|
|
||
| return html`${this.getValueElement(this.element)?.textContent}`; | ||
| } | ||
|
|
||
| /** | ||
| * Get the 'Val' element of another element. | ||
| * @param element - The element to search for an 'Val' element. | ||
| * @returns the 'Val' element, or null if not found. | ||
| */ | ||
| private getValueElement(element: Element): Element | null { | ||
| return element.querySelector('Val') ?? null; | ||
| } | ||
|
|
||
| /** | ||
| * Get the nested (B)DA element(s) if available. | ||
| * @returns The nested (B)DA element(s) of this (B)DA container. | ||
| */ | ||
| private getBDAElements(): Element[] { | ||
| const type = this.element!.getAttribute('type') ?? undefined; | ||
| const doType = this.element!.closest('SCL')!.querySelector(`:root > DataTypeTemplates > DAType[id="${type}"]`); | ||
| if (doType != null) { | ||
| return Array.from(doType!.querySelectorAll(':scope > BDA')) | ||
| } | ||
| return []; | ||
| } | ||
|
|
||
| render(): TemplateResult { | ||
| const bType = this.element!.getAttribute('bType'); | ||
|
|
||
| return html`<action-pane .label="${this.header()}" icon="${this.instanceElement != null ? 'done' : ''}"> | ||
| ${bType == 'Struct' ? html`<abbr slot="action" title="${translate('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} | ||
| <h6>${this.renderValue()}</h6> | ||
| ${this.toggleButton?.on && bType == 'Struct' ? this.getBDAElements().map(element => | ||
| html`<da-container | ||
| .element=${element}> | ||
| </da-container>`) : nothing} | ||
| </action-pane> | ||
| `; | ||
| } | ||
|
|
||
| static styles = css` | ||
| h6 { | ||
| color: var(--mdc-theme-on-surface); | ||
| font-family: 'Roboto', sans-serif; | ||
| font-weight: 500; | ||
| font-size: 0.8em; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| margin: 0px; | ||
| padding-left: 0.3em; | ||
| } | ||
| `; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
test/unit/editors/ied/__snapshots__/da-container.test.snap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* @web/test-runner snapshot v1 */ | ||
| export const snapshots = {}; | ||
|
|
||
| snapshots["da-container looks like the latest snapshot with a DA element"] = | ||
| `<action-pane | ||
| icon="" | ||
| tabindex="0" | ||
| > | ||
| <h6> | ||
| </h6> | ||
| </action-pane> | ||
| `; | ||
| /* end snapshot da-container looks like the latest snapshot with a DA element */ | ||
|
|
||
| snapshots["da-container looks like the latest snapshot with a DA element and child elements are toggled."] = | ||
| `<action-pane | ||
| icon="" | ||
| tabindex="0" | ||
| > | ||
| <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> | ||
| <h6> | ||
| </h6> | ||
| <da-container> | ||
| </da-container> | ||
| <da-container> | ||
| </da-container> | ||
| <da-container> | ||
| </da-container> | ||
| <da-container> | ||
| </da-container> | ||
| <da-container> | ||
| </da-container> | ||
| <da-container> | ||
| </da-container> | ||
| </action-pane> | ||
| `; | ||
| /* end snapshot da-container looks like the latest snapshot with a DA element and child elements are toggled. */ | ||
|
|
||
| snapshots["da-container looks like the latest snapshot with a DA element containing and a DAI."] = | ||
| `<action-pane | ||
| icon="done" | ||
| tabindex="0" | ||
| > | ||
| <h6> | ||
| status-only | ||
| </h6> | ||
| </action-pane> | ||
| `; | ||
| /* end snapshot da-container looks like the latest snapshot with a DA element containing and a DAI. */ | ||
|
|
Oops, something went wrong.