Merge pull request #184 from Qortal/qortal-ui-dev

Qortal UI dev

core/language/us.json

@@ -79,7 +79,11 @@
 		"tm34": "Export Tab Menu",
 		"tm35": "Your existing tab menu will be deleted and set to uploaded tab menu.",
 		"tm36": "Tab Menu Successfully Restored",
-                "tm37": "Tab Menu Successfully Saved As"
+                "tm37": "Tab Menu Successfully Saved As",
+                "tm38": "DEV MODE",
+                "tm39": "Add Custom Framework",
+                "tm40": "Add And Open",
+                "tm41": "Error: Invalid data please try again !"
 	},
 	"login": {
 		"login": "Log In",

core/src/components/show-plugin.js

@@ -45,7 +45,8 @@ class ShowPlugin extends connect(store)(LitElement) {
             theme: { type: String, reflect: true },
             tabInfo: { type: Object },
             chatLastSeen: { type: Array },
-            chatHeads: { type: Array }
+            chatHeads: { type: Array },
+            proxyPort: { type: Number }
         }
     }
 
@@ -63,6 +64,23 @@ class ShowPlugin extends connect(store)(LitElement) {
             * {
                 scrollbar-width: thin;
                 scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+                --mdc-theme-primary: rgb(3, 169, 244);
+                --mdc-theme-surface: var(--white);
+                --mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
+                --mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
+                --mdc-text-field-label-ink-color: var(--black);
+                --mdc-text-field-ink-color: var(--black);
+                --mdc-select-ink-color: var(--black);
+                --mdc-select-fill-color: var(--black);
+                --mdc-select-label-ink-color: var(--black);
+                --mdc-select-idle-line-color: var(--black);
+                --mdc-select-hover-line-color: var(--black);
+                --mdc-select-outlined-idle-border-color: var(--txtfieldborder);
+                --mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder);
+                --mdc-dialog-content-ink-color: var(--black);
+                --mdc-dialog-shape-radius: 25px;
+                --mdc-dialog-min-width: 400px;
+                --mdc-dialog-max-width: 700px;
             }
 
             *::-webkit-scrollbar-track {
@@ -206,6 +224,30 @@ class ShowPlugin extends connect(store)(LitElement) {
                 color: var(--black);
             }
 
+            .add-dev-button {
+                position: fixed;
+                right: 20px;
+                margin-left: 10px;
+                margin-top: 4px;
+                max-height: 28px;
+                padding: 5px 5px;
+                font-size: 14px;
+                background-color: #03a9f4;
+                color: white;
+                border: 1px solid transparent;
+                border-radius: 3px;
+                cursor: pointer;
+            }
+
+            .add-dev-button:hover {
+                opacity: 0.8;
+                cursor: pointer;
+            }
+
+            .red {
+                --mdc-theme-primary: #F44336;
+            }
+
             .iconActive {
                 position: absolute;
                 top: 5px;
@@ -291,6 +333,7 @@ class ShowPlugin extends connect(store)(LitElement) {
         this.tabInfo = {}
         this.chatLastSeen = []
         this.chatHeads = []
+        this.proxyPort = 0
     }
 
     render() {
@@ -341,6 +384,8 @@ class ShowPlugin extends connect(store)(LitElement) {
                         title = html`${translate('tabmenu.tm16')}`
                     } else if (tab.myPlugObj && tab.myPlugObj.url === "myapp") {
                         title = tab.myPlugObj && tab.myPlugObj.title
+                    } else if (tab.myPlugObj && tab.myPlugObj.url === "devmode") {
+                        title = html`${translate('tabmenu.tm38')}`
                     } else {
                         title = html`${translate('tabmenu.tm17')}`
                     }
@@ -413,6 +458,11 @@ class ShowPlugin extends connect(store)(LitElement) {
                         this.currentTab = lengthOfTabs
                     }}
                 >+</button>
+                <button 
+                    class="add-dev-button"
+                    title="${translate('tabmenu.tm18')}"
+                    @click=${this.openDevDialog}
+                >${translate('tabmenu.tm38')}</button>
             </div>
 
             ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html`
@@ -434,6 +484,31 @@ class ShowPlugin extends connect(store)(LitElement) {
                     </nav-bar>
                 </div>
             `)}
+            <mwc-dialog id="addDevDialog">
+                <div style="text-align: center;">
+                    <h2>${translate('tabmenu.tm39')}</h2>
+                    <hr>
+                </div>
+                <p>
+                    <mwc-textfield id="domainInput" style="width:100%; color: var(--black);" required outlined label="${translate("settings.domain")}"></mwc-textfield>
+                </p>
+                <p>
+                    <mwc-textfield id="portInput" style="width:100%; color: var(--black);" required outlined label="${translate("settings.port")}"></mwc-textfield>
+                </p>
+                <mwc-button
+                    slot="secondaryAction"
+                    dialogAction="close"
+                    class="red"
+                >
+                ${translate("general.close")}
+                </mwc-button>
+                <mwc-button
+                    slot="primaryAction"
+                    @click="${this.getProxyPort}"
+                >
+                ${translate('tabmenu.tm40')}
+                </mwc-button>
+            </mwc-dialog>    
         `
     }
 
@@ -476,6 +551,58 @@ class ShowPlugin extends connect(store)(LitElement) {
         return true
     }
 
+    openDevDialog() {
+        this.shadowRoot.getElementById('domainInput').value = ''
+        this.shadowRoot.getElementById('portInput').value = ''
+        this.shadowRoot.querySelector("#addDevDialog").show()
+    }
+
+    async getProxyPort() {
+        this.proxyPort = 0
+        let framework = ''
+
+        const domain = this.shadowRoot.getElementById('domainInput').value
+        const port = this.shadowRoot.getElementById('portInput').value
+
+        if (domain.length >= 3 && port.length >= 2) {
+            framework = domain + ':' + port
+        } else {
+            let errorString = get("tabmenu.tm41")
+            parentEpml.request('showSnackBar', `${errorString}`)
+            return
+        }
+
+        let framePort = await parentEpml.request('apiCall', {
+            url: `/developer/proxy/start`,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'text/plain'
+            },
+            body: `${framework}`
+        })
+
+        this.createUrl(framePort)
+    }
+
+    createUrl(framePort) {
+        this.proxyPort = framePort
+        const myFrameNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
+        const myFrameNodeUrl = myFrameNode.protocol + '://' + myFrameNode.domain + ':' + this.proxyPort
+
+        this.changePage({
+            "url": "devmode",
+            "domain": "core",
+            "page": `qdn/browser/index.html?link=${myFrameNodeUrl}&dev=FRAMEWORK`,
+            "title": "Dev Server",
+            "icon": "vaadin:desktop",
+            "mwcicon": "api",
+            "menus": [],
+            "parent": false
+        })
+
+        this.shadowRoot.querySelector("#addDevDialog").close()
+    }
+
     async addTab(tab) {
         if (this.tabs == []) {
             // ...Nothing to do

plugins/plugins/core/qdn/browser/browser.src.js

@@ -34,6 +34,8 @@ class WebBrowser extends LitElement {
 			identifier: { type: String },
 			path: { type: String },
 			preview: { type: String },
+			dev: { type: String },
+			link: { type: String },
 			displayUrl: { type: String },
 			followedNames: { type: Array },
 			blockedNames: { type: Array },
@@ -129,11 +131,11 @@ class WebBrowser extends LitElement {
 	constructor() {
 		super();
 		this.url = 'about:blank';
-		this.myAddress = window.parent.reduxStore.getState().app.selectedAddress;
-		this._publicKey = { key: '', hasPubKey: false };
-		const urlParams = new URLSearchParams(window.location.search);
-		this.name = urlParams.get('name');
-		this.service = urlParams.get('service');
+		this.myAddress = window.parent.reduxStore.getState().app.selectedAddress
+		this._publicKey = { key: '', hasPubKey: false }
+		const urlParams = new URLSearchParams(window.location.search)
+		this.name = urlParams.get('name')
+		this.service = urlParams.get('service')
 		this.identifier =
 			urlParams.get('identifier') != null
 				? urlParams.get('identifier')
@@ -144,44 +146,53 @@ class WebBrowser extends LitElement {
 				urlParams.get('path')
 				: '';
 		this.preview = urlParams.get('preview');
-		this.followedNames = [];
-		this.blockedNames = [];
+		this.link = urlParams.get('link')
+		this.dev = urlParams.get('dev')
+		this.followedNames = []
+		this.blockedNames = []
 		this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
-		this.loader = new Loader();
+		this.loader = new Loader()
+
 		// Build initial display URL
-		let displayUrl = 'qortal://' + this.service + '/' + this.name;
-		if (
-			this.identifier && this.identifier != 'null' &&
-			this.identifier != 'default'
-		) {
-			displayUrl = displayUrl.concat('/' + this.identifier);
+		let displayUrl = ''
+
+		if (this.dev === 'FRAMEWORK') {
+			displayUrl = 'qortal://app/development'
+		} else {
+			displayUrl = 'qortal://' + this.service + '/' + this.name
+			if (this.identifier && this.identifier != 'null' && this.identifier != 'default') {
+				displayUrl = displayUrl.concat('/' + this.identifier)
+			}
+			if (this.path != null && this.path != '/') {
+				displayUrl = displayUrl.concat(this.path)
+			}
 		}
-		if (this.path != null && this.path != '/')
-			displayUrl = displayUrl.concat(this.path);
-		this.displayUrl = displayUrl;
+
+		this.displayUrl = displayUrl
+
 		const getFollowedNames = async () => {
 			let followedNames = await parentEpml.request('apiCall', {
 				url: `/lists/followedNames?apiKey=${this.getApiKey()}`,
-			});
+			})
 
-			this.followedNames = followedNames;
+			this.followedNames = followedNames
 			setTimeout(
 				getFollowedNames,
 				this.config.user.nodeSettings.pingInterval
-			);
-		};
+			)
+		}
 
 		const getBlockedNames = async () => {
 			let blockedNames = await parentEpml.request('apiCall', {
 				url: `/lists/blockedNames?apiKey=${this.getApiKey()}`,
-			});
+			})
 
 			this.blockedNames = blockedNames;
 			setTimeout(
 				getBlockedNames,
 				this.config.user.nodeSettings.pingInterval
-			);
-		};
+			)
+		}
 
 		const render = () => {
 			const myNode =
@@ -194,8 +205,9 @@ class WebBrowser extends LitElement {
 			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 {
+			} else if (this.dev === 'FRAMEWORK') {
+				this.url = `${this.link}`
+			} else {
 				// Normal mode
 
 				this.url = `${nodeUrl}/render/${this.service}/${this.name}${this.path != null ? this.path : ''
@@ -2757,15 +2769,15 @@ class WebBrowser extends LitElement {
 	}
 
 	refresh() {
-		const myNode =
-			window.parent.reduxStore.getState().app.nodeConfig.knownNodes[
-			window.parent.reduxStore.getState().app.nodeConfig.node
-			];
-		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 : ''
-			}&time=${new Date().getMilliseconds()}`;
+		const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
+		const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
+		if (this.dev === 'FRAMEWORK') {
+			this.url = `${this.link}?time=${new Date().getMilliseconds()}`
+		} else {
+			this.url = `${nodeUrl}/render/${this.service}/${this.name}${this.path != null ? this.path : ''
+				}?theme=${this.theme}&identifier=${this.identifier != null ? this.identifier : ''
+				}&time=${new Date().getMilliseconds()}`
+		}
 	}
 
 	goBackToList() {