From 4dd62f9eb6faf9a7f2d1439d33d7a638c0f37b29 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Sat, 6 Aug 2022 18:13:13 +0300 Subject: [PATCH] added new plugin to menu --- qortal-ui-core/src/components/sidenav-menu.js | 391 +++++++++++------- 1 file changed, 247 insertions(+), 144 deletions(-) diff --git a/qortal-ui-core/src/components/sidenav-menu.js b/qortal-ui-core/src/components/sidenav-menu.js index 8ff90e4d..e96d3784 100644 --- a/qortal-ui-core/src/components/sidenav-menu.js +++ b/qortal-ui-core/src/components/sidenav-menu.js @@ -1,159 +1,262 @@ -import { LitElement, html, css } from 'lit' -import { connect } from 'pwa-helpers' -import { store } from '../store.js' -import { translate, translateUnsafeHTML } from 'lit-translate' +import { LitElement, html, css } from 'lit'; +import { connect } from 'pwa-helpers'; +import { store } from '../store.js'; +import { translate, translateUnsafeHTML } from 'lit-translate'; -import '@polymer/paper-ripple' -import '@vaadin/icon' -import '@vaadin/icons' +import '@polymer/paper-ripple'; +import '@vaadin/icon'; +import '@vaadin/icons'; -import '../functional-components/side-menu.js' -import '../functional-components/side-menu-item.js' +import '../functional-components/side-menu.js'; +import '../functional-components/side-menu-item.js'; class SidenavMenu extends connect(store)(LitElement) { - static get properties() { - return { - config: { type: Object }, - urls: { type: Object }, - nodeType: { type: String, reflect: true }, - theme: { type: String, reflect: true } - } - } + static get properties() { + return { + config: { type: Object }, + urls: { type: Object }, + nodeType: { type: String, reflect: true }, + theme: { type: String, reflect: true }, + addressInfo: { type: Object }, + }; + } - static get styles() { - return [ - css` - * { - --item-selected-color: var(--nav-selected-color); - --item-selected-color-text: var(--nav-selected-color-text); - --item-color-active: var(--nav-color-active); - --item-color-hover: var(--nav-color-hover); - --item-text-color: var(--nav-text-color); - --item-icon-color: var(--nav-icon-color); - --item-border-color: var(--nav-border-color); - --item-border-selected-color: var(--nav-border-selected-color); - } + static get styles() { + return [ + css` + * { + --item-selected-color: var(--nav-selected-color); + --item-selected-color-text: var(--nav-selected-color-text); + --item-color-active: var(--nav-color-active); + --item-color-hover: var(--nav-color-hover); + --item-text-color: var(--nav-text-color); + --item-icon-color: var(--nav-icon-color); + --item-border-color: var(--nav-border-color); + --item-border-selected-color: var( + --nav-border-selected-color + ); + } - .s-menu { - list-style: none; - padding: 0px 0px; - background: var(--sidetopbar); - border-radius: 2px; - width: 100%; - border-top: 1px solid var(--border); - outline: none; - } - ` - ] - } + .s-menu { + list-style: none; + padding: 0px 0px; + background: var(--sidetopbar); + border-radius: 2px; + width: 100%; + border-top: 1px solid var(--border); + outline: none; + } + `, + ]; + } - constructor() { - super() - this.urls = [] - this.nodeType = '' - this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' - } + constructor() { + super(); + this.urls = []; + this.nodeType = ''; + this.theme = localStorage.getItem('qortalTheme') + ? localStorage.getItem('qortalTheme') + : 'light'; + this.addressInfo = {}; + } - render() { - return html` -
- - ${this.renderNodeTypeMenu()} - ${this.renderNodeManagement()} - -
- ` - } + render() { + console.log({ myStore: store.getState() }); + return html` +
+ + ${this.renderNodeTypeMenu()} ${this.renderNodeManagement()} + +
+ `; + } - firstUpdated() { - this.getNodeType() - } + firstUpdated() { + this.getNodeType(); + } - async getNodeType() { - const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] - const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port - const url = `${nodeUrl}/admin/info` - await fetch(url) - .then(response => { - return response.json() - }) - .then(data => { - this.nodeType = data.type - }) - .catch(err => { - console.error('Request failed', err); - }) - } + async getNodeType() { + const myNode = + store.getState().app.nodeConfig.knownNodes[ + store.getState().app.nodeConfig.node + ]; + const nodeUrl = + myNode.protocol + '://' + myNode.domain + ':' + myNode.port; + const url = `${nodeUrl}/admin/info`; + await fetch(url) + .then((response) => { + return response.json(); + }) + .then((data) => { + this.nodeType = data.type; + }) + .catch((err) => { + console.error('Request failed', err); + }); + } - renderNodeTypeMenu() { - if (this.nodeType === 'lite') { - return html` - - - - - - - - - - - - - ` - } else { - return html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ` - } - } + renderNodeTypeMenu() { + const addressInfo = this.addressInfo; + const isMinting = addressInfo?.error !== 124 && +addressInfo?.level > 0; - renderNodeManagement() { - const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] - if (checkNodeManagement.enableManagement = true) { - return html` - - - - ` - } else { - return html`` - } - } + if (this.nodeType === 'lite') { + return html` + + + + + + + + + + + + + `; + } else { + return html` + ${isMinting + ? html` + + ` + : html` + + `} - stateChanged(state) { - this.config = state.config - this.urls = state.app.registeredUrls - } + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + } + } + + renderNodeManagement() { + const checkNodeManagement = + store.getState().app.nodeConfig.knownNodes[ + store.getState().app.nodeConfig.node + ]; + console.log({ store1: store.getState().app }); + if ((checkNodeManagement.enableManagement = true)) { + return html` + + + + `; + } else { + return html``; + } + } + + stateChanged(state) { + this.config = state.config; + this.urls = state.app.registeredUrls; + this.addressInfo = state.app.accountInfo.addressInfo; + } } -window.customElements.define('sidenav-menu', SidenavMenu) +window.customElements.define('sidenav-menu', SidenavMenu);