|
| 1 | +import { |
| 2 | + css, |
| 3 | + customElement, |
| 4 | + html, |
| 5 | + LitElement, |
| 6 | + property, |
| 7 | + TemplateResult, |
| 8 | +} from 'lit-element'; |
| 9 | + |
| 10 | +import '@material/mwc-fab'; |
| 11 | +import '@material/mwc-icon'; |
| 12 | +import '@material/mwc-icon-button'; |
| 13 | +import '@material/mwc-menu'; |
| 14 | + |
| 15 | +import '../../action-icon.js'; |
| 16 | +import '../../action-pane.js'; |
| 17 | + |
| 18 | +import { styles } from './foundation.js'; |
| 19 | +import { getChildElementsByTagName } from '../../foundation.js'; |
| 20 | + |
| 21 | +/** [[`SubstationEditor`]] subeditor for a child-less `SubEquipment` element. */ |
| 22 | +@customElement('sub-equipment-editor') |
| 23 | +export class SubEquipmentEditor extends LitElement { |
| 24 | + /** The document being edited as provided to editor by [[`Zeroline`]]. */ |
| 25 | + @property({ attribute: false }) |
| 26 | + doc!: XMLDocument; |
| 27 | + /** SCL element SubEquipment */ |
| 28 | + @property({ attribute: false }) |
| 29 | + element!: Element; |
| 30 | + |
| 31 | + /** SubEquipment name attribute */ |
| 32 | + @property({ type: String }) |
| 33 | + get label(): string { |
| 34 | + const name = `${ |
| 35 | + this.element.hasAttribute('name') |
| 36 | + ? `${this.element.getAttribute('name')}` |
| 37 | + : '' |
| 38 | + }`; |
| 39 | + |
| 40 | + const description = `${ |
| 41 | + this.element.hasAttribute('desc') |
| 42 | + ? ` - ${this.element.getAttribute('desc')}` |
| 43 | + : '' |
| 44 | + }`; |
| 45 | + |
| 46 | + const phase = `${ |
| 47 | + this.element.hasAttribute('phase') |
| 48 | + ? ` (${this.element.getAttribute('phase')})` |
| 49 | + : '' |
| 50 | + }`; |
| 51 | + |
| 52 | + return `${name}${description}${phase}`; |
| 53 | + } |
| 54 | + |
| 55 | + private renderLNodes(): TemplateResult { |
| 56 | + const lNodes = getChildElementsByTagName(this.element, 'LNode'); |
| 57 | + |
| 58 | + return lNodes.length |
| 59 | + ? html`<div class="container lnode"> |
| 60 | + ${lNodes.map( |
| 61 | + lNode => |
| 62 | + html`<l-node-editor |
| 63 | + .doc=${this.doc} |
| 64 | + .element=${lNode} |
| 65 | + ></l-node-editor>` |
| 66 | + )} |
| 67 | + </div>` |
| 68 | + : html``; |
| 69 | + } |
| 70 | + |
| 71 | + private renderEqFunctions(): TemplateResult { |
| 72 | + const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction'); |
| 73 | + return eqFunctions.length |
| 74 | + ? html` ${eqFunctions.map( |
| 75 | + eqFunction => |
| 76 | + html`<eq-function-editor |
| 77 | + .doc=${this.doc} |
| 78 | + .element=${eqFunction} |
| 79 | + ></eq-function-editor>` |
| 80 | + )}` |
| 81 | + : html``; |
| 82 | + } |
| 83 | + |
| 84 | + render(): TemplateResult { |
| 85 | + return html`<action-pane label="${this.label}"> |
| 86 | + ${this.renderLNodes()} ${this.renderEqFunctions()} |
| 87 | + </action-pane> `; |
| 88 | + } |
| 89 | + |
| 90 | + static styles = css` |
| 91 | + ${styles} |
| 92 | +
|
| 93 | + :host(.moving) { |
| 94 | + opacity: 0.3; |
| 95 | + } |
| 96 | +
|
| 97 | + abbr { |
| 98 | + text-decoration: none; |
| 99 | + border-bottom: none; |
| 100 | + } |
| 101 | + `; |
| 102 | +} |
0 commit comments