From 696eecbc0303f6aee6c9cda23f43c9fad3c3bdd7 Mon Sep 17 00:00:00 2001
From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com>
Date: Sun, 30 Jan 2022 07:03:48 -0800
Subject: [PATCH] Pagination
---
.../plugins/core/qdn/websites.src.js | 150 ++++++++++++++++--
1 file changed, 134 insertions(+), 16 deletions(-)
diff --git a/qortal-ui-plugins/plugins/core/qdn/websites.src.js b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
index 3f339870..5f3c37c1 100644
--- a/qortal-ui-plugins/plugins/core/qdn/websites.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
@@ -15,14 +15,14 @@ class Websites extends LitElement {
static get properties() {
return {
service: { type: String },
- identifier: { type: String },
+ identifier: { type: String },
loading: { type: Boolean },
resources: { type: Array },
followedNames: { type: Array },
blockedNames: { type: Array },
relayMode: { type: Boolean },
selectedAddress: { type: Object },
- searchName: { type: String },
+ searchName: { type: String },
searchResources: { type: Array },
searchFollowedNames: { type: Array },
searchBlockedNames: { type: Array }
@@ -36,6 +36,42 @@ class Websites extends LitElement {
--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;
@@ -43,7 +79,7 @@ class Websites extends LitElement {
#search {
display: flex;
- width: 50%;
+ width: 50%;
align-items: center;
}
@@ -123,7 +159,7 @@ class Websites extends LitElement {
constructor() {
super()
this.service = "WEBSITE"
- this.identifier = null
+ this.identifier = null
this.selectedAddress = {}
this.resources = []
this.followedNames = []
@@ -147,9 +183,9 @@ class Websites extends LitElement {
Search Websites
- Search
+ Search
-
+
{
render(html`${this.renderSearchAvatar(data.item)}`, root)
}}>
@@ -170,7 +206,7 @@ class Websites extends LitElement {
}}>
Websites
-
+
{
render(html`${this.renderAvatar(data.item)}`, root)
}}>
@@ -190,6 +226,7 @@ class Websites extends LitElement {
render(html`${this.renderBlockUnblockButton(data.item)}`, root);
}}>
+
${this.isEmptyArray(this.resources) ? html`
No websites available
`: ''}
@@ -200,14 +237,8 @@ class Websites extends LitElement {
}
firstUpdated() {
- const getArbitraryResources = async () => {
- let resources = await parentEpml.request('apiCall', {
- url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=true`
- })
- this.resources = resources
- setTimeout(getArbitraryResources, this.config.user.nodeSettings.pingInterval)
- }
+ this.showWebsites()
const getFollowedNames = async () => {
let followedNames = await parentEpml.request('apiCall', {
@@ -281,12 +312,13 @@ class Websites extends LitElement {
})
parentEpml.subscribe('config', c => {
if (!configLoaded) {
- setTimeout(getArbitraryResources, 1)
+ setTimeout(this.getArbitraryResources, 1)
setTimeout(getFollowedNames, 1)
setTimeout(getBlockedNames, 1)
setTimeout(getSearchFollowedNames, 1)
setTimeout(getSearchBlockedNames, 1)
setTimeout(getRelayMode, 1)
+ setInterval(this.getArbitraryResources, 120 * 1000)
configLoaded = true
}
this.config = JSON.parse(c)
@@ -300,6 +332,92 @@ class Websites extends LitElement {
parentEpml.imReady()
}
+ async getResourcesGrid() {
+ this.resourcesGrid = this.shadowRoot.querySelector(`#resourcesGrid`)
+ this.pagesControl = this.shadowRoot.querySelector('#pages')
+ this.pages = undefined
+ }
+
+ getArbitraryResources = async () => {
+ const resources = await parentEpml.request('apiCall', {
+ url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=true`
+ })
+ this.resources = resources
+ }
+
+ async updateItemsFromPage(page) {
+ if (page === undefined) {
+ return
+ }
+
+ if (!this.pages) {
+ this.pages = Array.apply(null, { length: Math.ceil(this.resources.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.resources.slice(start, end)
+ }
+
+ async showWebsites() {
+ await this.getArbitraryResources()
+ await this.getResourcesGrid()
+ await this.updateItemsFromPage(1, true)
+ }
+
doSearch(e) {
this.searchResult()
}
@@ -470,7 +588,7 @@ class Websites extends LitElement {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?apiKey=${this.getApiKey()}`;
- return html`
`
+ return html``
}
renderRelayModeText() {