Added preview mode when publishing an app or website.

qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js

@@ -31,6 +31,7 @@ class WebBrowser extends LitElement {
 			service: { type: String },
 			identifier: { type: String },
 			path: { type: String },
+			preview: { type: String },
 			displayUrl: { type: String },
 			followedNames: { type: Array },
 			blockedNames: { type: Array },
@@ -125,6 +126,7 @@ class WebBrowser extends LitElement {
 				? (urlParams.get('path').startsWith('/') ? '' : '/') +
 				urlParams.get('path')
 				: '';
+		this.preview = urlParams.get('preview');
 		this.followedNames = [];
 		this.blockedNames = [];
 		this.theme = localStorage.getItem('qortalTheme')
@@ -174,9 +176,17 @@ class WebBrowser extends LitElement {
 				];
 			const nodeUrl =
 				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;
@@ -486,6 +496,12 @@ class WebBrowser extends LitElement {
 				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.
 					// 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;
 					this.path =
 						data.path != null

qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js

@@ -290,7 +290,8 @@ class PublishData extends LitElement {
                     ${this.loading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''}
                     <div class="buttons">
                         <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>
@@ -386,7 +387,7 @@ class PublishData extends LitElement {
     }
 
 
-    doPublish(e) {
+    doPublish(e, preview) {
         let registeredName = this.shadowRoot.getElementById('registeredName').value
         let service = this.shadowRoot.getElementById('service').value
         let identifier = this.shadowRoot.getElementById('identifier').value
@@ -432,11 +433,11 @@ class PublishData extends LitElement {
             parentEpml.request('showSnackBar', `${err5string}`)
         }
         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.btnDisable = true
 
@@ -467,21 +468,34 @@ class PublishData extends LitElement {
 
             let err6string = get("publishpage.pchange19")
             this.generalMessage = `${err6string}`
+            let transactionBytes;
+            let previewUrlPath;
 
-            let transactionBytes = await uploadData(registeredName, path, file)
-            if (transactionBytes.error) {
+            let uploadDataRes = await uploadData(registeredName, path, file, preview)
+            if (uploadDataRes.error) {
                 let err7string = get("publishpage.pchange20")
-                this.errorMessage = `${err7string}` + transactionBytes.message
+                this.errorMessage = `${err7string}` + uploadDataRes.message
                 showError(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")
                 this.errorMessage = `${err8string}`
                 showError(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")
             this.generalMessage = `${err9string}`
 
@@ -502,7 +516,7 @@ class PublishData extends LitElement {
             this.successMessage = `${err11string}`
         }
 
-        const uploadData = async (registeredName, path, file) => {
+        const uploadData = async (registeredName, path, file, preview) => {
             let postBody = path
             let urlSuffix = ""
             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 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) {
-                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', {