digitaleagenturnc/chat/templates/chat/chat_allusers.html

79 lines
2.0 KiB
HTML

<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;
}
.status-circle {
width: 15px;
height: 15px;
border-radius: 50%;
bottom: 0;
right: 0;
position: absolute;
}
</style>
<div class="card col-2" style="position: fixed; right: 35px; bottom: 75px;">
<div class="card-body">
<h4>Chat öffnen
<button class="btn btn-sm btn-secondary" style="float: right;" onclick="javascript:$('#chat_alluserscontent').fadeOut()"><small><i class="fas fa-times"></i></small></button>
</h4>
<hr>
{% for user in usersofagency %}
<span>
<div class='icon-container'>
<img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
<div class='status-circle' 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>
{{user.first_name}} {{user.last_name}}
<button class="btn btn-sm btn-secondary" style="float: right;" onclick="javascript:openChat({{user.pk}})"><small><i class="far fa-comment"></i></small></button>
</span>
<br />
{% endfor %}
</div>
</div>
<script type="text/javascript">
function openChat(userid){
$("#chat_alluserscontent").hide();
$.ajax(
{
type: "GET",
url: "{% url 'chat:chat-ajax' %}",
data : {
action : "startnewchat_user_user",
new_chat_userid : userid,
is_basechat : 1
},
success: function( data )
{
$("#dynamicchatwindow_content").html(data);
$("#dynamicchatwindow").show();
}
});
}
</script>