digitaleagenturnc/chat/templates/chat/chatmanagement.html

{% extends "users/base.html" %}
{% block content %}
{% if request.user.profile.agency.module_chat %}
<style type="text/css">
.roundimg {
  border-radius: 50%;  
  z-index: 999;
    height: 100%;
  width: 100%;
  border-radius: 50%;
}
.icon-container {
  width: 50px;
  height: 50px;
  position: relative;
  float: left;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;    
  bottom: 0;
  right: 0;
  position: absolute;
}

.chatmessageele_me
{
  padding: 5px;
  border-radius: 15px;
  background-color: #f8f9fc;
  float: right; 
  text-align: right;
}

.chatmessageele_other
{
  padding: 5px;
  border-radius: 15px;
  background-color: #858796;
  float: left; 
  text-align: left;
  color: #ffffff;
}

.scroll {
    max-height: 600px;
    min-height: 600px;
    overflow-y: auto;
}

</style>


<div class="content-section col-12">
  <h3>Chat&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verwalten Sie hier Ihre Chatverläufe und starten Sie neue Unterhaltungen mit Mitarbeitern und anderen Agenturen." class="far fa-question-circle"></i></small>
  </h3>
  <hr>
</div>

<div class="row col">
  <div class="col-3">    
    <h4>Mitarbeiter und Räume</h4>        
    <hr>
    {% for user in usersofagency %}
    <div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
      <div class="card-body">
        <div style="float: left;" class="col-12 ">
          <div class='icon-container mr-2'>
            <img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
            <div class='status-circle' id="userstatus_circle_{{user.pk}}" style="background-color: {% if user in onlineusers %} 
                  {% if user.profile.onlinestatus == 0 %}
                    green
                  {% elif user.profile.onlinestatus == 1 %}
                    red
                  {% elif user.profile.onlinestatus == 2 %}
                    orange
                  {% elif user.profile.onlinestatus == 3 %}
                    grey
                  {% endif %}
              {% else %} grey {% endif %};">
            </div>       
          </div>
          <h5 class="mt-3">{{user.first_name}} {{user.last_name}}</h5>      
        </div> 
      </div>
    </div>
      {% endfor %}
  </div>
  <div class="col-9" style="" id="mainchatcontent">
    
  </div><!-- END CHATAREA -->
</div>

<script type="text/javascript">

  creator_id = false;
  chatmember_id = false;

  $(".hoverchatcard").hover(function(){
    var $this = $(this);
    $this.data('bgcolor', $this.css('background-color')).css('background-color', '#f8f9fc');
  }, function(){
    var $this = $(this);
    $this.data('bgcolor', $this.css('background-color')).css('background-color', '#FFFFFF');
  }
  )

  $(".hoverchatcard").click(function(){
    
    $.ajax(
    {
      type: "GET",
      url: "{% url 'chat:chat-ajax' %}",
      data : {
        action : "startnewchat_user_user",
        new_chat_userid : $(this)[0]["id"].split("_")[1]
      },
      success: function( data ) 
      { 
        if(creator_id != false && chatmember_id != false){
          chatwebsocket.close();
        }
        $("#mainchatcontent").html(data);
      }
   });
  });

  function updatePresenceLive() {                                
    $.ajax(
    {
      type: "GET",
      url: "{% url 'chat:chtaajax-getloggedusers-data' %}",
      data : {
        action : "getloggedusers"
      },
      success: function( data ) 
      { 
          console.log(data);
          counter = 0;
          $( ".status-circle" ).each(function( index ) {            
            if(data["user_online_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "green");
            }
            else if(data["user_besch_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "red");
            }
            else if(data["user_abw_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "orange");
            }
            else{
              $("#" + $(this)[0]["id"]).css("background-color", "grey"); 
            }            
          });          
      }
   });
  };
</script>


{% else %}
<h3>Das Module Chat wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}
{% endblock content %}