Merge pull request #47 from beatriceo/front-end

added callee modal

app/assets/stylesheets/config/_colors.scss

@@ -5,7 +5,7 @@ $red: #EE5F5B;
 $blue: #469AE0;
 $yellow: #FDB631;
 $orange: #E67E22;
-$green: #32B796;
+$green: #5ED17E;
 $gray: #000000;
 $light-gray: #F4F4F4;
 $warn: #3d63cc;

app/assets/stylesheets/pages/_contacts.scss

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

app/assets/stylesheets/pages/_index.scss

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

app/controllers/pages_controller.rb

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

app/javascript/packs/application.js

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

app/javascript/packs/notifications.js

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

app/views/pages/_contact.html.erb

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

app/views/pages/index.html.erb

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