@nyaruka/temba-components 0.107.0 → 0.108.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/demo/index.html +2 -2
- package/dist/temba-components.js +78 -34
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/dialog/Modax.js +3 -1
- package/out-tsc/src/dialog/Modax.js.map +1 -1
- package/out-tsc/src/progress/ProgressBar.js +78 -31
- package/out-tsc/src/progress/ProgressBar.js.map +1 -1
- package/out-tsc/src/progress/StartProgress.js +150 -0
- package/out-tsc/src/progress/StartProgress.js.map +1 -0
- package/out-tsc/src/utils/index.js +3 -0
- package/out-tsc/src/utils/index.js.map +1 -1
- package/out-tsc/temba-modules.js +2 -2
- package/out-tsc/temba-modules.js.map +1 -1
- package/package.json +1 -1
- package/src/dialog/Modax.ts +5 -1
- package/src/progress/ProgressBar.ts +79 -33
- package/src/progress/StartProgress.ts +158 -0
- package/src/utils/index.ts +4 -0
- package/temba-modules.ts +2 -2
- package/out-tsc/src/progress/FlowStartProgress.js +0 -60
- package/out-tsc/src/progress/FlowStartProgress.js.map +0 -1
- package/src/progress/FlowStartProgress.ts +0 -67
|
@@ -314,7 +314,9 @@ export class Modax extends RapidElement {
|
|
|
314
314
|
this.fetching = false;
|
|
315
315
|
}
|
|
316
316
|
isDestructive() {
|
|
317
|
-
return this.endpoint &&
|
|
317
|
+
return (this.endpoint &&
|
|
318
|
+
(this.endpoint.indexOf('delete') > -1 ||
|
|
319
|
+
this.endpoint.indexOf('interrupt') > -1));
|
|
318
320
|
}
|
|
319
321
|
handleGotoStep(evt) {
|
|
320
322
|
const step = evt.target.dataset.gotoStep;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n static get styles() {\n return css`\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n }\n\n .control-group {\n margin-bottom: var(--control-margin-bottom);\n }\n\n .form-actions {\n display: none;\n }\n\n button[type='submit'],\n input[type='submit'] {\n display: none;\n }\n\n .modax-body {\n padding: 20px;\n display: block;\n position: relative;\n background: var(--body-bg);\n }\n\n .modax-body.submitting:before {\n display: inline-block;\n content: '';\n height: 100%;\n width: 100%;\n margin-left: -20px;\n margin-top: -20px;\n background: rgba(200, 200, 200, 0.1);\n position: absolute;\n z-index: 10000;\n }\n\n temba-loading {\n margin: 0 auto;\n display: block;\n width: 150px;\n }\n\n ul.errorlist {\n margin-top: 0px;\n list-style-type: none;\n padding-left: 0;\n padding-bottom: 7px;\n }\n\n ul.errorlist li {\n color: var(--color-error);\n background: rgba(255, 181, 181, 0.17);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n color: tomato;\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 6px;\n }\n\n .step-ball {\n background: rgba(var(--primary-rgb), 0.2);\n width: 1.2em;\n height: 1.2em;\n border-radius: 100%;\n margin-right: 0.5em;\n border: 0.15em solid transparent;\n }\n\n .step-ball.complete {\n background: rgba(var(--primary-rgb), 0.7);\n cursor: pointer;\n }\n .step-ball.complete:hover {\n background: rgba(var(--primary-rgb), 0.8);\n }\n\n .step-ball.active {\n border: 0.15em solid var(--color-primary-dark);\n }\n\n .wizard-steps {\n display: flex;\n flex-direction: row;\n margin-left: 0.6em;\n }\n `;\n }\n\n @property({ type: String })\n header = '';\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean })\n fetching = false;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: String })\n primaryName: string;\n\n @property({ type: String })\n cancelName: string;\n\n @property({ type: String })\n onLoaded: string;\n\n @property({ type: Boolean })\n noSubmit: boolean;\n\n @property({ type: Object })\n headers: any = {};\n\n @property({ type: String })\n body: any = this.getLoading();\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ type: Number })\n wizardStep = 0;\n\n @property({ type: Number })\n wizardStepCount = 0;\n\n @property({ type: Boolean })\n suspendSubmit = false;\n // private cancelToken: CancelTokenSource;\n\n private handleSlotClicked(): void {\n this.open = true;\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('open')) {\n if (this.open) {\n this.fetchForm();\n } else {\n // open can get reflected into undefined, make sure we've been open before\n if (changes.get('open') !== undefined) {\n // hide our body after our hiding animation is done\n if (this.open) {\n window.setTimeout(() => {\n this.body = this.getLoading();\n this.submitting = false;\n }, 500);\n } else {\n // clear the modal body out when closed, note that js functions declared on the\n // window will hang around\n this.setBody('');\n }\n }\n }\n }\n\n if (changes.has('body') && this.open && this.body && !this.fetching) {\n const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n dialog.focusFirstInput();\n }\n }\n\n private getLoading() {\n return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n }\n\n public updatePrimaryButton(): void {\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n this.wizardStep = parseInt(wizard.dataset.step);\n this.wizardStepCount = parseInt(wizard.dataset.steps);\n }\n\n if (!this.noSubmit) {\n this.updateComplete.then(() => {\n const submitButton = this.shadowRoot.querySelector(\n \"input[type='submit'],button[type='submit']\"\n ) as any;\n\n if (submitButton) {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n { type: ButtonType.PRIMARY, name: submitButton.value }\n ];\n } else {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Ok', closes: true }\n ];\n }\n this.submitting = false;\n });\n }\n }\n\n private setBody(body: string): boolean {\n // remove any existing on our previous body\n const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n for (const child of scriptBlock.children) {\n child.remove();\n }\n\n // parse out any scripts in the body\n const div = this.ownerDocument.createElement('div');\n div.innerHTML = body;\n const scripts = div.getElementsByTagName('script');\n const toAdd: any = [];\n // now add them in\n for (let i = scripts.length - 1; i >= 0; i--) {\n // for (let i = 0; i < scripts.length; i++) {\n const script = this.ownerDocument.createElement('script');\n const code = scripts[i].innerText;\n\n if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n script.src = scripts[i].src;\n script.type = 'text/javascript';\n script.async = true;\n\n // TODO: track and fire event once all scripts are loaded\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n script.onload = function () {};\n toAdd.push(script);\n } else if (code) {\n script.appendChild(this.ownerDocument.createTextNode(code));\n toAdd.push(script);\n // remove it from our current body text\n }\n scripts[i].remove();\n }\n\n const scriptOnly = !!div.querySelector('.success-script');\n\n if (!scriptOnly) {\n this.body = unsafeHTML(div.innerHTML);\n }\n\n this.updateComplete.then(() => {\n for (const script of toAdd) {\n scriptBlock.appendChild(script);\n }\n });\n return !scriptOnly;\n }\n\n public getHeaders(): any {\n const headers = this.headers;\n headers['X-PJAX'] = 1;\n return headers;\n }\n\n private fetchForm() {\n // const CancelToken = axios.CancelToken;\n // this.cancelToken = CancelToken.source();\n this.fetching = true;\n this.body = this.getLoading();\n getUrl(this.endpoint, null, this.getHeaders()).then(\n (response: WebResponse) => {\n // if it's a full page, breakout of the modal\n if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n document.location = response.url;\n } else {\n this.setBody(response.body);\n this.fetching = false;\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n this.fireCustomEvent(CustomEventType.Loaded, {\n body: this.getBody()\n });\n });\n }\n }\n );\n }\n\n public submit(extra = {}): void {\n this.submitting = true;\n const form = this.shadowRoot.querySelector('form');\n\n let postData = form ? serialize(form) : '';\n if (extra) {\n Object.keys(extra).forEach((key) => {\n postData +=\n (postData.length > 1 ? '&' : '') +\n encodeURIComponent(key) +\n '=' +\n encodeURIComponent(extra[key]);\n });\n }\n\n postUrl(\n this.endpoint,\n postData,\n this.getHeaders(),\n 'application/x-www-form-urlencoded'\n )\n .then((response: WebResponse) => {\n window.setTimeout(() => {\n let redirect = response.headers.get('temba-success');\n if (\n !redirect &&\n response.url &&\n response.url.indexOf(this.endpoint) === -1\n ) {\n redirect = response.url;\n }\n\n if (redirect) {\n if (redirect === 'hide') {\n this.updateComplete.then(() => {\n this.open = false;\n this.fireCustomEvent(CustomEventType.Submitted);\n });\n } else {\n this.fireCustomEvent(CustomEventType.Redirected, {\n url: redirect\n });\n this.open = false;\n }\n } else {\n // if we set the body, update our submit button\n if (this.setBody(response.body)) {\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n });\n }\n }\n }, 1000);\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n private handleDialogClick(evt: CustomEvent) {\n const button = evt.detail.button;\n const detail = evt.detail.detail;\n if (!button.disabled && !button.submitting) {\n if (button.primary || button.destructive) {\n if (!this.suspendSubmit) {\n this.submit();\n }\n }\n }\n\n if (detail.closes) {\n this.open = false;\n this.fetching = false;\n this.cancelName = undefined;\n }\n }\n\n private handleDialogHidden() {\n // this.cancelToken.cancel();\n this.open = false;\n this.fetching = false;\n }\n\n private isDestructive(): boolean {\n return this.endpoint && this.endpoint.indexOf('delete') > -1;\n }\n\n private handleGotoStep(evt: MouseEvent) {\n const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n if (step) {\n this.submit({ wizard_goto_step: step });\n }\n }\n\n public getBody() {\n return this.shadowRoot.querySelector('.modax-body');\n }\n\n public render(): TemplateResult {\n const wizardStepBalls = [];\n\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n const completed = (wizard.getAttribute('data-completed') || '')\n .split(',')\n .filter((step) => step.length > 0);\n\n for (let i = 0; i < this.wizardStepCount; i++) {\n wizardStepBalls.push(\n html`<div\n data-goto-step=${completed[i]}\n @click=${this.handleGotoStep.bind(this)}\n class=\"${getClasses({\n 'step-ball': true,\n active: this.wizardStep - 1 === i,\n complete: i < completed.length\n })}\"\n ></div>`\n );\n }\n }\n\n return html`\n <temba-dialog\n .header=${this.header}\n .buttons=${this.buttons}\n ?open=${this.open}\n ?loading=${this.fetching}\n ?submitting=${this.submitting}\n ?destructive=${this.isDestructive()}\n ?noFocus=${true}\n ?disabled=${this.disabled}\n @temba-button-clicked=${this.handleDialogClick.bind(this)}\n @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n >\n <div\n class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n >\n ${this.body}\n </div>\n <div class=\"scripts\"></div>\n <div slot=\"gutter\">\n <div class=\"wizard-steps\">${wizardStepBalls}</div>\n </div>\n </temba-dialog>\n <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n static get styles() {\n return css`\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n }\n\n .control-group {\n margin-bottom: var(--control-margin-bottom);\n }\n\n .form-actions {\n display: none;\n }\n\n button[type='submit'],\n input[type='submit'] {\n display: none;\n }\n\n .modax-body {\n padding: 20px;\n display: block;\n position: relative;\n background: var(--body-bg);\n }\n\n .modax-body.submitting:before {\n display: inline-block;\n content: '';\n height: 100%;\n width: 100%;\n margin-left: -20px;\n margin-top: -20px;\n background: rgba(200, 200, 200, 0.1);\n position: absolute;\n z-index: 10000;\n }\n\n temba-loading {\n margin: 0 auto;\n display: block;\n width: 150px;\n }\n\n ul.errorlist {\n margin-top: 0px;\n list-style-type: none;\n padding-left: 0;\n padding-bottom: 7px;\n }\n\n ul.errorlist li {\n color: var(--color-error);\n background: rgba(255, 181, 181, 0.17);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n color: tomato;\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 6px;\n }\n\n .step-ball {\n background: rgba(var(--primary-rgb), 0.2);\n width: 1.2em;\n height: 1.2em;\n border-radius: 100%;\n margin-right: 0.5em;\n border: 0.15em solid transparent;\n }\n\n .step-ball.complete {\n background: rgba(var(--primary-rgb), 0.7);\n cursor: pointer;\n }\n .step-ball.complete:hover {\n background: rgba(var(--primary-rgb), 0.8);\n }\n\n .step-ball.active {\n border: 0.15em solid var(--color-primary-dark);\n }\n\n .wizard-steps {\n display: flex;\n flex-direction: row;\n margin-left: 0.6em;\n }\n `;\n }\n\n @property({ type: String })\n header = '';\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean })\n fetching = false;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: String })\n primaryName: string;\n\n @property({ type: String })\n cancelName: string;\n\n @property({ type: String })\n onLoaded: string;\n\n @property({ type: Boolean })\n noSubmit: boolean;\n\n @property({ type: Object })\n headers: any = {};\n\n @property({ type: String })\n body: any = this.getLoading();\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ type: Number })\n wizardStep = 0;\n\n @property({ type: Number })\n wizardStepCount = 0;\n\n @property({ type: Boolean })\n suspendSubmit = false;\n // private cancelToken: CancelTokenSource;\n\n private handleSlotClicked(): void {\n this.open = true;\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('open')) {\n if (this.open) {\n this.fetchForm();\n } else {\n // open can get reflected into undefined, make sure we've been open before\n if (changes.get('open') !== undefined) {\n // hide our body after our hiding animation is done\n if (this.open) {\n window.setTimeout(() => {\n this.body = this.getLoading();\n this.submitting = false;\n }, 500);\n } else {\n // clear the modal body out when closed, note that js functions declared on the\n // window will hang around\n this.setBody('');\n }\n }\n }\n }\n\n if (changes.has('body') && this.open && this.body && !this.fetching) {\n const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n dialog.focusFirstInput();\n }\n }\n\n private getLoading() {\n return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n }\n\n public updatePrimaryButton(): void {\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n this.wizardStep = parseInt(wizard.dataset.step);\n this.wizardStepCount = parseInt(wizard.dataset.steps);\n }\n\n if (!this.noSubmit) {\n this.updateComplete.then(() => {\n const submitButton = this.shadowRoot.querySelector(\n \"input[type='submit'],button[type='submit']\"\n ) as any;\n\n if (submitButton) {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n { type: ButtonType.PRIMARY, name: submitButton.value }\n ];\n } else {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Ok', closes: true }\n ];\n }\n this.submitting = false;\n });\n }\n }\n\n private setBody(body: string): boolean {\n // remove any existing on our previous body\n const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n for (const child of scriptBlock.children) {\n child.remove();\n }\n\n // parse out any scripts in the body\n const div = this.ownerDocument.createElement('div');\n div.innerHTML = body;\n const scripts = div.getElementsByTagName('script');\n const toAdd: any = [];\n // now add them in\n for (let i = scripts.length - 1; i >= 0; i--) {\n // for (let i = 0; i < scripts.length; i++) {\n const script = this.ownerDocument.createElement('script');\n const code = scripts[i].innerText;\n\n if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n script.src = scripts[i].src;\n script.type = 'text/javascript';\n script.async = true;\n\n // TODO: track and fire event once all scripts are loaded\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n script.onload = function () {};\n toAdd.push(script);\n } else if (code) {\n script.appendChild(this.ownerDocument.createTextNode(code));\n toAdd.push(script);\n // remove it from our current body text\n }\n scripts[i].remove();\n }\n\n const scriptOnly = !!div.querySelector('.success-script');\n\n if (!scriptOnly) {\n this.body = unsafeHTML(div.innerHTML);\n }\n\n this.updateComplete.then(() => {\n for (const script of toAdd) {\n scriptBlock.appendChild(script);\n }\n });\n return !scriptOnly;\n }\n\n public getHeaders(): any {\n const headers = this.headers;\n headers['X-PJAX'] = 1;\n return headers;\n }\n\n private fetchForm() {\n // const CancelToken = axios.CancelToken;\n // this.cancelToken = CancelToken.source();\n this.fetching = true;\n this.body = this.getLoading();\n getUrl(this.endpoint, null, this.getHeaders()).then(\n (response: WebResponse) => {\n // if it's a full page, breakout of the modal\n if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n document.location = response.url;\n } else {\n this.setBody(response.body);\n this.fetching = false;\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n this.fireCustomEvent(CustomEventType.Loaded, {\n body: this.getBody()\n });\n });\n }\n }\n );\n }\n\n public submit(extra = {}): void {\n this.submitting = true;\n const form = this.shadowRoot.querySelector('form');\n\n let postData = form ? serialize(form) : '';\n if (extra) {\n Object.keys(extra).forEach((key) => {\n postData +=\n (postData.length > 1 ? '&' : '') +\n encodeURIComponent(key) +\n '=' +\n encodeURIComponent(extra[key]);\n });\n }\n\n postUrl(\n this.endpoint,\n postData,\n this.getHeaders(),\n 'application/x-www-form-urlencoded'\n )\n .then((response: WebResponse) => {\n window.setTimeout(() => {\n let redirect = response.headers.get('temba-success');\n if (\n !redirect &&\n response.url &&\n response.url.indexOf(this.endpoint) === -1\n ) {\n redirect = response.url;\n }\n\n if (redirect) {\n if (redirect === 'hide') {\n this.updateComplete.then(() => {\n this.open = false;\n this.fireCustomEvent(CustomEventType.Submitted);\n });\n } else {\n this.fireCustomEvent(CustomEventType.Redirected, {\n url: redirect\n });\n this.open = false;\n }\n } else {\n // if we set the body, update our submit button\n if (this.setBody(response.body)) {\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n });\n }\n }\n }, 1000);\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n private handleDialogClick(evt: CustomEvent) {\n const button = evt.detail.button;\n const detail = evt.detail.detail;\n if (!button.disabled && !button.submitting) {\n if (button.primary || button.destructive) {\n if (!this.suspendSubmit) {\n this.submit();\n }\n }\n }\n\n if (detail.closes) {\n this.open = false;\n this.fetching = false;\n this.cancelName = undefined;\n }\n }\n\n private handleDialogHidden() {\n // this.cancelToken.cancel();\n this.open = false;\n this.fetching = false;\n }\n\n private isDestructive(): boolean {\n return (\n this.endpoint &&\n (this.endpoint.indexOf('delete') > -1 ||\n this.endpoint.indexOf('interrupt') > -1)\n );\n }\n\n private handleGotoStep(evt: MouseEvent) {\n const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n if (step) {\n this.submit({ wizard_goto_step: step });\n }\n }\n\n public getBody() {\n return this.shadowRoot.querySelector('.modax-body');\n }\n\n public render(): TemplateResult {\n const wizardStepBalls = [];\n\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n const completed = (wizard.getAttribute('data-completed') || '')\n .split(',')\n .filter((step) => step.length > 0);\n\n for (let i = 0; i < this.wizardStepCount; i++) {\n wizardStepBalls.push(\n html`<div\n data-goto-step=${completed[i]}\n @click=${this.handleGotoStep.bind(this)}\n class=\"${getClasses({\n 'step-ball': true,\n active: this.wizardStep - 1 === i,\n complete: i < completed.length\n })}\"\n ></div>`\n );\n }\n }\n\n return html`\n <temba-dialog\n .header=${this.header}\n .buttons=${this.buttons}\n ?open=${this.open}\n ?loading=${this.fetching}\n ?submitting=${this.submitting}\n ?destructive=${this.isDestructive()}\n ?noFocus=${true}\n ?disabled=${this.disabled}\n @temba-button-clicked=${this.handleDialogClick.bind(this)}\n @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n >\n <div\n class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n >\n ${this.body}\n </div>\n <div class=\"scripts\"></div>\n <div slot=\"gutter\">\n <div class=\"wizard-steps\">${wizardStepBalls}</div>\n </div>\n </temba-dialog>\n <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -10,6 +10,7 @@ export class ProgressBar extends RapidElement {
|
|
|
10
10
|
this.pct = 0;
|
|
11
11
|
this.done = false;
|
|
12
12
|
this.showEstimatedCompletion = false;
|
|
13
|
+
this.showPercentage = false;
|
|
13
14
|
}
|
|
14
15
|
updated(changes) {
|
|
15
16
|
if (changes.has('eta') && this.eta) {
|
|
@@ -17,45 +18,76 @@ export class ProgressBar extends RapidElement {
|
|
|
17
18
|
this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();
|
|
18
19
|
}
|
|
19
20
|
if (changes.has('current')) {
|
|
20
|
-
|
|
21
|
+
const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));
|
|
22
|
+
if (Number.isNaN(pct)) {
|
|
23
|
+
this.showPercentage = false;
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
this.pct = pct;
|
|
27
|
+
this.showPercentage = true;
|
|
28
|
+
}
|
|
21
29
|
this.done = this.pct >= 100;
|
|
22
30
|
}
|
|
23
31
|
}
|
|
24
32
|
render() {
|
|
25
|
-
return html `<div class="
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
33
|
+
return html `<div class="wrapper ${this.done ? 'complete' : ''}">
|
|
34
|
+
<div class="meter ${this.done ? 'done' : ''}">
|
|
35
|
+
${this.message
|
|
36
|
+
? html `<div class="message">${this.message}</div>`
|
|
37
|
+
: null}
|
|
38
|
+
<span class="complete" style="flex-basis: ${this.pct}%"></span>
|
|
39
|
+
<div class="incomplete"></div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
${this.showPercentage || this.showEstimatedCompletion
|
|
43
|
+
? html `<div class="etc">
|
|
44
|
+
<div>
|
|
45
|
+
${this.estimatedCompletionDate &&
|
|
46
|
+
this.showEstimatedCompletion &&
|
|
47
|
+
!this.done
|
|
31
48
|
? html `<temba-date
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
49
|
+
value="${this.estimatedCompletionDate.toISOString()}"
|
|
50
|
+
display="countdown"
|
|
51
|
+
></temba-date>`
|
|
35
52
|
: html `${this.pct}%`}
|
|
53
|
+
</div>
|
|
36
54
|
</div>`
|
|
37
55
|
: null}
|
|
56
|
+
|
|
57
|
+
<slot></slot>
|
|
38
58
|
</div>`;
|
|
39
59
|
}
|
|
40
60
|
}
|
|
41
61
|
ProgressBar.styles = css `
|
|
42
|
-
.
|
|
62
|
+
.wrapper {
|
|
43
63
|
display: flex;
|
|
44
64
|
box-sizing: content-box;
|
|
45
|
-
height: 8px;
|
|
46
|
-
position: relative;
|
|
47
65
|
background: #f1f1f1;
|
|
48
66
|
border-radius: var(--curvature);
|
|
49
|
-
padding: 4px;
|
|
50
67
|
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
min-height: 1.5rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.message {
|
|
73
|
+
padding: 0 0.25rem;
|
|
74
|
+
color: rgba(0, 0, 0, 0.4);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.meter {
|
|
78
|
+
flex-grow: 1;
|
|
79
|
+
display: flex;
|
|
80
|
+
box-sizing: content-box;
|
|
81
|
+
position: relative;
|
|
82
|
+
border-top-right-radius: 0;
|
|
83
|
+
border-bottom-right-radius: 0;
|
|
84
|
+
padding: 4px;
|
|
85
|
+
min-height: 6px;
|
|
51
86
|
}
|
|
52
87
|
.meter > span {
|
|
53
88
|
display: block;
|
|
54
89
|
height: 100%;
|
|
55
|
-
border-
|
|
56
|
-
border-bottom-right-radius: var(--curvature);
|
|
57
|
-
border-top-left-radius: var(--curvature);
|
|
58
|
-
border-bottom-left-radius: var(--curvature);
|
|
90
|
+
border-radius: calc(var(--curvature) * 0.8);
|
|
59
91
|
background-color: var(--color-primary-dark);
|
|
60
92
|
background-image: linear-gradient(
|
|
61
93
|
center bottom,
|
|
@@ -66,6 +98,7 @@ ProgressBar.styles = css `
|
|
|
66
98
|
position: relative;
|
|
67
99
|
overflow: hidden;
|
|
68
100
|
}
|
|
101
|
+
|
|
69
102
|
.meter > span:after,
|
|
70
103
|
.animate > span > span {
|
|
71
104
|
content: '';
|
|
@@ -86,7 +119,7 @@ ProgressBar.styles = css `
|
|
|
86
119
|
);
|
|
87
120
|
z-index: 1;
|
|
88
121
|
background-size: 50px 50px;
|
|
89
|
-
animation: move
|
|
122
|
+
animation: move 8s linear infinite;
|
|
90
123
|
border-top-right-radius: var(--curvature);
|
|
91
124
|
border-bottom-right-radius: var(--curvature);
|
|
92
125
|
border-top-left-radius: var(--curvature);
|
|
@@ -107,27 +140,35 @@ ProgressBar.styles = css `
|
|
|
107
140
|
}
|
|
108
141
|
}
|
|
109
142
|
|
|
110
|
-
.complete {
|
|
111
|
-
transition:
|
|
143
|
+
.meter .complete {
|
|
144
|
+
transition: flex-basis 2s;
|
|
112
145
|
}
|
|
113
146
|
|
|
114
|
-
.incomplete {
|
|
147
|
+
.meter .incomplete {
|
|
115
148
|
flex-grow: 1;
|
|
116
149
|
}
|
|
117
150
|
|
|
118
151
|
.etc {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
padding-top: 1px;
|
|
122
|
-
padding-left: 8px;
|
|
123
|
-
padding-right: 8px;
|
|
124
|
-
margin-top: -4px;
|
|
125
|
-
margin-bottom: -4px;
|
|
126
|
-
margin-right: -4px;
|
|
127
|
-
margin-left: 0.5em;
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: row;
|
|
128
154
|
background: rgba(0, 0, 0, 0.07);
|
|
129
155
|
font-weight: bold;
|
|
130
156
|
white-space: nowrap;
|
|
157
|
+
color: rgba(0, 0, 0, 0.5);
|
|
158
|
+
align-self: center;
|
|
159
|
+
padding: 0px 6px;
|
|
160
|
+
align-self: stretch;
|
|
161
|
+
align-items: center;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.etc > div {
|
|
165
|
+
font-size: 0.7em;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.wrapper *::last-child {
|
|
169
|
+
border-top-right-radius: var(--curvature);
|
|
170
|
+
border-bottom-right-radius: var(--curvature);
|
|
171
|
+
overflow: hidden;
|
|
131
172
|
}
|
|
132
173
|
|
|
133
174
|
.meter.done > span:after,
|
|
@@ -160,4 +201,10 @@ __decorate([
|
|
|
160
201
|
__decorate([
|
|
161
202
|
property({ type: Boolean })
|
|
162
203
|
], ProgressBar.prototype, "showEstimatedCompletion", void 0);
|
|
204
|
+
__decorate([
|
|
205
|
+
property({ type: Boolean })
|
|
206
|
+
], ProgressBar.prototype, "showPercentage", void 0);
|
|
207
|
+
__decorate([
|
|
208
|
+
property({ type: String })
|
|
209
|
+
], ProgressBar.prototype, "message", void 0);
|
|
163
210
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/progress/ProgressBar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/progress/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n static styles = css`\n .wrapper {\n display: flex;\n box-sizing: content-box;\n background: #f1f1f1;\n border-radius: var(--curvature);\n box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n min-height: 1.5rem;\n }\n\n .message {\n padding: 0 0.25rem;\n color: rgba(0, 0, 0, 0.4);\n }\n\n .meter {\n flex-grow: 1;\n display: flex;\n box-sizing: content-box;\n position: relative;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 4px;\n min-height: 6px;\n }\n .meter > span {\n display: block;\n height: 100%;\n border-radius: calc(var(--curvature) * 0.8);\n background-color: var(--color-primary-dark);\n background-image: linear-gradient(\n center bottom,\n rgb(43, 194, 83) 37%,\n rgb(84, 240, 83) 69%\n );\n\n position: relative;\n overflow: hidden;\n }\n\n .meter > span:after,\n .animate > span > span {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n z-index: 1;\n background-size: 50px 50px;\n animation: move 8s linear infinite;\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature);\n border-bottom-left-radius: var(--curvature);\n overflow: hidden;\n }\n\n .animate > span:after {\n display: none;\n }\n\n @keyframes move {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n }\n\n .meter .complete {\n transition: flex-basis 2s;\n }\n\n .meter .incomplete {\n flex-grow: 1;\n }\n\n .etc {\n display: flex;\n flex-direction: row;\n background: rgba(0, 0, 0, 0.07);\n font-weight: bold;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.5);\n align-self: center;\n padding: 0px 6px;\n align-self: stretch;\n align-items: center;\n }\n\n .etc > div {\n font-size: 0.7em;\n }\n\n .wrapper *::last-child {\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n overflow: hidden;\n }\n\n .meter.done > span:after,\n .done .animate > span > span {\n display: none;\n }\n\n .meter.done > span {\n background: rgb(var(--success-rgb));\n }\n `;\n\n @property({ type: Number })\n total = 100;\n\n @property({ type: Number })\n current = 0;\n\n @property({ type: Number })\n pct = 0;\n\n @property({ type: Boolean })\n done = false;\n\n @property({ type: String })\n eta: string;\n\n @property({ type: String, attribute: false })\n estimatedCompletionDate: Date;\n\n @property({ type: Boolean })\n showEstimatedCompletion = false;\n\n @property({ type: Boolean })\n showPercentage = false;\n\n @property({ type: String })\n message: string;\n\n public updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changes.has('eta') && this.eta) {\n this.estimatedCompletionDate = new Date(this.eta);\n this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n }\n\n if (changes.has('current')) {\n const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n if (Number.isNaN(pct)) {\n this.showPercentage = false;\n } else {\n this.pct = pct;\n this.showPercentage = true;\n }\n\n this.done = this.pct >= 100;\n }\n }\n\n public render(): TemplateResult {\n return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n <div class=\"meter ${this.done ? 'done' : ''}\">\n ${this.message\n ? html`<div class=\"message\">${this.message}</div>`\n : null}\n <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n <div class=\"incomplete\"></div>\n </div>\n\n ${this.showPercentage || this.showEstimatedCompletion\n ? html`<div class=\"etc\">\n <div>\n ${this.estimatedCompletionDate &&\n this.showEstimatedCompletion &&\n !this.done\n ? html`<temba-date\n value=\"${this.estimatedCompletionDate.toISOString()}\"\n display=\"countdown\"\n ></temba-date>`\n : html`${this.pct}%`}\n </div>\n </div>`\n : null}\n\n <slot></slot>\n </div>`;\n }\n}\n"]}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { RapidElement } from '../RapidElement';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { fetchResults, showModax } from '../utils';
|
|
6
|
+
export class StartProgress extends RapidElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.refreshes = 0;
|
|
10
|
+
this.complete = false;
|
|
11
|
+
this.running = false;
|
|
12
|
+
}
|
|
13
|
+
updated(changes) {
|
|
14
|
+
super.updated(changes);
|
|
15
|
+
if (changes.has('id')) {
|
|
16
|
+
this.refresh();
|
|
17
|
+
}
|
|
18
|
+
// Useful for simulating progress
|
|
19
|
+
/*
|
|
20
|
+
if (changes.has('current')) {
|
|
21
|
+
this.requestUpdate();
|
|
22
|
+
setTimeout(() => {
|
|
23
|
+
this.current = this.current + 100000;
|
|
24
|
+
this.complete = this.current >= this.total;
|
|
25
|
+
this.message = null;
|
|
26
|
+
|
|
27
|
+
if (this.complete) {
|
|
28
|
+
this.scheduleRemoval();
|
|
29
|
+
}
|
|
30
|
+
}, 5000);
|
|
31
|
+
}*/
|
|
32
|
+
}
|
|
33
|
+
interruptStart() {
|
|
34
|
+
showModax(this.interruptTitle, this.interruptEndpoint);
|
|
35
|
+
}
|
|
36
|
+
refresh() {
|
|
37
|
+
fetchResults(this.statusEndpoint).then((data) => {
|
|
38
|
+
if (data.length > 0) {
|
|
39
|
+
this.refreshes++;
|
|
40
|
+
const start = data[0];
|
|
41
|
+
this.current = start.progress.current;
|
|
42
|
+
this.total = start.progress.total;
|
|
43
|
+
this.complete =
|
|
44
|
+
start.status == 'Completed' ||
|
|
45
|
+
start.status == 'Failed' ||
|
|
46
|
+
start.status == 'Interrupted';
|
|
47
|
+
this.running = start.status === 'Started';
|
|
48
|
+
if (start.status === 'Pending') {
|
|
49
|
+
this.message = 'Preparing to start..';
|
|
50
|
+
}
|
|
51
|
+
else if (start.status === 'Queued') {
|
|
52
|
+
this.message = 'Waiting..';
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
this.message = null;
|
|
56
|
+
}
|
|
57
|
+
if (start.status === 'Started') {
|
|
58
|
+
const elapsed = new Date().getTime() - new Date(start.modified_on).getTime();
|
|
59
|
+
const rate = this.current / elapsed;
|
|
60
|
+
// only calculate eta if the rate is actually reasonable
|
|
61
|
+
if (rate > 0.1) {
|
|
62
|
+
const eta = new Date(new Date().getTime() + (this.total - this.current) / rate);
|
|
63
|
+
// Don't bother with estimates months out
|
|
64
|
+
const nextMonth = new Date();
|
|
65
|
+
nextMonth.setMonth(nextMonth.getMonth() + 2);
|
|
66
|
+
if (eta > nextMonth) {
|
|
67
|
+
this.eta = null;
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
this.eta = eta.toISOString();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
if (!this.complete && this.current < this.total) {
|
|
75
|
+
// refresh with a backoff up to 1 minute
|
|
76
|
+
setTimeout(() => {
|
|
77
|
+
this.refresh();
|
|
78
|
+
}, Math.min(1000 * this.refreshes, 60000));
|
|
79
|
+
}
|
|
80
|
+
if (this.complete) {
|
|
81
|
+
this.scheduleRemoval();
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
scheduleRemoval() {
|
|
87
|
+
setTimeout(() => {
|
|
88
|
+
this.remove();
|
|
89
|
+
}, 5000);
|
|
90
|
+
}
|
|
91
|
+
render() {
|
|
92
|
+
return html `<temba-progress
|
|
93
|
+
total=${this.total}
|
|
94
|
+
current=${this.current}
|
|
95
|
+
eta=${this.eta}
|
|
96
|
+
message=${this.message}
|
|
97
|
+
>
|
|
98
|
+
${this.running
|
|
99
|
+
? html `<temba-icon
|
|
100
|
+
name="close"
|
|
101
|
+
@click=${this.interruptStart}
|
|
102
|
+
></temba-icon>`
|
|
103
|
+
: null}
|
|
104
|
+
</temba-progress>`;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
StartProgress.styles = css `
|
|
108
|
+
temba-icon[name='close'] {
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
margin: 0 4px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
temba-icon[name='close']:hover {
|
|
114
|
+
color: var(--color-primary-dark);
|
|
115
|
+
}
|
|
116
|
+
`;
|
|
117
|
+
__decorate([
|
|
118
|
+
property({ type: String })
|
|
119
|
+
], StartProgress.prototype, "id", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
property({ type: Number })
|
|
122
|
+
], StartProgress.prototype, "current", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
property({ type: Number })
|
|
125
|
+
], StartProgress.prototype, "total", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Number })
|
|
128
|
+
], StartProgress.prototype, "refreshes", void 0);
|
|
129
|
+
__decorate([
|
|
130
|
+
property({ type: String })
|
|
131
|
+
], StartProgress.prototype, "eta", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
property({ type: Boolean })
|
|
134
|
+
], StartProgress.prototype, "complete", void 0);
|
|
135
|
+
__decorate([
|
|
136
|
+
property({ type: Boolean })
|
|
137
|
+
], StartProgress.prototype, "running", void 0);
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ type: String })
|
|
140
|
+
], StartProgress.prototype, "message", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property({ type: String })
|
|
143
|
+
], StartProgress.prototype, "statusEndpoint", void 0);
|
|
144
|
+
__decorate([
|
|
145
|
+
property({ type: String })
|
|
146
|
+
], StartProgress.prototype, "interruptTitle", void 0);
|
|
147
|
+
__decorate([
|
|
148
|
+
property({ type: String })
|
|
149
|
+
], StartProgress.prototype, "interruptEndpoint", void 0);
|
|
150
|
+
//# sourceMappingURL=StartProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StartProgress.js","sourceRoot":"","sources":["../../../src/progress/StartProgress.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { fetchResults, showModax } from '../utils';\n\nexport class StartProgress extends RapidElement {\n static styles = css`\n temba-icon[name='close'] {\n cursor: pointer;\n margin: 0 4px;\n }\n\n temba-icon[name='close']:hover {\n color: var(--color-primary-dark);\n }\n `;\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n current: number;\n\n @property({ type: Number })\n total: number;\n\n @property({ type: Number })\n refreshes: number = 0;\n\n @property({ type: String })\n eta: string;\n\n @property({ type: Boolean })\n complete = false;\n\n @property({ type: Boolean })\n running = false;\n\n @property({ type: String })\n message: string;\n\n @property({ type: String })\n statusEndpoint: string;\n\n @property({ type: String })\n interruptTitle: string;\n\n @property({ type: String })\n interruptEndpoint: string;\n\n public updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('id')) {\n this.refresh();\n }\n\n // Useful for simulating progress\n /*\n if (changes.has('current')) {\n this.requestUpdate();\n setTimeout(() => {\n this.current = this.current + 100000;\n this.complete = this.current >= this.total;\n this.message = null;\n\n if (this.complete) {\n this.scheduleRemoval();\n }\n }, 5000);\n }*/\n }\n\n public interruptStart(): void {\n showModax(this.interruptTitle, this.interruptEndpoint);\n }\n\n public refresh(): void {\n fetchResults(this.statusEndpoint).then((data: any) => {\n if (data.length > 0) {\n this.refreshes++;\n const start = data[0];\n\n this.current = start.progress.current;\n this.total = start.progress.total;\n\n this.complete =\n start.status == 'Completed' ||\n start.status == 'Failed' ||\n start.status == 'Interrupted';\n\n this.running = start.status === 'Started';\n\n if (start.status === 'Pending') {\n this.message = 'Preparing to start..';\n } else if (start.status === 'Queued') {\n this.message = 'Waiting..';\n } else {\n this.message = null;\n }\n\n if (start.status === 'Started') {\n const elapsed =\n new Date().getTime() - new Date(start.modified_on).getTime();\n const rate = this.current / elapsed;\n\n // only calculate eta if the rate is actually reasonable\n if (rate > 0.1) {\n const eta = new Date(\n new Date().getTime() + (this.total - this.current) / rate\n );\n // Don't bother with estimates months out\n const nextMonth = new Date();\n nextMonth.setMonth(nextMonth.getMonth() + 2);\n if (eta > nextMonth) {\n this.eta = null;\n } else {\n this.eta = eta.toISOString();\n }\n }\n }\n\n if (!this.complete && this.current < this.total) {\n // refresh with a backoff up to 1 minute\n setTimeout(() => {\n this.refresh();\n }, Math.min(1000 * this.refreshes, 60000));\n }\n\n if (this.complete) {\n this.scheduleRemoval();\n }\n }\n });\n }\n\n public scheduleRemoval(): void {\n setTimeout(() => {\n this.remove();\n }, 5000);\n }\n\n public render(): TemplateResult {\n return html`<temba-progress\n total=${this.total}\n current=${this.current}\n eta=${this.eta}\n message=${this.message}\n >\n ${this.running\n ? html`<temba-icon\n name=\"close\"\n @click=${this.interruptStart}\n ></temba-icon>`\n : null}\n </temba-progress>`;\n }\n}\n"]}
|