Translate q-chat page second part

qortal-ui-core/language/cn.json

@@ -410,7 +410,10 @@
     "cchange18": "unblock",
     "cchange19": "Invalid Name / Address, Check the name / address and retry...",
     "cchange20": "Message Sent Successfully!",
-    "cchange21": "Sending failed, Please retry..."
+    "cchange21": "Sending failed, Please retry...",
+    "cchange22": "Loading Messages...",
+    "cchange23": "Cannot Decrypt Message!",
+    "cchange24": "Maximum Characters per message is 255"
   },
   "welcomepage": {
     "wcchange1": "Welcome to Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Invalid Name / Address, Check the name / address and retry...",
     "wcchange8": "Message Sent Successfully!",
     "wcchange9": "Sending failed, Please retry..."
+  },
+  "blockpage": {
+    "bcchange1": "block",
+    "bcchange2": "Successfully blocked this user!",
+    "bcchange3": "Error occurred when trying to block this user. Please try again!",
+    "bcchange4": "No registered name"
   }
 }

qortal-ui-core/language/de.json

@@ -404,13 +404,16 @@
     "cchange12": "Eigentümer",
     "cchange13": "Aktion",
     "cchange14": "Dieses Konto hat keine Benutzer blockiert!",
-    "cchange15": "Kein registrierter Name",
+    "cchange15": "Kein Name registriert",
     "cchange16": "Dieser Benutzer wurde erfolgreich entsperrt!",
     "cchange17": "Beim Versuch, diesen Benutzer zu entsperren, ist ein Fehler aufgetreten. Bitte versuche es erneut!",
     "cchange18": "entsperren",
     "cchange19": "Ungültiger Name / Adresse, überprüfen Sie den Namen / die Adresse und versuchen Sie es erneut...",
     "cchange20": "Nachricht erfolgreich gesendet!",
-    "cchange21": "Senden fehlgeschlagen, bitte erneut versuchen..."
+    "cchange21": "Senden fehlgeschlagen, bitte erneut versuchen...",
+    "cchange22": "Lade Nachrichten...",
+    "cchange23": "Nachricht kann nicht entschlüsselt werden!",
+    "cchange24": "Die maximale Zeichenzahl pro Nachricht beträgt 255"
   },
   "welcomepage": {
     "wcchange1": "Willkommen zu Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Ungültiger Name / Adresse, überprüfen Sie den Namen / die Adresse und versuchen Sie es erneut...",
     "wcchange8": "Nachricht erfolgreich gesendet!",
     "wcchange9": "Senden fehlgeschlagen, bitte erneut versuchen..."
+  },
+  "blockpage": {
+    "bcchange1": "blockieren",
+    "bcchange2": "Dieser Benutzer wurde erfolgreich blockiert!",
+    "bcchange3": "Beim Blockieren dieses Benutzers ist ein Fehler aufgetreten. Bitte versuche es erneut!",
+    "bcchange4": "Kein Name registriert"
   }
 }

qortal-ui-core/language/fr.json

@@ -410,7 +410,10 @@
     "cchange18": "unblock",
     "cchange19": "Invalid Name / Address, Check the name / address and retry...",
     "cchange20": "Message Sent Successfully!",
-    "cchange21": "Sending failed, Please retry..."
+    "cchange21": "Sending failed, Please retry...",
+    "cchange22": "Loading Messages...",
+    "cchange23": "Cannot Decrypt Message!",
+    "cchange24": "Maximum Characters per message is 255"
   },
   "welcomepage": {
     "wcchange1": "Welcome to Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Invalid Name / Address, Check the name / address and retry...",
     "wcchange8": "Message Sent Successfully!",
     "wcchange9": "Sending failed, Please retry..."
+  },
+  "blockpage": {
+    "bcchange1": "block",
+    "bcchange2": "Successfully blocked this user!",
+    "bcchange3": "Error occurred when trying to block this user. Please try again!",
+    "bcchange4": "No registered name"
   }
 }

qortal-ui-core/language/pl.json

@@ -410,7 +410,10 @@
     "cchange18": "unblock",
     "cchange19": "Invalid Name / Address, Check the name / address and retry...",
     "cchange20": "Message Sent Successfully!",
-    "cchange21": "Sending failed, Please retry..."
+    "cchange21": "Sending failed, Please retry...",
+    "cchange22": "Loading Messages...",
+    "cchange23": "Cannot Decrypt Message!",
+    "cchange24": "Maximum Characters per message is 255"
   },
   "welcomepage": {
     "wcchange1": "Welcome to Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Invalid Name / Address, Check the name / address and retry...",
     "wcchange8": "Message Sent Successfully!",
     "wcchange9": "Sending failed, Please retry..."
+  },
+  "blockpage": {
+    "bcchange1": "block",
+    "bcchange2": "Successfully blocked this user!",
+    "bcchange3": "Error occurred when trying to block this user. Please try again!",
+    "bcchange4": "No registered name"
   }
 }

qortal-ui-core/language/sp.json

@@ -410,7 +410,10 @@
     "cchange18": "unblock",
     "cchange19": "Invalid Name / Address, Check the name / address and retry...",
     "cchange20": "Message Sent Successfully!",
-    "cchange21": "Sending failed, Please retry..."
+    "cchange21": "Sending failed, Please retry...",
+    "cchange22": "Loading Messages...",
+    "cchange23": "Cannot Decrypt Message!",
+    "cchange24": "Maximum Characters per message is 255"
   },
   "welcomepage": {
     "wcchange1": "Welcome to Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Invalid Name / Address, Check the name / address and retry...",
     "wcchange8": "Message Sent Successfully!",
     "wcchange9": "Sending failed, Please retry..."
+  },
+  "blockpage": {
+    "bcchange1": "block",
+    "bcchange2": "Successfully blocked this user!",
+    "bcchange3": "Error occurred when trying to block this user. Please try again!",
+    "bcchange4": "No registered name"
   }
 }

qortal-ui-core/language/us.json

@@ -410,7 +410,10 @@
     "cchange18": "unblock",
     "cchange19": "Invalid Name / Address, Check the name / address and retry...",
     "cchange20": "Message Sent Successfully!",
-    "cchange21": "Sending failed, Please retry..."
+    "cchange21": "Sending failed, Please retry...",
+    "cchange22": "Loading Messages...",
+    "cchange23": "Cannot Decrypt Message!",
+    "cchange24": "Maximum Characters per message is 255"
   },
   "welcomepage": {
     "wcchange1": "Welcome to Q-Chat",
@@ -422,5 +425,11 @@
     "wcchange7": "Invalid Name / Address, Check the name / address and retry...",
     "wcchange8": "Message Sent Successfully!",
     "wcchange9": "Sending failed, Please retry..."
+  },
+  "blockpage": {
+    "bcchange1": "block",
+    "bcchange2": "Successfully blocked this user!",
+    "bcchange3": "Error occurred when trying to block this user. Please try again!",
+    "bcchange4": "No registered name"
   }
 }

qortal-ui-plugins/plugins/core/components/BlockAddress.js

@@ -2,6 +2,11 @@ import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
 import snackbar from './snackbar.js'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
+registerTranslateConfig({
+  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
+})
 
 import '@material/mwc-button'
 import '@material/mwc-dialog'
@@ -37,21 +42,40 @@ class BlockAddress extends LitElement {
 
     render() {
         return html`
-            <mwc-button dense unelevated label="block" icon="voice_over_off" @click="${() => this.chatBlockAddress()}"></mwc-button>
+            <mwc-button dense unelevated label="${translate("blockpage.bcchange1")}" icon="voice_over_off" @click="${() => this.chatBlockAddress()}"></mwc-button>
         `
     }
 
     firstUpdated() {
+
+        this.changeLanguage()
         this.getChatBlockedAdresses()
 
 	setInterval(() => {
 	    this.getChatBlockedAdresses();
 	}, 60000)
+
+        window.addEventListener('storage', () => {
+            const checkLanguage = localStorage.getItem('qortalLanguage')
+            use(checkLanguage)
+        })
+
     }
 
     updated(changedProps) {
     }
 
+    changeLanguage() {
+        const checkLanguage = localStorage.getItem('qortalLanguage')
+
+        if (checkLanguage === null || checkLanguage.length === 0) {
+            localStorage.setItem('qortalLanguage', 'us')
+            use('us')
+        } else {
+            use(checkLanguage)
+        }
+    }
+
     async getChatBlockedAdresses() {
         const chatBlockedAdresses = await parentEpml.request('apiCall', {
             url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`
@@ -81,13 +105,15 @@ class BlockAddress extends LitElement {
             this.chatBlockedAdresses = this.chatBlockedAdresses.filter(item => item != address)
             this.chatBlockedAdresses.push(address)
             this.getChatBlockedList()
+            let err1string = get("blockpage.bcchange2")
             snackbar.add({
-                labelText: `Successfully blocked this user.`,
+                labelText: `${err1string}`,
                 dismiss: true
             })
         } else {
+            let err2string = get("blockpage.bcchange2")
             snackbar.add({
-                labelText: `Error occurred when trying to block this user. Please try again.`,
+                labelText: `${err2string}`,
                 dismiss: true
             })
         }
@@ -98,7 +124,7 @@ class BlockAddress extends LitElement {
         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()}`
-        const emptyName = 'No registered name'
+        const err3string = 'No regitered name'
 
         localStorage.removeItem("ChatBlockedAddresses")
 
@@ -109,7 +135,7 @@ class BlockAddress extends LitElement {
         }).then(data => {
             return data.map(item => {
                 const noName = {
-                    name: emptyName,
+                    name: err3string,
                     owner: item
                 }
                 fetch(`${nodeUrl}/names/address/${item}?limit=0&reverse=true`).then(res => {

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -1,6 +1,11 @@
 import { LitElement, html, css } from 'lit'
 import { render } from 'lit/html.js'
 import { Epml } from '../../../epml.js'
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
+
+registerTranslateConfig({
+  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
+})
 
 import { escape, unescape } from 'html-escaper';
 import { inputKeyCodes } from '../../utils/keyCodes.js'
@@ -127,7 +132,7 @@ class ChatPage extends LitElement {
 
     render() {
         return html`
-            ${this.isLoadingMessages ? html`<h1>Loading Messages...</h1>` : this.renderChatScroller(this._initialMessages)}
+            ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
             <div class="chat-text-area">
                 <div class="typing-area">
                     <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
@@ -142,7 +147,7 @@ class ChatPage extends LitElement {
 
     firstUpdated() {
         // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
-
+        this.changeLanguage();
         this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
         this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
         this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
@@ -180,6 +185,11 @@ class ChatPage extends LitElement {
         // Attach Event Handler
         this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
 
+        window.addEventListener('storage', () => {
+            const checkLanguage = localStorage.getItem('qortalLanguage')
+            use(checkLanguage)
+        })
+
         const getAddressPublicKey = () => {
 
             parentEpml.request('apiCall', {
@@ -210,7 +220,8 @@ class ChatPage extends LitElement {
             this.chatId.includes('direct') === true ? this.isReceipient = true : this.isReceipient = false;
             this._chatId = this.chatId.split('/')[1];
 
-            const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : 'Message...';
+            let mstring = get("chatpage.cchange8")
+            const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`;
             this.chatEditorPlaceholder = placeholder;
 
             this.isReceipient ? getAddressPublicKey() : this.fetchChatMessages(this._chatId);
@@ -247,6 +258,17 @@ class ChatPage extends LitElement {
     updated(changedProps) {
     }
 
+    changeLanguage() {
+        const checkLanguage = localStorage.getItem('qortalLanguage')
+
+        if (checkLanguage === null || checkLanguage.length === 0) {
+            localStorage.setItem('qortalLanguage', 'us')
+            use('us')
+        } else {
+            use(checkLanguage)
+        }
+    }
+
     renderChatScroller(initialMessages) {
 
         return html`<chat-scroller .initialMessages=${initialMessages} .emojiPicker=${this.emojiPicker} .escapeHTML=${escape} .getOldMessage=${this.getOldMessage} > </chat-scroller>`
@@ -572,7 +594,8 @@ class ChatPage extends LitElement {
         } else if (trimmedMessage.length >= 256) {
             this.isLoading = false;
             this.chatEditor.enable();
-            parentEpml.request('showSnackBar', "Maximum Characters per message is 255");
+            let err1string = get("chatpage.cchange24");
+            parentEpml.request('showSnackBar', `${err1string}`);
         } else {
             this.sendMessage(trimmedMessage);
         }
@@ -650,7 +673,8 @@ class ChatPage extends LitElement {
             } else if (response.error) {
                 parentEpml.request('showSnackBar', response.message);
             } else {
-                parentEpml.request('showSnackBar', "Sending failed, Please retry...");
+                let err2string = get("chatpage.cchange21");
+                parentEpml.request('showSnackBar', `${err2string}`);
             }
 
             this.isLoading = false;

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -323,7 +323,7 @@ class Chat extends LitElement {
         this.hideNewMesssageBar = this.hideNewMesssageBar.bind(this)
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
         this.blockedUsers = []
-        this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]")
+        this.blockedUserList = []
     }
 
     render() {
@@ -417,15 +417,14 @@ class Chat extends LitElement {
 
     firstUpdated() {
 
+        this.changeLanguage()
+        this.changeTheme()
         this.getChatBlockedList()
 
         setInterval(() => {
             this.blockedUserList = JSON.parse(localStorage.getItem("ChatBlockedAddresses") || "[]")
         }, 1000)
 
-        this.changeTheme()
-        this.changeLanguage()
-
         const getBlockedUsers = async () => {
             let blockedUsers = await parentEpml.request('apiCall', {
                 url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}`
@@ -554,6 +553,7 @@ class Chat extends LitElement {
         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()}`
+        const err1string = 'No regitered name'
 
         localStorage.removeItem("ChatBlockedAddresses")
 
@@ -563,9 +563,8 @@ class Chat extends LitElement {
             return response.json()
         }).then(data => {
             return data.map(item => {
-                let err1string = get("chatpage.cchange15")
                 const noName = {
-                    name: `${err1string}`,
+                    name: err1string,
                     owner: item
                 }
                 fetch(`${nodeUrl}/names/address/${item}?limit=0&reverse=true`).then(res => {