forked from Qortal/qortal-ui
Pagination
This commit is contained in:
AlphaX-Projects
GitHub
parent
071fc6bc1a
commit
fff560b2f7
@ -14,22 +14,55 @@ class DataManagement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
loading: { type: Boolean },
|
||||
resources: { type: Array },
|
||||
blockedNames: { type: Array },
|
||||
followedNames: { type: Array },
|
||||
datres: { type: Array }
|
||||
}
|
||||
}
|
||||
|
||||
static get observers() {
|
||||
return ['_kmxKeyUp(amount)']
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
#pages {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 5px 5px 5px;
|
||||
margin: 0px 20px 20px 20px;
|
||||
}
|
||||
|
||||
#pages > button {
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
margin: 0 5px;
|
||||
border-radius: 10%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pages > button:not([disabled]):hover,
|
||||
#pages > button:focus {
|
||||
color: #ccc;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#pages > button[selected] {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
#pages > button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#websites-list-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
@ -38,7 +71,6 @@ class DataManagement extends LitElement {
|
||||
.divCard {
|
||||
border: 1px solid #eee;
|
||||
padding: 1em;
|
||||
/** box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); **/
|
||||
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@ -61,14 +93,17 @@ class DataManagement extends LitElement {
|
||||
display: hidden !important;
|
||||
visibility: none !important;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 13px 20px;
|
||||
width: 100%;
|
||||
@ -76,15 +111,18 @@ class DataManagement extends LitElement {
|
||||
color: #555;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight:600;
|
||||
font-size:12px;
|
||||
line-height: 32px;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.itemList {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.default-identifier {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
@ -92,23 +130,26 @@ class DataManagement extends LitElement {
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.selectedAddress = {}
|
||||
this.blockedNames = []
|
||||
this.followedNames = []
|
||||
this.datres = []
|
||||
this.isLoading = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="websites-list-page">
|
||||
<div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
|
||||
<h2 style="margin: 0; flex: 1; padding-top: .1em; display: inline;">Data Management</h2>
|
||||
</div>
|
||||
|
||||
<div class="divCard">
|
||||
<h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Data hosted by this node</h3>
|
||||
<vaadin-grid id="resourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" .items="${this.resources}" height-by-rows>
|
||||
<!--<vaadin-grid-column path="name"></vaadin-grid-column>-->
|
||||
<vaadin-grid-column header="Registered Name" .renderer=${(root, column, data) => {
|
||||
render(html`${this.renderName(data.item)}`, root)
|
||||
}}></vaadin-grid-column>
|
||||
<vaadin-grid-column header="Service" .renderer=${(root, column, data) => {
|
||||
render(html`${this.renderService(data.item)}`, root)
|
||||
}}></vaadin-grid-column>
|
||||
<vaadin-grid id="resourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.datres)}" page-size="20" height-by-rows>
|
||||
<vaadin-grid-column header="Registered Name" path="name"></vaadin-grid-column>
|
||||
<vaadin-grid-column header="Service" path="service"></vaadin-grid-column>
|
||||
<vaadin-grid-column header="Identifier" .renderer=${(root, column, data) => {
|
||||
render(html`${this.renderIdentifier(data.item)}`, root)
|
||||
}}></vaadin-grid-column>
|
||||
@ -119,36 +160,71 @@ class DataManagement extends LitElement {
|
||||
render(html`${this.renderBlockUnblockButton(data.item)}`, root);
|
||||
}}></vaadin-grid-column>
|
||||
</vaadin-grid>
|
||||
<div id="pages"></div>
|
||||
${this.renderDefaultText()}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
goBack() {
|
||||
window.history.back();
|
||||
firstUpdated() {
|
||||
|
||||
window.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault()
|
||||
this._textMenu(event)
|
||||
})
|
||||
|
||||
window.addEventListener('click', () => {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
})
|
||||
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode === 27) {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
}
|
||||
}
|
||||
|
||||
let configLoaded = false
|
||||
|
||||
parentEpml.ready().then(() => {
|
||||
parentEpml.subscribe('selected_address', async selectedAddress => {
|
||||
this.selectedAddress = {}
|
||||
selectedAddress = JSON.parse(selectedAddress)
|
||||
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
|
||||
this.selectedAddress = selectedAddress
|
||||
})
|
||||
parentEpml.subscribe('config', c => {
|
||||
this.config = JSON.parse(c)
|
||||
if (!configLoaded) {
|
||||
setTimeout(this.getFollowedNames, 1)
|
||||
setTimeout(this.getBlockedNames, 1)
|
||||
setInterval(this.showManagement(), 30 * 1000)
|
||||
setInterval(this.getFollowedNames, 30 * 1000)
|
||||
setInterval(this.getBlockedNames, 30 * 1000)
|
||||
configLoaded = true
|
||||
}
|
||||
})
|
||||
parentEpml.subscribe('copy_menu_switch', async value => {
|
||||
|
||||
if (value === 'false' && window.getSelection().toString().length !== 0) {
|
||||
|
||||
this.clearSelection()
|
||||
}
|
||||
})
|
||||
})
|
||||
parentEpml.imReady()
|
||||
}
|
||||
|
||||
renderDefaultText() {
|
||||
if (this.resources == null || !Array.isArray(this.resources)) {
|
||||
if (this.datres == null || !Array.isArray(this.datres)) {
|
||||
return html`<br />Couldn't fetch hosted data list from node`
|
||||
}
|
||||
if (this.isEmptyArray(this.resources)) {
|
||||
if (this.isEmptyArray(this.datres)) {
|
||||
return html`<br />This node isn't hosting any data`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
renderName(resource) {
|
||||
let name = resource.name
|
||||
return html`${name}`
|
||||
}
|
||||
|
||||
renderService(resource) {
|
||||
let service = resource.service
|
||||
return html`${service}`
|
||||
}
|
||||
|
||||
renderIdentifier(resource) {
|
||||
return resource.identifier == null ? html`<span class="default-identifier">default</span>` : html`${resource.identifier}`
|
||||
}
|
||||
@ -196,7 +272,7 @@ class DataManagement extends LitElement {
|
||||
let items = [
|
||||
name
|
||||
]
|
||||
let namesJsonString = JSON.stringify({"items": items})
|
||||
let namesJsonString = JSON.stringify({ "items": items })
|
||||
|
||||
let ret = await parentEpml.request('apiCall', {
|
||||
url: `/lists/blockedNames?apiKey=${this.getApiKey()}`,
|
||||
@ -221,12 +297,12 @@ class DataManagement extends LitElement {
|
||||
return ret
|
||||
}
|
||||
|
||||
async unfollowName(websiteObj) {
|
||||
let name = websiteObj.name
|
||||
async unfollowName(resource) {
|
||||
let name = resource.name
|
||||
let items = [
|
||||
name
|
||||
]
|
||||
let namesJsonString = JSON.stringify({"items": items})
|
||||
let namesJsonString = JSON.stringify({ "items": items })
|
||||
|
||||
let ret = await parentEpml.request('apiCall', {
|
||||
url: `/lists/followedNames?apiKey=${this.getApiKey()}`,
|
||||
@ -253,7 +329,7 @@ class DataManagement extends LitElement {
|
||||
let items = [
|
||||
name
|
||||
]
|
||||
let namesJsonString = JSON.stringify({"items": items})
|
||||
let namesJsonString = JSON.stringify({ "items": items })
|
||||
|
||||
let ret = await parentEpml.request('apiCall', {
|
||||
url: `/lists/blockedNames?apiKey=${this.getApiKey()}`,
|
||||
@ -295,8 +371,6 @@ class DataManagement extends LitElement {
|
||||
}
|
||||
|
||||
|
||||
// Helper Functions (Re-Used in Most part of the UI )
|
||||
|
||||
textColor(color) {
|
||||
return color == 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.87)'
|
||||
}
|
||||
@ -326,27 +400,95 @@ class DataManagement extends LitElement {
|
||||
checkSelectedTextAndShowMenu()
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.selectedAddress = {}
|
||||
this.resources = []
|
||||
this.blockedNames = []
|
||||
this.followedNames = []
|
||||
this.isLoading = false
|
||||
async getResourcesGrid() {
|
||||
this.resourcesGrid = this.shadowRoot.querySelector(`#resourcesGrid`)
|
||||
this.pagesControl = this.shadowRoot.querySelector('#pages')
|
||||
this.pages = undefined
|
||||
}
|
||||
|
||||
getArbitraryResources = async () => {
|
||||
// this.resources = []
|
||||
|
||||
let resources = await parentEpml.request('apiCall', {
|
||||
async fetchManagementDetails() {
|
||||
const myDat = await parentEpml.request('apiCall', {
|
||||
url: `/arbitrary/hosted/resources?apiKey=${this.getApiKey()}`
|
||||
})
|
||||
|
||||
this.resources = resources
|
||||
this.datres = myDat;
|
||||
}
|
||||
|
||||
async updateItemsFromPage(page) {
|
||||
if (page === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.pages) {
|
||||
this.pages = Array.apply(null, { length: Math.ceil(this.datres.length / this.resourcesGrid.pageSize) }).map((item, index) => {
|
||||
return index + 1
|
||||
})
|
||||
|
||||
const prevBtn = document.createElement('button')
|
||||
prevBtn.textContent = '<'
|
||||
prevBtn.addEventListener('click', () => {
|
||||
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
|
||||
this.updateItemsFromPage(selectedPage - 1)
|
||||
})
|
||||
this.pagesControl.appendChild(prevBtn)
|
||||
|
||||
this.pages.forEach((pageNumber) => {
|
||||
const pageBtn = document.createElement('button')
|
||||
pageBtn.textContent = pageNumber
|
||||
pageBtn.addEventListener('click', (e) => {
|
||||
this.updateItemsFromPage(parseInt(e.target.textContent))
|
||||
})
|
||||
if (pageNumber === page) {
|
||||
pageBtn.setAttribute('selected', true)
|
||||
}
|
||||
this.pagesControl.appendChild(pageBtn)
|
||||
})
|
||||
|
||||
const nextBtn = window.document.createElement('button')
|
||||
nextBtn.textContent = '>'
|
||||
nextBtn.addEventListener('click', () => {
|
||||
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
|
||||
this.updateItemsFromPage(selectedPage + 1)
|
||||
})
|
||||
this.pagesControl.appendChild(nextBtn)
|
||||
}
|
||||
|
||||
const buttons = Array.from(this.pagesControl.children)
|
||||
buttons.forEach((btn, index) => {
|
||||
if (parseInt(btn.textContent) === page) {
|
||||
btn.setAttribute('selected', true)
|
||||
} else {
|
||||
btn.removeAttribute('selected')
|
||||
}
|
||||
if (index === 0) {
|
||||
if (page === 1) {
|
||||
btn.setAttribute('disabled', '')
|
||||
} else {
|
||||
btn.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
if (index === buttons.length - 1) {
|
||||
if (page === this.pages.length) {
|
||||
btn.setAttribute('disabled', '')
|
||||
} else {
|
||||
btn.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
})
|
||||
let start = (page - 1) * this.resourcesGrid.pageSize
|
||||
let end = page * this.resourcesGrid.pageSize
|
||||
|
||||
this.resourcesGrid.items = this.datres.slice(start, end)
|
||||
}
|
||||
|
||||
async showManagement() {
|
||||
await this.fetchManagementDetails()
|
||||
await this.getResourcesGrid()
|
||||
await this.updateItemsFromPage(1, true)
|
||||
}
|
||||
|
||||
|
||||
|
||||
getBlockedNames = async () => {
|
||||
// this.blockedNames = []
|
||||
|
||||
let blockedNames = await parentEpml.request('apiCall', {
|
||||
url: `/lists/blockedNames?apiKey=${this.getApiKey()}`
|
||||
@ -356,7 +498,6 @@ class DataManagement extends LitElement {
|
||||
}
|
||||
|
||||
getFollowedNames = async () => {
|
||||
// this.followedNames = []
|
||||
|
||||
let followedNames = await parentEpml.request('apiCall', {
|
||||
url: `/lists/followedNames?apiKey=${this.getApiKey()}`
|
||||
@ -365,55 +506,6 @@ class DataManagement extends LitElement {
|
||||
this.followedNames = followedNames
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
|
||||
window.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault()
|
||||
this._textMenu(event)
|
||||
})
|
||||
|
||||
window.addEventListener('click', () => {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
})
|
||||
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode === 27) {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
}
|
||||
}
|
||||
|
||||
let configLoaded = false
|
||||
parentEpml.ready().then(() => {
|
||||
parentEpml.subscribe('selected_address', async selectedAddress => {
|
||||
this.selectedAddress = {}
|
||||
selectedAddress = JSON.parse(selectedAddress)
|
||||
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
|
||||
this.selectedAddress = selectedAddress
|
||||
})
|
||||
parentEpml.subscribe('config', c => {
|
||||
this.config = JSON.parse(c)
|
||||
if (!configLoaded) {
|
||||
setTimeout(this.getArbitraryResources, 1)
|
||||
setTimeout(this.getFollowedNames, 1)
|
||||
setTimeout(this.getBlockedNames, 1)
|
||||
setInterval(this.getArbitraryResources, 30*1000)
|
||||
setInterval(this.getFollowedNames, 30*1000)
|
||||
setInterval(this.getBlockedNames, 30*1000)
|
||||
configLoaded = true
|
||||
}
|
||||
})
|
||||
parentEpml.subscribe('copy_menu_switch', async value => {
|
||||
|
||||
if (value === 'false' && window.getSelection().toString().length !== 0) {
|
||||
|
||||
this.clearSelection()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
parentEpml.imReady()
|
||||
}
|
||||
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
let apiKey = myNode.apiKey;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user