added callee modal
This commit is contained in:
parent
08de4ca536
commit
22041b753a
|
@ -5,7 +5,7 @@ $red: #EE5F5B;
|
||||||
$blue: #469AE0;
|
$blue: #469AE0;
|
||||||
$yellow: #FDB631;
|
$yellow: #FDB631;
|
||||||
$orange: #E67E22;
|
$orange: #E67E22;
|
||||||
$green: #32B796;
|
$green: #5ED17E;
|
||||||
$gray: #000000;
|
$gray: #000000;
|
||||||
$light-gray: #F4F4F4;
|
$light-gray: #F4F4F4;
|
||||||
$warn: #3d63cc;
|
$warn: #3d63cc;
|
||||||
|
|
|
@ -137,6 +137,7 @@ a:hover {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-text {
|
.modal-text {
|
||||||
|
@ -146,11 +147,6 @@ a:hover {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-flex {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1100px) {
|
@media only screen and (max-width: 1100px) {
|
||||||
.modal-picture {
|
.modal-picture {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
|
@ -2,3 +2,18 @@
|
||||||
@import "home";
|
@import "home";
|
||||||
@import "contacts";
|
@import "contacts";
|
||||||
@import "settings";
|
@import "settings";
|
||||||
|
|
||||||
|
.accept-call-button {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
color: $brand-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-inline {
|
||||||
|
display: flex-inline;
|
||||||
|
justify-content: space-between;
|
||||||
|
.accept-call-button {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -32,10 +32,25 @@ class PagesController < ApplicationController
|
||||||
contact = User.find(params[:contact_id])
|
contact = User.find(params[:contact_id])
|
||||||
request = Request.create!(chat_room: chat_room, user: contact)
|
request = Request.create!(chat_room: chat_room, user: contact)
|
||||||
puts "Made a request to call #{contact.email}"
|
puts "Made a request to call #{contact.email}"
|
||||||
|
|
||||||
|
caller_info = nil
|
||||||
|
if current_user.first_name.nil? || current_user.last_name.nil?
|
||||||
|
caller_info = current_user.email
|
||||||
|
else
|
||||||
|
caller_info = "#{current_user.first_name} #{current_user.last_name}"
|
||||||
|
end
|
||||||
|
|
||||||
|
caller_photo = "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
|
||||||
|
unless current_user.photo.url.nil?
|
||||||
|
caller_photo = current_user.photo.url
|
||||||
|
end
|
||||||
|
|
||||||
ActionCable.server.broadcast('notifications', {
|
ActionCable.server.broadcast('notifications', {
|
||||||
message: {
|
message: {
|
||||||
user_id: contact.id,
|
user_id: contact.id,
|
||||||
chat_room_id: chat_room.id
|
chat_room_id: chat_room.id,
|
||||||
|
caller_info: caller_info,
|
||||||
|
caller_photo: caller_photo
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
end
|
end
|
||||||
|
|
|
@ -36,3 +36,8 @@ if (contactsPage) {
|
||||||
removeActiveClass(contacts);
|
removeActiveClass(contacts);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const triggerCalleeModalEvent = () => {
|
||||||
|
$("#calleeModal").modal('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
export { triggerCalleeModalEvent }
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import ActionCable from 'actioncable'
|
import ActionCable from 'actioncable'
|
||||||
|
import { triggerCalleeModalEvent } from "./application.js";
|
||||||
|
|
||||||
// create App object with key cable == new consumer
|
// create App object with key cable == new consumer
|
||||||
(function() {
|
(function() {
|
||||||
|
@ -19,17 +20,20 @@ App.cable.subscriptions.create({
|
||||||
console.log('Connected to NotificationsChannel')
|
console.log('Connected to NotificationsChannel')
|
||||||
},
|
},
|
||||||
received: data => {
|
received: data => {
|
||||||
// console.log(data["message"]["user_id"])
|
|
||||||
// console.log(userId)
|
|
||||||
console.log("received broadcast")
|
console.log("received broadcast")
|
||||||
// console.log(data.body)
|
|
||||||
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) { // Some error appears here but it is not fatal
|
} else if (data["message"]["user_id"] === userId) {
|
||||||
console.log("TRIGGER MODAL")
|
|
||||||
|
// DISPLAY ACCEPT BUTTON
|
||||||
const acceptButton = document.getElementById('accept-button')
|
const acceptButton = document.getElementById('accept-button')
|
||||||
acceptButton.style.display = "block"
|
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"]
|
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 {
|
||||||
|
|
|
@ -23,7 +23,6 @@
|
||||||
<%= link_to connection_path(contact), method: :delete do %>
|
<%= link_to connection_path(contact), method: :delete do %>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>
|
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
|
@ -35,8 +34,8 @@
|
||||||
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do %>
|
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do %>
|
||||||
<i class="fas fa-times-circle"></i>
|
<i class="fas fa-times-circle"></i>
|
||||||
<% end %>
|
<% end %>
|
||||||
<div class="container">
|
|
||||||
<div class="modal-container modal-flex">
|
<div class="modal-container">
|
||||||
<% if contact.photo.url.nil? %>
|
<% if contact.photo.url.nil? %>
|
||||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
|
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
|
||||||
<% else %>
|
<% else %>
|
||||||
|
@ -55,7 +54,7 @@
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,11 +33,44 @@
|
||||||
|
|
||||||
<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
|
<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
|
||||||
<div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
|
<div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
|
||||||
|
<input type="hidden" id="caller-id" name="caller_id" value=""/>
|
||||||
|
|
||||||
<form action="/accept_call" method="post">
|
<!-- Modal -->
|
||||||
<input type="hidden" id="chat-room-id" name="chat_room_id" value=""/>
|
<div class="modal fade" id="calleeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
<input type="submit" id="accept-button" class="btn btn-primary" id="accept-button" style="display: none;" value="ACCEPT CALL"/>
|
<div class="vertical-alignment-helper">
|
||||||
</form>
|
<div class="modal-dialog vertical-align-center">
|
||||||
|
<div class="modal-content modal-color">
|
||||||
|
<div class="modal-header">
|
||||||
|
|
||||||
|
<div class="modal-container">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150 id="caller-photo">
|
||||||
|
<div class="modal-text">
|
||||||
|
<h4>
|
||||||
|
<strong id=caller-name class="text-color">
|
||||||
|
SOMEONE
|
||||||
|
</strong>
|
||||||
|
</h4>
|
||||||
|
<h4 class="modal-title text-color" id="myModalLabel">is calling</h4>
|
||||||
|
|
||||||
|
<div class="flex-inline">
|
||||||
|
<form action="/accept_call" method="post">
|
||||||
|
<input type="hidden" id="chat-room-id" name="chat_room_id" value=""/>
|
||||||
|
<button type="submit" id="accept-button" class="accept-call-button">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#calleeModal" do %>
|
||||||
|
<i class="fas fa-times-circle"></i>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<%= javascript_pack_tag 'notifications' %>
|
<%= javascript_pack_tag 'notifications' %>
|
||||||
<%= javascript_pack_tag 'local_video' %>
|
<%= javascript_pack_tag 'local_video' %>
|
||||||
|
|
Loading…
Reference in New Issue