Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-15 19:55:49 +00:00
Code Issues Projects Releases Wiki Activity

Added preview mode when publishing an app or website.

Browse Source
This commit is contained in:
CalDescent 2023-03-03 14:30:10 +00:00
parent 4e3c118d6b
commit d6a3dcf1a4
2 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
View File

@ -31,6 +31,7 @@ class WebBrowser extends LitElement {
service: { type: String }, service: { type: String },
identifier: { type: String }, identifier: { type: String },
path: { type: String }, path: { type: String },
preview: { type: String },
displayUrl: { type: String }, displayUrl: { type: String },
followedNames: { type: Array }, followedNames: { type: Array },
blockedNames: { type: Array }, blockedNames: { type: Array },
@ -125,6 +126,7 @@ class WebBrowser extends LitElement {
? (urlParams.get('path').startsWith('/') ? '' : '/') + ? (urlParams.get('path').startsWith('/') ? '' : '/') +
urlParams.get('path') urlParams.get('path')
: ''; : '';
this.preview = urlParams.get('preview');
this.followedNames = []; this.followedNames = [];
this.blockedNames = []; this.blockedNames = [];
this.theme = localStorage.getItem('qortalTheme') this.theme = localStorage.getItem('qortalTheme')
@ -174,9 +176,17 @@ class WebBrowser extends LitElement {
]; ];
const nodeUrl = const nodeUrl =
myNode.protocol + '://' + myNode.domain + ':' + myNode.port; myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
this.url = `${nodeUrl}/render/${this.service}/${this.name}${this.path != null ? this.path : ''
}?theme=${this.theme}&identifier=${this.identifier != null ? this.identifier : '' if (this.preview != null && this.preview.length > 0) {
}`; // In preview mode we access the preview URL path directly
this.url = `${nodeUrl}${this.preview}&theme=${this.theme}`
}
else {
// Normal mode
this.url = `${nodeUrl}/render/${this.service}/${this.name}${this.path != null ? this.path : ''
}?theme=${this.theme}&identifier=${this.identifier != null ? this.identifier : ''
}`;
}
}; };
let configLoaded = false; let configLoaded = false;
@ -486,6 +496,12 @@ class WebBrowser extends LitElement {
case actions.QDN_RESOURCE_DISPLAYED: case actions.QDN_RESOURCE_DISPLAYED:
// Links are handled by the core, but the UI also listens for these actions in order to update the address bar. // Links are handled by the core, but the UI also listens for these actions in order to update the address bar.
// Note: don't update this.url here, as we don't want to force reload the iframe each time. // Note: don't update this.url here, as we don't want to force reload the iframe each time.
if (this.preview != null && this.preview.length > 0) {
this.displayUrl = translate("appspage.schange40");
return;
}
let url = 'qortal://' + data.service + '/' + data.name; let url = 'qortal://' + data.service + '/' + data.name;
this.path = this.path =
data.path != null data.path != null

36
qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js
View File

@ -290,7 +290,8 @@ class PublishData extends LitElement {
${this.loading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''} ${this.loading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''}
<div class="buttons"> <div class="buttons">
<div> <div>
<mwc-button ?disabled=${this.btnDisable} style="width:100%;" raised icon="send" @click=${(e) => this.doPublish(e)}> ${translate("publishpage.pchange11")}</mwc-button> <mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="science" @click=${(e) => this.doPublish(e, true)}> ${translate("appspage.schange40")}</mwc-button>
<mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="send" @click=${(e) => this.doPublish(e, false)}> ${translate("publishpage.pchange11")}</mwc-button>
</div> </div>
</div> </div>
</div> </div>
@ -386,7 +387,7 @@ class PublishData extends LitElement {
} }
doPublish(e) { doPublish(e, preview) {
let registeredName = this.shadowRoot.getElementById('registeredName').value let registeredName = this.shadowRoot.getElementById('registeredName').value
let service = this.shadowRoot.getElementById('service').value let service = this.shadowRoot.getElementById('service').value
let identifier = this.shadowRoot.getElementById('identifier').value let identifier = this.shadowRoot.getElementById('identifier').value
@ -432,11 +433,11 @@ class PublishData extends LitElement {
parentEpml.request('showSnackBar', `${err5string}`) parentEpml.request('showSnackBar', `${err5string}`)
} }
else { else {
this.publishData(registeredName, path, file, service, identifier) this.publishData(registeredName, path, file, service, identifier, preview)
} }
} }
async publishData(registeredName, path, file, service, identifier) { async publishData(registeredName, path, file, service, identifier, preview) {
this.loading = true this.loading = true
this.btnDisable = true this.btnDisable = true
@ -467,21 +468,34 @@ class PublishData extends LitElement {
let err6string = get("publishpage.pchange19") let err6string = get("publishpage.pchange19")
this.generalMessage = `${err6string}` this.generalMessage = `${err6string}`
let transactionBytes;
let previewUrlPath;
let transactionBytes = await uploadData(registeredName, path, file) let uploadDataRes = await uploadData(registeredName, path, file, preview)
if (transactionBytes.error) { if (uploadDataRes.error) {
let err7string = get("publishpage.pchange20") let err7string = get("publishpage.pchange20")
this.errorMessage = `${err7string}` + transactionBytes.message this.errorMessage = `${err7string}` + uploadDataRes.message
showError(this.errorMessage) showError(this.errorMessage)
throw new Error(this.errorMessage); throw new Error(this.errorMessage);
} }
else if (transactionBytes.includes("Error 500 Internal Server Error")) { else if (uploadDataRes.includes("Error 500 Internal Server Error")) {
let err8string = get("publishpage.pchange21") let err8string = get("publishpage.pchange21")
this.errorMessage = `${err8string}` this.errorMessage = `${err8string}`
showError(this.errorMessage) showError(this.errorMessage)
throw new Error(this.errorMessage); throw new Error(this.errorMessage);
} }
if (preview) {
// uploadData() returns preview URL path when in preview mode
previewUrlPath = uploadDataRes;
window.location = `../browser/index.html?service=${this.service}&name=Preview&preview=${previewUrlPath}`;
return;
}
else {
// uploadData() returns transaction bytes when not in preview mode
transactionBytes = uploadDataRes;
}
let err9string = get("publishpage.pchange22") let err9string = get("publishpage.pchange22")
this.generalMessage = `${err9string}` this.generalMessage = `${err9string}`
@ -502,7 +516,7 @@ class PublishData extends LitElement {
this.successMessage = `${err11string}` this.successMessage = `${err11string}`
} }
const uploadData = async (registeredName, path, file) => { const uploadData = async (registeredName, path, file, preview) => {
let postBody = path let postBody = path
let urlSuffix = "" let urlSuffix = ""
if (file != null) { if (file != null) {
@ -533,9 +547,9 @@ class PublishData extends LitElement {
let metadataQueryString = `title=${title}&description=${description}&category=${category}&tags=${tag1}&tags=${tag2}&tags=${tag3}&tags=${tag4}&tags=${tag5}` let metadataQueryString = `title=${title}&description=${description}&category=${category}&tags=${tag1}&tags=${tag2}&tags=${tag3}&tags=${tag4}&tags=${tag5}`
let uploadDataUrl = `/arbitrary/${this.service}/${registeredName}${urlSuffix}?${metadataQueryString}&apiKey=${this.getApiKey()}` let uploadDataUrl = `/arbitrary/${this.service}/${registeredName}${urlSuffix}?${metadataQueryString}&apiKey=${this.getApiKey()}&preview=${new Boolean(preview).toString()}`
if (identifier != null && identifier.trim().length > 0) { if (identifier != null && identifier.trim().length > 0) {
uploadDataUrl = `/arbitrary/${service}/${registeredName}/${this.identifier}${urlSuffix}?${metadataQueryString}&apiKey=${this.getApiKey()}` uploadDataUrl = `/arbitrary/${service}/${registeredName}/${this.identifier}${urlSuffix}?${metadataQueryString}&apiKey=${this.getApiKey()}&preview=${new Boolean(preview).toString()}`
} }
let uploadDataRes = await parentEpml.request('apiCall', { let uploadDataRes = await parentEpml.request('apiCall', {