paoda/polyglot
1
0
Fork 0
mirror of https://github.com/beatriceo/polyglot.git synced 2025-10-25 18:52:11 +00:00
Code Issues Projects Releases Wiki Activity

added profile images and colors to the chat messages

Browse Source
This commit is contained in:
Beatrice Olivera
2018-09-06 01:52:00 +01:00
parent 9ddbd38bce
commit bb2a8ad1b9
6 changed files with 87 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/javascript/packs/chatrooms.js
View File

@@ -25,22 +25,34 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
const message = `${chatMessage["message"]}`
const messagesContainer = document.getElementById('messages-container')
// Div Settings
const messageDiv = document.createElement("div")
messageDiv.classList.add("messageDiv")
messageDiv.classList.add("right")
// Photo Settings
const photo = document.createElement("img")
photo.src = chatMessage["photo_url"]
photo.classList.add("img-circle")
photo.classList.add("avatar-sm")
photo.classList.add("margin-left")
// messageDiv.appendChild(photo)
// Text Settings
const messageElement = document.createElement("p")
messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = message
messagesContainer.appendChild(messageElement)
// Add message and photo to div
messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
// Add message to container
messagesContainer.appendChild(messageDiv)
} else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
const chatMessage = data["chat_message"]
const target = document.getElementById('language-1').value
const message = `${chatMessage["message"]}`
fetch(`/chat_rooms/${chatroomId}/translate_message` , {
@@ -48,23 +60,33 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
body: JSON.stringify({
message: message,
target: target,
userId: userId
userId: userId,
photo_url: chatMessage["photo_url"]
}),
headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
})
} else if (data["translation"] && data["userId"] == userId) {
if (data["input"] == 1) {
document.getElementById('language-2-input').value = data["translation"].text
} else {
document.getElementById('language-1-input').value = data["translation"].text
}
} else if (data["translated_message"] && data["userId"] == userId) {
const messagesContainer = document.getElementById('messages-container')
const messageDiv = document.createElement("div")
messageDiv.classList.add("messageDiv")
const photo = document.createElement("img")
photo.src = data["photo_url"]
photo.classList.add("img-circle")
photo.classList.add("avatar-sm")
photo.classList.add("margin-right")
const messageElement = document.createElement("p")
messageElement.classList.add("message")
messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = data["translated_message"]
messagesContainer.appendChild(messageElement)
scrollLastMessageIntoView();
messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
messagesContainer.appendChild(messageDiv)
} else {
// console.log(data)
}