Merge pull request #66 from beatriceo/chat-features

added hover and show original/translated

app/controllers/pages_controller.rb

@@ -82,6 +82,7 @@ class PagesController < ApplicationController
 
     ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
       translated_message: translated_message,
+      original_message: message,
       userId: userId,
       photo_url: params[:photo_url]
     }

app/javascript/packs/chatrooms.js

@@ -79,13 +79,21 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
 
           const messageElement = document.createElement("p")
           messageElement.classList.add("message")
-          messageElement.classList.add("message")
           messageElement.classList.add("no-margin")
           messageElement.innerText = data["translated_message"]
+          messageElement.setAttribute('data-original', `${data["original_message"]}`)
+          messageElement.setAttribute('data-translated', `${data["translated_message"]}`)
 
           messageDiv.appendChild(photo)
           messageDiv.appendChild(messageElement)
 
+          messageDiv.addEventListener('mouseover', event => {
+            messageElement.innerText = data["original_message"]
+          })
+          messageDiv.addEventListener('mouseout', event => {
+            messageElement.innerText = data["translated_message"]
+          })
+
           messagesContainer.appendChild(messageDiv)
       } else {
         // console.log(data)
@@ -119,6 +127,23 @@ hangUpIcon.addEventListener('click', event => {
 //   })
 // })
 
+const originalBtn = document.getElementById('original-btn')
+originalBtn.addEventListener('click', event => {
+  originalBtn.classList.toggle('original')
+  const allMessages = document.querySelectorAll('.messageDiv:not(.right) > p')
+
+  if (originalBtn.classList.contains('original')) {
+    originalBtn.innerText = "Show Original"
+    allMessages.forEach(message => {
+      message.innerText = message.dataset.translated
+    })
+  } else {
+    originalBtn.innerText = "Show Translated"
+    allMessages.forEach(message => {
+      message.innerText = message.dataset.original
+    })
+  }
+})
 
 const sendBtn = document.getElementById('send-btn')
 sendBtn.addEventListener('click', event => {

app/views/chat_rooms/show.html.erb

@@ -32,7 +32,9 @@
             <input type="text" class="form-control" name="chat-input" id="chat-input" value="">
             <span class="input-group-btn">
               <button class="btn btn-primary form-control" id="send-btn" type="submit" remote: true>Send</button>
-                <!-- <i class="far fa-paper-plane"></i> -->
+            </span>
+            <span class="input-group-btn">
+              <button class="btn btn-danger form-control" id="original-btn" type="submit" remote: true>Show Original</button>
             </span>
           </div>
         </div>