AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

added new plugin to menu

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-08-06 18:13:13 +03:00
parent 58184e2a33
commit 4dd62f9eb6
1 changed files with 247 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

391
qortal-ui-core/src/components/sidenav-menu.js
View File

@ -1,159 +1,262 @@
import { LitElement, html, css } from 'lit' import { LitElement, html, css } from 'lit';
import { connect } from 'pwa-helpers' import { connect } from 'pwa-helpers';
import { store } from '../store.js' import { store } from '../store.js';
import { translate, translateUnsafeHTML } from 'lit-translate' import { translate, translateUnsafeHTML } from 'lit-translate';
import '@polymer/paper-ripple' import '@polymer/paper-ripple';
import '@vaadin/icon' import '@vaadin/icon';
import '@vaadin/icons' import '@vaadin/icons';
import '../functional-components/side-menu.js' import '../functional-components/side-menu.js';
import '../functional-components/side-menu-item.js' import '../functional-components/side-menu-item.js';
class SidenavMenu extends connect(store)(LitElement) { class SidenavMenu extends connect(store)(LitElement) {
static get properties() { static get properties() {
return { return {
config: { type: Object }, config: { type: Object },
urls: { type: Object }, urls: { type: Object },
nodeType: { type: String, reflect: true }, nodeType: { type: String, reflect: true },
theme: { type: String, reflect: true } theme: { type: String, reflect: true },
} addressInfo: { type: Object },
} };
}
static get styles() { static get styles() {
return [ return [
css` css`
* { * {
--item-selected-color: var(--nav-selected-color); --item-selected-color: var(--nav-selected-color);
--item-selected-color-text: var(--nav-selected-color-text); --item-selected-color-text: var(--nav-selected-color-text);
--item-color-active: var(--nav-color-active); --item-color-active: var(--nav-color-active);
--item-color-hover: var(--nav-color-hover); --item-color-hover: var(--nav-color-hover);
--item-text-color: var(--nav-text-color); --item-text-color: var(--nav-text-color);
--item-icon-color: var(--nav-icon-color); --item-icon-color: var(--nav-icon-color);
--item-border-color: var(--nav-border-color); --item-border-color: var(--nav-border-color);
--item-border-selected-color: var(--nav-border-selected-color); --item-border-selected-color: var(
} --nav-border-selected-color
);
}
.s-menu { .s-menu {
list-style: none; list-style: none;
padding: 0px 0px; padding: 0px 0px;
background: var(--sidetopbar); background: var(--sidetopbar);
border-radius: 2px; border-radius: 2px;
width: 100%; width: 100%;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
outline: none; outline: none;
} }
` `,
] ];
} }
constructor() { constructor() {
super() super();
this.urls = [] this.urls = [];
this.nodeType = '' this.nodeType = '';
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.theme = localStorage.getItem('qortalTheme')
} ? localStorage.getItem('qortalTheme')
: 'light';
this.addressInfo = {};
}
render() { render() {
return html` console.log({ myStore: store.getState() });
<div class="s-menu"> return html`
<side-menu> <div class="s-menu">
${this.renderNodeTypeMenu()} <side-menu>
${this.renderNodeManagement()} ${this.renderNodeTypeMenu()} ${this.renderNodeManagement()}
</side-menu> </side-menu>
</div> </div>
` `;
} }
firstUpdated() { firstUpdated() {
this.getNodeType() this.getNodeType();
} }
async getNodeType() { async getNodeType() {
const myNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] const myNode =
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port store.getState().app.nodeConfig.knownNodes[
const url = `${nodeUrl}/admin/info` store.getState().app.nodeConfig.node
await fetch(url) ];
.then(response => { const nodeUrl =
return response.json() myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
}) const url = `${nodeUrl}/admin/info`;
.then(data => { await fetch(url)
this.nodeType = data.type .then((response) => {
}) return response.json();
.catch(err => { })
console.error('Request failed', err); .then((data) => {
}) this.nodeType = data.type;
} })
.catch((err) => {
console.error('Request failed', err);
});
}
renderNodeTypeMenu() { renderNodeTypeMenu() {
if (this.nodeType === 'lite') { const addressInfo = this.addressInfo;
return html` const isMinting = addressInfo?.error !== 124 && +addressInfo?.level > 0;
<side-menu-item label="${translate("sidemenu.wallets")}" href="/app/wallet" selected>
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.nameregistration")}" href="/app/name-registration">
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.datamanagement")}" href="/app/data-management">
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.qchat")}" href="/app/q-chat">
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
</side-menu-item>
`
} else {
return html`
<side-menu-item label="${translate("sidemenu.mintingdetails")}" href="/app/minting">
<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.wallets")}" href="/app/wallet" selected>
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.tradeportal")}" href="/app/trade-portal">
<vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.rewardshare")}" href="/app/reward-share">
<vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.nameregistration")}" href="/app/name-registration">
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.websites")}" href="/app/websites">
<vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.datamanagement")}" href="/app/data-management">
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.qchat")}" href="/app/q-chat">
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.groupmanagement")}" href="/app/group-management">
<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item label="${translate("sidemenu.puzzles")}" href="/app/puzzles">
<vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
</side-menu-item>
`
}
}
renderNodeManagement() { if (this.nodeType === 'lite') {
const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node] return html`
if (checkNodeManagement.enableManagement = true) { <side-menu-item
return html` label="${translate('sidemenu.wallets')}"
<side-menu-item label="${translate("sidemenu.nodemanagement")}" href="/app/node-management"> href="/app/wallet"
<vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon> selected
</side-menu-item> >
` <vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
} else { </side-menu-item>
return html`` <side-menu-item
} label="${translate('sidemenu.nameregistration')}"
} href="/app/name-registration"
>
<vaadin-icon
icon="vaadin:user-check"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.datamanagement')}"
href="/app/data-management"
>
<vaadin-icon
icon="vaadin:database"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.qchat')}"
href="/app/q-chat"
>
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
</side-menu-item>
`;
} else {
return html`
${isMinting
? html`<side-menu-item
label="${translate('sidemenu.mintingdetails')}"
href="/app/minting"
>
<vaadin-icon
icon="vaadin:info-circle"
slot="icon"
></vaadin-icon>
</side-menu-item>`
: html`<side-menu-item
label="${translate('sidemenu.becomeAMinter')}"
href="/app/become-minter"
>
<vaadin-icon
icon="vaadin:info-circle"
slot="icon"
></vaadin-icon>
</side-menu-item>`}
stateChanged(state) { <side-menu-item
this.config = state.config label="${translate('sidemenu.wallets')}"
this.urls = state.app.registeredUrls href="/app/wallet"
} selected
>
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.tradeportal')}"
href="/app/trade-portal"
>
<vaadin-icon
icon="vaadin:bullets"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.rewardshare')}"
href="/app/reward-share"
>
<vaadin-icon
icon="vaadin:share-square"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.nameregistration')}"
href="/app/name-registration"
>
<vaadin-icon
icon="vaadin:user-check"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.websites')}"
href="/app/websites"
>
<vaadin-icon
icon="vaadin:desktop"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.datamanagement')}"
href="/app/data-management"
>
<vaadin-icon
icon="vaadin:database"
slot="icon"
></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.qchat')}"
href="/app/q-chat"
>
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.groupmanagement')}"
href="/app/group-management"
>
<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
</side-menu-item>
<side-menu-item
label="${translate('sidemenu.puzzles')}"
href="/app/puzzles"
>
<vaadin-icon
icon="vaadin:puzzle-piece"
slot="icon"
></vaadin-icon>
</side-menu-item>
`;
}
}
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`
<side-menu-item
label="${translate('sidemenu.nodemanagement')}"
href="/app/node-management"
>
<vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon>
</side-menu-item>
`;
} 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);