diff --git a/core/language/us.json b/core/language/us.json index b9e03682..cbf85a4f 100644 --- a/core/language/us.json +++ b/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", diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js index 2861d3c1..c1ba4afc 100644 --- a/core/src/components/show-plugin.js +++ b/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 }} >+ + ${repeat(this.tabs, (tab) => tab.id, (tab, index) => html` @@ -433,7 +483,32 @@ class ShowPlugin extends connect(store)(LitElement) { > - `)} + `)} + +
+

${translate('tabmenu.tm39')}

+
+
+

+ +

+

+ +

+ + ${translate("general.close")} + + + ${translate('tabmenu.tm40')} + + ` } @@ -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 diff --git a/plugins/plugins/core/qdn/browser/browser.src.js b/plugins/plugins/core/qdn/browser/browser.src.js index 5e3cdca7..db59e4fd 100644 --- a/plugins/plugins/core/qdn/browser/browser.src.js +++ b/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() {