From 5650943209517a8fe31e6ee4097e0107df4fba81 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Tue, 4 Sep 2018 11:23:45 +0100 Subject: [PATCH] fixed modal (again) --- app/javascript/packs/application.js | 61 ++++++++++++++++++- app/javascript/packs/notifications.js | 81 +++++++++++++------------- app/views/layouts/application.html.erb | 2 +- app/views/pages/index.html.erb | 2 +- 4 files changed, 102 insertions(+), 44 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index ddc70ae..72512a0 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,4 +1,5 @@ import "bootstrap"; +import ActionCable from 'actioncable' import { triggerModalEvent } from "../components/modal.js"; @@ -36,8 +37,66 @@ if (contactsPage) { removeActiveClass(contacts); } +// const triggerCalleeModalEvent = () => { +// $("#calleeModal").modal('show'); +// } + +// export { triggerCalleeModalEvent } const triggerCalleeModalEvent = () => { $("#calleeModal").modal('show'); } -// export { triggerCalleeModalEvent } +// create App object with key cable == new consumer +(function() { + window.App || (window.App = {}); + + App.cable = ActionCable.createConsumer(); + +}).call(this); + + +const userIdElement = document.getElementById("my-user-id") +let userId = null +if (userIdElement) { + userId = parseInt(document.getElementById("my-user-id").dataset["userId"]) +} + +let chatRoomId = null + +App.cable.subscriptions.create({ + channel: 'NotificationsChannel' +}, { + connected: () => { + console.log('Connected to NotificationsChannel') + }, + received: data => { + console.log("received broadcast") + + if (data.head === 302 && data.body["caller"] === userId && data.path) { + window.location.pathname = data.path + } else if (data["message"]["user_id"] === userId) { + + // DISPLAY ACCEPT BUTTON + const acceptButton = document.getElementById('accept-button') + acceptButton.style.display = "block" + + triggerCalleeModalEvent() + document.getElementById('caller-name').innerHTML = data["message"]["caller_info"] + document.getElementById('caller-photo').src = data["message"]["caller_photo"] + + chatRoomId = data["message"]["chat_room_id"] + console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`) + } else { + console.log(data) + } + } +}) + +// Receive information from index.html.erb +const acceptButton = document.getElementById('accept-button') + +if (acceptButton) { + acceptButton.addEventListener('click', event => { + document.getElementById('chat-room-id').value = chatRoomId + }) +} diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js index 76d6278..9a89dbf 100644 --- a/app/javascript/packs/notifications.js +++ b/app/javascript/packs/notifications.js @@ -1,56 +1,55 @@ -import ActionCable from 'actioncable' +// import ActionCable from 'actioncable' // import { triggerCalleeModalEvent } from "./application"; -const triggerCalleeModalEvent = () => { - $("#calleeModal").modal('show'); -} +// const triggerCalleeModalEvent = () => { +// $("#calleeModal").modal('show'); +// } +// // create App object with key cable == new consumer +// (function() { +// window.App || (window.App = {}); -// create App object with key cable == new consumer -(function() { - window.App || (window.App = {}); +// App.cable = ActionCable.createConsumer(); - App.cable = ActionCable.createConsumer(); - -}).call(this); +// }).call(this); -const userId = parseInt(document.getElementById("my-user-id").dataset["userId"]) -let chatRoomId = null +// const userId = parseInt(document.getElementById("my-user-id").dataset["userId"]) +// let chatRoomId = null -App.cable.subscriptions.create({ - channel: 'NotificationsChannel' -}, { - connected: () => { - console.log('Connected to NotificationsChannel') - }, - received: data => { - console.log("received broadcast") +// App.cable.subscriptions.create({ +// channel: 'NotificationsChannel' +// }, { +// connected: () => { +// console.log('Connected to NotificationsChannel') +// }, +// received: data => { +// console.log("received broadcast") - if (data.head === 302 && data.body["caller"] === userId && data.path) { - window.location.pathname = data.path - } else if (data["message"]["user_id"] === userId) { +// if (data.head === 302 && data.body["caller"] === userId && data.path) { +// window.location.pathname = data.path +// } else if (data["message"]["user_id"] === userId) { - // DISPLAY ACCEPT BUTTON - const acceptButton = document.getElementById('accept-button') - acceptButton.style.display = "block" +// // DISPLAY ACCEPT BUTTON +// const acceptButton = document.getElementById('accept-button') +// acceptButton.style.display = "block" - triggerCalleeModalEvent() - document.getElementById('caller-name').innerHTML = data["message"]["caller_info"] - document.getElementById('caller-photo').src = data["message"]["caller_photo"] +// triggerCalleeModalEvent() +// document.getElementById('caller-name').innerHTML = data["message"]["caller_info"] +// document.getElementById('caller-photo').src = data["message"]["caller_photo"] - chatRoomId = data["message"]["chat_room_id"] - console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`) - } else { - console.log(data) - } +// chatRoomId = data["message"]["chat_room_id"] +// console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`) +// } else { +// console.log(data) +// } - } -}) +// } +// }) -// Receive information from index.html.erb -const acceptButton = document.getElementById('accept-button') +// // Receive information from index.html.erb +// const acceptButton = document.getElementById('accept-button') -acceptButton.addEventListener('click', event => { - document.getElementById('chat-room-id').value = chatRoomId -}) +// acceptButton.addEventListener('click', event => { +// document.getElementById('chat-room-id').value = chatRoomId +// }) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b6c48d2..e4b3173 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,7 +20,7 @@ <%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" || params["action"] == "call" %> <%= render 'shared/flashes' %> <%= yield %> - <%= javascript_include_tag 'application' %> <%= javascript_pack_tag 'application' %> + <%= javascript_include_tag 'application' %> diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb index a2c6858..0d124ab 100644 --- a/app/views/pages/index.html.erb +++ b/app/views/pages/index.html.erb @@ -73,6 +73,6 @@ <%= javascript_pack_tag 'local_video' %> -<%= javascript_pack_tag 'notifications' %> +<%# javascript_pack_tag 'notifications' %>