qortal.link/qortal-ui
1
0
Fork 0
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

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

@ -1,14 +1,14 @@
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() {
@ -16,8 +16,9 @@ class SidenavMenu extends connect(store)(LitElement) {
config: { type: Object },
urls: { type: Object },
nodeType: { type: String, reflect: true },
theme: { type: String, reflect: true }
}
theme: { type: String, reflect: true },
addressInfo: { type: Object },
};
}
static get styles() {
@ -31,7 +32,9 @@ class SidenavMenu extends connect(store)(LitElement) {
--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);
--item-border-selected-color: var(
--nav-border-selected-color
);
}
.s-menu {
@ -43,117 +46,217 @@ class SidenavMenu extends connect(store)(LitElement) {
border-top: 1px solid var(--border);
outline: none;
}
`
]
`,
];
}
constructor() {
super()
this.urls = []
this.nodeType = ''
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
super();
this.urls = [];
this.nodeType = '';
this.theme = localStorage.getItem('qortalTheme')
? localStorage.getItem('qortalTheme')
: 'light';
this.addressInfo = {};
}
render() {
console.log({ myStore: store.getState() });
return html`
<div class="s-menu">
<side-menu>
${this.renderNodeTypeMenu()}
${this.renderNodeManagement()}
${this.renderNodeTypeMenu()} ${this.renderNodeManagement()}
</side-menu>
</div>
`
`;
}
firstUpdated() {
this.getNodeType()
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`
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((response) => {
return response.json();
})
.then(data => {
this.nodeType = data.type
.then((data) => {
this.nodeType = data.type;
})
.catch(err => {
.catch((err) => {
console.error('Request failed', err);
})
});
}
renderNodeTypeMenu() {
const addressInfo = this.addressInfo;
const isMinting = addressInfo?.error !== 124 && +addressInfo?.level > 0;
if (this.nodeType === 'lite') {
return html`
<side-menu-item label="${translate("sidemenu.wallets")}" href="/app/wallet" selected>
<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
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
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">
<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>
${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>`}
<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
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
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
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
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
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">
<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">
<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
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]
if (checkNodeManagement.enableManagement = true) {
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">
<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``
return html``;
}
}
stateChanged(state) {
this.config = state.config
this.urls = state.app.registeredUrls
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);