import { css , customElement , html , LitElement , property , query , TemplateResult , } from 'lit-element' ; import { translate } from 'lit-translate' ; import '@material/mwc-icon-button' ; import { Menu } from '@material/mwc-menu' ; import { IconButton } from '@material/mwc-icon-button' ; import { ListItem } from '@material/mwc-list/mwc-list-item' ; import '../action-pane.js' ; import './ied-editor.js' ; import './voltage-level-editor.js' ; import { newActionEvent , newWizardEvent , SCLTag , tags } from '../foundation.js' ; import { emptyWizard , wizards } from '../wizards/wizard-library.js' ; import { cloneSubstationElement , selectors , startMove , styles , } from './foundation.js' ; function childTags ( element ) { if ( ! element ) return [ ] ; return tags [ < SCLTag > element . tagName ] . children . filter ( child => wizards [ child ] . create !== emptyWizard ) ; } /** [[`Substation`]] plugin subeditor for editing `Substation` sections. */ @ customElement ( 'substation-editor' ) export class SubstationEditor extends LitElement { /** The edited `Element`, a common property of all Substation subeditors. */ @ property ( { attribute : false } ) element ! : Element ; @ property ( { type : Boolean } ) readonly = false ; @ property ( { type : String } ) get header ( ) : string { const name = this . element . getAttribute ( 'name' ) ?? '' ; const desc = this . element . getAttribute ( 'desc' ) ; return `${ name } ${ desc ? `- ${ desc }` : '' }` ; } @ property ( { attribute : false } ) getAttachedIeds ? : ( element : Element ) => Element [ ] = ( ) => { return [ ] ; } ; @ query ( 'mwc-menu' ) addMenu ! : Menu ; @ query ( 'mwc-icon-button[icon="playlist_add"]' ) addButton ! : IconButton ; /** Opens a [[`WizardDialog`]] for editing [[`element`]]. */ openEditWizard ( ) { const wizard = wizards [ 'Substation' ] . edit ( this . element ) ; if ( wizard ) this . dispatchEvent ( newWizardEvent ( wizard ) ) ; } /** Opens a [[`WizardDialog`]] for editing `LNode` connections. */ openLNodeWizard ( ) { const wizard = wizards [ 'LNode' ] . edit ( this . element ) ; if ( wizard ) this . dispatchEvent ( newWizardEvent ( wizard ) ) ; } /** Deletes [[`element`]]. */ remove ( ) { this . dispatchEvent ( newActionEvent ( { old : { parent : this . element . parentElement ! , element : this . element , reference : this . element . nextSibling , } , } ) ) ; } private openCreateWizard ( tagName ) { const wizard = wizards [ < SCLTag > tagName ] . create ( this . element ! ) ; if ( wizard ) this . dispatchEvent ( newWizardEvent ( wizard ) ) ; } firstUpdated ( ) { this . addMenu . anchor = < HTMLElement > this . addButton ; } renderIedContainer ( ) { const ieds = this . getAttachedIeds ?. ( this . element ) ?? [ ] ; return ieds ?. length ? html `<div id="iedcontainer">
          ${ ieds . map ( ied => html `<ied-editor .element=${ ied }></ied-editor>` ) }
        </div>` : html `` ; } private renderAddButtons ( ) { return childTags ( this . element ) . map ( child => html `<mwc-list-item value="${ child }"
          ><span>${ child }</span></mwc-list-item
        >` ) ; } render ( ) { return html `<action-pane label="${ this . header }">
      <abbr slot="action" title="${ translate ( 'lnode.tooltip' ) }">
        <mwc-icon-button
          icon="account_tree"
          @click=${ ( ) => this . openLNodeWizard ( ) }
        ></mwc-icon-button>
      </abbr>
      <abbr slot="action" title="${ translate ( 'duplicate' ) }">
        <mwc-icon-button
          icon="content_copy"
          @click=${ ( ) => cloneSubstationElement ( this ) }
        ></mwc-icon-button>
      </abbr>
      <abbr slot="action" title="${ translate ( 'edit' ) }">
        <mwc-icon-button
          icon="edit"
          @click=${ ( ) => this . openEditWizard ( ) }
        ></mwc-icon-button>
      </abbr>
      <abbr slot="action" title="${ translate ( 'move' ) }">
        <mwc-icon-button
          icon="forward"
          @click=${ ( ) => startMove ( this , SubstationEditor , SubstationEditor ) }
        ></mwc-icon-button>
      </abbr>
      <abbr slot="action" title="${ translate ( 'remove' ) }">
        <mwc-icon-button
          icon="delete"
          @click=${ ( ) => this . remove ( ) }
        ></mwc-icon-button
      ></abbr>
      <abbr
        slot="action"
        style="position:relative;"
        title="${ translate ( 'add' ) }"
      >
        <mwc-icon-button
          icon="playlist_add"
          @click=${ ( ) => ( this . addMenu . open = true ) }
        ></mwc-icon-button
        ><mwc-menu
          corner="BOTTOM_RIGHT"
          menuCorner="END"
          @selected=${ ( e ) => { const tagName = ( < ListItem > ( < Menu > e . target ) . selected ) . value ; this . openCreateWizard ( tagName ) ; } }
          >${ this . renderAddButtons ( ) }</mwc-menu
        >
      </abbr>
      ${ this . renderIedContainer ( ) }
      ${ Array . from ( this . element . querySelectorAll ( selectors . VoltageLevel ) ) . map ( voltageLevel => html `<voltage-level-editor
            .element=${ voltageLevel }
            .getAttachedIeds=${ this . getAttachedIeds }
            ?readonly=${ this . readonly }
          ></voltage-level-editor>` ) }</action-pane
    >` ; } static styles = css `
    ${ styles }
  ` ; }