Skip to content

Commit 21732c9

Browse files
JakobVogelsangJakobVogelsang
authored
feat(plugin): add read-only report-control-element-editor (openscd#913)
* feat(plugin): add read-only report-control-element-editor * refactor(editors/plugin/report-control): review requests * fix(editors/publisher/data-set-element-editor): review comments * test(reportcontrol): on test files update
1 parent f5af0c8 commit 21732c9

15 files changed

+960
-445
lines changed

‎src/editors/Publisher.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default class PublisherPlugin extends LitElement {
2121
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
2222
@property({ attribute: false })
2323
doc!: XMLDocument;
24+
2425
@state()
2526
private publisherType: 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet' =
2627
'GOOSE';

‎src/editors/publisher/data-set-editor.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,5 +113,9 @@ export class DataSetEditor extends LitElement {
113113

114114
static styles = css`
115115
${styles}
116+
117+
data-set-element-editor {
118+
flex: auto;
119+
}
116120
`;
117121
}

‎src/editors/publisher/data-set-element-editor.ts‎

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ import { identity } from '../../foundation.js';
1818

1919
@customElement('data-set-element-editor')
2020
export class DataSetElementEditor extends LitElement {
21+
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
22+
@property({ attribute: false })
23+
doc!: XMLDocument;
24+
/** The element being edited as provided to plugins by [[`OpenSCD`]]. */
2125
@property({ attribute: false })
2226
element!: Element | null;
2327

@@ -30,53 +34,61 @@ export class DataSetElementEditor extends LitElement {
3034
return this.element ? this.element.getAttribute('desc') : 'UNDEFINED';
3135
}
3236

37+
private renderContent(): TemplateResult {
38+
return html`<wizard-textfield
39+
label="name"
40+
.maybeValue=${this.name}
41+
helper="${translate('scl.name')}"
42+
required
43+
>
44+
</wizard-textfield>
45+
<wizard-textfield
46+
label="desc"
47+
.maybeValue=${this.desc}
48+
helper="${translate('scl.desc')}"
49+
nullable
50+
>
51+
</wizard-textfield>
52+
<filtered-list
53+
>${Array.from(this.element!.querySelectorAll('FCDA')).map(fcda => {
54+
const [ldInst, prefix, lnClass, lnInst, doName, daName, fc] = [
55+
'ldInst',
56+
'prefix',
57+
'lnClass',
58+
'lnInst',
59+
'doName',
60+
'daName',
61+
'fc',
62+
].map(attributeName => fcda.getAttribute(attributeName) ?? '');
63+
64+
return html`<mwc-list-item selected twoline value="${identity(fcda)}"
65+
><span
66+
>${doName}${daName
67+
? '.' + daName + ' ' + '[' + fc + ']'
68+
: ' ' + '[' + fc + ']'}</span
69+
><span slot="secondary"
70+
>${ldInst + '/' + prefix + lnClass + lnInst}</span
71+
>
72+
</mwc-list-item>`;
73+
})}</filtered-list
74+
>`;
75+
}
76+
3377
render(): TemplateResult {
3478
if (this.element)
3579
return html`<div class="content">
3680
<h2>
3781
<div>DataSet</div>
3882
<div class="headersubtitle">${identity(this.element)}</div>
3983
</h2>
40-
<wizard-textfield
41-
label="name"
42-
.maybeValue=${this.name}
43-
helper="${translate('scl.name')}"
44-
required
45-
>
46-
</wizard-textfield>
47-
<wizard-textfield
48-
label="desc"
49-
.maybeValue=${this.desc}
50-
helper="${translate('scl.desc')}"
51-
nullable
52-
>
53-
</wizard-textfield>
54-
<filtered-list
55-
>${Array.from(this.element.querySelectorAll('FCDA')).map(fcda => {
56-
const [ldInst, prefix, lnClass, lnInst, doName, daName] = [
57-
'ldInst',
58-
'prefix',
59-
'lnClass',
60-
'lnInst',
61-
'doName',
62-
'daName',
63-
].map(attributeName => fcda.getAttribute(attributeName) ?? '');
64-
65-
return html`<mwc-list-item
66-
selected
67-
twoline
68-
value="${identity(fcda)}"
69-
><span>${doName + '.' + daName}</span
70-
><span slot="secondary"
71-
>${ldInst + '/' + prefix + lnClass + lnInst}</span
72-
>
73-
</mwc-list-item>`;
74-
})}</filtered-list
75-
>
84+
${this.renderContent()}
7685
</div>`;
7786

7887
return html`<div class="content">
79-
<h2>${translate('publisher.nodataset')}</h2>
88+
<h2>
89+
<div>DataSet</div>
90+
<div class="headersubtitle">${translate('publisher.nodataset')}</div>
91+
</h2>
8092
</div>`;
8193
}
8294

‎src/editors/publisher/foundation.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@ export const styles = css`
2121
display: flex;
2222
}
2323
24-
data-set-element-editor {
25-
width: calc(100% - 6px);
26-
}
27-
2824
.listitem.header {
2925
font-weight: 500;
3026
}
@@ -37,6 +33,12 @@ export const styles = css`
3733
display: none;
3834
}
3935
36+
@media (max-width: 950px) {
37+
.elementeditorcontainer {
38+
display: block;
39+
}
40+
}
41+
4042
@media (max-width: 599px) {
4143
.content {
4244
height: 100%;
@@ -54,6 +56,10 @@ export const styles = css`
5456
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
5557
}
5658
59+
.elementeditorcontainer {
60+
display: block;
61+
}
62+
5763
data-set-element-editor {
5864
width: calc(100% - 16px);
5965
}

‎src/editors/publisher/gse-control-editor.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,5 +121,9 @@ export class GseControlEditor extends LitElement {
121121

122122
static styles = css`
123123
${styles}
124+
125+
data-set-element-editor {
126+
flex: auto;
127+
}
124128
`;
125129
}

‎src/editors/publisher/report-control-editor.ts‎

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Button } from '@material/mwc-button';
1616
import { ListItem } from '@material/mwc-list/mwc-list-item';
1717

1818
import './data-set-element-editor.js';
19+
import './report-control-element-editor.js';
1920
import '../../filtered-list.js';
2021
import { FilteredList } from '../../filtered-list.js';
2122

@@ -27,22 +28,41 @@ import { styles } from './foundation.js';
2728
export class ReportControlEditor extends LitElement {
2829
/** The document being edited as provided to plugins by [[`OpenSCD`]]. */
2930
@property({ attribute: false })
30-
doc!: XMLDocument;
31+
set doc(newDoc: XMLDocument) {
32+
if (this._doc === newDoc) return;
33+
34+
this.selectedDataSet = undefined;
35+
this.selectedReportControl = undefined;
36+
37+
this._doc = newDoc;
38+
39+
this.requestUpdate();
40+
}
41+
get doc(): XMLDocument {
42+
return this._doc;
43+
}
44+
private _doc!: XMLDocument;
3145

3246
@state()
33-
selectedReportControl?: Element | null;
47+
selectedReportControl?: Element;
48+
@state()
49+
selectedDataSet?: Element | null;
3450

3551
@query('.selectionlist') selectionList!: FilteredList;
3652
@query('mwc-button') selectReportControlButton!: Button;
3753

3854
private selectReportControl(evt: Event): void {
3955
const id = ((evt.target as FilteredList).selected as ListItem).value;
4056
const reportControl = this.doc.querySelector(selector('ReportControl', id));
57+
if (!reportControl) return;
58+
59+
this.selectedReportControl = reportControl;
4160

42-
if (reportControl) {
43-
this.selectedReportControl = reportControl.parentElement?.querySelector(
44-
`DataSet[name="${reportControl.getAttribute('datSet')}"]`
45-
);
61+
if (this.selectedReportControl) {
62+
this.selectedDataSet =
63+
this.selectedReportControl.parentElement?.querySelector(
64+
`DataSet[name="${this.selectedReportControl.getAttribute('datSet')}"]`
65+
);
4666
(evt.target as FilteredList).classList.add('hidden');
4767
this.selectReportControlButton.classList.remove('hidden');
4868
}
@@ -52,8 +72,13 @@ export class ReportControlEditor extends LitElement {
5272
if (this.selectedReportControl !== undefined)
5373
return html`<div class="elementeditorcontainer">
5474
<data-set-element-editor
55-
.element=${this.selectedReportControl}
75+
.doc=${this.doc}
76+
.element=${this.selectedDataSet!}
5677
></data-set-element-editor>
78+
<report-control-element-editor
79+
.doc=${this.doc}
80+
.element=${this.selectedReportControl}
81+
></report-control-element-editor>
5782
</div>`;
5883

5984
return html``;
@@ -120,5 +145,30 @@ export class ReportControlEditor extends LitElement {
120145

121146
static styles = css`
122147
${styles}
148+
149+
.elementeditorcontainer {
150+
flex: 65%;
151+
margin: 4px 8px 4px 4px;
152+
background-color: var(--mdc-theme-surface);
153+
overflow-y: scroll;
154+
display: grid;
155+
grid-gap: 12px;
156+
padding: 8px 12px 16px;
157+
grid-template-columns: repeat(3, 1fr);
158+
}
159+
160+
data-set-element-editor {
161+
grid-column: 1 / 2;
162+
}
163+
164+
report-control-element-editor {
165+
grid-column: 2 / 4;
166+
}
167+
168+
@media (max-width: 950px) {
169+
.elementeditorcontainer {
170+
display: block;
171+
}
172+
}
123173
`;
124174
}

0 commit comments

Comments
 (0)