From 7fba2d782d25fbe30e11814c8769e3a429d8a2af Mon Sep 17 00:00:00 2001
From: Harry Bomrah <harry@rulingcom.com>
Date: Fri, 4 Sep 2015 02:37:56 +0800
Subject: [PATCH] now smart seen by works also reply added.

---
 app/assets/javascripts/jquery.viewport.js   | 58 +++++++++++++++++++++
 app/controllers/admin/tickets_controller.rb |  2 +-
 app/views/admin/tickets/_query.html.erb     |  2 +-
 app/views/admin/tickets/_response.html.erb  | 23 ++++----
 app/views/admin/tickets/show.html.erb       | 51 +++++++++++++++---
 5 files changed, 117 insertions(+), 19 deletions(-)
 create mode 100644 app/assets/javascripts/jquery.viewport.js

diff --git a/app/assets/javascripts/jquery.viewport.js b/app/assets/javascripts/jquery.viewport.js
new file mode 100644
index 0000000..9c126bc
--- /dev/null
+++ b/app/assets/javascripts/jquery.viewport.js
@@ -0,0 +1,58 @@
+/*
+ * Viewport - jQuery selectors for finding elements in viewport
+ *
+ * Copyright (c) 2008-2009 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *  http://www.appelsiini.net/projects/viewport
+ *
+ */
+(function($) {
+    
+    $.belowthefold = function(element, settings) {
+        var fold = $(window).height() + $(window).scrollTop();
+        return fold <= $(element).offset().top - settings.threshold;
+    };
+
+    $.abovethetop = function(element, settings) {
+        var top = $(window).scrollTop();
+        return top >= $(element).offset().top + $(element).height() - settings.threshold;
+    };
+    
+    $.rightofscreen = function(element, settings) {
+        var fold = $(window).width() + $(window).scrollLeft();
+        return fold <= $(element).offset().left - settings.threshold;
+    };
+    
+    $.leftofscreen = function(element, settings) {
+        var left = $(window).scrollLeft();
+        return left >= $(element).offset().left + $(element).width() - settings.threshold;
+    };
+    
+    $.inviewport = function(element, settings) {
+        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+    };
+    
+    $.extend($.expr[':'], {
+        "below-the-fold": function(a, i, m) {
+            return $.belowthefold(a, {threshold : 0});
+        },
+        "above-the-top": function(a, i, m) {
+            return $.abovethetop(a, {threshold : 0});
+        },
+        "left-of-screen": function(a, i, m) {
+            return $.leftofscreen(a, {threshold : 0});
+        },
+        "right-of-screen": function(a, i, m) {
+            return $.rightofscreen(a, {threshold : 0});
+        },
+        "in-viewport": function(a, i, m) {
+            return $.inviewport(a, {threshold : 0});
+        }
+    });
+
+    
+})(jQuery);
\ No newline at end of file
diff --git a/app/controllers/admin/tickets_controller.rb b/app/controllers/admin/tickets_controller.rb
index 363687d..3789285 100644
--- a/app/controllers/admin/tickets_controller.rb
+++ b/app/controllers/admin/tickets_controller.rb
@@ -44,7 +44,7 @@ class Admin::TicketsController < OrbitAdminController
     @members = []
     MemberProfile.all.each do |mp|
       user = mp.user rescue nil
-      if !user.nil? && user.id.to_s != current_user.id.to_s && user.user_name != "rulingcom"
+      if !user.nil? && user.id.to_s != current_user.id.to_s
         avatar = (mp.avatar.thumb.url == "thumb_person.png" ? "/assets/thumb_person.png" : mp.avatar.thumb.url rescue "/assets/thumb_person.png")
         @members << {
           "id" => user.id.to_s,
diff --git a/app/views/admin/tickets/_query.html.erb b/app/views/admin/tickets/_query.html.erb
index 40b64e7..ec1771e 100644
--- a/app/views/admin/tickets/_query.html.erb
+++ b/app/views/admin/tickets/_query.html.erb
@@ -17,7 +17,7 @@
               <div class="ticket-internal-response-wrap">
                 <div class="ticket-internal-response">
                   <input type="hidden" name="ticket_query_id" value="<%= query.id.to_s %>" />
-                  <input type="checkbox" name="internal_response" value="1">
+                  <input type="checkbox" checked="checked" name="internal_response" value="1">
                   <span class="ticket-internal-response">Internal Response</span>
                 </div>
                 <div class="ticket-tag-member">
diff --git a/app/views/admin/tickets/_response.html.erb b/app/views/admin/tickets/_response.html.erb
index aff17a4..6e260de 100644
--- a/app/views/admin/tickets/_response.html.erb
+++ b/app/views/admin/tickets/_response.html.erb
@@ -1,4 +1,4 @@
- <div class="ticket-response-item" data-scroll-id="response_<%= response.id.to_s %>">
+ <div class="ticket-response-item" data-scroll-id="response_<%= response.id.to_s %>" data-response-by="<%= response.response_by %>">
   <div class="ticket-response-meta">
     <div class="ticket-response-author">
       <% user = User.find(response.response_by) rescue nil %>
@@ -14,15 +14,20 @@
     <div class="ticket-response-created-date">
       <% dt = DateTime.parse(response.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
     </div>
-    <% if user.id.to_s == current_user.id.to_s %>
       <div class="ticket-response-delete-wrap">
-        <a class="ticket-response-delete" href="/admin/ticket/delete_response" data-response-id="<%= response.id.to_s %>">
-          <i class="ticket-response-delete-icon fa fa-trash"></i>
-          Delete
-        </a>
+        <% if user.id.to_s == current_user.id.to_s %>
+          <a class="ticket-response-delete" href="/admin/ticket/delete_response" data-response-id="<%= response.id.to_s %>">
+            <i class="ticket-response-delete-icon fa fa-trash"></i>
+            Delete
+          </a>
+        <% end %>
+        <% if response.user_tags.include?(current_user.id.to_s) %>
+          <a href="" class="reply-response" data-response-id="<%= response.id.to_s %>">
+            <i class="fa fa-share"></i>
+            Reply
+          </a>
+        <% end %>
       </div>
-    <% end %>
-
     <div class="ticket-internal-comment-wrap">
       <div class="ticket-internal-wrap">
         <% response.user_tags.each do |u| 
@@ -42,7 +47,7 @@
       </div>
     </div>
   </div>
-  <div class="ticket-response-content <%= response.internal_response ? "in-house" : "" %>">
+  <div class="ticket-response-content <%= response.internal_response ? "in-house" : "" %>" data-user-tags="<%= response.user_tags.to_s %>" data-response-id="<%= response.id.to_s %>">
     <%= response.response.html_safe %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/views/admin/tickets/show.html.erb b/app/views/admin/tickets/show.html.erb
index 351c926..5ebdf1c 100644
--- a/app/views/admin/tickets/show.html.erb
+++ b/app/views/admin/tickets/show.html.erb
@@ -7,6 +7,7 @@
   <%= javascript_include_tag "lib/jquery.form.js" %>
   <%= javascript_include_tag "validator" %>
   <%= javascript_include_tag "select2/select2.min" %>
+  <%= javascript_include_tag "jquery.viewport" %>
 <% end %>
 <% if !@ticket .nil? %>
 <% case @ticket.status
@@ -176,8 +177,11 @@
   </div>
 <% end %>
 <script type="text/javascript">
-  var locale = "<%= I18n.locale.to_s %>";
-  var fv = new FormValidator($("#reopen-form"));
+(function(){
+  var locale = "<%= I18n.locale.to_s %>",
+      fv = new FormValidator($("#reopen-form")),
+      user_id = "<%= current_user.id.to_s %>";
+
   $("#reopen-form-submit").on("click",function(){
     for (instance in CKEDITOR.instances) {
       CKEDITOR.instances[instance].updateElement();
@@ -245,7 +249,7 @@ $(document).ready(function(){
         );
         return $state;
       },
-      placeholder: "Add Members"
+      placeholder: "Tag Members"
     });
 
 })
@@ -264,12 +268,11 @@ $(document).ready(function(){
 
 
   function switchTooltip() {
-    var $switch = $('.onoffswitch');
-    var $input = $switch.children('input');
-    var $tooltip = $switch.find('.ticket-tooltip-wrap');
-    var activeCls = 'active';
+    var $switch = $('.onoffswitch'),
+        $input = $switch.children('input'),
+        $tooltip = $switch.find('.ticket-tooltip-wrap');
 
-      if ($input.hasClass(activeCls)) {
+      if ($input.hasClass("active")) {
         $tooltip.text('This ticket is marked urgent, click to unmark');
       } else {
         $tooltip.text('Click to mark this ticket urgent');
@@ -330,4 +333,36 @@ $(document).ready(function(){
     return false;
   })
 
+  $("body").on("click",".reply-response",function(){
+    var el = $(this),
+        response_id = el.data("response-id");
+    $(".member_tags").select2("val",[$("div[data-scroll-id=response_" + response_id + "]").data("response-by")]);
+    $("html, body").animate({ scrollTop: ($("#form_container").offset().top - 50) }, "slow");
+    return false;
+  })
+
+  var timer = null;
+  $(document).on("scroll",function(){
+    clearTimeout(timer);
+    timer = setTimeout(function(){
+      var responses_seen = $("div[data-user-tags*=" + user_id + "]:in-viewport");
+      $.each(responses_seen,function(){
+        var el = $(this),
+            avatar = $("div[data-scroll-id=response_" + el.data("response-id") + "]").find("img[data-avatar-id="+ user_id +"]");
+        if(!avatar.hasClass("read")){
+          $.ajax({
+            url : "/admin/comments/read",
+            dataType : "json",
+            type : "post",
+            data : {"response_id" : el.data("response-id")}
+          }).done(function(data){
+            if(data.success){
+              avatar.addClass("read");
+            }
+          })
+        }
+      })
+    },1000);
+  })
+})();
 </script>