Add ID And Avatar To LIst

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

@@ -21,7 +21,7 @@ class Websites extends LitElement {
             followedNames: { type: Array },
             blockedNames: { type: Array },
             relayMode: { type: Boolean },
-            selectedAddress: { type: Object },
+            selectedAddress: { type: Object }
         }
     }
 
@@ -31,6 +31,7 @@ class Websites extends LitElement {
                 --mdc-theme-primary: rgb(3, 169, 244);
                 --paper-input-container-focus-color: var(--mdc-theme-primary);
             }
+
             #websites-list-page {
                 background: #fff;
                 padding: 12px 24px;
@@ -62,14 +63,17 @@ class Websites extends LitElement {
                 display: hidden !important;
                 visibility: none !important;
             }
+
             .details {
                 display: flex;
                 font-size: 18px;
             }
+
             span {
                 font-size: 14px;
                 word-break: break-all;
             }
+
             select {
                 padding: 13px 20px;
                 width: 100%;
@@ -77,19 +81,18 @@ class Websites extends LitElement {
                 color: #555;
                 font-weight: 400;
             }
+
             .title {
                 font-weight:600;
                 font-size:12px;
                 line-height: 32px;
                 opacity: 0.66;
             }
+
             .itemList {
                 padding:0;
             }
-            /* .itemList > * {
+
-                padding-left:24px;
-                padding-right:24px;
-            } */
             .relay-mode-notice {
                 margin:auto;
                 text-align:center;
@@ -98,6 +101,10 @@ class Websites extends LitElement {
                 line-height:20px;
                 color:rgb(100,100,100);
             }
+
+            img {
+                border-radius: 25%;
+            }
         `
     }
 
@@ -111,6 +118,7 @@ class Websites extends LitElement {
         this.blockedNames = []
         this.relayMode = null
         this.isLoading = false
+        this.boundIndexRenderer = this.indexRenderer.bind(this);
     }
 
     render() {
@@ -120,11 +128,13 @@ class Websites extends LitElement {
                     <h2 style="margin: 0; flex: 1; padding-top: .1em; display: inline;">Browse Websites</h2>
                     ${this.renderPublishButton()}
                 </div>
-
                 <div class="divCard">
                     <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="grid" 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 width="3rem" flex-grow="0" header="Id" .renderer="${this.boundIndexRenderer}"></vaadin-grid-column>
+                        <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
+                                render(html`${this.renderAvatar(data.item)}`, root)
+                        }}></vaadin-grid-column>
                         <vaadin-grid-column header="Name" .renderer=${(root, column, data) => {
                             render(html`${this.renderName(data.item)}`, root)
                         }}></vaadin-grid-column>
@@ -138,7 +148,6 @@ class Websites extends LitElement {
                             render(html`${this.renderBlockUnblockButton(data.item)}`, root);
                         }}></vaadin-grid-column>
                     </vaadin-grid>
-                    </vaadin-grid>
                     ${this.isEmptyArray(this.resources) ? html`
                         No websites available
                     `: ''}
@@ -148,6 +157,104 @@ 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=true&includestatus=true`
+            })
+
+            this.resources = resources
+            setTimeout(getArbitraryResources, this.config.user.nodeSettings.pingInterval)
+        }
+
+        const getFollowedNames = async () => {
+            let followedNames = await parentEpml.request('apiCall', {
+                url: `/lists/followedNames?apiKey=${this.getApiKey()}`
+            })
+
+            this.followedNames = followedNames
+            setTimeout(getFollowedNames, this.config.user.nodeSettings.pingInterval)
+        }
+
+        const getBlockedNames = async () => {
+            let blockedNames = await parentEpml.request('apiCall', {
+                url: `/lists/blockedNames?apiKey=${this.getApiKey()}`
+            })
+
+            this.blockedNames = blockedNames
+            setTimeout(getBlockedNames, this.config.user.nodeSettings.pingInterval)
+        }
+
+        const getRelayMode = async () => {
+            let relayMode = await parentEpml.request('apiCall', {
+                url: `/arbitrary/relaymode?apiKey=${this.getApiKey()}`
+            })
+
+            this.relayMode = relayMode;
+            setTimeout(getRelayMode, this.config.user.nodeSettings.pingInterval)
+        }
+
+
+        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 => {
+                if (!configLoaded) {
+                    setTimeout(getArbitraryResources, 1)
+                    setTimeout(getFollowedNames, 1)
+                    setTimeout(getBlockedNames, 1)
+                    setTimeout(getRelayMode, 1)
+                    configLoaded = true
+                }
+                this.config = JSON.parse(c)
+            })
+            parentEpml.subscribe('copy_menu_switch', async value => {
+                if (value === 'false' && window.getSelection().toString().length !== 0) {
+                    this.clearSelection()
+                }
+            })
+        })
+        parentEpml.imReady()
+    }
+
+    indexRenderer(root, column, rowData) {
+        render(
+            html`
+                <div>${rowData.index + 1}</div>
+            `,
+            root,
+        );
+    }
+
+    renderAvatar(websiteObj) {
+        let name = websiteObj.name
+        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}" style="width:42px; height:42px;" onerror="this.onerror=null; this.src='/img/incognito.png';">`
+    }
+
     renderRelayModeText() {
         if (this.relayMode === true) {
             return html`<div class="relay-mode-notice">Relay mode is enabled. This means that your node will help to transport encrypted data around the network when a peer requests it. You can opt out by setting <strong>"relayModeEnabled": false</strong> in settings.json</div>`;
@@ -164,7 +271,6 @@ class Websites extends LitElement {
         if (this.followedNames == null || !Array.isArray(this.followedNames)) {
             return html``
         }
-
         return html`<mwc-button style="float:right;" @click=${() => this.publishWebsite()}><mwc-icon>add</mwc-icon>Publish Website</mwc-button>`
     }
 
@@ -298,7 +404,6 @@ class Websites extends LitElement {
 
     renderName(websiteObj) {
         let name = websiteObj.name
-        
         return html`<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}">${name}</a>`
     }
 
@@ -357,115 +462,14 @@ class Websites extends LitElement {
         const checkSelectedTextAndShowMenu = () => {
             let selectedText = getSelectedText();
             if (selectedText && typeof selectedText === 'string') {
-
                 let _eve = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY }
-
                 let textMenuObject = { selectedText: selectedText, eventObject: _eve, isFrame: true }
-
                 parentEpml.request('openCopyTextMenu', textMenuObject)
             }
         }
-
         checkSelectedTextAndShowMenu()
     }
 
-
-    firstUpdated() {
-
-        const getArbitraryResources = async () => {
-            // this.resources = []
-
-            let resources = await parentEpml.request('apiCall', {
-                url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=true&includestatus=true`
-            })
-
-            this.resources = resources
-            setTimeout(getArbitraryResources, this.config.user.nodeSettings.pingInterval)
-        }
-
-        const getFollowedNames = async () => {
-            // this.followedNames = []
-
-            let followedNames = await parentEpml.request('apiCall', {
-                url: `/lists/followedNames?apiKey=${this.getApiKey()}`
-            })
-
-            this.followedNames = followedNames
-            setTimeout(getFollowedNames, this.config.user.nodeSettings.pingInterval)
-        }
-
-        const getBlockedNames = async () => {
-            // this.blockedNames = []
-
-            let blockedNames = await parentEpml.request('apiCall', {
-                url: `/lists/blockedNames?apiKey=${this.getApiKey()}`
-            })
-
-            this.blockedNames = blockedNames
-            setTimeout(getBlockedNames, this.config.user.nodeSettings.pingInterval)
-        }
-
-        const getRelayMode = async () => {
-
-            let relayMode = await parentEpml.request('apiCall', {
-                url: `/arbitrary/relaymode?apiKey=${this.getApiKey()}`
-            })
-            this.relayMode = relayMode;
-
-            setTimeout(getRelayMode, this.config.user.nodeSettings.pingInterval)
-        }
-
-
-        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 => {
-                if (!configLoaded) {
-                    setTimeout(getArbitraryResources, 1)
-                    setTimeout(getFollowedNames, 1)
-                    setTimeout(getBlockedNames, 1)
-                    setTimeout(getRelayMode, 1)
-                    configLoaded = true
-                }
-                this.config = JSON.parse(c)
-            })
-            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;