AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

fix followed and blocked names tab

Browse Source
This commit is contained in:
AlphaX-Projects 2022-09-11 14:30:57 +02:00
parent 69972c0b90
commit 512bdc1cae
1 changed files with 269 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

523
qortal-ui-plugins/plugins/core/qdn/websites.src.js
View File

@ -58,56 +58,56 @@ class Websites extends LitElement {
} }
#tabs-1 { #tabs-1 {
--mdc-tab-height: 50px; --mdc-tab-height: 50px;
} }
#tabs-1-content { #tabs-1-content {
height: 100%; height: 100%;
padding-bottom: 10px; padding-bottom: 10px;
} }
mwc-tab-bar { mwc-tab-bar {
--mdc-text-transform: none; --mdc-text-transform: none;
--mdc-tab-color-default: var(--black); --mdc-tab-color-default: var(--black);
--mdc-tab-text-label-color-default: var(--black); --mdc-tab-text-label-color-default: var(--black);
} }
#pages { #pages {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 5px 5px 5px; padding: 10px 5px 5px 5px;
margin: 0px 20px 20px 20px; margin: 0px 20px 20px 20px;
} }
#pages > button { #pages > button {
user-select: none; user-select: none;
padding: 5px; padding: 5px;
margin: 0 5px; margin: 0 5px;
border-radius: 10%; border-radius: 10%;
border: 0; border: 0;
background: transparent; background: transparent;
font: inherit; font: inherit;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
color: var(--black); color: var(--black);
} }
#pages > button:not([disabled]):hover, #pages > button:not([disabled]):hover,
#pages > button:focus { #pages > button:focus {
color: #ccc; color: #ccc;
background-color: #eee; background-color: #eee;
} }
#pages > button[selected] { #pages > button[selected] {
font-weight: bold; font-weight: bold;
color: var(--white); color: var(--white);
background-color: #ccc; background-color: #ccc;
} }
#pages > button[disabled] { #pages > button[disabled] {
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
} }
#websites-list-page { #websites-list-page {
background: var(--white); background: var(--white);
@ -245,156 +245,156 @@ class Websites extends LitElement {
</mwc-tab-bar> </mwc-tab-bar>
<z id="tabs-1-content"> <z id="tabs-1-content">
<div id="tab-browse-content"> <div id="tab-browse-content">
<div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;"> <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange1")}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange1")}</h2>
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
</div> </div>
<div class="divCard"> <div class="divCard">
<h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("websitespage.schange4")}</h3> <h3 style="margin: 0; margin-bottom: 1em; text-align: left;">${translate("websitespage.schange4")}</h3>
<div id="search"> <div id="search">
<vaadin-text-field theme="medium" id="searchName" placeholder="${translate("websitespage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible> <vaadin-text-field theme="medium" id="searchName" placeholder="${translate("websitespage.schange33")}" value="${this.searchName}" @keydown="${this.searchListener}" clear-button-visible>
<vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon> <vaadin-icon slot="prefix" icon="vaadin:user"></vaadin-icon>
</vaadin-text-field>&nbsp;&nbsp;<br> </vaadin-text-field>&nbsp;&nbsp;<br>
<vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}"> <vaadin-button theme="medium" @click="${(e) => this.doSearch(e)}">
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon> <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
${translate("websitespage.schange35")} ${translate("websitespage.schange35")}
</vaadin-button> </vaadin-button>
</div><br /> </div><br />
<vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible> <vaadin-grid theme="wrap-cell-content" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible>
<vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
render(html`${this.renderAvatar(data.item)}`, root) render(html`${this.renderAvatar(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => { <vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => {
render(html`${this.renderInfo(data.item)}`, root) render(html`${this.renderInfo(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
render(html`${this.renderPublishedBy(data.item)}`, root) render(html`${this.renderPublishedBy(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
render(html`${this.renderFollowUnfollowButton(data.item)}`, root); render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
render(html`${this.renderBlockUnblockButton(data.item)}`, root); render(html`${this.renderBlockUnblockButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
</vaadin-grid><br /> </vaadin-grid><br />
</div> </div>
<div class="divCard"> <div class="divCard">
<h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange9")}</h3> <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange9")}</h3>
<vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.pageRes)}" .items="${this.pageRes}" aria-label="Websites" all-rows-visible> <vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.pageRes)}" .items="${this.pageRes}" aria-label="Websites" all-rows-visible>
<vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
render(html`${this.renderAvatar(data.item)}`, root) render(html`${this.renderAvatar(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => { <vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => {
render(html`${this.renderInfo(data.item)}`, root) render(html`${this.renderInfo(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
render(html`${this.renderPublishedBy(data.item)}`, root) render(html`${this.renderPublishedBy(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
render(html`${this.renderFollowUnfollowButton(data.item)}`, root); render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
render(html`${this.renderBlockUnblockButton(data.item)}`, root); render(html`${this.renderBlockUnblockButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
</vaadin-grid> </vaadin-grid>
<div id="pages"></div> <div id="pages"></div>
${this.pageRes == null ? html` ${this.pageRes == null ? html`
Loading... Loading...
`: ''} ` : ''}
${this.isEmptyArray(this.pageRes) ? html` ${this.isEmptyArray(this.pageRes) ? html`
<span style="color: var(--black);">${translate("websitespage.schange10")}</span> <span style="color: var(--black);">${translate("websitespage.schange10")}</span>
`: ''} ` : ''}
</div> </div>
${this.renderRelayModeText()} ${this.renderRelayModeText()}
</div> </div>
<div id="tab-followed-content"> <div id="tab-followed-content">
<div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;"> <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange11")}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange11")}</h2>
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
</div> </div>
<div class="divCard"> <div class="divCard">
<h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange12")}</h3> <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange12")}</h3>
<vaadin-grid theme="wrap-cell-content" id="followedResourcesGrid" ?hidden="${this.isEmptyArray(this.followedResources)}" .items="${this.followedResources}" aria-label="Followed Websites" all-rows-visible> <vaadin-grid theme="wrap-cell-content" id="followedResourcesGrid" ?hidden="${this.isEmptyArray(this.followedResources)}" .items="${this.followedResources}" aria-label="Followed Websites" all-rows-visible>
<vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
render(html`${this.renderAvatar(data.item)}`, root) render(html`${this.renderAvatar(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => { <vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => {
render(html`${this.renderInfo(data.item)}`, root) render(html`${this.renderInfo(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
render(html`${this.renderPublishedBy(data.item)}`, root) render(html`${this.renderPublishedBy(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
render(html`${this.renderFollowUnfollowButton(data.item)}`, root); render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
render(html`${this.renderBlockUnblockButton(data.item)}`, root); render(html`${this.renderBlockUnblockButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
</vaadin-grid> </vaadin-grid>
${this.followedResources == null ? html` ${this.followedResources == null ? html`
Loading... Loading...
`: ''} ` : ''}
${this.isEmptyArray(this.followedResources) ? html` ${this.isEmptyArray(this.followedResources) ? html`
<span style="color: var(--black);">${translate("websitespage.schange13")}</span> <span style="color: var(--black);">${translate("websitespage.schange13")}</span>
`: ''} ` : ''}
</div> </div>
${this.renderRelayModeText()} ${this.renderRelayModeText()}
</div> </div>
<div id="tab-blocked-content"> <div id="tab-blocked-content">
<div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;"> <div style="min-height:48px; display: flex; padding-bottom: 6px; margin: 2px;">
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange14")}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${translate("websitespage.schange14")}</h2>
<h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2> <h2 style="margin: 0; flex: 1; padding-top: .5em; display: inline;">${this.renderPublishButton()}</h2>
</div> </div>
<div class="divCard"> <div class="divCard">
<h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange15")}</h3> <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">${translate("websitespage.schange15")}</h3>
<vaadin-grid theme="wrap-cell-content" id="blockedResourcesGrid" ?hidden="${this.isEmptyArray(this.blockedResources)}" .items="${this.blockedResources}" aria-label="Blocked Websites" all-rows-visible> <vaadin-grid theme="wrap-cell-content" id="blockedResourcesGrid" ?hidden="${this.isEmptyArray(this.blockedResources)}" .items="${this.blockedResources}" aria-label="Blocked Websites" all-rows-visible>
<vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="7rem" flex-grow="0" header="${translate("websitespage.schange5")}" .renderer=${(root, column, data) => {
render(html`${this.renderAvatar(data.item)}`, root) render(html`${this.renderAvatar(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => { <vaadin-grid-column header="${translate("websitespage.schange6")}" .renderer=${(root, column, data) => {
render(html`${this.renderInfo(data.item)}`, root) render(html`${this.renderInfo(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="12rem" flex-grow="0" header="${translate("websitespage.schange7")}" .renderer=${(root, column, data) => {
render(html`${this.renderPublishedBy(data.item)}`, root) render(html`${this.renderPublishedBy(data.item)}`, root)
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="${translate("websitespage.schange8")}" .renderer=${(root, column, data) => {
render(html`${this.renderFollowUnfollowButton(data.item)}`, root); render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
<vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => { <vaadin-grid-column width="11rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
render(html`${this.renderBlockUnblockButton(data.item)}`, root); render(html`${this.renderBlockUnblockButton(data.item)}`, root);
}}> }}>
</vaadin-grid-column> </vaadin-grid-column>
</vaadin-grid> </vaadin-grid>
${this.blockedResources == null ? html` ${this.blockedResources == null ? html`
Loading... Loading...
`: ''} ` : ''}
${this.isEmptyArray(this.blockedResources) ? html` ${this.isEmptyArray(this.blockedResources) ? html`
<span style="color: var(--black);">${translate("websitespage.schange16")}</span> <span style="color: var(--black);">${translate("websitespage.schange16")}</span>
`: ''} ` : ''}
</div> </div>
${this.renderRelayModeText()} ${this.renderRelayModeText()}
</div> </div>
</div> </div>
</div> </div>
` `
} }
@ -414,16 +414,15 @@ class Websites extends LitElement {
}) })
this.followedNames = followedNames this.followedNames = followedNames
setTimeout(getFollowedNames, 600000) setTimeout(getFollowedNames, 60000)
} }
const getBlockedNames = async () => { const getBlockedNames = async () => {
let blockedNames = await parentEpml.request('apiCall', { let blockedNames = await parentEpml.request('apiCall', {
url: `/lists/blockedNames?apiKey=${this.getApiKey()}` url: `/lists/blockedNames?apiKey=${this.getApiKey()}`
}) })
this.blockedNames = blockedNames this.blockedNames = blockedNames
setTimeout(getBlockedNames, 600000) setTimeout(getBlockedNames, 60000)
} }
const getRelayMode = async () => { const getRelayMode = async () => {
@ -478,6 +477,8 @@ class Websites extends LitElement {
setTimeout(getFollowedNames, 1) setTimeout(getFollowedNames, 1)
setTimeout(getBlockedNames, 1) setTimeout(getBlockedNames, 1)
setTimeout(getRelayMode, 1) setTimeout(getRelayMode, 1)
setTimeout(this.getFollowedNamesResource, 1)
setTimeout(this.getBlockedNamesResource, 1)
setInterval(this.getArbitraryResources, 600000) setInterval(this.getArbitraryResources, 600000)
configLoaded = true configLoaded = true
} }
@ -499,7 +500,7 @@ class Websites extends LitElement {
} else { } else {
this.theme = 'light'; this.theme = 'light';
} }
document.querySelector('html').setAttribute('theme', this.theme); document.querySelector('html').setAttribute('theme', this.theme)
} }
changeLanguage() { changeLanguage() {
@ -528,7 +529,7 @@ class Websites extends LitElement {
searchListener(e) { searchListener(e) {
if (e.key === 'Enter') { if (e.key === 'Enter') {
this.doSearch(e); this.doSearch(e)
} }
} }
@ -539,26 +540,38 @@ class Websites extends LitElement {
} }
getArbitraryResources = async () => { getArbitraryResources = async () => {
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 followedNamesUrl = `${nodeUrl}/lists/followedNames?apiKey=${this.getApiKey()}`
const blockedNamesUrl = `${nodeUrl}/lists/blockedNames?apiKey=${this.getApiKey()}`
const resources = await parentEpml.request('apiCall', { const resources = await parentEpml.request('apiCall', {
url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=false&includemetadata=false` url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=false&includemetadata=false`
}) })
this.resources = resources this.resources = resources
}
const followedResponse = await fetch(followedNamesUrl) getFollowedNamesResource = async () => {
const followednames = await followedResponse.json() const followedRes = await parentEpml.request('apiCall', {
let followedres = resources.filter((elm) => followednames.includes(elm.name)) url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=true&includemetadata=true&namefilter=followedNames`
this.followedResources = followedres })
this.followedResources = followedRes
}
const blockedResponse = await fetch(blockedNamesUrl) getFollowedNamesRefresh = async () => {
const blockednames = await blockedResponse.json() let followedNames = await parentEpml.request('apiCall', {
let blockedres = resources.filter((elm) => blockednames.includes(elm.name)) url: `/lists/followedNames?apiKey=${this.getApiKey()}`
this.blockedResources = blockedres })
this.followedNames = followedNames
}
getBlockedNamesResource = async () => {
const blockedRes = await parentEpml.request('apiCall', {
url: `/arbitrary/resources?service=${this.service}&default=true&limit=0&reverse=false&includestatus=true&includemetadata=true&namefilter=blockedNames`
})
this.blockedResources = blockedRes
}
getBlockedNamesRefresh = async () => {
let blockedNames = await parentEpml.request('apiCall', {
url: `/lists/blockedNames?apiKey=${this.getApiKey()}`
})
this.blockedNames = blockedNames
} }
async getData(offset) { async getData(offset) {
@ -582,15 +595,15 @@ class Websites extends LitElement {
return index + 1 return index + 1
}) })
let offset = 0; let offset = 0
const prevBtn = document.createElement('button') const prevBtn = document.createElement('button')
prevBtn.textContent = '<' prevBtn.textContent = '<'
prevBtn.addEventListener('click', () => { prevBtn.addEventListener('click', () => {
if (parseInt(this.pagesControl.querySelector('[selected]').textContent) > 1) { if (parseInt(this.pagesControl.querySelector('[selected]').textContent) > 1) {
offset = (parseInt(this.pagesControl.querySelector('[selected]').textContent) - 2) * 20; offset = (parseInt(this.pagesControl.querySelector('[selected]').textContent) - 2) * 20
} else { } else {
offset = 0; offset = 0
} }
this.getData(offset); this.getData(offset);
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent) const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
@ -604,9 +617,9 @@ class Websites extends LitElement {
let offset = 0; let offset = 0;
pageBtn.addEventListener('click', (e) => { pageBtn.addEventListener('click', (e) => {
if (parseInt(e.target.textContent) > 1) { if (parseInt(e.target.textContent) > 1) {
offset = (parseInt(e.target.textContent) - 1) * 20; offset = (parseInt(e.target.textContent) - 1) * 20
} else { } else {
offset = 0; offset = 0
} }
this.getData(offset); this.getData(offset);
this.updateItemsFromPage(parseInt(e.target.textContent)) this.updateItemsFromPage(parseInt(e.target.textContent))
@ -621,9 +634,9 @@ class Websites extends LitElement {
nextBtn.textContent = '>' nextBtn.textContent = '>'
nextBtn.addEventListener('click', () => { nextBtn.addEventListener('click', () => {
if (parseInt(this.pagesControl.querySelector('[selected]').textContent) >= 1) { if (parseInt(this.pagesControl.querySelector('[selected]').textContent) >= 1) {
offset = ((parseInt(this.pagesControl.querySelector('[selected]').textContent) + 1) * 20) - 20; offset = ((parseInt(this.pagesControl.querySelector('[selected]').textContent) + 1) * 20) - 20
} else { } else {
offset = 0; offset = 0
} }
this.getData(offset); this.getData(offset);
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent) const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
@ -689,18 +702,18 @@ class Websites extends LitElement {
let name = websiteObj.name let name = websiteObj.name
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] 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 nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`; const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
return html`<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}"><img src="${url}" onerror="this.src='/img/incognito.png';"></a>` return html`<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}"><img src="${url}" onerror="this.src='/img/incognito.png';"></a>`
} }
renderRelayModeText() { renderRelayModeText() {
if (this.relayMode === true) { if (this.relayMode === true) {
return html`<div class="relay-mode-notice">${translate("websitespage.schange18")} <strong>"relayModeEnabled": false</strong> ${translate("websitespage.schange19")} settings.json</div>`; return html`<div class="relay-mode-notice">${translate("websitespage.schange18")} <strong>"relayModeEnabled": false</strong> ${translate("websitespage.schange19")} settings.json</div>`
} }
else if (this.relayMode === false) { else if (this.relayMode === false) {
return html`<div class="relay-mode-notice">${translate("websitespage.schange20")} <strong>"relayModeEnabled": true</strong> ${translate("websitespage.schange19")} settings.json</div>`; return html`<div class="relay-mode-notice">${translate("websitespage.schange20")} <strong>"relayModeEnabled": true</strong> ${translate("websitespage.schange19")} settings.json</div>`
} }
return html``; return html``
} }
renderPublishButton() { renderPublishButton() {
@ -738,15 +751,15 @@ class Websites extends LitElement {
// immediately, as apposed to only adding if it doesn't already exist // immediately, as apposed to only adding if it doesn't already exist
this.followedNames = this.followedNames.filter(item => item != name) this.followedNames = this.followedNames.filter(item => item != name)
this.followedNames.push(name) this.followedNames.push(name)
this.getFollowedNamesRefresh()
this.getFollowedNamesResource()
this.getArbitraryResources() this.getArbitraryResources()
window.location.reload() this.updateComplete.then(() => this.requestUpdate())
} } else {
else {
let err3string = get("websitespage.schange22") let err3string = get("websitespage.schange22")
parentEpml.request('showSnackBar', `${err3string}`) parentEpml.request('showSnackBar', `${err3string}`)
} }
return ret return ret
this.displayTabContent('followed')
} }
async unfollowName(websiteObj) { async unfollowName(websiteObj) {
@ -768,15 +781,15 @@ class Websites extends LitElement {
if (ret === true) { if (ret === true) {
// Successfully unfollowed - remove from local list // Successfully unfollowed - remove from local list
this.followedNames = this.followedNames.filter(item => item != name) this.followedNames = this.followedNames.filter(item => item != name)
this.getFollowedNamesRefresh()
this.getFollowedNamesResource()
this.getArbitraryResources() this.getArbitraryResources()
window.location.reload() this.updateComplete.then(() => this.requestUpdate())
} } else {
else {
let err4string = get("websitespage.schange23") let err4string = get("websitespage.schange23")
parentEpml.request('showSnackBar', `${err4string}`) parentEpml.request('showSnackBar', `${err4string}`)
} }
return ret return ret
this.displayTabContent('followed')
} }
async blockName(websiteObj) { async blockName(websiteObj) {
@ -801,15 +814,15 @@ class Websites extends LitElement {
// immediately, as apposed to only adding if it doesn't already exist // immediately, as apposed to only adding if it doesn't already exist
this.blockedNames = this.blockedNames.filter(item => item != name) this.blockedNames = this.blockedNames.filter(item => item != name)
this.blockedNames.push(name) this.blockedNames.push(name)
this.getBlockedNamesRefresh()
this.getBlockedNamesResource()
this.getArbitraryResources() this.getArbitraryResources()
window.location.reload() this.updateComplete.then(() => this.requestUpdate())
} } else {
else {
let err5string = get("websitespage.schange24") let err5string = get("websitespage.schange24")
parentEpml.request('showSnackBar', `${err5string}`) parentEpml.request('showSnackBar', `${err5string}`)
} }
return ret return ret
this.displayTabContent('blocked')
} }
async unblockName(websiteObj) { async unblockName(websiteObj) {
@ -831,63 +844,65 @@ class Websites extends LitElement {
if (ret === true) { if (ret === true) {
// Successfully unblocked - remove from local list // Successfully unblocked - remove from local list
this.blockedNames = this.blockedNames.filter(item => item != name) this.blockedNames = this.blockedNames.filter(item => item != name)
this.getBlockedNamesRefresh()
this.getBlockedNamesResource()
this.getArbitraryResources() this.getArbitraryResources()
window.location.reload() this.updateComplete.then(() => this.requestUpdate())
} } else {
else {
let err6string = get("websitespage.schange25") let err6string = get("websitespage.schange25")
parentEpml.request('showSnackBar', `${err6string}`) parentEpml.request('showSnackBar', `${err6string}`)
} }
return ret return ret
this.displayTabContent('blocked')
} }
renderInfo(websiteObj) { renderInfo(websiteObj) {
let name = websiteObj.name let name = websiteObj.name
let title = name; let title = name
let description = ""; let description = ""
let categoryName = this.renderCatText(); let categoryName = this.renderCatText()
let tags = ""; let tags = "";
let sizeReadable = ""; let sizeReadable = ""
if (websiteObj.metadata != null) { if (websiteObj.metadata != null) {
title = websiteObj.metadata.title; title = websiteObj.metadata.title;
description = websiteObj.metadata.description; description = websiteObj.metadata.description;
categoryName = websiteObj.metadata.categoryName; categoryName = websiteObj.metadata.categoryName;
if (websiteObj.metadata.tags != null && websiteObj.metadata.tags.length > 0) { if (websiteObj.metadata.tags != null && websiteObj.metadata.tags.length > 0) {
tags = "Tags: " + websiteObj.metadata.tags.join(", "); tags = "Tags: " + websiteObj.metadata.tags.join(", ")
} }
} }
if (websiteObj.size != null) { if (websiteObj.size != null) {
sizeReadable = this.bytesToSize(websiteObj.size); sizeReadable = this.bytesToSize(websiteObj.size);
} }
return html` return html`
<div class="resourceTitle"> <div class="resourceTitle">
<a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}">${title}</a> <a class="visitSite" href="browser/index.html?name=${name}&service=${this.service}">${title}</a>
</div> </div>
<div class="resourceDescription"> <div class="resourceDescription">
${description} ${description}
</div> </div>
<div class="resourceCategoryTags"> <div class="resourceCategoryTags">
${categoryName}&nbsp; ${categoryName}&nbsp;
${tags.length > 0 ? " | " : ""} ${tags.length > 0 ? " | " : ""}
&nbsp;${tags}&nbsp; &nbsp;${tags}&nbsp;
${sizeReadable.length > 0 ? " | " : ""} ${sizeReadable.length > 0 ? " | " : ""}
&nbsp;${translate("websitespage.schange27")}: ${sizeReadable} &nbsp;${translate("websitespage.schange27")}: ${sizeReadable}
</div>`; </div>
`
} }
renderPublishedBy(websiteObj) { renderPublishedBy(websiteObj) {
return html`<div class="resourceRegisteredName">${websiteObj.name}</div> return html`<div class="resourceRegisteredName">${websiteObj.name}</div>
<div class="resourceStatus">${translate("websitespage.schange28")}: <span title="${websiteObj.status.description}">${websiteObj.status.title}</span></div>`; <div class="resourceStatus">${translate("websitespage.schange28")}: <span title="${websiteObj.status.description}">${websiteObj.status.title}</span></div>`
} }
renderSize(websiteObj) { renderSize(websiteObj) {
if (websiteObj.size === null) { if (websiteObj.size === null) {
return html`` return html``
} }
let sizeReadable = this.bytesToSize(websiteObj.size); let sizeReadable = this.bytesToSize(websiteObj.size)
return html`<span>${sizeReadable}</span>` return html`<span>${sizeReadable}</span>`
} }
@ -928,10 +943,10 @@ class Websites extends LitElement {
} }
bytesToSize(bytes) { bytesToSize(bytes) {
var sizes = ['bytes', 'KB', 'MB', 'GB', 'TB']; var sizes = ['bytes', 'KB', 'MB', 'GB', 'TB']
if (bytes == 0) return '0 bytes'; if (bytes == 0) return '0 bytes'
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]
} }
_textMenu(event) { _textMenu(event) {
@ -942,7 +957,7 @@ class Websites extends LitElement {
} else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") { } else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") {
text = this.shadowRoot.selection.createRange().text; text = this.shadowRoot.selection.createRange().text;
} }
return text; return text
} }
const checkSelectedTextAndShowMenu = () => { const checkSelectedTextAndShowMenu = () => {
@ -957,9 +972,9 @@ class Websites extends LitElement {
} }
getApiKey() { getApiKey() {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
let apiKey = myNode.apiKey; let apiKey = myNode.apiKey
return apiKey; return apiKey
} }
clearSelection() { clearSelection() {