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

added new plugin to menu

trade-portal-menu-icon
Phillip Lang Martinez 2 years ago
parent
58184e2a33
commit
4dd62f9eb6
1 changed files with 247 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 391
      qortal-ui-core/src/components/sidenav-menu.js

391
qortal-ui-core/src/components/sidenav-menu.js
Unescape 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);

Write Preview
Loading…
Cancel
Save