| import '@material/mwc-dialog/mwc-dialog.js'; |
| import '@material/web/button/text-button.js'; |
| import './TwptWorkflowProgress.js'; |
| |
| import {css, html, LitElement} from 'lit'; |
| import {createRef, ref} from 'lit/directives/ref.js'; |
| |
| import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js'; |
| import WorkflowRunner from '../runner.js'; |
| |
| export default class TwptWorkflowDialog extends LitElement { |
| static properties = { |
| open: {type: Boolean}, |
| workflow: {type: Object}, |
| _runner: {type: Object, state: true}, |
| }; |
| |
| static styles = [ |
| SHARED_MD3_STYLES, |
| css` |
| :host { |
| --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000); |
| --mdc-dialog-z-index: 200; |
| } |
| |
| .workflow-name { |
| font-weight: 500; |
| } |
| `, |
| ]; |
| |
| progressRef = createRef(); |
| |
| constructor() { |
| super(); |
| this.open = false; |
| } |
| |
| render() { |
| return html` |
| <mwc-dialog |
| ?open=${this.open} |
| @opening=${this._openingDialog} |
| @closing=${this._closingDialog} |
| heading=${'Running ' + this.workflow?.getName?.() + '...'}> |
| <twpt-workflow-progress ${ref(this.progressRef)} |
| .workflow=${this.workflow} |
| currentThread=${this._runner?.currentThreadIndex} |
| numThreads=${this._runner?.numThreads} |
| currentAction=${this._runner?.currentActionIndex} |
| status=${this._runner?.status}> |
| </twpt-workflow-progress> |
| |
| <md-text-button |
| ?disabled=${this._runner?.status !== 'finished'} |
| slot="primaryAction" |
| dialogAction="cancel" |
| label="Close"> |
| </md-text-button> |
| </mwc-dialog> |
| `; |
| } |
| |
| start() { |
| this._runner = |
| new WorkflowRunner(this.workflow, () => this.requestUpdate()); |
| this._runner.start(); |
| this.open = true; |
| } |
| |
| _openingDialog() { |
| this.open = true; |
| } |
| |
| _closingDialog() { |
| this.open = false; |
| } |
| } |
| window.customElements.define('twpt-workflow-dialog', TwptWorkflowDialog); |