fixed modal (again)

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

app/javascript/packs/notifications.js

@@ -1,56 +1,55 @@
-import ActionCable from 'actioncable'
+// import ActionCable from 'actioncable'
 // import { triggerCalleeModalEvent } from "./application";
 
-const triggerCalleeModalEvent = () => {
+// const triggerCalleeModalEvent = () => {
-  $("#calleeModal").modal('show');
+//   $("#calleeModal").modal('show');
-}
+// }
+// // create App object with key cable == new consumer
+// (function() {
+//   window.App || (window.App = {});
 
-// create App object with key cable == new consumer
+//   App.cable = ActionCable.createConsumer();
-(function() {
-  window.App || (window.App = {});
 
-  App.cable = ActionCable.createConsumer();
+// }).call(this);
-
-}).call(this);
 
 
-const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
+// const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
-let chatRoomId = null
+// let chatRoomId = null
 
-App.cable.subscriptions.create({
+// App.cable.subscriptions.create({
-  channel: 'NotificationsChannel'
+//   channel: 'NotificationsChannel'
-}, {
+// }, {
-  connected: () => {
+//   connected: () => {
-    console.log('Connected to NotificationsChannel')
+//     console.log('Connected to NotificationsChannel')
-  },
+//   },
-  received: data => {
+//   received: data => {
-    console.log("received broadcast")
+//     console.log("received broadcast")
 
-    if (data.head === 302 && data.body["caller"] === userId && data.path) {
+//     if (data.head === 302 && data.body["caller"] === userId && data.path) {
-      window.location.pathname = data.path
+//       window.location.pathname = data.path
-    } else if (data["message"]["user_id"] === userId) {
+//     } else if (data["message"]["user_id"] === userId) {
 
-      // DISPLAY ACCEPT BUTTON
+//       // DISPLAY ACCEPT BUTTON
-      const acceptButton = document.getElementById('accept-button')
+//       const acceptButton = document.getElementById('accept-button')
-      acceptButton.style.display = "block"
+//       acceptButton.style.display = "block"
 
-      triggerCalleeModalEvent()
+//       triggerCalleeModalEvent()
-      document.getElementById('caller-name').innerHTML = data["message"]["caller_info"]
+//       document.getElementById('caller-name').innerHTML = data["message"]["caller_info"]
-      document.getElementById('caller-photo').src = data["message"]["caller_photo"]
+//       document.getElementById('caller-photo').src = data["message"]["caller_photo"]
 
-      chatRoomId = data["message"]["chat_room_id"]
+//       chatRoomId = data["message"]["chat_room_id"]
-      console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
+//       console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
-    } else {
+//     } else {
-      console.log(data)
+//       console.log(data)
-    }
+//     }
 
 
-  }
+//   }
-})
+// })
 
-// Receive information from index.html.erb
+// // Receive information from index.html.erb
-const acceptButton = document.getElementById('accept-button')
+// const acceptButton = document.getElementById('accept-button')
 
-acceptButton.addEventListener('click', event => {
+// acceptButton.addEventListener('click', event => {
-  document.getElementById('chat-room-id').value = chatRoomId
+//   document.getElementById('chat-room-id').value = chatRoomId
-})
+// })

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' %>
   </body>
 </html>

app/views/pages/index.html.erb

@@ -73,6 +73,6 @@
 </div>
 
 <%= javascript_pack_tag 'local_video' %>
-<%= javascript_pack_tag 'notifications' %>
+<%# javascript_pack_tag 'notifications' %>