diff --git a/core/src/components/show-plugin.js b/core/src/components/show-plugin.js index abc3b345..1fb9fde6 100644 --- a/core/src/components/show-plugin.js +++ b/core/src/components/show-plugin.js @@ -1,4 +1,5 @@ import { LitElement, html, css } from 'lit' +import { render } from 'lit/html.js' import { connect } from 'pwa-helpers' import { store } from '../store.js' import { Epml } from '../epml.js' @@ -17,6 +18,11 @@ import '@material/mwc-button' import '@material/mwc-dialog' import '@material/mwc-icon' import '@material/mwc-textfield' +import '@polymer/paper-icon-button/paper-icon-button.js' +import '@polymer/iron-icons/iron-icons.js' +import '@polymer/paper-dialog/paper-dialog.js' +import '@vaadin/grid' +import '@vaadin/text-field' const chatLastSeen = localForage.createInstance({ name: "chat-last-seen", @@ -727,7 +733,11 @@ class NavBar extends connect(store)(LitElement) { textFieldDisabled: { type: Boolean }, initialName: { type: String }, newId: { type: String }, - removeTitle: { type: String } + removeTitle: { type: String }, + myFollowedNames: { type: Array }, + myFollowedNamesList: { type: Array }, + searchNameContentString: { type: String }, + searchNameResources: { type: Array } } } @@ -891,9 +901,9 @@ class NavBar extends connect(store)(LitElement) { } .resetIcon { - position: absolute; + position: fixed; right: 16px; - top: 16px; + top: 116px; color: #666; --mdc-icon-size: 32px; cursor: pointer; @@ -903,7 +913,76 @@ class NavBar extends connect(store)(LitElement) { color: #03a9f4; font-weight: bold; } + + .searchIcon { + position: fixed; + left: 16px; + top: 116px; + color: #666; + --mdc-icon-size: 32px; + cursor: pointer; + } + + .searchIcon:hover { + color: #03a9f4; + font-weight: bold; + } + + paper-dialog.searchSettings { + width: 100%; + max-width: 550px; + height: auto; + max-height: 600px; + background-color: var(--white); + color: var(--black); + line-height: 1.6; + overflow: hidden; + border: 1px solid var(--black); + border-radius: 10px; + padding: 15px; + } + + paper-dialog button { + padding: 5px 10px; + font-size: 18px; + background-color: #03a9f4; + color: white; + border: 1px solid transparent; + border-radius: 5px; + cursor: pointer; + } + + paper-dialog button:hover { + opacity: 0.8; + cursor: pointer; + } + + .search { + display: inline; + width: 50%; + align-items: center; + } + + .divCard { + height: auto; + max-height: 500px; + border: 1px solid var(--border); + padding: 1em; + margin-bottom: 1em; + } + + img { + border-radius: 25%; + max-width: 32px; + height: 100%; + max-height: 32px; + } + + vaadin-text-field[focused]::part(input-field) { + border-color: #03a9f4; + } ` + constructor() { super() this.menuList = [] @@ -922,12 +1001,17 @@ class NavBar extends connect(store)(LitElement) { this.initialName = '' this.newId = '' this.removeTitle = '' + this.myFollowedNames = [] + this.myFollowedNamesList = [] + this.searchContentString = '' + this.searchNameResources = [] } render() { return html`
- reset_tv + reset_tv + person_search
@@ -1019,6 +1103,115 @@ class NavBar extends connect(store)(LitElement) { ${translate("general.no")} + +
+
+ + + + +
+

+
+ + { + render(html`${this.renderNameAvatar(data.item)}`, root) + }} + > + + { + render(html`${data.item.name}`, root) + }} + > + + { + render(html`${this.renderMyFollowUnfollowButton(data.item)}`, root) + }} + > + + + ${this.isEmptyArray(this.searchNameResources) ? html` + ${translate("login.entername")} + `: ''} +
+
+ +
+ + +
+

${translate("tabmenu.tm31")}

+
+
+
+ + { + render(html`${this.renderNameAvatar(data.item)}`, root) + }} + > + + { + render(html`${data.item.name}`, root) + }} + > + + { + render(html`${this.renderMyFollowUnfollowButton(data.item)}`, root) + }} + > + + + ${this.isEmptyArray(this.myFollowedNamesList) ? html` + ${translate("tabmenu.tm32")} + `: ''} +
+
+ + +
+ ` } @@ -1052,6 +1245,165 @@ class NavBar extends connect(store)(LitElement) { } else { this.myMenuList = this.newMenuList } + + await this.getMyFollowedNames() + await this.getMyFollowedNamesList() + } + + openNameSearch() { + this.searchNameResources = [] + this.shadowRoot.getElementById('searchNameContent').value = '' + this.shadowRoot.getElementById('myFollowedNamesDialog').close() + this.shadowRoot.getElementById('searchNameDialog').open() + } + + closeNameSearch() { + this.shadowRoot.getElementById('searchNameDialog').close() + } + + openMyFollowedNames() { + this.shadowRoot.getElementById('searchNameDialog').close() + this.shadowRoot.getElementById('myFollowedNamesDialog').open() + this.getMyFollowedNamesList() + } + + closeMyFollowedNames() { + this.shadowRoot.getElementById('myFollowedNamesDialog').close() + } + + async getMyFollowedNames() { + let myFollowedNames = await parentEpml.request('apiCall', { + url: `/lists/followedNames?apiKey=${this.getApiKey()}` + }) + + this.myFollowedNames = myFollowedNames + } + + searchNameKeyListener(e) { + if (e.key === 'Enter') { + this.searchNameResult() + } + } + + async getMyFollowedNamesList() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const myNodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const followedNamesUrl = `${myNodeUrl}/lists/followedNames?apiKey=${this.getApiKey()}` + + var myFollowedNamesNew = [] + + this.myFollowedNamesList = [] + + await fetch(followedNamesUrl).then(response => { + return response.json() + }).then(data => { + return data.map(item => { + const addListName = { + name: item + } + myFollowedNamesNew.push(addListName) + }) + }) + this.myFollowedNamesList = myFollowedNamesNew + if(this.shadowRoot.getElementById('myFollowedNamesDialog').opened) { + this.shadowRoot.getElementById('myFollowedNamesDialog').notifyResize() + } + } + + async searchNameResult() { + let searchMyName = this.shadowRoot.getElementById('searchNameContent').value + if (searchMyName.length === 0) { + let err1string = get("appspage.schange34") + parentEpml.request('showSnackBar', `${err1string}`) + } else { + let searchNameResources = await parentEpml.request('apiCall', { + url: `/names/search?query=${searchMyName}&prefix=true&limit=0&reverse=true` + }) + if (this.isEmptyArray(searchNameResources)) { + let err2string = get("appspage.schange17") + parentEpml.request('showSnackBar', `${err2string}`) + } else { + this.searchNameResources = searchNameResources + if(this.shadowRoot.getElementById('searchNameDialog').opened) { + this.shadowRoot.getElementById('searchNameDialog').notifyResize() + } + } + } + } + + renderNameAvatar(nameObj) { + let myName = nameObj.name + const myNameNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const myNodeUrl = myNameNode.protocol + '://' + myNameNode.domain + ':' + myNameNode.port + const nameUrl = `${myNodeUrl}/arbitrary/THUMBNAIL/${myName}/qortal_avatar?async=true` + return html`` + } + + renderMyFollowUnfollowButton(nameObj) { + let name = nameObj.name + + if (this.myFollowedNames == null || !Array.isArray(this.myFollowedNames)) { + return html`` + } + + if (this.myFollowedNames.indexOf(name) === -1) { + return html` this.myFollowName(nameObj)}>add_to_queue ${translate("appspage.schange29")}` + } else { + return html` this.myUnfollowName(nameObj)}>remove_from_queue ${translate("appspage.schange30")}` + } + } + + async myFollowName(nameObj) { + let name = nameObj.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.myFollowedNames = this.myFollowedNames.filter(item => item != name) + this.myFollowedNames.push(name) + } else { + let err3string = get("appspage.schange22") + parentEpml.request('showSnackBar', `${err3string}`) + } + this.getMyFollowedNamesList() + return ret + } + + async myUnfollowName(nameObj) { + let name = nameObj.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.myFollowedNames = this.myFollowedNames.filter(item => item != name) + } else { + let err4string = get("appspage.schange23") + parentEpml.request('showSnackBar', `${err4string}`) + } + this.getMyFollowedNamesList() + return ret } async checkMyMenuPlugins() { @@ -1707,6 +2059,11 @@ class NavBar extends connect(store)(LitElement) { return apiKey } + isEmptyArray(arr) { + if (!arr) { return true } + return arr.length === 0 + } + stateChanged(state) { this.menuList = state.app.registeredUrls this.addressInfo = state.app.accountInfo.addressInfo