From b679f9fe993ab67ac55ec4430efeb52de6e22a06 Mon Sep 17 00:00:00 2001 From: Daniel Mulholland Date: Sun, 12 Mar 2023 10:42:34 +1300 Subject: [PATCH] Update translations, improve filter implementation, add settings to remove auto-increment --- .../ext-ref-later-binding-list-subscriber.ts | 275 +++++++++++++----- src/translations/de.ts | 5 + src/translations/en.ts | 5 + 3 files changed, 215 insertions(+), 70 deletions(-) diff --git a/src/editors/subscription/later-binding/ext-ref-later-binding-list-subscriber.ts b/src/editors/subscription/later-binding/ext-ref-later-binding-list-subscriber.ts index 3baf74bb39..fd70a5bf2f 100644 --- a/src/editors/subscription/later-binding/ext-ref-later-binding-list-subscriber.ts +++ b/src/editors/subscription/later-binding/ext-ref-later-binding-list-subscriber.ts @@ -1,8 +1,9 @@ -import { ListItem } from '@material/mwc-list/mwc-list-item.js'; import '@material/mwc-list/mwc-check-list-item'; import '@material/mwc-menu'; -import { Menu } from '@material/mwc-menu'; import { Icon } from '@material/mwc-icon'; +import { List } from '@material/mwc-list'; +import { ListItem } from '@material/mwc-list/mwc-list-item.js'; +import { Menu } from '@material/mwc-menu'; import { css, @@ -16,6 +17,7 @@ import { } from 'lit-element'; import { nothing } from 'lit-html'; +import { classMap } from 'lit-html/directives/class-map.js'; import { repeat } from 'lit-html/directives/repeat.js'; import { get, translate } from 'lit-translate'; @@ -48,19 +50,6 @@ import { isSubscribed, getFcdaSrcControlBlockDescription, } from './foundation.js'; -import { CheckListItem } from '@material/mwc-list/mwc-check-list-item'; - -// FIXME: Replace with identity function after https://github.com/openscd/open-scd/issues/1179 -// is resolved -function getExtRefId(extRefElement: Element): string { - const intAddr = extRefElement.getAttribute('intAddr'); - const intAddrIndex = Array.from( - extRefElement!.parentElement!.querySelectorAll( - `ExtRef[intAddr="${intAddr}"]` - ) - ).indexOf(extRefElement); - return `${identity(extRefElement.parentElement)}>${intAddr}[${intAddrIndex}]`; -} /** * A sub element for showing all Ext Refs from a FCDA Element. @@ -78,33 +67,75 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { subscriberview!: boolean; @property({ type: Boolean }) - get filterOnlySubscribed(): boolean { + get notAutoIncrement(): boolean { return ( localStorage.getItem( - `subscriber-later-binding-${this.controlTag}$filter-only-subscribed` + `extref-list-${this.controlTag}$notAutoIncrement` ) === 'true' ?? false ); } - set filterOnlySubscribed(value: boolean) { + set notAutoIncrement(value: boolean) { + const oldValue = this.hideSubscribed; localStorage.setItem( - `subscriber-later-binding-${this.controlTag}$filter-only-subscribed`, + `extref-list-${this.controlTag}$notAutoIncrement`, `${value}` ); + this.requestUpdate('notAutoIncrement', oldValue); } - @query('.actions-menu') - actionsMenu!: Menu; + @property({ type: Boolean }) + get hideSubscribed(): boolean { + return ( + localStorage.getItem(`extref-list-${this.controlTag}$hideSubscribed`) === + 'true' ?? false + ); + } - @query('.actions-menu-icon') - actionsMenuIcon!: Icon; + set hideSubscribed(value: boolean) { + const oldValue = this.hideSubscribed; + localStorage.setItem( + `extref-list-${this.controlTag}$hideSubscribed`, + `${value}` + ); + this.requestUpdate('hideSubscribed', oldValue); + } + + @property({ type: Boolean }) + get hideNotSubscribed(): boolean { + return ( + localStorage.getItem( + `extref-list-${this.controlTag}$hideNotSubscribed` + ) === 'true' ?? false + ); + } + + set hideNotSubscribed(value: boolean) { + const oldValue = this.hideNotSubscribed; + localStorage.setItem( + `extref-list-${this.controlTag}$hideNotSubscribed`, + `${value}` + ); + this.requestUpdate('hideNotSubscribed', oldValue); + } + + @query('.filter-menu') + filterMenu!: Menu; + + @query('.settings-menu') + settingsMenu!: Menu; + + @query('.filter-action-menu-icon') + filterMenuIcon!: Icon; + + @query('.settings-action-menu-icon') + settingsMenuIcon!: Icon; + + @query('.extref-list') extRefList!: List; @query('mwc-list-item.activated') currentActivatedExtRefItem!: ListItem; - @query('.filter-subscribed') - onlySubscribedCheckListItem!: CheckListItem; - private supervisionData = new Map(); selectedPublisherControlElement: Element | undefined; @@ -146,24 +177,26 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { this.reCreateSupervisionCache(); // console.log(this.currentActivatedExtRefItem); - // deactivate/deselect - const activatedItem = ( - this.shadowRoot!.querySelector('mwc-list-item[activated].extref')! - ); - const nextActivatableItem = ( - this.shadowRoot!.querySelector( - 'mwc-list-item[activated].extref ~ mwc-list-item.extref' - ) - ); - activatedItem.selected = false; - activatedItem.activated = false; - activatedItem.requestUpdate(); - - if (nextActivatableItem) { - // activate/select next sibling - nextActivatableItem!.selected = true; - nextActivatableItem!.activated = true; - nextActivatableItem!.requestUpdate(); + if (!this.notAutoIncrement) { + // deactivate/deselect + const activatedItem = ( + this.shadowRoot!.querySelector('mwc-list-item[activated].extref')! + ); + const nextActivatableItem = ( + this.shadowRoot!.querySelector( + 'mwc-list-item[activated].extref ~ mwc-list-item.extref' + ) + ); + activatedItem.selected = false; + activatedItem.activated = false; + activatedItem.requestUpdate(); + + if (nextActivatableItem) { + // activate/select next sibling + nextActivatableItem!.selected = true; + nextActivatableItem!.activated = true; + nextActivatableItem!.requestUpdate(); + } } } } @@ -271,14 +304,18 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { this.serviceTypeLookup[this.controlTag] ) .sort((a, b) => { - return getExtRefId(a).localeCompare(getExtRefId(b)); + return `${identity(a)}`.localeCompare(`${identity(b)}`); }); } private renderTitle(): TemplateResult { + const menuClasses = { + 'filter-off': this.hideSubscribed || this.hideNotSubscribed, + }; return html`

${translate(`subscription.laterBinding.extRefList.title`)} @@ -287,30 +324,60 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { )} > { - if (!this.actionsMenu.open) this.actionsMenu.show(); - else this.actionsMenu.close(); + if (!this.filterMenu.open) this.filterMenu.show(); + else this.filterMenu.close(); }} > + ${translate('subscription.laterBinding.extRefList.bound')} + + { - this.actionsMenu.close(); - }} + ?selected=${!this.hideNotSubscribed} > - ${translate('subscription.subscriber.onlyConfigured')} + ${translate('subscription.laterBinding.extRefList.unBound')} + + + { + if (!this.settingsMenu.open) this.settingsMenu.show(); + else this.settingsMenu.close(); + }} + > + + + ${translate( + 'subscription.laterBinding.extRefList.autoIncrement' + )}

`; @@ -350,11 +417,28 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { return this.supervisionData.get(cbRefKey); } + updateBaseFilterState(): void { + !this.hideSubscribed + ? this.extRefList!.classList.add('show-subscribed') + : this.extRefList!.classList.remove('show-subscribed'); + !this.hideNotSubscribed + ? this.extRefList!.classList.add('show-not-subscribed') + : this.extRefList!.classList.remove('show-not-subscribed'); + } + protected firstUpdated(): void { - this.actionsMenu.anchor = this.actionsMenuIcon; + this.filterMenu.anchor = this.filterMenuIcon; + this.filterMenu.addEventListener('closed', () => { + this.hideSubscribed = !(>this.filterMenu.index).has(0); + this.hideNotSubscribed = !(>this.filterMenu.index).has(1); + this.updateBaseFilterState(); + }); - this.actionsMenu.addEventListener('closed', () => { - this.filterOnlySubscribed = (>this.actionsMenu.index).has(0); + this.updateBaseFilterState(); + + this.settingsMenu.anchor = this.settingsMenuIcon; + this.settingsMenu.addEventListener('closed', () => { + this.notAutoIncrement = !(>this.settingsMenu.index).has(0); }); } @@ -365,7 +449,12 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { let supervisionDescription: string | undefined; const subscribed = isSubscribed(extRefElement); - if (this.filterOnlySubscribed && !subscribed) return html``; + + const filterClasses = { + extref: true, + 'show-subscribed': subscribed, + 'show-not-subscribed': !subscribed, + }; if (subscribed) { subscriberFCDA = findFCDAs(extRefElement).find(x => x !== undefined); @@ -384,7 +473,7 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { return html` { @@ -441,10 +530,20 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { if (this.supervisionData.size === 0) this.reCreateSupervisionCache(); return html`${repeat( getOrderedIeds(this.doc), - i => getExtRefId(i), - ied => - html` + i => `${identity(i)}`, + ied => { + const extRefs = Array.from(this.getExtRefElementsByIED(ied)); + const showSubscribed = extRefs.some(extRef => isSubscribed(extRef)); + const showNotSubscribed = extRefs.some(extRef => !isSubscribed(extRef)); + const filterClasses = { + ied: true, + 'show-subscribed': showSubscribed, + 'show-not-subscribed': showNotSubscribed, + }; + + return html` ${repeat( Array.from(this.getExtRefElementsByIED(ied)), - exId => getExtRefId(exId), + exId => `${identity(exId)}`, extRef => this.renderCompleteExtRefElement(extRef) )} - ` + `; + } )}`; } render(): TemplateResult { + const filteredListClasses = { + 'extref-list': true, + 'show-subscribed': !this.hideSubscribed, + 'show-not-subscribed': !this.hideNotSubscribed, + }; + return html`
${this.renderTitle()} - ${this.renderExtRefsByIED()} + ${this.renderExtRefsByIED()}
`; } @@ -487,15 +595,42 @@ export class ExtRefLaterBindingListSubscriber extends LitElement { position: relative; } - .actions-menu-icon { + .filter-action-menu-icon, + .settings-action-menu-icon { float: right; } - .actions-menu-icon.filter-on { + .filter-action-menu-icon.filter-off { color: var(--secondary); background-color: var(--mdc-theme-background); } + /* remove all IEDs and ExtRefs if no filters */ + filtered-list:not(.show-subscribed, .show-not-subscribed) mwc-list-item { + display: none; + } + + /* remove IEDs taking care to respect multiple conditions */ + filtered-list.show-not-subscribed:not(.show-subscribed) + mwc-list-item.ied.show-subscribed:not(.show-not-subscribed) { + display: none; + } + + filtered-list.show-subscribed:not(.show-not-subscribed) + mwc-list-item.ied.show-not-subscribed:not(.show-subscribed) { + display: none; + } + + /* remove ExtRefs if not part of filter */ + filtered-list:not(.show-not-subscribed) + mwc-list-item.extref.show-not-subscribed { + display: none; + } + + filtered-list:not(.show-subscribed) mwc-list-item.extref.show-subscribed { + display: none; + } + h3 { color: var(--mdc-theme-on-surface); font-family: 'Roboto', sans-serif; diff --git a/src/translations/de.ts b/src/translations/de.ts index 2b4a3a3d30..97eb365389 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -398,6 +398,11 @@ export const de: Translations = { noSubscribedExtRefs: 'Keine bestehenden Verbindungen', noAvailableExtRefs: 'Keine verfügbaren Eingänge vorhanden', switchView: 'Wechseln Sie zur Publisher-Ansicht', + filter: 'Filter', + settings: 'Einstellungen', + autoIncrement: 'Auto-Inkrement', + bound: 'Gebunden', + unBound: 'Ungebunden', }, switchControlBlockView: 'Wechseln Sie zur Abonnentenansicht', }, diff --git a/src/translations/en.ts b/src/translations/en.ts index 30583fc9fc..3db703e3f4 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -394,6 +394,11 @@ export const en = { noSubscribedExtRefs: 'No subscribed inputs', noAvailableExtRefs: 'No available inputs to subscribe', switchView: 'Switch to Publisher view', + filter: 'Filter', + settings: 'Settings', + autoIncrement: 'Auto-increment', + bound: 'Bound', + unBound: 'Unbound', }, switchControlBlockView: 'Switch to Subscriber view', },