implemented chat and built in google translate

app/javascript/packs/chatrooms.js

@@ -19,18 +19,46 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
   connected: () => {
   },
   received: data => {
-    console.log(data)
+    if (data["chat_message"]) {
+      const chatMessage = data["chat_message"]
+      const messagesContainer = document.getElementById('messages-container')
+      const message = document.createElement("p")
+      message.innerText = `${chatMessage["time_stamp"]} ${chatMessage["user_info"]["name"]}: ${chatMessage["message"]}`
+      messagesContainer.appendChild(message)
+    } else if (data["translation"]) {
+      if (data["input"] == 1) {
+        document.getElementById('language-2-input').value = data["translation"].text
+      } else {
+        document.getElementById('language-1-input').value = data["translation"].text
+      }
+    } else {
+      console.log(data)
+    }
   }
 })
 
 // Testing ActionCable
-const testBtn = document.getElementById('test-btn')
-testBtn.addEventListener('click', event => {
-  fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
-    method: 'POST',
-    body: JSON.stringify({})
-  })
+// const testBtn = document.getElementById('test-btn')
+// testBtn.addEventListener('click', event => {
+//   fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
+//     method: 'POST',
+//     body: JSON.stringify({})
+//   })
+// })
+
+
+const sendBtn = document.getElementById('send-btn')
+sendBtn.addEventListener('click', event => {
+  const chatInput = document.getElementById('chat-input')
+  if (chatInput && chatInput.value != chatInput.value.match(/^\s*$/g)) {
+    console.log(chatInput.value)
+    fetch(`/chat_rooms/${chatroomId}/send_message` , {
+      method: 'POST',
+      body: JSON.stringify({message: chatInput.value}),
+      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+    })
+  }
+  chatInput.value = ""
 })
 
 
-

app/javascript/packs/translate.js

@@ -0,0 +1,41 @@
+const languageForm1 = document.getElementById('lang-1')
+const languageForm2 = document.getElementById('lang-2')
+const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+
+languageForm1.addEventListener('submit', event => {
+  event.preventDefault()
+  const original = document.getElementById('language-1').value
+  const target = document.getElementById('language-2').value
+  const text = document.getElementById('language-1-input').value
+
+  fetch(`/chat_rooms/${chatroomId}/translate` , {
+    method: 'POST',
+    body: JSON.stringify({
+      original,
+      target,
+      text,
+      input: 1
+    }),
+    headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+  })
+  // post request and change form 1
+})
+
+languageForm2.addEventListener('submit', event => {
+  event.preventDefault()
+  const original = document.getElementById('language-2').value
+  const target = document.getElementById('language-1').value
+  const text = document.getElementById('language-2-input').value
+  // post request and change form 2
+
+  fetch(`/chat_rooms/${chatroomId}/translate` , {
+    method: 'POST',
+    body: JSON.stringify({
+      original: original,
+      target: target,
+      text: text,
+      input: 2
+    }),
+    headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+  })
+})