Merge pull request #47 from beatriceo/front-end

added callee modal
This commit is contained in:
Beatrice Olivera 2018-09-03 18:32:50 +01:00 committed by GitHub
commit cf7b8271b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 87 additions and 20 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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

View File

@ -36,3 +36,8 @@ if (contactsPage) {
removeActiveClass(contacts); removeActiveClass(contacts);
} }
const triggerCalleeModalEvent = () => {
$("#calleeModal").modal('show');
}
export { triggerCalleeModalEvent }

View File

@ -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 {

View File

@ -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>

View File

@ -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 -->
<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="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">
</form> <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' %>