Merge cf71cee5d7c8044d604f909665fada5e440a4f13 into f23ccacbbfda89aeba4be5002bf4f303e2ed7406

.gitignore

@@ -14,4 +14,3 @@ yarn-error.log
 .byebug_history
 .env*
 .env*
-translation-credentials.json

app/controllers/chat_rooms_controller.rb

@@ -13,7 +13,7 @@ class ChatRoomsController < ApplicationController
       credentials: creds
     )
 
-  @languages = translate.languages("en")
+    @languages = translate.languages("en")
   end
 
   def create

app/controllers/pages_controller.rb

@@ -55,6 +55,35 @@ class PagesController < ApplicationController
     head :ok
   end
 
+  def translate_message
+    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
+    )
+    target = params[:target]
+    message = params[:message]
+    userId = params[:userId]
+
+    detection = translate.detect(message)
+    original = detection.language
+    translated_message = message
+
+    unless original == target
+      translation = translate.translate(message, { from: original, to: target })
+      translated_message = translation.text.gsub("&#39;", "'")
+    end
+
+    ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
+      translated_message: translated_message,
+      userId: userId
+    }
+  end
+
 
   def send_message
     puts params
@@ -72,7 +101,9 @@ class PagesController < ApplicationController
       chat_message: {
         message: params[:message],
         user_info: user_info,
-        time_stamp: Time.now.strftime("%H:%M") }
+        time_stamp: Time.now.strftime("%H:%M"),
+        userId: current_user.id
+        }
       })
     head :ok
   end

app/controllers/users_controller.rb

@@ -28,9 +28,26 @@ class UsersController < ApplicationController
 
   def setting
     @user = current_user
+    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
+    )
+
+    @languages = translate.languages("en")
   end
 
-
+  def update_setting
+    current_user.update(user_params)
+    puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"
+    puts current_user.language
+    current_user.save
+    redirect_to setting_path
+  end
 
   private
 

app/javascript/packs/chatrooms.js

@@ -11,6 +11,7 @@ import ActionCable from 'actioncable'
 // find chatroom id
 const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
 const userId = document.getElementById('current-user').innerText
+console.log(userId)
 
 // create subsciptions
 App['chatroom' + chatroomId] = App.cable.subscriptions.create({
@@ -19,18 +20,40 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
   }, {
     connected: () => {},
     received: data => {
-      if (data["chat_message"]) {
+      if (data["chat_message"] && data["chat_message"]["userId"] == userId) {
         const chatMessage = data["chat_message"]
+        const message = `${chatMessage["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)
+        const messageElement = document.createElement("p")
+        messageElement.innerText = message
+        messagesContainer.appendChild(messageElement)
+      }
+      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` , {
+          method: 'POST',
+          body: JSON.stringify({
+            message: message,
+            target: target,
+            userId: userId
+          }),
+          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 message = document.createElement("p")
+          message.innerText = data["translated_message"]
+          messagesContainer.appendChild(message)
       } else {
         // console.log(data)
       }
@@ -68,10 +91,9 @@ 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}),
+      body: JSON.stringify({message: chatInput.value, userId: userId}),
       headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
     })
   }

app/javascript/packs/translate.js

@@ -1,51 +1,51 @@
-const userId = document.getElementById('current-user').innerText
-const languageForm1 = document.getElementById('lang-1')
-const languageForm2 = document.getElementById('lang-2')
-const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+// const userId = document.getElementById('current-user').innerText
+// 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
+// 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
 
-  if (original !== target) {
-    fetch(`/chat_rooms/${chatroomId}/translate` , {
-      method: 'POST',
-      body: JSON.stringify({
-        original,
-        target,
-        text,
-        input: 1,
-        userId
-      }),
-      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
-    })
-  } else {
-    document.getElementById('language-2-input').value = text
-  }
-  // post request and change form 1
-})
+//   if (original !== target) {
+//     fetch(`/chat_rooms/${chatroomId}/translate` , {
+//       method: 'POST',
+//       body: JSON.stringify({
+//         original,
+//         target,
+//         text,
+//         input: 1,
+//         userId
+//       }),
+//       headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+//     })
+//   } else {
+//     document.getElementById('language-2-input').value = text
+//   }
+//   // 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
-  if (original !== target) {
-    fetch(`/chat_rooms/${chatroomId}/translate` , {
-      method: 'POST',
-      body: JSON.stringify({
-        original: original,
-        target: target,
-        text: text,
-        input: 2,
-        userId
-      }),
-      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
-    })
-  } else {
-    document.getElementById('language-1-input').value = text
-  }
-})
+// 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
+//   if (original !== target) {
+//     fetch(`/chat_rooms/${chatroomId}/translate` , {
+//       method: 'POST',
+//       body: JSON.stringify({
+//         original: original,
+//         target: target,
+//         text: text,
+//         input: 2,
+//         userId
+//       }),
+//       headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+//     })
+//   } else {
+//     document.getElementById('language-1-input').value = text
+//   }
+// })

app/views/chat_rooms/show.html.erb

@@ -1,24 +1,5 @@
 <!-- <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>
@@ -40,6 +21,11 @@
     </div>
 
     <div class="input-group mb-3">
+      <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>
       <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>

app/views/users/setting.html.erb

@@ -1,47 +1,10 @@
 <div id="settings-page"></div>
 
-<% languages = [
-  "Afrikaans (South Africa)", "Amharic (Ethiopia)", "Armenian (Armenia)",
-  "Azerbaijani (Azerbaijan)", "Indonesian (Indonesia)", "Malay (Malaysia)",
-  "Bengali (Bangladesh)", "Bengali (India)", "Catalan (Spain)",
-  "Czech (Czech Republic)", "Danish (Denmark)", "German (Germany)",
-  "English (Australia)", "English (Canada)", "English (Ghana)",
-  "English (United Kingdom)", "English (India)", "English (Ireland)",
-  "English (Kenya)", "English (New Zealand)", "English (Nigeria)",
-  "English (Philippines)", "English (South Africa)", "English (Tanzania)",
-  "English (United States)", "Spanish (Argentina)", "Spanish (Bolivia)",
-  "Spanish (Chile)", "Spanish (Colombia)", "Spanish (Costa Rica)",
-  "Spanish (Ecuador)", "Spanish (El Salvador)", "Spanish (Spain)",
-  "Spanish (United States)", "Spanish (Guatemala)", "Spanish (Honduras)",
-  "Spanish (Mexico)", "Spanish (Nicaragua)", "Spanish (Panama)",
-  "Spanish (Paraguay)", "Spanish (Peru)", "Spanish (Puerto Rico)",
-  "Spanish (Dominican Republic)", "Spanish (Uruguay)", "Spanish (Venezuela)",
-  "Basque (Spain)", "Filipino (Philippines)", "French (Canada)",
-  "French (France)", "Galician (Spain)", "Georgian (Georgia)",
-  "Gujarati (India)", "Croatian (Croatia)", "Zulu (South Africa)",
-  "Icelandic (Iceland)", "Italian (Italy)", "Javanese (Indonesia)",
-  "Kannada (India)", "Khmer (Cambodia)", "Lao (Laos)",
-  "Latvian (Latvia)", "Lithuanian (Lithuania)", "Hungarian (Hungary)",
-  "Malayalam (India)", "Marathi (India)", "Dutch (Netherlands)",
-  "Nepali (Nepal)", "Norwegian Bokmål (Norway)", "Polish (Poland)",
-  "Portuguese (Brazil)", "Portuguese (Portugal)", "Romanian (Romania)",
-  "Sinhala (Sri Lanka)", "Slovak (Slovakia)", "Slovenian (Slovenia)",
-  "Sundanese (Indonesia)", "Swahili (Tanzania)", "Swahili (Kenya)",
-  "Finnish (Finland)", "Swedish (Sweden)", "Tamil (India)",
-  "Tamil (Singapore)", "Tamil (Sri Lanka)", "Tamil (Malaysia)",
-  "Telugu (India)", "Vietnamese (Vietnam)", "Turkish (Turkey)",
-  "Urdu (Pakistan)", "Urdu (India)", "Greek (Greece)",
-  "Bulgarian (Bulgaria)", "Russian (Russia)", "Serbian (Serbia)",
-  "Ukrainian (Ukraine)", "Hebrew (Israel)", "Arabic (Israel)",
-  "Arabic (Jordan)", "Arabic (United Arab Emirates)", "Arabic (Bahrain)",
-  "Arabic (Algeria)", "Arabic (Saudi Arabia)", "Arabic (Iraq)",
-  "Arabic (Kuwait)", "Arabic (Morocco)", "Arabic (Tunisia)",
-  "Arabic (Oman)", "Arabic (Qatar)", "Arabic (Lebanon)",
-  "Arabic (Egypt)", "Persian (Iran)", "Hindi (India)",
-  "Thai (Thailand)", "Korean (South Korea)", "Chinese, Mandarin (Traditional, Taiwan)",
-  "Chinese, Cantonese (Traditional, Hong Kong)", "Japanese (Japan)",
-  "Chinese, Mandarin (Simplified, Hong Kong)",
-  "Chinese, Mandarin (Simplified, China)" ]%>
+<% language_names = [] %>
+
+<% @languages.each do |language| %>
+  <% language_names << language.name %>
+<% end %>
 
 <% fonts = [
     "Arial",
@@ -56,11 +19,11 @@
         <div class="settings">
           <h2>Settings</h2>
           <div>
-            <%= simple_form_for(@user) do |t| %>
+            <%= simple_form_for(current_user, url: update_setting_path) do |t| %>
               <div>
                 <div class="card card-form card-form-no-hover">
                   <%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
-                  <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown form-control' %>
+                  <%= t.input_field :language, collection: language_names, class:'input-field-text-black input-dropdown form-control', include_blank: false %>
                 </div>
                 <div class="card card-form card-form-no-hover">
                   <%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %>
@@ -77,11 +40,11 @@
                     <span class="slider round"></span>
                   </label>
                 </div>
-
-                <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
+                <%= t.button :submit, value: 'Save', class: "btn btn-primary save-btn form-control" %>
                 <p></p>
               </div>
             <% end %>
+                <%#= link_to "Save", update_setting_path, method: :patch, class: "btn btn-primary save-btn form-control" %>
           </div>
         </div>
       </div>

config/routes.rb

@@ -23,6 +23,7 @@ Rails.application.routes.draw do
 
   get '/contacts', to: 'pages#index'
   get '/setting', to: 'users#setting'
+  patch '/setting', to: 'users#update_setting', as: 'update_setting'
   post '/sessions', to: 'video_sessions#create'
 
   post '/chat_rooms/chat_room_sessions', to: 'chat_rooms#create'
@@ -32,6 +33,7 @@ Rails.application.routes.draw do
     post '/cable_testing', to: 'pages#cable_testing'
     post '/send_message', to: 'pages#send_message'
     post '/translate', to: 'pages#translate'
+    post '/translate_message', to: 'pages#translate_message'
   end
 
   mount ActionCable.server, at: '/cable'

translation-credentials.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "booming-banner-212315",
+  "private_key_id": "9c2ce218223666d974da8f33e8329e5c6d40a471",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC4jSV/s2mp2nri\nJkD4W62aSithmFgd0dNZbPBuDNkhscGXfI4HAYzbWGBHw9gAuN59ezIVFZ3W3IsB\na3scJHup58ZV6zIaeEY5uFhgIlwdohi0iMKvY0eClTBiabu5Drn4OE8IlFX99Ab1\nwhV7WRjGG8YEQ2d1pUHHvS98QeQvb1Km6M9E/4GFib3xcBU0VFO2Evk3AJzK9K1z\nT+DsduloNxAaZfcygWvzhDez2sxftR9PXE1Ek/KQSuATACn11rPUyr/CuHfGSUh6\nypKMUnaYb8EnjrNW/bea/GKjGMzvHubjN/lPEEovXTYANfCXvVMy7ThdQLjS6YIW\nEPvEhS2jAgMBAAECggEAEbiT8jgzHDk7dX3A3VhISjl3Au8S/wIH7l1UlOys6Nxd\nv4MZTDjs4p8Q17NJiYA29QugWn/x4RDaVC+S6bfjHASCefuUmxAThjVaXxjNiZbo\nEmXTc+3vju1ucPTALtvoJZqalDNSMol9JZoWX/rFMzi1gfFK/PP6ZgiXh7H4DEnV\nDtwI8uXs6xGpC5Kr2u2N64RDqk9DbZ6lPLqk1zB1XM1FvApkmsUbSEXZj7CiDemx\nTz23f6VR+eZzgWuaWJQwLwmkWwVgCfUr9KL3Uw92+U/9uvcmNdsC7cwM14RfTx1R\njYkwqjz2RRsiAsuD5ebHxoNDqEIkArf6K+dFJImnOQKBgQD7zFVW22nYg/54JZR1\n3Hyv8ncy6ocPB0+jlESE/m8kPo0RtzGUJxKDTwEZP+y8y2NchI6C1atC/RxE6But\nOUAJLxqD027z4rXo/yNaiDaerZXr/y56pRbhR3wbjuR7vcEFZ3B7bHCrKhgdDYPA\nMTgVxX/2Z3AXwCDpaG2W7LxbpwKBgQC7oYnrF6jzNPCu/FHH4Hhff/2aV0IJO7BQ\nEeY8VADVBHTiYwlnBlG9LkpWFM/YjsGpsfzorztIKDd1N911h2XcL7kgh6+URP75\ntYtQV3iNUbERxdp/rnm97QdZr/W3r9s60q61mX7vMsZK8mPPmwLKvP7YSu0NvFa8\nucidRihtpQKBgAJW/sAE3/HsIBQ7vSpvNxVnemYVudWQ6tOJUC2wM5Yxopv0iNho\nmIpx1H/IkUmb1juI284pcCL6OSYGxiMQ8iBjuKpa76ACjlAw9sIjm+ZTlJ4Ry/vF\nxvWm9WdIJ6ViuQV01Z2//zgH9xtmAcBqdKv3Ht5KTcdauLOSjdomLwXnAoGAfQ7J\nHxFxAVEaznbMh108veJQBKv+Dqti86tKepE+0Lwcr7t0y98xYddVopRSiDN2LwW7\n3NbWu1xawl0O1UP+h0ijqmPlifyGuabgCReT+RUm4QKvhISlDgrK6GNYcirbAxTj\nb5S0PvfnpJJ0Ji5aKQjZDw65e3s5kKZ/aRwW3CUCgYAvWeze0qlg332pZiEtsEnF\nx8CUq7i1phdB3G6cIVdvAee5ce6tvpNiFhECjaUZiykV6zyQY8s8LIyjKTuFXbI9\n2uAvPl7y4PHV5rKJOtuQJOLqaUNgAlklKdUBL2I6vwp/1epxQHUYNeaQv5lC0QT+\nxHrzaiPUQ0ADBUNvUVMIOg==\n-----END PRIVATE KEY-----\n",
+  "client_email": "starting-account-c76g3v5fh5js@booming-banner-212315.iam.gserviceaccount.com",
+  "client_id": "105634639063680583591",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/starting-account-c76g3v5fh5js%40booming-banner-212315.iam.gserviceaccount.com"
+}