tickets/app/views/admin/tickets/show.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
  <%= stylesheet_link_tag "tickets/ticket_show" %>
  <%= stylesheet_link_tag "select2/select2" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= 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
  when "open"
    badge_class = "t-status-open"
  when "closed"
    badge_class = "t-status-close"
  when "commenced"
    badge_class = "t-status-processing"
  end
%>
  <div class="ticket-home-btn-wrap ticket-container">
    <a class="btn btn-normal" href="/admin/tickets">
      <i class="ticket-home-btn-icon fa fa-home"></i>
      Back to Dashboard
    </a>
    <% if !@ticket.registered_site.nil?
      <a href="http://<%= @ticket.registered_site.site_domain %>" target="_blank" class="btn btn-normal">
        <i class="ticket-external-link-icon fa fa-external-link"></i>
          <%= @ticket.registered_site.title %>
      </a>
       <a href="/admin/tickets/search?keywords=sitename%3A+<%= @ticket.registered_site.title %>" target="_blank" class="btn btn-normal">
        <i class="ticket-external-link-icon fa fa-search"></i>
          Search tickets from <b><i><%= @ticket.registered_site.title %></i></b>
      </a>
    <% end %>
  </div>
  <div class="ticket-wrap">
    <div class="ticket-header">
     <div id="ticket-urgent-marker" class="ticket-heading-wrap <%= "active" if @ticket.is_urgent? %>" >
       <h3 class="ticket-heading">#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %>
       <% if !@ticket.taken_by.nil? %>
        <% user = User.find(@ticket.taken_by) %>
          <% if user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png"
            avatar = "/assets/thumb_person.png"
          else
            avatar = user.member_profile.avatar.thumb.url
          end
        %>
        <div class="ticket-heading-avatar tool-tip-parent">
          <img class="t-avatar" src="<%= avatar %>">
          <span class="ticket-heading-avatar-name tool-tip"><%= user.name %></span>
        </div>
        <% end %>
       </h3>
       <div class="ticket-action">
         <div class="ticket-dropdown">
           <a class="ticket-dropdown-toggle" data-toggle="dropdown" href="#">
             <i class="ticket-dropdown-icon fa fa-angle-down"></i>
           </a>
           <ul class="t-list-unstyled dropdown-menu" role="menu">
             <% if @ticket.status == "open" %>
              <li>
                 <a class="ticket-start t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/start" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-times-circle"></i>
                   Start
                 </a>
               </li>
               <li>
                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-eye-slash"></i>
                   Close
                 </a>
               </li>
             <% elsif @ticket.status == "commenced" %>
               <li>
                 <a class="ticket-start t-item" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>/leave" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-times-circle"></i>
                   Leave
                 </a>
               </li>
               <li>
                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-eye-slash"></i>
                   Close
                 </a>
               </li>
             <% elsif @ticket.status == "closed" %>
               <% if  @ticket.can_be_reopened? %>
               <li>
                 <% if params[:reopen] == "true" %>
                   <a href="#" class="reopen-back-btn t-item" >Cancel</a>
                 <% else %>
                   <a href="/admin/tickets/<%= @ticket.id.to_s %>?reopen=true" class="t-btn">Reopen</a>
                 <% end %>
               </li>
               <% else %>
                 <li>
                   This ticket cannot be reopened. Please create a new ticket.
                 </li>
               <% end %>
             <% end %>
             <li>
                <a class="ticket-delete t-item" data-method="delete" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>" data-ticket-id="<%= @ticket.id.to_s %>">
                     <i class="fa fa-trash-o"></i>
                   Delete
                </a>
             </li>
           </ul>
         </div>
       </div>
     </div>
     <div class="ticket-meta-wrap clearfix">
       <div class="ticket-meta">
         <span class="ticket-author t-label t-label-primary">
           <i class="icon-user"></i>
           <%= !@ticket.ticket_creater_name.nil? ? @ticket.ticket_creater_name : @ticket.ticket_creater_id %>
           </span>
         <span class="ticket-created-date t-label t-label-primary">
           <i class="icon-time"></i>
           <% dt = DateTime.parse(@ticket.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
         </span>
       </div>
       <div class="ticket-state">
        <% if @ticket.status != "closed" %>
          <div class="onoffswitch ticket-toggle-urgent" title="">
              <span class="ticket-tooltip-wrap"></span>
              <input type="checkbox" name="onoffswitch"  class="onoffswitch-checkbox <%= "active" if @ticket.is_urgent? %>" id="myonoffswitch" data-url="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent">
              <label class="onoffswitch-label" for="myonoffswitch">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
              </label>
          </div>
        <% end %>
         <span class="ticket-status t-status <%= badge_class %>">
           <i class="fa fa-eye"></i>
           <%= @ticket.status %>
         </span>
         <span class="ticket-category t-category t-category-primary">
           <a class="ticket-category-dropdown" data-toggle="dropdown" href="#">
            <i class="fa fa-th-list"></i>
            <%= @ticket.category.title %>
            <i class="fa fa-angle-down"></i>
           </a>
            <ul class="ticket-category-select dropdown-menu" role="menu">
            <% @categories.each do |category| %>
              <% if @ticket.category_id.to_s != category.id.to_s %>
                <li>
                  <a class="ticket-start t-item ticket-category-select-option" href="#" data-category-id="<%= category.id.to_s %>">
                    <%= category.title %>
                  </a>
                </li>
                <% end %>
              <% end %>
            </ul>
         </span>
       </div>
     </div>
    </div>

    <div id="query_box" class="ticket-content">
      <%= render :partial => "query", :collection => @ticket.ticket_queries.asc(:created_at) %>
    </div>
    <% if params[:reopen] == "true"%>
      <% if @ticket.status == "closed" %>
        <div id="form_container" class="ticket-editor">
          <form method="post" action="/admin/tickets/<%= @ticket.id.to_s %>/reopen" id="reopen-form" for="query">
            <textarea class="ckeditor" name="ticket_query" data-fv-validation="required;" data-fv-messages="Cannot be empty;"></textarea>
          </form>
          <input type="submit" id="reopen-form-submit" class="btn btn-primary" value="Reopen" />
          <input type="button" class="btn reopen-back-btn" value="Cancel" />
        </div>
        <div id="ticket_loader" style="display:none;">
          <%= image_tag("preloader.gif", size: "50")  %>
          <div>Posting your query.</div>
        </div>
      <% else %>
        <h4> Ticket is already opened. </h4>
      <% end %>
    <% end %>
  </div>
<% else %>
  <div>
    Error in fetching ticket.
  </div>
<% end %>
<script type="text/javascript">
(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();
    }
    if(fv.isFormValidated()){
      $("#form_container").hide();
      $("#ticket_loader").show();
      fv.form.ajaxSubmit({
        success : function(data){
          setTimeout(function(){
            if(fv.form.attr("for") == "query"){
              $("#form_container").remove();
              window.location.href = window.location.pathname;
            }else{
              fv.reset();
              $(".member_tags").select2("val","");
              for (instance in CKEDITOR.instances) {
                 CKEDITOR.instances[instance].setData("");
              }
              $("#form_container").show();
              $("#response-container").append(data);
            }
            $("#ticket_loader").hide();
          },500)
        },
        error : function(){
          $("#ticket_loader").find("img").hide();
          $("#ticket_loader").find("div").text("There was some error.");
        }
      });
    }
  })

$(document).ready(function(){
  if(window.location.hash != ""){
    var item = window.location.hash.replace("#","");
        el = $("div[data-scroll-id=" + item + "]");
      $('html, body').scrollTop(el.offset().top - 100);
      el.addClass("scroll-element");
      $.ajax({
          url : "/admin/comments/read",
          dataType : "json",
          type : "post",
          data : {"response_id" : item.split("_")[1]}
      }).done(function(data){
        if(data.success){
          el.find("img[data-avatar-id="+ data.user_id +"]").addClass("read");
        }
      })
      el.one("mouseover",function(){
        el.css('border-color', 'transparent');
      })
  }

  $(".member_tags").select2({
      formatResult: function (el) {
        var $el = $(el.element),
            member = $el.data("member"),
            name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
            user_name = "(" + member.user_name + ")",
            text = name + " " + user_name;
        if (!el.id) { return el.text; }
        var $state = $(
          '<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
        );
        return $state;
      },
      placeholder: "Tag Members"
    });

})
  $(".reopen-back-btn").on("click",function(){
    for (instance in CKEDITOR.instances) {
      CKEDITOR.instances[instance].updateElement();
    }
    if(fv.form.find("textarea").val() == ""){
      window.history.back();
    }else if(confirm("Are you sure, you want to discard changes?")){
      window.history.back();
    }else{
      return false;
    }
  });


  function switchTooltip() {
    var $switch = $('.onoffswitch'),
        $input = $switch.children('input'),
        $tooltip = $switch.find('.ticket-tooltip-wrap');

      if ($input.hasClass("active")) {
        $tooltip.text('This ticket is marked urgent, click to unmark');
      } else {
        $tooltip.text('Click to mark this ticket urgent');
      }

  }

  $(".ticket-category-select-option").on("click",function(){
    var el = $(this);
    if(confirm("Are you sure?")){
      window.location.href = window.location.pathname + "/changecategory?category_id=" + el.data("category-id");
    }
    return false;
  });

  switchTooltip();

  $("#myonoffswitch").on("click",function(){
    var $el = $(this);
    var mark_urgent = !$el.hasClass("active");
    $.ajax({
      url : $el.attr("data-url"),
      type : "POST",
      data : {"mark_urgent": mark_urgent},
      dataType : "json"
    }).done(function(response){
      if(response.success){
        if(mark_urgent){
          if(response.can_make_urgent){
            $("#ticket-urgent-marker").addClass('active');
            $el.addClass("active");
          }else{
            alert("Urgent quota for this category is already over.");
          }
        }else{
          $("#ticket-urgent-marker").removeClass('active');
          $el.removeClass("active");
        }
        
      switchTooltip();
      }
    })
    return false;
  })

  $("body").on("click",".ticket-response-delete",function(){
    var el = $(this);
    $.ajax({
      url : el.attr("href"),
      data : {"response_id" : el.data("response-id")},
      type : "delete",
      dataType : "json"
    }).done(function(){
      $("div[data-scroll-id=response_" + el.data("response-id") + "]").slideUp(function(){
        $(this).remove();
      })
    })
    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 openImageWindow = null;
  $("body").on("click", ".ticket-response-content img, .ticket-query img", function(){
    var el = $(this);
    if(el.parent().prop("tagName") != "A"){
      if(openImageWindow == null || openImageWindow.closed){
        openImageWindow = window.open(el.attr("src"));
      }else{
        openImageWindow.location = el.attr("src");
      }
    }
  })

  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>