From 66969881005daeb289ac5cad32c2b98f443a8ec2 Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Thu, 7 Apr 2022 18:59:15 +0200 Subject: [PATCH] Add vadin grid with blocked users and style fixes --- .../core/messaging/q-chat/q-chat.src.js | 222 +++++++++++++++--- 1 file changed, 191 insertions(+), 31 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js index d683a81f..e2cf31da 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js @@ -5,10 +5,13 @@ import { Epml } from '../../../../epml.js' import '../../components/ChatWelcomePage.js' import '../../components/ChatHead.js' import '../../components/ChatPage.js' +import snackbar from '../../components/snackbar.js' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@material/mwc-icon' import '@material/mwc-button' import '@material/mwc-dialog' +import '@material/mwc-icon' +import '@material/mwc-snackbar' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -24,7 +27,9 @@ class Chat extends LitElement { btnDisable: { type: Boolean }, isLoading: { type: Boolean }, balance: { type: Number }, - theme: { type: String, reflect: true } + theme: { type: String, reflect: true }, + blockedUsers: { type: Array }, + blockedUserList: { type: Array } } } @@ -32,6 +37,7 @@ class Chat extends LitElement { return css` * { --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); --paper-input-container-focus-color: var(--mdc-theme-primary); --mdc-theme-surface: var(--white); --mdc-dialog-content-ink-color: var(--black); @@ -41,9 +47,12 @@ class Chat extends LitElement { --lumo-primary-color: hsl(199, 100%, 48%); --lumo-base-color: var(--white); --lumo-body-text-color: var(--black); + --_lumo-grid-border-color: var(--border); + --_lumo-grid-secondary-border-color: var(--border2); + --mdc-dialog-min-width: 750px; } - paper-spinner-lite{ + paper-spinner-lite { height: 24px; width: 24px; --paper-spinner-color: var(--mdc-theme-primary); @@ -75,18 +84,39 @@ class Chat extends LitElement { border-right: 3px #ddd solid; } + .people-list .blockedusers { + position: absolute; + bottom: 0; + width: 20vw; + height: 60px; + background: var(--white); + border-top: 1px solid var(--border); + border-right: 3px #ddd solid; + } + .people-list .search { - padding: 20px; + padding-top: 20px; + padding-left: 20px; + padding-right: 20px; + } + + .center { + margin: 0; + position: absolute; + padding-top: 12px; + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); } .people-list .create-chat { - border-radius: 3px; + border-radius: 5px; border: none; display: inline-block; padding: 14px; - color: var(--white); + color: #fff; background: var(--tradehead); - width: 90%; + width: 100%; font-size: 15px; text-align: center; cursor: pointer; @@ -287,31 +317,38 @@ class Chat extends LitElement { this.showNewMesssageBar = this.showNewMesssageBar.bind(this) this.hideNewMesssageBar = this.hideNewMesssageBar.bind(this) this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' + this.blockedUsers = [] + this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") } render() { return html`
-
-
this.shadowRoot.querySelector('#startChatDialog').show()}>New Private Message
+
+
this.shadowRoot.querySelector('#startChatDialog').show()}>New Private Message
+
+
    + ${this.isEmptyArray(this.chatHeads) ? "Loading..." : this.renderChatHead(this.chatHeads)} +
+
+
+ this.shadowRoot.querySelector('#blockedUserDialog').show()}> +
+
- -
-
-
this.scrollToBottom()}> - New Message - (Click to scroll down) keyboard_arrow_down +
+
this.scrollToBottom()}> + New Message + (Click to scroll down) keyboard_arrow_down +
+
+ ${window.parent.location.pathname !== "/app/q-chat" ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`} +
-
- ${window.parent.location.pathname !== "/app/q-chat" ? html`${this.renderChatPage(this.chatId)}` : html`${this.renderChatWelcomePage()}`} -
-
- +

New Private Message

@@ -319,40 +356,83 @@ class Chat extends LitElement {

Type the name or address of who you want to chat with to send a private message!

- +

- + - ${this.isLoading === false ? "Send" : html``} + > + ${this.isLoading === false ? "Send" : html``} - Close - + class="red" + > + Close + -
+ + + +
+

Blocked Users List

+
+
+
+ + + + { + render(html`${this.renderUnblockButton(data.item)}`, root); + }}> + + + ${this.isEmptyArray(this.blockedUserList) ? html` + Account not have any blocked users. + `: ''} + + Close + + +
` } firstUpdated() { + this.getChatBlockedList() + + setInterval(() => { + this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") + }, 1000) + this.changeTheme() setInterval(() => { - this.changeTheme(); + this.changeTheme() }, 100) + const getBlockedUsers = async () => { + let blockedUsers = await parentEpml.request('apiCall', { + url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` + }) + + this.blockedUsers = blockedUsers + setTimeout(getBlockedUsers, 60000) + } + const stopKeyEventPropagation = (e) => { e.stopPropagation(); return false; @@ -425,6 +505,7 @@ class Chat extends LitElement { }) parentEpml.subscribe('config', c => { if (!configLoaded) { + setTimeout(getBlockedUsers, 1) configLoaded = true } this.config = JSON.parse(c) @@ -449,6 +530,79 @@ class Chat extends LitElement { parentEpml.imReady() } + getChatBlockedList() { + 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 blockedAddressesUrl = `${nodeUrl}/lists/blockedAddresses?apiKey=${this.getApiKey()}` + + localStorage.removeItem("ChatBlockedAddresses") + + var obj = []; + + fetch(blockedAddressesUrl).then(response => { + return response.json() + }).then(data => { + return data.map(item => { + const noName = { + name: 'No registered name', + owner: item + } + fetch(`${nodeUrl}/names/address/${item}?limit=0&reverse=true`).then(res => { + return res.json() + }).then(jsonRes => { + if(jsonRes.length) { + jsonRes.map (item => { + obj.push(item) + }) + } else { + obj.push(noName) + } + localStorage.setItem("ChatBlockedAddresses", JSON.stringify(obj)) + }) + }) + }) + } + + async unblockUser(websiteObj) { + let owner = websiteObj.owner + + let items = [ + owner + ] + + let ownersJsonString = JSON.stringify({ "items": items }) + + let ret = await parentEpml.request('apiCall', { + url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`, + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + }, + body: `${ownersJsonString}` + }) + + if (ret === true) { + this.blockedUsers = this.blockedUsers.filter(item => item != owner) + this.getChatBlockedList() + this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]") + snackbar.add({ + labelText: `Successfully unblocked this user.`, + dismiss: true + }) + } + else { + snackbar.add({ + labelText: `Error occurred when trying to unblock this user. Please try again.`, + dismiss: true + }) + } + return ret + } + + renderUnblockButton(websiteObj) { + return html`` + } + changeTheme() { const checkTheme = localStorage.getItem('qortalTheme') if (checkTheme === 'dark') { @@ -710,6 +864,12 @@ class Chat extends LitElement { return arr.length === 0 } + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; + let apiKey = myNode.apiKey; + return apiKey; + } + scrollToBottom() { const viewElement = this.shadowRoot.querySelector('chat-page').shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');