Started UI Fixes

This commit is contained in:
Justin Ferrari 2022-10-29 10:51:02 -05:00
parent e708ffef82
commit d6bffbeaa9
4 changed files with 125 additions and 118 deletions

View File

@ -92,11 +92,11 @@ class ChatModals extends LitElement {
// Send Private Message // Send Private Message
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value const recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox') const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value const messageText = messageBox.value;
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false
@ -105,22 +105,21 @@ class ChatModals extends LitElement {
} else { } else {
this.sendMessage() this.sendMessage()
} }
} };
async sendMessage() { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false
@ -128,7 +127,7 @@ class ChatModals extends LitElement {
myRes = myNameRes myRes = myNameRes
} }
return myRes return myRes;
} }
const myNameRes = await validateName(_recipient) const myNameRes = await validateName(_recipient)
@ -139,7 +138,6 @@ class ChatModals extends LitElement {
recipient = myNameRes.owner recipient = myNameRes.owner
} }
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
@ -367,7 +365,11 @@ class ChatModals extends LitElement {
<p style='margin-bottom:0;'> <p style='margin-bottom:0;'>
<textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea> <textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea>
</p> </p>
<mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${this._sendMessage}>${translate('welcomepage.wcchange6')} <mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${() => {
console.log("here500");
this._sendMessage();
}
}>${translate('welcomepage.wcchange6')}
</mwc-button> </mwc-button>
<mwc-button <mwc-button
?disabled='${this.isLoading}' ?disabled='${this.isLoading}'

View File

@ -213,7 +213,10 @@ class ChatPage extends LitElement {
render() { render() {
return html` return html`
<div>
<div>
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
</div>
<div class="chat-text-area"> <div class="chat-text-area">
<div class="typing-area"> <div class="typing-area">
${this.repliedToMessageObj && html` ${this.repliedToMessageObj && html`
@ -270,11 +273,11 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
</div> </div>
</div>
` `
} }
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -385,6 +388,7 @@ class ChatPage extends LitElement {
parentEpml.imReady(); parentEpml.imReady();
} }
async updated(changedProperties) { async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) { if (changedProperties.has('messagesRendered')) {
const chatReference1 = this.isReceipient ? 'direct' : 'group'; const chatReference1 = this.isReceipient ? 'direct' : 'group';

View File

@ -230,7 +230,11 @@ class ChatWelcomePage extends LitElement {
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"
@ -319,86 +323,80 @@ class ChatWelcomePage extends LitElement {
} }
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value;
const recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false;
} else if (messageText.length === 0) { } else if (messageText.length === 0) {
this.isLoading = false this.isLoading = false;
} else { } else {
this.sendMessage() this.sendMessage();
}
} }
};
async sendMessage(e) { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false;
} else { } else {
myRes = myNameRes myRes = myNameRes;
} };
return myRes;
};
return myRes const myNameRes = await validateName(_recipient);
}
const myNameRes = await validateName(_recipient)
if (!myNameRes) { if (!myNameRes) {
recipient = _recipient;
recipient = _recipient
} else { } else {
recipient = myNameRes.owner;
recipient = myNameRes.owner };
}
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
let sendTimestamp = Date.now() let sendTimestamp = Date.now();
let reference = window.parent.Base58.encode(_reference) let reference = window.parent.Base58.encode(_reference);
const getAddressPublicKey = async () => { const getAddressPublicKey = async () => {
let isEncrypted let isEncrypted;
let _publicKey let _publicKey;
let addressPublicKey = await parentEpml.request('apiCall', { let addressPublicKey = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/addresses/publickey/${recipient}` url: `/addresses/publickey/${recipient}`
}) })
if (addressPublicKey.error === 102) { if (addressPublicKey.error === 102) {
_publicKey = false _publicKey = false;
// Do something here... // Do something here...
let err1string = get("welcomepage.wcchange7") let err1string = get("welcomepage.wcchange7");
parentEpml.request('showSnackBar', `${err1string}`) parentEpml.request('showSnackBar', `${err1string}`);
this.isLoading = false this.isLoading = false;
} else if (addressPublicKey !== false) { } else if (addressPublicKey !== false) {
isEncrypted = 1 isEncrypted = 1;
_publicKey = addressPublicKey _publicKey = addressPublicKey;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} else { } else {
isEncrypted = 0 isEncrypted = 0;
_publicKey = this.selectedAddress.address _publicKey = this.selectedAddress.address;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} };
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
@ -407,8 +405,8 @@ class ChatWelcomePage extends LitElement {
images: [''], images: [''],
repliedTo: '', repliedTo: '',
version: 1 version: 1
} };
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject);
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -424,7 +422,6 @@ class ChatWelcomePage extends LitElement {
isText: 1 isText: 1
} }
}) })
_computePow(chatResponse) _computePow(chatResponse)
} }

View File

@ -232,7 +232,11 @@ class NameMenu extends LitElement {
<p style="margin-bottom:0;"> <p style="margin-bottom:0;">
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"