From aa802491558108c20a6dfd46234441fcdac7088e Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Sat, 26 Feb 2022 17:04:51 +0100 Subject: [PATCH] Add tabs and blocked webaites --- .../plugins/core/qdn/websites.src.js | 488 ++++++++++++++---- 1 file changed, 378 insertions(+), 110 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/qdn/websites.src.js b/qortal-ui-plugins/plugins/core/qdn/websites.src.js index 0c44ef99..0c0c6257 100644 --- a/qortal-ui-plugins/plugins/core/qdn/websites.src.js +++ b/qortal-ui-plugins/plugins/core/qdn/websites.src.js @@ -4,6 +4,7 @@ import { Epml } from '../../../epml.js' import '@material/mwc-icon' import '@material/mwc-button' +import '@material/mwc-tab-bar' import '@material/mwc-textfield' import '@vaadin/button' import '@vaadin/grid' @@ -31,7 +32,10 @@ class Websites extends LitElement { searchBlockedNames: { type: Array }, webResources: { type: Array }, webFollowedNames: { type: Array }, - webBlockedNames: { type: Array } + webBlockedNames: { type: Array }, + blockResources: { type: Array }, + blockFollowedNames: { type: Array }, + blockBlockedNames: { type: Array } } } @@ -46,6 +50,15 @@ class Websites extends LitElement { --lumo-primary-color: hsl(199, 100%, 48%); } + #tabs-1 { + --mdc-tab-height: 50px; + } + + #tabs-1-content { + height: 100%; + padding-bottom: 10px; + } + #pages { display: flex; flex-wrap: wrap; @@ -183,120 +196,178 @@ class Websites extends LitElement { this.webResources = [] this.webFollowedNames = [] this.webBlockedNames = [] + this.blockResources = [] + this.blockFollowedNames = [] + this.blockBlockedNames = [] } render() { return html`
-
-

Browse Websites

- ${this.renderPublishButton()} -
-
-

Search Websites

-
- - { - render(html`${this.renderSearchAvatar(data.item)}`, root) - }}> - - { - render(html`${this.renderSearchName(data.item)}`, root) - }}> - - { - render(html`${this.renderSearchStatus(data.item)}`, root) - }}> - - { - render(html`${this.renderSearchSize(data.item)}`, root) - }}> - - { - render(html`${this.renderSearchFollowUnfollowButton(data.item)}`, root); - }}> - - { - render(html`${this.renderSearchBlockUnblockButton(data.item)}`, root); - }}> - -
-
-
-

Followed Websites

- - { - render(html`${this.renderWebAvatar(data.item)}`, root) - }}> - - { - render(html`${this.renderWebName(data.item)}`, root) - }}> - - { - render(html`${this.renderWebStatus(data.item)}`, root) - }}> - - { - render(html`${this.renderWebSize(data.item)}`, root) - }}> - - { - render(html`${this.renderWebFollowUnfollowButton(data.item)}`, root); - }}> - - { - render(html`${this.renderWebBlockUnblockButton(data.item)}`, root); - }}> - - - ${this.isEmptyArray(this.webResources) ? html` - You not follow any website - `: ''} -
-
-

Websites

- - { - render(html`${this.renderAvatar(data.item)}`, root) - }}> - - { - render(html`${this.renderName(data.item)}`, root) - }}> - - { - render(html`${this.renderStatus(data.item)}`, root) - }}> - - { - render(html`${this.renderSize(data.item)}`, root) - }}> - - { - render(html`${this.renderFollowUnfollowButton(data.item)}`, root); - }}> - - { - render(html`${this.renderBlockUnblockButton(data.item)}`, root); - }}> - - -
- ${this.isEmptyArray(this.resources) ? html` - No websites available - `: ''} -
- ${this.renderRelayModeText()} -
+ + + + + + +
+
+

Browse Websites

+

${this.renderPublishButton()}

+
+
+

Search Websites

+
+ + { + render(html`${this.renderSearchAvatar(data.item)}`, root) + }}> + + { + render(html`${this.renderSearchName(data.item)}`, root) + }}> + + { + render(html`${this.renderSearchStatus(data.item)}`, root) + }}> + + { + render(html`${this.renderSearchSize(data.item)}`, root) + }}> + + { + render(html`${this.renderSearchFollowUnfollowButton(data.item)}`, root); + }}> + + { + render(html`${this.renderSearchBlockUnblockButton(data.item)}`, root); + }}> + +
+
+
+

Websites

+ + { + render(html`${this.renderAvatar(data.item)}`, root) + }}> + + { + render(html`${this.renderName(data.item)}`, root) + }}> + + { + render(html`${this.renderStatus(data.item)}`, root) + }}> + + { + render(html`${this.renderSize(data.item)}`, root) + }}> + + { + render(html`${this.renderFollowUnfollowButton(data.item)}`, root); + }}> + + { + render(html`${this.renderBlockUnblockButton(data.item)}`, root); + }}> + + +
+ ${this.isEmptyArray(this.resources) ? html` + No websites available + `: ''} +
+ ${this.renderRelayModeText()} +
+
+
+

Your followed Webistes

+

${this.renderPublishButton()}

+
+
+

Followed Websites

+ + { + render(html`${this.renderWebAvatar(data.item)}`, root) + }}> + + { + render(html`${this.renderWebName(data.item)}`, root) + }}> + + { + render(html`${this.renderWebStatus(data.item)}`, root) + }}> + + { + render(html`${this.renderWebSize(data.item)}`, root) + }}> + + { + render(html`${this.renderWebFollowUnfollowButton(data.item)}`, root); + }}> + + { + render(html`${this.renderWebBlockUnblockButton(data.item)}`, root); + }}> + + + ${this.isEmptyArray(this.webResources) ? html` + You not follow any website + `: ''} +
+ ${this.renderRelayModeText()} +
+
+
+

Your blocked Webistes

+

${this.renderPublishButton()}

+
+
+

Blocked Websites

+ + { + render(html`${this.renderBlockAvatar(data.item)}`, root) + }}> + + { + render(html`${this.renderBlockName(data.item)}`, root) + }}> + + { + render(html`${this.renderBlockStatus(data.item)}`, root) + }}> + + { + render(html`${this.renderBlockSize(data.item)}`, root) + }}> + + { + render(html`${this.renderBlockFollowUnfollowButton(data.item)}`, root); + }}> + + { + render(html`${this.renderBlockBlockUnblockButton(data.item)}`, root); + }}> + + + ${this.isEmptyArray(this.blockResources) ? html` + You have not blocked any website + `: ''} +
+ ${this.renderRelayModeText()} +
+ + ` } @@ -304,6 +375,10 @@ class Websites extends LitElement { this.showWebsites() + setTimeout(() => { + this.displayTabContent('browse') + }, 0) + const getFollowedNames = async () => { let followedNames = await parentEpml.request('apiCall', { url: `/lists/followedNames?apiKey=${this.getApiKey()}` @@ -340,6 +415,24 @@ class Websites extends LitElement { setTimeout(getWebBlockedNames, 60000) } + const getBlockFollowedNames = async () => { + let blockFollowedNames = await parentEpml.request('apiCall', { + url: `/lists/followedNames?apiKey=${this.getApiKey()}` + }) + + this.blockFollowedNames = blockFollowedNames + setTimeout(getBlockFollowedNames, 60000) + } + + const getBlockBlockedNames = async () => { + let blockBlockedNames = await parentEpml.request('apiCall', { + url: `/lists/blockedNames?apiKey=${this.getApiKey()}` + }) + + this.blockBlockedNames = blockBlockedNames + setTimeout(getBlockBlockedNames, 60000) + } + const getSearchFollowedNames = async () => { let searchFollowedNames = await parentEpml.request('apiCall', { url: `/lists/followedNames?apiKey=${this.getApiKey()}` @@ -395,15 +488,19 @@ class Websites extends LitElement { if (!configLoaded) { setTimeout(this.getArbitraryResources, 1) setTimeout(this.getFollowedWebsites, 1) + setTimeout(this.getBlockedWebsites, 1) setTimeout(getFollowedNames, 1) setTimeout(getBlockedNames, 1) setTimeout(getWebFollowedNames, 1) setTimeout(getWebBlockedNames, 1) + setTimeout(getBlockFollowedNames, 1) + setTimeout(getBlockBlockedNames, 1) setTimeout(getSearchFollowedNames, 1) setTimeout(getSearchBlockedNames, 1) setTimeout(getRelayMode, 1) setInterval(this.getArbitraryResources, 120000) setInterval(this.getFollowedWebsites, 60000) + setInterval(this.getBlockedWebsites, 60000) configLoaded = true } this.config = JSON.parse(c) @@ -417,6 +514,15 @@ class Websites extends LitElement { parentEpml.imReady() } + displayTabContent(tab) { + const tabBrowseContent = this.shadowRoot.getElementById('tab-browse-content') + const tabFollowedContent = this.shadowRoot.getElementById('tab-followed-content') + const tabBlockedContent = this.shadowRoot.getElementById('tab-blocked-content') + tabBrowseContent.style.display = (tab === 'browse') ? 'block' : 'none' + tabFollowedContent.style.display = (tab === 'followed') ? 'block' : 'none' + tabBlockedContent.style.display = (tab === 'blocked') ? 'block' : 'none' + } + searchListener(e) { if (e.key === 'Enter') { this.doSearch(e); @@ -675,6 +781,168 @@ class Websites extends LitElement { return ret } + getBlockedWebsites = async () => { + let data = []; + 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 blockedNamesUrl = `${nodeUrl}/lists/blockedNames?apiKey=${this.getApiKey()}`; + const blockedJsonUrl = `${nodeUrl}/arbitrary/resources?service=WEBSITE&default=true&limit=0&reverse=false&includestatus=true`; + + const blockedJsonRes = await fetch(blockedJsonUrl); + const blockedJsonData = await blockedJsonRes.json(); + const blockedResponse = await fetch(blockedNamesUrl); + const blockednames = await blockedResponse.json(); + + let blockedres = blockedJsonData.filter((elm) => blockednames.includes(elm.name)); + + this.blockResources = blockedres; + } + + renderBlockAvatar(blockObj) { + let name = blockObj.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?async=true&apiKey=${this.getApiKey()}`; + return html`` + } + + renderBlockName(blockObj) { + let name = blockObj.name + return html`${name}` + } + + renderBlockStatus(blockObj) { + return html`${blockObj.status.title}` + } + + renderBlockSize(blockObj) { + if (blockObj.size === null) { + return html`` + } + let sizeBlockReadable = this.bytesToSize(blockObj.size); + return html`${sizeBlockReadable}` + } + + renderBlockFollowUnfollowButton(blockObj) { + let name = blockObj.name + if (this.blockFollowedNames == null || !Array.isArray(this.blockFollowedNames)) { + return html`` + } + if (this.blockFollowedNames.indexOf(name) === -1) { + return html` this.blockFollowName(blockObj)}>add_to_queue Follow` + } + else { + return html` this.blockUnfollowName(blockObj)}>remove_from_queue Unfollow` + } + } + + async blockFollowName(blockObj) { + let name = blockObj.name + let items = [ + name + ] + let namesJsonString = JSON.stringify({ "items": items }) + let ret = await parentEpml.request('apiCall', { + url: `/lists/followedNames?apiKey=${this.getApiKey()}`, + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: `${namesJsonString}` + }) + if (ret === true) { + this.blockFollowedNames = this.blockFollowedNames.filter(item => item != name); + this.blockFollowedNames.push(name) + } + else { + parentEpml.request('showSnackBar', 'Error occurred when trying to follow this registered name. Please try again') + } + return ret + } + + async blockUnfollowName(blockObj) { + let name = blockObj.name + let items = [ + name + ] + let namesJsonString = JSON.stringify({ "items": items }) + let ret = await parentEpml.request('apiCall', { + url: `/lists/followedNames?apiKey=${this.getApiKey()}`, + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + }, + body: `${namesJsonString}` + }) + if (ret === true) { + this.blockFollowedNames = this.blockFollowedNames.filter(item => item != name); + } + else { + parentEpml.request('showSnackBar', 'Error occurred when trying to unfollow this registered name. Please try again') + } + return ret + } + + renderBlockBlockUnblockButton(blockObj) { + let name = blockObj.name + if (this.blockBlockedNames == null || !Array.isArray(this.blockBlockedNames)) { + return html`` + } + if (this.blockBlockedNames.indexOf(name) === -1) { + return html` this.blockBlockName(blockObj)}>block Block` + } + else { + return html` this.blockUnblockName(blockObj)}>radio_button_unchecked Unblock` + } + } + + async blockBlockName(blockObj) { + let name = blockObj.name + let items = [ + name + ] + let namesJsonString = JSON.stringify({ "items": items }) + let ret = await parentEpml.request('apiCall', { + url: `/lists/blockedNames?apiKey=${this.getApiKey()}`, + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: `${namesJsonString}` + }) + if (ret === true) { + this.blockBlockedNames = this.blockBlockedNames.filter(item => item != name); + this.blockBlockedNames.push(name) + } + else { + parentEpml.request('showSnackBar', 'Error occurred when trying to block this registered name. Please try again') + } + return ret + } + + async blockUnblockName(blockObj) { + let name = blockObj.name + let items = [ + name + ] + let namesJsonString = JSON.stringify({ "items": items }) + let ret = await parentEpml.request('apiCall', { + url: `/lists/blockedNames?apiKey=${this.getApiKey()}`, + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + }, + body: `${namesJsonString}` + }) + if (ret === true) { + this.blockBlockedNames = this.blockBlockedNames.filter(item => item != name); + } + else { + parentEpml.request('showSnackBar', 'Error occurred when trying to unblock this registered name. Please try again') + } + return ret + } + async searchResult() { let searchName = this.shadowRoot.getElementById('searchName').value if (searchName.length === 0) {