Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editors/subscriber): use filtered lists #638

Merged
merged 8 commits into from
Mar 31, 2022
35 changes: 0 additions & 35 deletions src/editors/subscription/elements/goose-message.ts

This file was deleted.

43 changes: 0 additions & 43 deletions src/editors/subscription/elements/ied-element-goose.ts

This file was deleted.

56 changes: 36 additions & 20 deletions src/editors/subscription/publisher-goose-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ import {
import { translate } from 'lit-translate';

import '@material/mwc-icon';
import '@material/mwc-list';
import '@material/mwc-list/mwc-list-item';

import './elements/goose-message.js';
import '../../filtered-list.js';
import { compareNames, getNameAttribute } from '../../foundation.js';
import { styles } from './foundation.js';
import { newGOOSESelectEvent, styles } from './foundation.js';
import { gooseIcon } from '../../icons/icons.js';

/** An sub element for showing all published GOOSE messages per IED. */
@customElement('publisher-goose-list')
Expand Down Expand Up @@ -43,33 +43,49 @@ export class PublisherGOOSEList extends LitElement {
);
}

private onGooseSelect(element: Element): void {
const ln = element.parentElement;
const dataset = ln?.querySelector(
`DataSet[name=${element.getAttribute('datSet')}]`
);
this.dispatchEvent(newGOOSESelectEvent(element, dataset!));
}

renderGoose(element: Element): TemplateResult {
return html`<mwc-list-item
@click=${() => this.onGooseSelect(element)}
graphic="large"
>
<span>${element.getAttribute('name')}</span>
<mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
</mwc-list-item>`;
}

render(): TemplateResult {
return html` <section>
<h1>${translate('subscription.publisherGoose.title')}</h1>
<mwc-list>
${this.ieds.map(ied =>
ied.querySelector('GSEControl')
? html`
<mwc-list-item noninteractive graphic="icon">
<span class="iedListTitle">${getNameAttribute(ied)}</span>
<mwc-icon slot="graphic">developer_board</mwc-icon>
</mwc-list-item>
<li divider role="separator"></li>
${this.getGSEControls(ied).map(
control =>
html`<goose-message .element=${control}></goose-message>`
)}
`
: ``
<filtered-list>
${this.ieds.map(
ied =>
html`
<mwc-list-item noninteractive graphic="icon">
<span class="iedListTitle">${getNameAttribute(ied)}</span>
<mwc-icon slot="graphic">developer_board</mwc-icon>
</mwc-list-item>
<li divider role="separator"></li>
${this.getGSEControls(ied).map(control =>
this.renderGoose(control)
)}
`
)}
</mwc-list>
</filtered-list>
</section>`;
}

static styles = css`
${styles}

mwc-list {
filtered-list {
height: 100vh;
overflow-y: scroll;
}
Expand Down
Loading