forked from Qortal/qortal-ui
Add ID And Avatar To LIst
This commit is contained in:
AlphaX-Projects
GitHub
parent
0d6c78bf68
commit
31a20be1e8
@ -15,13 +15,13 @@ 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 },
|
||||
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,19 +101,24 @@ class Websites extends LitElement {
|
||||
line-height:20px;
|
||||
color:rgb(100,100,100);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 25%;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.service = "WEBSITE"
|
||||
this.identifier = null
|
||||
this.identifier = null
|
||||
this.selectedAddress = {}
|
||||
this.resources = []
|
||||
this.followedNames = []
|
||||
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-column path="name"></vaadin-grid-column>-->
|
||||
<vaadin-grid id="grid" style="height:auto;" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" .items="${this.resources}" height-by-rows>
|
||||
<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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user