diff --git a/qortal-ui-plugins/plugins/core/q-app/q-apps.src.js b/qortal-ui-plugins/plugins/core/q-app/q-apps.src.js index dfa47d66..b50c038c 100644 --- a/qortal-ui-plugins/plugins/core/q-app/q-apps.src.js +++ b/qortal-ui-plugins/plugins/core/q-app/q-apps.src.js @@ -12,7 +12,7 @@ import '@material/mwc-icon' import '@material/mwc-button' import '@material/mwc-tab-bar' import '@material/mwc-textfield' - +import '@polymer/paper-dialog/paper-dialog.js' import '@vaadin/button' import '@vaadin/grid' import '@vaadin/icon' @@ -32,6 +32,7 @@ class QApps extends LitElement { followedNames: { type: Array }, blockedNames: { type: Array }, relayMode: { type: Boolean }, + btnDisabled: { type: Boolean }, selectedAddress: { type: Object }, searchName: { type: String }, searchResources: { type: Array }, @@ -47,6 +48,8 @@ class QApps extends LitElement { return css` * { --mdc-theme-primary: rgb(3, 169, 244); + --mdc-button-disabled-fill-color: rgba(3, 169, 244, 0.5); + --paper-input-container-focus-color: var(--mdc-theme-primary); --lumo-primary-text-color: rgb(0, 167, 245); --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); @@ -73,44 +76,44 @@ class QApps extends LitElement { --mdc-text-transform: none; --mdc-tab-color-default: var(--black); --mdc-tab-text-label-color-default: var(--black); - } + } #pages { display: flex; flex-wrap: wrap; padding: 10px 5px 5px 5px; margin: 0px 20px 20px 20px; - } + } - #pages > button { - user-select: none; - padding: 5px; - margin: 0 5px; - border-radius: 10%; - border: 0; - background: transparent; - font: inherit; - outline: none; - cursor: pointer; - color: var(--black); - } + #pages > button { + user-select: none; + padding: 5px; + margin: 0 5px; + border-radius: 10%; + border: 0; + background: transparent; + font: inherit; + outline: none; + cursor: pointer; + color: var(--black); + } - #pages > button:not([disabled]):hover, - #pages > button:focus { - color: #ccc; - background-color: #eee; - } + #pages > button:not([disabled]):hover, + #pages > button:focus { + color: #ccc; + background-color: #eee; + } - #pages > button[selected] { - font-weight: bold; - color: var(--white); - background-color: #ccc; - } + #pages > button[selected] { + font-weight: bold; + color: var(--white); + background-color: #ccc; + } - #pages > button[disabled] { - opacity: 0.5; - cursor: default; - } + #pages > button[disabled] { + opacity: 0.5; + cursor: default; + } #apps-list-page { background: var(--white); @@ -118,9 +121,9 @@ class QApps extends LitElement { } #search { - display: flex; - width: 50%; - align-items: center; + display: flex; + width: 50%; + align-items: center; } .divCard { @@ -130,6 +133,21 @@ class QApps extends LitElement { margin-bottom: 2em; } + paper-dialog.progress { + width: auto; + max-width: 50vw; + height: auto; + max-height: 30vh; + background-color: var(--white); + color: var(--black); + border: 1px solid var(--black); + border-radius: 15px; + text-align:center; + padding: 15px; + line-height: 1.6; + overflow-y: auto; + } + h2 { margin:0; } @@ -221,6 +239,111 @@ class QApps extends LitElement { .green { --mdc-theme-primary: #198754; } + + .lds-roller { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + } + + .lds-roller div { + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; + } + + .lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--black); + margin: -4px 0 0 -4px; + } + + .lds-roller div:nth-child(1) { + animation-delay: -0.036s; + } + + .lds-roller div:nth-child(1):after { + top: 63px; + left: 63px; + } + + .lds-roller div:nth-child(2) { + animation-delay: -0.072s; + } + + .lds-roller div:nth-child(2):after { + top: 68px; + left: 56px; + } + + .lds-roller div:nth-child(3) { + animation-delay: -0.108s; + } + + .lds-roller div:nth-child(3):after { + top: 71px; + left: 48px; + } + + .lds-roller div:nth-child(4) { + animation-delay: -0.144s; + } + + .lds-roller div:nth-child(4):after { + top: 72px; + left: 40px; + } + + .lds-roller div:nth-child(5) { + animation-delay: -0.18s; + } + + .lds-roller div:nth-child(5):after { + top: 71px; + left: 32px; + } + + .lds-roller div:nth-child(6) { + animation-delay: -0.216s; + } + + .lds-roller div:nth-child(6):after { + top: 68px; + left: 24px; + } + + .lds-roller div:nth-child(7) { + animation-delay: -0.252s; + } + + .lds-roller div:nth-child(7):after { + top: 63px; + left: 17px; + } + + .lds-roller div:nth-child(8) { + animation-delay: -0.288s; + } + + .lds-roller div:nth-child(8):after { + top: 56px; + left: 12px; + } + + @keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + ` } @@ -235,6 +358,7 @@ class QApps extends LitElement { this.blockedNames = [] this.relayMode = null this.isLoading = false + this.btnDisabled = false this.searchName = '' this.searchResources = [] this.followedResources = [] @@ -333,7 +457,6 @@ class QApps extends LitElement { ` : ''} ${this.renderRelayModeText()}
-
${this.textStatus} ${this.textProgress}
@@ -421,6 +544,12 @@ class QApps extends LitElement {
+ + +
+

${translate("appspage.schange41")}

+

${this.textProgress}

+ ` } @@ -751,7 +880,7 @@ class QApps extends LitElement { renderDownload(downObj) { if (downObj.status.description === "Published but not yet downloaded" || downObj.status.status === "MISSING_DATA") { - return html` this.downloadApp(downObj)}>` + return html` this.downloadApp(downObj)}>` } else if (downObj.status.description === "Ready" || downObj.status.status === "DOWNLOADED") { return html`` } else { @@ -776,7 +905,12 @@ class QApps extends LitElement { const url = `${nodeUrl}/arbitrary/resource/status/${service}/${name}?build=true&apiKey=${this.getApiKey()}` this.textStatus = 'Loading...' - this.textProgress = '' + + this.btnDisabled = true + + this.shadowRoot.getElementById('downloadProgressDialog').open() + + let timerDownload const response = await fetch(url, { method: 'GET', @@ -790,37 +924,60 @@ class QApps extends LitElement { console.log("status:", status.id) if (status.id === "UNSUPPORTED") { + this.btnDisabled = false + this.textProgress = '' + clearTimeout(timerDownload) this.textStatus = status.description } else if (status.id === "BLOCKED") { + this.btnDisabled = false + this.textProgress = '' this.textStatus = name + " is blocked so content cannot be served" - this.retryInterval = 5000 - setTimeout(checkStatus, this.retryInterval) + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 5000) } else if (status.id === "READY") { + this.btnDisabled = false + clearTimeout(timerDownload) this.textStatus = '' this.textProgress = '' + this.shadowRoot.getElementById('downloadProgressDialog').close() this.getData(0) this.updateComplete.then(() => this.requestUpdate()) } else if (status.id === "BUILDING") { + this.btnDisabled = true + this.textProgress = '' this.textStatus = status.description - this.retryInterval = 1000 - setTimeout(checkStatus, this.retryInterval) + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 1000) } else if (status.id === "BUILD_FAILED") { + this.btnDisabled = false + this.textProgress = '' + clearTimeout(timerDownload) this.textStatus = status.description } else if (status.id === "NOT_STARTED") { + this.btnDisabled = false + this.textProgress = '' this.textStatus = status.description - this.retryInterval = 1000 - setTimeout(checkStatus, this.retryInterval) + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 1000) } else if (status.id === "DOWNLOADING") { + this.btnDisabled = true this.textStatus = status.description - this.textProgress = "Files downloaded: " + status.localChunkCount + " / " + status.totalChunkCount - this.retryInterval = 1000 - setTimeout(checkStatus, this.retryInterval) + let progressString = get("appspage.schange42") + this.textProgress = progressString + ": " + status.localChunkCount + " / " + status.totalChunkCount + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 1000) } else if (status.id === "MISSING_DATA") { + this.btnDisabled = true + this.textProgress = '' this.textStatus = status.description - this.retryInterval = 5000 - setTimeout(checkStatus, this.retryInterval) + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 5000) } else if (status.id === "DOWNLOADED") { - this.textStatus = status.description + this.btnDisabled = true + this.textProgress = '' + this.textStatus = status.description + clearTimeout(timerDownload) + timerDownload = setTimeout(checkStatus, 1000) } } checkStatus()