implemented chat and built in google translate

app/controllers/chat_rooms_controller.rb

@@ -1,7 +1,19 @@
 class ChatRoomsController < ApplicationController
 
   def show
+    require "google/cloud/translate"
+
     @chat_room = ChatRoom.find(params[:id])
+
+    keyfile = ENV['TRANSLATION_CREDENTIALS']
+    creds = Google::Cloud::Translate::Credentials.new(keyfile)
+
+    translate = Google::Cloud::Translate.new(
+      project_id: ENV["PROJECT_ID"],
+      credentials: creds
+    )
+
+  @languages = translate.languages("en")
   end
 
   def create

app/controllers/pages_controller.rb

@@ -12,11 +12,67 @@ class PagesController < ApplicationController
   def home
   end
 
+  def translate
+    require 'google/cloud/translate'
+
+    keyfile = ENV["TRANSLATION_CREDENTIALS"]
+    creds = Google::Cloud::Translate::Credentials.new(keyfile)
+
+    translate = Google::Cloud::Translate.new(
+      project_id: ENV["PROJECT_ID"],
+      credentials: creds
+    )
+    original = params[:original]
+    target = params[:target]
+    text = params[:text]
+    translation = translate.translate(text, { from: original, to: target })
+    translation.text.gsub!("&#39;", "'")
+    ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
+      translation: translation,
+      input: params[:input]
+    }
+  end
+
 
   def cable_testing
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params
-    ActionCable.server.broadcast(chatroom, { message: 'test' })
+    user_info = {}
+
+    if current_user.first_name.nil? || current_user.last_name.nil?
+      user_info[:name] = current_user.email
+    else
+      user_info[:name] = "#{current_user.first_name} #{current_user.last_name}"
+    end
+
+    ActionCable.server.broadcast(chatroom, {
+      chat_message: {
+        message: 'test',
+        user_info: user_info,
+        time_stamp: Time.now }
+      })
+    head :ok
+  end
+
+
+  def send_message
+    puts params
+    chatroom = 'chat_room_' + params[:chat_room_id]
+    puts params
+    user_info = {}
+
+    if current_user.first_name.nil? || current_user.last_name.nil?
+      user_info[:name] = current_user.email
+    else
+      user_info[:name] = "#{current_user.first_name} #{current_user.last_name}"
+    end
+
+    ActionCable.server.broadcast(chatroom, {
+      chat_message: {
+        message: params[:message],
+        user_info: user_info,
+        time_stamp: Time.now.strftime("%H:%M") }
+      })
     head :ok
   end
 

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 }
+  })
+})

app/views/chat_rooms/show.html.erb

@@ -1,4 +1,24 @@
-<button id="test-btn" class="btn btn-primary">Test Connection</button>
+<!-- <button id="test-btn" class="btn btn-primary">Test Connection</button> -->
+
+<div>
+  <select id="language-1" class="input-field-text-black input-dropdown form-control">
+    <% @languages.each do |language| %>
+      <option value="<%= language.code %>"><%= language.name %></option>
+    <% end %>
+  </select>
+  <form id="lang-1">
+    <input type="text" class="form-control" name="language-1-input" id="language-1-input" value="" aria-describedby="basic-addon2">
+  </form>
+  <select id="language-2" class="input-field-text-black input-dropdown form-control">
+    <% @languages.each do |language| %>
+      <option value="<%= language.code %>"><%= language.name %></option>
+    <% end %>
+  </select>
+  <form id="lang-2">
+    <input type="text" class="form-control" name="language-2-input" id="language-2-input" value="" aria-describedby="basic-addon2">
+  </form>
+</div>
+
 <div id="join-btn" data-room="<%= @chat_room.id %>"></div>
 
 <div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
@@ -9,12 +29,27 @@
       <video id="local-video" autoplay muted></video>
     </div>
   </div>
+
+  <div class="translate-container">
+
+  </div>
+  <div class="messages-container-container">
+    <div id="messages-container" style="color: white;">
+    </div>
+
+    <div class="input-group mb-3">
+      <input type="text" class="form-control" name="chat-input" id="chat-input" value="" aria-describedby="basic-addon2">
+      <div class="input-group-append">
+        <button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
 
 <%= javascript_pack_tag 'chatrooms' %>
 <%= javascript_pack_tag 'webrtc' %>
-
+<%= javascript_pack_tag 'translate' %>