Add Dev button

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