Skip to content

Commit 52a49ce

Browse files
JakobVogelsangJakobVogelsang
authored
feat(editors/substation): show read-only EqFunction and EqSubFunction (openscd#720)
* feat(editors/substation/conductingequipment): allow to toggle action-icon/action-pane use * feat(editors/substation/powertransformer): allow to toggle action-icon/action-pane use * refactor(editors/substation): pass showfunctions to ConductingEquipment/PowerTransformer * fix: missing import statements * fix: typos * feat(editors/substation): add eq-function-editor (openscd#722) * feat(editors/substation/eqfunction): add action-pane based editor * feat(editors/substation): show read-only eqfunction * refactor: review request * feat(editors/substation): add read-only eq-sub-function-editor (openscd#726) * refactor(editors/substation/sub-function-editor): rename custom element * refactor(editors/substation/...function-editor): restrict access to properties and methods
1 parent b1f2d12 commit 52a49ce

28 files changed

+1012
-140
lines changed

‎src/editors/substation/bay-editor.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
query,
88
TemplateResult,
99
} from 'lit-element';
10+
import { classMap } from 'lit-html/directives/class-map';
1011
import { translate } from 'lit-translate';
1112

1213
import '@material/mwc-icon-button';
@@ -44,7 +45,7 @@ export class BayEditor extends LitElement {
4445
element!: Element;
4546
@property({ type: Boolean })
4647
readonly = false;
47-
/** Wheter `Function` and `SubFunction` are rendered */
48+
/** Whether `Function` and `SubFunction` are rendered */
4849
@property({ type: Boolean })
4950
showfunctions = false;
5051

@@ -177,13 +178,19 @@ export class BayEditor extends LitElement {
177178
>
178179
</abbr>
179180
${this.renderIedContainer()} ${this.renderFunctions()}
180-
<div id="ceContainer">
181+
<div
182+
class="${classMap({
183+
content: true,
184+
actionicon: !this.showfunctions,
185+
})}"
186+
>
181187
${Array.from(
182188
getChildElementsByTagName(this.element, 'PowerTransformer')
183189
).map(
184190
pwt =>
185191
html`<powertransformer-editor
186192
.element=${pwt}
193+
?showfunctions=${this.showfunctions}
187194
></powertransformer-editor>`
188195
)}
189196
${Array.from(
@@ -193,6 +200,7 @@ export class BayEditor extends LitElement {
193200
html`<conducting-equipment-editor
194201
.element=${voltageLevel}
195202
?readonly=${this.readonly}
203+
?showfunctions=${this.showfunctions}
196204
></conducting-equipment-editor>`
197205
)}
198206
</div>
@@ -202,12 +210,16 @@ export class BayEditor extends LitElement {
202210
static styles = css`
203211
${styles}
204212
205-
#ceContainer {
213+
.content.actionicon {
206214
display: grid;
207215
grid-gap: 12px;
208216
padding: 12px;
209217
box-sizing: border-box;
210218
grid-template-columns: repeat(auto-fit, minmax(64px, auto));
211219
}
220+
221+
conducting-equipment-editor[showfunctions] {
222+
margin: 4px 8px 16px;
223+
}
212224
`;
213225
}

‎src/editors/substation/conducting-equipment-editor.ts‎

Lines changed: 81 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,21 @@ import {
66
property,
77
TemplateResult,
88
} from 'lit-element';
9+
import { translate } from 'lit-translate';
910

1011
import '@material/mwc-fab';
12+
import '@material/mwc-icon';
13+
import '@material/mwc-icon-button';
1114

1215
import '../../action-icon.js';
16+
import '../../action-pane.js';
17+
import './eq-function-editor.js';
1318
import { startMove, getIcon } from './foundation.js';
14-
import { newActionEvent, newWizardEvent } from '../../foundation.js';
19+
import {
20+
getChildElementsByTagName,
21+
newActionEvent,
22+
newWizardEvent,
23+
} from '../../foundation.js';
1524
import { BayEditor } from './bay-editor.js';
1625
import { wizards } from '../../wizards/wizard-library.js';
1726

@@ -26,6 +35,9 @@ export class ConductingEquipmentEditor extends LitElement {
2635
get name(): string {
2736
return this.element.getAttribute('name') ?? '';
2837
}
38+
/** Whether `EqFunction` and `SubEqFunction` are rendered */
39+
@property({ type: Boolean })
40+
showfunctions = false;
2941

3042
private openEditWizard(): void {
3143
const wizard = wizards['ConductingEquipment'].edit(this.element);
@@ -50,9 +62,57 @@ export class ConductingEquipmentEditor extends LitElement {
5062
);
5163
}
5264

53-
render(): TemplateResult {
54-
return html`<action-icon label="${this.name}">
55-
<span slot="icon">${getIcon(this.element)}</span>
65+
renderEqFunctions(): TemplateResult {
66+
if (!this.showfunctions) return html``;
67+
68+
const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction');
69+
return html` ${eqFunctions.map(
70+
eqFunction =>
71+
html`<eq-function-editor .element=${eqFunction}></eq-function-editor>`
72+
)}`;
73+
}
74+
75+
renderContentPane(): TemplateResult {
76+
return html`<mwc-icon slot="icon" style="width:24px;height:24px"
77+
>${getIcon(this.element)}</mwc-icon
78+
>
79+
<abbr slot="action" title="${translate('lnode.tooltip')}">
80+
<mwc-icon-button
81+
slot="action"
82+
mini
83+
@click="${() => this.openLNodeWizard()}"
84+
icon="account_tree"
85+
></mwc-icon-button>
86+
</abbr>
87+
<abbr slot="action" title="${translate('edit')}">
88+
<mwc-icon-button
89+
slot="action"
90+
mini
91+
icon="edit"
92+
@click="${() => this.openEditWizard()}}"
93+
></mwc-icon-button>
94+
</abbr>
95+
<abbr slot="action" title="${translate('move')}">
96+
<mwc-icon-button
97+
slot="action"
98+
mini
99+
@click="${() =>
100+
startMove(this, ConductingEquipmentEditor, [BayEditor])}"
101+
icon="forward"
102+
></mwc-icon-button>
103+
</abbr>
104+
<abbr slot="action" title="${translate('remove')}">
105+
<mwc-icon-button
106+
slot="action"
107+
mini
108+
icon="delete"
109+
@click="${() => this.remove()}}"
110+
></mwc-icon-button>
111+
</abbr> `;
112+
}
113+
114+
renderContentIcon(): TemplateResult {
115+
return html`<mwc-icon slot="icon">${getIcon(this.element)}</mwc-icon>
56116
<mwc-fab
57117
slot="action"
58118
mini
@@ -77,13 +137,28 @@ export class ConductingEquipmentEditor extends LitElement {
77137
mini
78138
icon="delete"
79139
@click="${() => this.remove()}}"
80-
></mwc-fab>
81-
</action-icon>`;
140+
></mwc-fab>`;
141+
}
142+
143+
render(): TemplateResult {
144+
if (this.showfunctions)
145+
return html`<action-pane label="${this.name}"
146+
>${this.renderContentPane()}${this.renderEqFunctions()}</action-pane
147+
>`;
148+
149+
return html`<action-icon label="${this.name}"
150+
>${this.renderContentIcon()}</action-icon
151+
>`;
82152
}
83153

84154
static styles = css`
85155
:host(.moving) {
86156
opacity: 0.3;
87157
}
158+
159+
abbr {
160+
text-decoration: none;
161+
border-bottom: none;
162+
}
88163
`;
89164
}

‎src/editors/substation/eq-function-editor.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {
2+
html,
3+
LitElement,
4+
TemplateResult,
5+
property,
6+
customElement,
7+
state,
8+
} from 'lit-element';
9+
10+
import '../../action-pane.js';
11+
import './eq-sub-function-editor.js';
12+
import { getChildElementsByTagName } from '../../foundation.js';
13+
14+
/** Pane rendering `EqFunction` element with its children */
15+
@customElement('eq-function-editor')
16+
export class EqFunctionEditor extends LitElement {
17+
/** The edited `EqFunction` element */
18+
@property({ attribute: false })
19+
element!: Element;
20+
@state()
21+
private get header(): string {
22+
const name = this.element.getAttribute('name');
23+
const desc = this.element.getAttribute('desc');
24+
const type = this.element.getAttribute('type');
25+
26+
return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
27+
}
28+
29+
private renderEqSubFunctions(): TemplateResult {
30+
const eqSubFunctions = getChildElementsByTagName(
31+
this.element,
32+
'EqSubFunction'
33+
);
34+
return html` ${eqSubFunctions.map(
35+
eqSubFunction =>
36+
html`<eq-sub-function-editor
37+
.element=${eqSubFunction}
38+
></eq-sub-function-editor>`
39+
)}`;
40+
}
41+
42+
render(): TemplateResult {
43+
return html`<action-pane
44+
label="${this.header}"
45+
icon="functions"
46+
secondary
47+
highlighted
48+
>${this.renderEqSubFunctions()}</action-pane
49+
>`;
50+
}
51+
}

‎src/editors/substation/eq-sub-function-editor.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
html,
3+
LitElement,
4+
TemplateResult,
5+
property,
6+
customElement,
7+
state,
8+
} from 'lit-element';
9+
10+
import '../../action-pane.js';
11+
import { getChildElementsByTagName } from '../../foundation.js';
12+
13+
/** Pane rendering `EqSubFunction` element with its children */
14+
@customElement('eq-sub-function-editor')
15+
export class EqSubFunctionEditor extends LitElement {
16+
/** The edited `EqSubFunction` element */
17+
@property({ attribute: false })
18+
element!: Element;
19+
@state()
20+
private get header(): string {
21+
const name = this.element.getAttribute('name');
22+
const desc = this.element.getAttribute('desc');
23+
const type = this.element.getAttribute('type');
24+
25+
return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
26+
}
27+
28+
private renderEqSubFunctions(): TemplateResult {
29+
const eqSubFunctions = getChildElementsByTagName(
30+
this.element,
31+
'EqSubFunction'
32+
);
33+
return html` ${eqSubFunctions.map(
34+
eqSubFunction =>
35+
html`<eq-sub-function-editor
36+
.element=${eqSubFunction}
37+
></eq-sub-function-editor>`
38+
)}`;
39+
}
40+
41+
render(): TemplateResult {
42+
return html`<action-pane label="${this.header}" icon="functions" secondary
43+
>${this.renderEqSubFunctions()}</action-pane
44+
>`;
45+
}
46+
}

‎src/editors/substation/foundation.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ export const styles = css`
281281
border-bottom: none;
282282
}
283283
284-
#powertransformercontainer {
284+
.ptrContent.actionicon {
285285
display: grid;
286286
grid-gap: 12px;
287287
padding: 8px 12px 16px;
@@ -296,4 +296,8 @@ export const styles = css`
296296
box-sizing: border-box;
297297
grid-template-columns: repeat(auto-fit, minmax(64px, auto));
298298
}
299+
300+
powertransformer-editor[showfunctions] {
301+
margin: 4px 8px 16px;
302+
}
299303
`;

‎src/editors/substation/function-editor.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'lit-element';
99

1010
import '../../action-pane.js';
11-
import './subfunction-editor.js';
11+
import './sub-function-editor.js';
1212
import { getChildElementsByTagName } from '../../foundation.js';
1313

1414
/** Pane rendering `Function` element with its children */
@@ -18,19 +18,21 @@ export class FunctionEditor extends LitElement {
1818
@property({ attribute: false })
1919
element!: Element;
2020
@state()
21-
get header(): string {
21+
private get header(): string {
2222
const name = this.element.getAttribute('name');
2323
const desc = this.element.getAttribute('desc');
2424
const type = this.element.getAttribute('type');
2525

2626
return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
2727
}
2828

29-
renderSubFunctions(): TemplateResult {
29+
private renderSubFunctions(): TemplateResult {
3030
const subfunctions = getChildElementsByTagName(this.element, 'SubFunction');
3131
return html` ${subfunctions.map(
3232
subFunction =>
33-
html`<subfunction-editor .element=${subFunction}></subfunction-editor>`
33+
html`<sub-function-editor
34+
.element=${subFunction}
35+
></sub-function-editor>`
3436
)}`;
3537
}
3638

0 commit comments

Comments
 (0)