added callee modal
This commit is contained in:
Beatrice Olivera
parent
08de4ca536
commit
22041b753a
|
|
@ -5,7 +5,7 @@ $red: #EE5F5B;
|
|||
$blue: #469AE0;
|
||||
$yellow: #FDB631;
|
||||
$orange: #E67E22;
|
||||
$green: #32B796;
|
||||
$green: #5ED17E;
|
||||
$gray: #000000;
|
||||
$light-gray: #F4F4F4;
|
||||
$warn: #3d63cc;
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@ a:hover {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
|
|
@ -146,11 +147,6 @@ a:hover {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.modal-picture {
|
||||
width: 50px;
|
||||
|
|
|
|||
|
|
@ -2,3 +2,18 @@
|
|||
@import "home";
|
||||
@import "contacts";
|
||||
@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])
|
||||
request = Request.create!(chat_room: chat_room, user: contact)
|
||||
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', {
|
||||
message: {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -36,3 +36,8 @@ if (contactsPage) {
|
|||
removeActiveClass(contacts);
|
||||
}
|
||||
|
||||
const triggerCalleeModalEvent = () => {
|
||||
$("#calleeModal").modal('show');
|
||||
}
|
||||
|
||||
export { triggerCalleeModalEvent }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import ActionCable from 'actioncable'
|
||||
import { triggerCalleeModalEvent } from "./application.js";
|
||||
|
||||
// create App object with key cable == new consumer
|
||||
(function() {
|
||||
|
|
@ -19,17 +20,20 @@ App.cable.subscriptions.create({
|
|||
console.log('Connected to NotificationsChannel')
|
||||
},
|
||||
received: data => {
|
||||
// console.log(data["message"]["user_id"])
|
||||
// console.log(userId)
|
||||
console.log("received broadcast")
|
||||
// console.log(data.body)
|
||||
|
||||
if (data.head === 302 && data.body["caller"] === userId && data.path) {
|
||||
window.location.pathname = data.path
|
||||
} else if (data["message"]["user_id"] === userId) { // Some error appears here but it is not fatal
|
||||
console.log("TRIGGER MODAL")
|
||||
} 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 {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
<%= 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>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
|
|
@ -35,8 +34,8 @@
|
|||
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do %>
|
||||
<i class="fas fa-times-circle"></i>
|
||||
<% end %>
|
||||
<div class="container">
|
||||
<div class="modal-container modal-flex">
|
||||
|
||||
<div class="modal-container">
|
||||
<% 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>
|
||||
<% else %>
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,11 +33,44 @@
|
|||
|
||||
<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
|
||||
<div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
|
||||
<input type="hidden" id="caller-id" name="caller_id" value=""/>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="calleeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="vertical-alignment-helper">
|
||||
<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=""/>
|
||||
<input type="submit" id="accept-button" class="btn btn-primary" id="accept-button" style="display: none;" value="ACCEPT CALL"/>
|
||||
<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 'local_video' %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue