From b19a000729c5073ad579fc3fe4e43469149f8a11 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Tue, 4 Sep 2018 19:21:25 +0100 Subject: [PATCH] fixed bug where translations were also broadcasted to other client and fixed bug where the same original and target language caused a 500 error --- app/controllers/pages_controller.rb | 3 +- app/javascript/packs/chatrooms.js | 5 +-- app/javascript/packs/translate.js | 52 +++++++++++++++++------------ 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 610dbb8..e53db5a 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -29,7 +29,8 @@ class PagesController < ApplicationController translation.text.gsub!("'", "'") ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", { translation: translation, - input: params[:input] + input: params[:input], + userId: current_user.id } end diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js index d0ca5a6..0528c02 100644 --- a/app/javascript/packs/chatrooms.js +++ b/app/javascript/packs/chatrooms.js @@ -10,6 +10,7 @@ import ActionCable from 'actioncable' // find chatroom id const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"] +const userId = document.getElementById('current-user').innerText // create subsciptions App['chatroom' + chatroomId] = App.cable.subscriptions.create({ @@ -25,14 +26,14 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({ const message = document.createElement("p") message.innerText = `${chatMessage["time_stamp"]} ${chatMessage["user_info"]["name"]}: ${chatMessage["message"]}` messagesContainer.appendChild(message) - } else if (data["translation"]) { + } 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 { - console.log(data) + // console.log(data) } } }) diff --git a/app/javascript/packs/translate.js b/app/javascript/packs/translate.js index 0dc49e6..33e09ec 100644 --- a/app/javascript/packs/translate.js +++ b/app/javascript/packs/translate.js @@ -1,3 +1,4 @@ +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"] @@ -8,16 +9,21 @@ languageForm1.addEventListener('submit', event => { 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 } - }) + 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 }) @@ -27,15 +33,19 @@ languageForm2.addEventListener('submit', event => { 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 } - }) + 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 + } })