- ${(!this.isReceipient && +this._chatId !== 0) ? html`
+
+ `
}
async getMoreMembers(groupId){
@@ -1458,12 +1462,10 @@ class ChatPage extends LitElement {
async updated(changedProperties) {
if (changedProperties && changedProperties.has('userLanguage')) {
const userLang = changedProperties.get('userLanguage')
-
- if(userLang){
+ if (userLang) {
await new Promise(r => setTimeout(r, 100));
this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`;
- }
-
+ }
}
if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) {
@@ -1475,7 +1477,6 @@ class ChatPage extends LitElement {
this.chatEditor.disable();
}
}
-
}
async getName (recipient) {
@@ -1529,6 +1530,7 @@ async getName (recipient) {
chatId=${this.chatId}
.messages=${this.messagesRendered}
.escapeHTML=${escape}
+ .chatEditor=${this.chatEditor}
.getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
index 2366400e..fa1734c0 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
@@ -1,178 +1,195 @@
-import { LitElement, html, css } from "lit"
-import { render } from "lit/html.js"
-import { get, translate } from "lit-translate"
-import { Epml } from "../../../epml"
-import snackbar from "./snackbar.js"
-import "@material/mwc-button"
-import "@material/mwc-dialog"
-import "@polymer/paper-spinner/paper-spinner-lite.js"
-import "@material/mwc-icon"
-import "./WrapperModal"
-
-const parentEpml = new Epml({ type: "WINDOW", source: window.parent })
+import { LitElement, html, css } from "lit";
+import { render } from "lit/html.js";
+import { get, translate } from "lit-translate";
+import { Epml } from "../../../epml";
+import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress";
+import snackbar from "./snackbar.js";
+import "@material/mwc-button";
+import "@material/mwc-dialog";
+import "@polymer/paper-spinner/paper-spinner-lite.js";
+import '@polymer/paper-progress/paper-progress.js';
+import "@material/mwc-icon";
+import '@vaadin/button';
+import "./WrapperModal";
+import "./TipUser"
+import "./UserInfo/UserInfo";
class ChatRightPanel extends LitElement {
static get properties() {
return {
- isLoading: { type: Boolean },
- isOpenLeaveModal: { type: Boolean },
+ openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object },
error: { type: Boolean },
- message: { type: String },
chatHeads: { type: Array },
groupAdmin: { attribute: false },
groupMembers: { attribute: false },
selectedHead: { type: Object },
toggle: { attribute: false },
- getMoreMembers:{ attribute: false }
+ getMoreMembers:{ attribute: false },
+ setOpenPrivateMessage: { attribute: false },
+ openTipUser: { type: Boolean },
+ userName: { type: String },
+ chatEditor: { type: Object },
+ walletBalance: { type: Number },
+ sendMoneyLoading: { type: Boolean },
+ btnDisable: { type: Boolean },
+ errorMessage: { type: String },
+ successMessage: { type: String }
}
}
constructor() {
super()
- this.isLoading = false
- this.isOpenLeaveModal = false
+ this.openUserInfo = false
this.leaveGroupObj = {}
this.leaveFee = 0.001
this.error = false
- this.message = ""
this.chatHeads = []
this.groupAdmin = []
this.groupMembers = []
this.observerHandler = this.observerHandler.bind(this)
this.viewElement = ''
this.downObserverElement = ''
+ this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+ this.openTipUser = false
+ this.userName = ""
+ this.sendMoneyLoading = false
+ this.btnDisable = false
+ this.errorMessage = ""
+ this.successMessage = ""
+ this.setOpenTipUser = this.setOpenTipUser.bind(this);
+ this.setOpenUserInfo = this.setOpenUserInfo.bind(this);
}
-static get styles() {
-return css`
- .top-bar-icon {
- cursor: pointer;
- height: 18px;
- width: 18px;
- transition: 0.2s all;
- }
+ static get styles() {
+ return css`
+ .top-bar-icon {
+ cursor: pointer;
+ height: 18px;
+ width: 18px;
+ transition: 0.2s all;
+ }
- .top-bar-icon:hover {
- color: var(--black);
- }
+ .top-bar-icon:hover {
+ color: var(--black);
+ }
- .modal-button {
- font-family: Roboto, sans-serif;
- font-size: 16px;
- color: var(--mdc-theme-primary);
- background-color: transparent;
- padding: 8px 10px;
- border-radius: 5px;
- border: none;
- transition: all 0.3s ease-in-out;
- }
+ .modal-button {
+ font-family: Roboto, sans-serif;
+ font-size: 16px;
+ color: var(--mdc-theme-primary);
+ background-color: transparent;
+ padding: 8px 10px;
+ border-radius: 5px;
+ border: none;
+ transition: all 0.3s ease-in-out;
+ }
- .close-row {
- width: 100%;
- display: flex;
- justify-content: flex-end;
- height: 50px;
- flex:0
+ .close-row {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ height: 50px;
+ flex:0
- }
+ }
- .container-body {
- width: 100%;
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- overflow:auto;
- margin-top: 5px;
- padding: 0px 6px;
- box-sizing: border-box;
- }
+ .container-body {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow:auto;
+ margin-top: 5px;
+ padding: 0px 6px;
+ box-sizing: border-box;
+ }
- .container-body::-webkit-scrollbar-track {
- background-color: whitesmoke;
- border-radius: 7px;
- }
-
- .container-body::-webkit-scrollbar {
- width: 6px;
- border-radius: 7px;
- background-color: whitesmoke;
- }
-
- .container-body::-webkit-scrollbar-thumb {
- background-color: rgb(180, 176, 176);
- border-radius: 7px;
- transition: all 0.3s ease-in-out;
- }
+ .container-body::-webkit-scrollbar-track {
+ background-color: whitesmoke;
+ border-radius: 7px;
+ }
+
+ .container-body::-webkit-scrollbar {
+ width: 6px;
+ border-radius: 7px;
+ background-color: whitesmoke;
+ }
+
+ .container-body::-webkit-scrollbar-thumb {
+ background-color: rgb(180, 176, 176);
+ border-radius: 7px;
+ transition: all 0.3s ease-in-out;
+ }
- .container-body::-webkit-scrollbar-thumb:hover {
- background-color: rgb(148, 146, 146);
- cursor: pointer;
- }
+ .container-body::-webkit-scrollbar-thumb:hover {
+ background-color: rgb(148, 146, 146);
+ cursor: pointer;
+ }
- p {
- color: var(--black);
- margin: 0px;
- padding: 0px;
- word-break: break-all;
- }
+ p {
+ color: var(--black);
+ margin: 0px;
+ padding: 0px;
+ word-break: break-all;
+ }
- .container {
- display: flex;
- width: 100%;
- flex-direction: column;
- height: 100%;
- }
+ .container {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ height: 100%;
+ }
- .chat-right-panel-label {
- font-family: Montserrat, sans-serif;
- color: var(--group-header);
- padding: 5px;
- font-size: 13px;
- user-select: none;
- }
+ .chat-right-panel-label {
+ font-family: Montserrat, sans-serif;
+ color: var(--group-header);
+ padding: 5px;
+ font-size: 13px;
+ user-select: none;
+ }
- .group-info {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 10px;
- }
+ .group-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 10px;
+ }
- .group-name {
- font-family: Raleway, sans-serif;
- font-size: 20px;
- color: var(--chat-bubble-msg-color);
- text-align: center;
- user-select: none;
- }
+ .group-name {
+ font-family: Raleway, sans-serif;
+ font-size: 20px;
+ color: var(--chat-bubble-msg-color);
+ text-align: center;
+ user-select: none;
+ }
- .group-description {
- font-family: Roboto, sans-serif;
- color: var(--chat-bubble-msg-color);
- letter-spacing: 0.3px;
- font-weight: 300;
- font-size: 14px;
- margin-top: 15px;
- word-break: break-word;
- user-select: none;
- }
+ .group-description {
+ font-family: Roboto, sans-serif;
+ color: var(--chat-bubble-msg-color);
+ letter-spacing: 0.3px;
+ font-weight: 300;
+ font-size: 14px;
+ margin-top: 15px;
+ word-break: break-word;
+ user-select: none;
+ }
- .group-subheader {
- font-family: Montserrat, sans-serif;
- font-size: 14px;
- color: var(--chat-bubble-msg-color);
- }
+ .group-subheader {
+ font-family: Montserrat, sans-serif;
+ font-size: 14px;
+ color: var(--chat-bubble-msg-color);
+ }
- .group-data {
- font-family: Roboto, sans-serif;
- letter-spacing: 0.3px;
- font-weight: 300;
- font-size: 14px;
- color: var(--chat-bubble-msg-color);
+ .group-data {
+ font-family: Roboto, sans-serif;
+ letter-spacing: 0.3px;
+ font-weight: 300;
+ font-size: 14px;
+ color: var(--chat-bubble-msg-color);
+ }
+ `
}
-`
-}
firstUpdated() {
this.viewElement = this.shadowRoot.getElementById('viewElement');
@@ -180,235 +197,14 @@ return css`
this.elementObserver();
}
- timeIsoString(timestamp) {
- let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp
- let time = new Date(myTimestamp)
- return time.toISOString()
- }
-
- resetDefaultSettings() {
- this.error = false
- this.message = ""
- this.isLoading = false
- }
-
- renderErr9Text() {
- return html`${translate("grouppage.gchange49")}`
- }
-
- async confirmRelationship(reference) {
- let interval = null
- let stop = false
- const getAnswer = async () => {
-
-
- if (!stop) {
- stop = true
- try {
- let myRef = await parentEpml.request("apiCall", {
- type: "api",
- url: `/transactions/reference/${reference}`,
- })
- if (myRef && myRef.type) {
- clearInterval(interval)
- this.isLoading = false
- this.isOpenLeaveModal = false
- }
- } catch (error) {}
- stop = false
- }
- }
- interval = setInterval(getAnswer, 5000)
- }
-
- async unitFee(txType) {
- 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}/transactions/unitfee?txType=${txType}`;
- let fee = null;
-
- try {
- const res = await fetch(url);
- const data = await res.json();
- fee = (Number(data) / 1e8).toFixed(3);
- } catch (error) {
- fee = null;
- }
-
- return fee;
- }
-
- async getLastRef() {
- let myRef = await parentEpml.request("apiCall", {
- type: "api",
- url: `/addresses/lastreference/${this.selectedAddress.address}`,
- })
- return myRef;
- }
-
- getTxnRequestResponse(txnResponse, reference) {
- if (txnResponse === true) {
- this.message = this.renderErr9Text()
- this.error = false
- this.confirmRelationship(reference)
- } else {
- this.error = true
- this.message = ""
- throw new Error(txnResponse)
- }
- }
-
- async convertBytesForSigning(transactionBytesBase58) {
- let convertedBytes = await parentEpml.request("apiCall", {
- type: "api",
- method: "POST",
- url: `/transactions/convert`,
- body: `${transactionBytesBase58}`,
- })
- return convertedBytes
- }
-
- async signTx(body){
- return await parentEpml.request("apiCall", {
- type: "api",
- method: "POST",
- url: `/transactions/sign`,
- body: body,
- headers: {
- 'Content-Type': 'application/json'
- }
- })
- }
-
- async process(body){
- return await parentEpml.request("apiCall", {
- type: "api",
- method: "POST",
- url: `/transactions/process`,
- body: body,
- })
- }
- async _addAdmin(groupId) {
- this.resetDefaultSettings()
-
- const leaveFeeInput = await this.unitFee('ADD_GROUP_ADMIN')
- if(!leaveFeeInput){
- throw Error()
- }
- this.isLoading = true
-
- // Get Last Ref
- const getLastRef = async () => {
- let myRef = await parentEpml.request('apiCall', {
- type: 'api',
- url: `/addresses/lastreference/${this.selectedAddress.address}`
- })
- return myRef
- };
-
- const validateReceiver = async () => {
- let lastRef = await getLastRef();
- let myTransaction = await makeTransactionRequest(lastRef)
- getTxnRequestResponse(myTransaction)
-
- }
-
- // Make Transaction Request
- const makeTransactionRequest = async (lastRef) => {
- let groupdialog3 = get("transactions.groupdialog3")
- let groupdialog4 = get("transactions.groupdialog4")
- let myTxnrequest = await parentEpml.request('transaction', {
- type: 24,
- nonce: this.selectedAddress.nonce,
- params: {
- _groupId: groupId,
- fee: leaveFeeInput,
- member: this.selectedHead.address,
- lastReference: lastRef
- }
- })
- return myTxnrequest
- }
-
- const getTxnRequestResponse = (txnResponse) => {
-
- if (txnResponse.success === false && txnResponse.message) {
- this.error = true
- this.message = txnResponse.message
- throw new Error(txnResponse)
- } else if (txnResponse.success === true && !txnResponse.data.error) {
- this.message = this.renderErr9Text()
- this.error = false
- this.confirmRelationship()
- } else {
- this.error = true
- this.message = txnResponse.data.message
- throw new Error(txnResponse)
+ async updated(changedProperties) {
+ if (changedProperties && changedProperties.has('selectedHead')) {
+ if (this.selectedHead !== {}) {
+ const userName = await getUserNameFromAddress(this.selectedHead.address);
+ this.userName = userName;
}
}
- validateReceiver()
- }
-
- async _removeAdmin(groupId) {
- this.resetDefaultSettings()
-
- const leaveFeeInput = await this.unitFee('REMOVE_GROUP_ADMIN')
- if(!leaveFeeInput){
- throw Error()
- }
- this.isLoading = true
-
- // Get Last Ref
- const getLastRef = async () => {
- let myRef = await parentEpml.request('apiCall', {
- type: 'api',
- url: `/addresses/lastreference/${this.selectedAddress.address}`
- })
- return myRef
- };
-
- const validateReceiver = async () => {
- let lastRef = await getLastRef();
- let myTransaction = await makeTransactionRequest(lastRef)
- getTxnRequestResponse(myTransaction)
-
- }
-
- // Make Transaction Request
- const makeTransactionRequest = async (lastRef) => {
- let groupdialog3 = get("transactions.groupdialog3")
- let groupdialog4 = get("transactions.groupdialog4")
- let myTxnrequest = await parentEpml.request('transaction', {
- type: 25,
- nonce: this.selectedAddress.nonce,
- params: {
- _groupId: groupId,
- fee: leaveFeeInput,
- member: this.selectedHead.address,
- lastReference: lastRef
- }
- })
- return myTxnrequest
- }
-
- const getTxnRequestResponse = (txnResponse) => {
-
- if (txnResponse.success === false && txnResponse.message) {
- this.error = true
- this.message = txnResponse.message
- throw new Error(txnResponse)
- } else if (txnResponse.success === true && !txnResponse.data.error) {
- this.message = this.renderErr9Text()
- this.error = false
- this.confirmRelationship()
- } else {
- this.error = true
- this.message = txnResponse.data.message
- throw new Error(txnResponse)
- }
- }
- validateReceiver()
- }
+ }
elementObserver() {
const options = {
@@ -423,120 +219,120 @@ return css`
// call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve);
- }
- observerHandler(entries) {
- if (!entries[0].isIntersecting) {
+ }
+
+ observerHandler(entries) {
+ if (!entries[0].isIntersecting) {
+ return
+ } else {
+ if(this.groupMembers.length < 20){
return
- } else {
- if(this.groupMembers.length < 20){
- return
- }
- console.log('this.leaveGroupObjp', this.leaveGroupObj)
- this.getMoreMembers(this.leaveGroupObj.groupId)
}
+ console.log('this.leaveGroupObjp', this.leaveGroupObj)
+ this.getMoreMembers(this.leaveGroupObj.groupId)
}
+ }
+
+ setOpenTipUser(props) {
+ this.openTipUser = props
+ }
+
+ setOpenUserInfo(props) {
+ this.openUserInfo = props
+ }
+
render() {
- console.log('this.groupMembers', this.groupMembers);
- console.log(5, "Chat Right Panel Here");
const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html`
+ ${(!this.isReceipient && +this._chatId !== 0) ?
+ html`
- `
+
-
-
-
- ${this.groupInfo && this.groupInfo.groupName}
-
-
- ` : html``}
+ ` : null}
+
+ ${this.groupInfo && this.groupInfo.groupName}
+
+
${this.isLoadingMessages ?
@@ -1176,12 +1172,20 @@ class ChatPage extends LitElement {
- this.getMoreMembers(val)} .toggle=${(val)=> this._toggle(val)} .selectedAddress=${this.selectedAddress} .groupMembers=${this.groupMembers} .groupAdmin=${this.groupAdmin} .leaveGroupObj=${this.groupInfo}>
-
-
-
+ this.getMoreMembers(val)}
+ .toggle=${(val)=> this._toggle(val)}
+ .selectedAddress=${this.selectedAddress}
+ .groupMembers=${this.groupMembers}
+ .groupAdmin=${this.groupAdmin}
+ .leaveGroupObj=${this.groupInfo}
+ .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+ .chatEditor=${this.chatEditor}>
+
+
+
- {
+ this.openUserInfo = false;
+ this.userName = "";
+ this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = "";
+ }}
+ style=${
+ this.openUserInfo ? "display: block" : "display: none"
+ }>
+ this.setOpenUserInfo(val)}
+ .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+ .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+ .chatEditor=${this.chatEditor}
+ .userName=${this.userName}
+ .selectedHead=${this.selectedHead}
+ >
+
+ {
+ this.openTipUser = false;
+ this.chatEditor.enable();
+ }}
+ style=${this.openTipUser ? "display: block" : "display: none"}>
+ this.setOpenTipUser(val)}
+ >
+
+
+
+
- this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon">
-
-
-
+ {
+ if (val.address === this.myAddress) return;
+ console.log({ val });
+ this.selectedHead = val;
+ this.openUserInfo = true;
+ }}
+ chatInfo=${JSON.stringify(item)}
+ > `
+ })}
+ {
+ if (val.address === this.myAddress) return;
+ console.log({ val });
+ this.selectedHead = val;
+ this.openUserInfo = true;
+ }}
+ chatInfo=${JSON.stringify(item)}
+ > `
+ })}
+ {
+ if (val.address === this.myAddress) return;
+ console.log({ val });
+ this.selectedHead = val;
+ this.openUserInfo = true;
+ }}
+ chatInfo=${JSON.stringify(item)}
+ > `
+ })}
+
+
+
+ ${this.leaveGroupObj && this.leaveGroupObj.groupName}
-
-
- {}}
- chatInfo=${JSON.stringify(item)}
- > `
- })}
- {}}
- chatInfo=${JSON.stringify(item)}
- > `
- })}
- {
- console.log({ val })
- this.selectedHead = val
- this.isOpenLeaveModal = true
- }}
- chatInfo=${JSON.stringify(item)}
- > `
- })}
-
-
+ ${this.leaveGroupObj && this.leaveGroupObj.description}
-Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}
- -Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}
+
+ this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon">
- -
GROUP OWNER
- ${owner.map((item) => { - return html`ADMINS
- ${this.groupAdmin.map((item) => { - return html`MEMBERS
- ${this.groupMembers.map((item) => { - return html`
+
+ ${this.leaveGroupObj && this.leaveGroupObj.groupName}
+
+ {
- if (this.isLoading) return
- this.isOpenLeaveModal = false
- }}
- style=${
- this.isOpenLeaveModal ? "display: block" : "display: none"
- }>
-
-
+ ${this.leaveGroupObj && this.leaveGroupObj.description}
+Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}
-
-
-
-
-
-
- ${translate("grouppage.gchange35")}
--
-
-
- ${translate("grouppage.gchange36")}
-
-
-
-
- ${this.message}
-
-
-
-
-
- Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}
+
GROUP OWNER
+ ${owner.map((item) => { + return html`ADMINS
+ ${this.groupAdmin.map((item) => { + return html`MEMBERS
+ ${this.groupMembers.map((item) => { + return html`
+ 
+