Pagination

qortal-ui-plugins/plugins/core/qdn/websites.src.js

@@ -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;
@@ -147,9 +183,9 @@ class Websites extends LitElement {
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">Search Websites</h3>
                     <div id="search">
                         <mwc-textfield outlined label="Name To Search" id="searchName" type="text" value="${this.searchName}"></mwc-textfield>&nbsp;&nbsp;<br>
-                        <mwc-button raised icon="search" @click="${(e) => this.doSearch(e)}">Search &nbsp;</mwc-button>
+                        <mwc-button raised icon="search" @click="${(e) => this.doSearch(e)}">Search</mwc-button>
                     </div><br />
-                    <vaadin-grid id="searchResourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.searchResources)}" aria-label="Search" .items="${this.searchResources}" height-by-rows>
+                    <vaadin-grid id="searchResourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" height-by-rows>
                         <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
                                 render(html`${this.renderSearchAvatar(data.item)}`, root)
                         }}></vaadin-grid-column>
@@ -170,7 +206,7 @@ class Websites extends LitElement {
                         }}></vaadin-grid-column>
                     </vaadin-grid><br />
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Websites</h3>
-                    <vaadin-grid id="resourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" .items="${this.resources}" height-by-rows>
+                    <vaadin-grid id="resourcesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.resources)}" page-size="20" height-by-rows>
                         <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
                                 render(html`${this.renderAvatar(data.item)}`, root)
                         }}></vaadin-grid-column>
@@ -190,6 +226,7 @@ class Websites extends LitElement {
                             render(html`${this.renderBlockUnblockButton(data.item)}`, root);
                         }}></vaadin-grid-column>
                     </vaadin-grid>
+                    <div id="pages"></div>
                     ${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
+        this.showWebsites()
-            setTimeout(getArbitraryResources, this.config.user.nodeSettings.pingInterval)
-        }
 
         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`<img src="${url}" onerror="this.onerror=null; this.src='/img/incognito.png';">`
+        return html`<img src="${url}" onerror="this.src='/img/incognito.png';">`
     }
 
     renderRelayModeText() {