341 lines
11 KiB
HTML
341 lines
11 KiB
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_breaker
|
|
{
|
|
float: right;
|
|
}
|
|
.chatmessageele_me
|
|
{
|
|
padding: 5px;
|
|
border-radius: 15px;
|
|
background-color: #cfe6f4;
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
.chatmessageele_other
|
|
{
|
|
padding: 5px;
|
|
border-radius: 15px;
|
|
background-color: #f8f9fc;
|
|
float: left;
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|
|
|
|
.scroll {
|
|
max-height: 600px;
|
|
min-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
<div class="content-section col-12">
|
|
<h3>Chat <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. Alle Nachrichten werden verschlüsselt übertragen und in der Datenbank ebenfalls verschlüsselt gespeichert." class="far fa-question-circle"></i></small>
|
|
</h3>
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="row col">
|
|
|
|
<div class="col-3">
|
|
<!--
|
|
<h5>Mitarbeiter</h5>
|
|
<hr>
|
|
{% for user in usersofagency %}
|
|
<div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
|
|
<div class="card-body" style="margin: -15px !important;" >
|
|
<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 %}
|
|
<hr>
|
|
<h5>Chaträume
|
|
<button class="btn btn-primary btn-sm" style="float: right; margin-top: -6px !important;" data-toggle="tooltip" data-placement="top" title="Erstellen Sie einen Gruppenchat." onclick="window.location.href='{% url 'chat:chat-addgroup' %}'"><i class="fas fa-plus"></i></button>
|
|
</h5>
|
|
<hr>
|
|
{% for chatroom in chatrooms %}
|
|
{% if user in chatroom.chatmembers.all or user in chatroom.chatmembers_admin.all or user == chatroom.creator and chatroom.chatroomtype == 1 %}
|
|
<div class="card mb-2 hoverchatcard" id="groupchat_{{chatroom.pk}}">
|
|
<div class="card-body" style="margin: -15px !important;">
|
|
<div style="float: left;" class="col-12 ">
|
|
<h5 class="mt-3">{{chatroom.roomname}}
|
|
</h5>
|
|
<small style="font-size: 10pt;">{% for member in chatroom.chatmembers.all %}
|
|
{{member.first_name}} {{member.last_name}}{% if forloop.counter < chatroom.chatmembers.all|length %}, {% endif %}
|
|
{% endfor %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
-->
|
|
|
|
|
|
<div id="accordion">
|
|
<div class="card">
|
|
<div class="card-header" id="users">
|
|
<h5 class="mb-0">
|
|
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Mitarbeiter
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne" class="collapse show" aria-labelledby="users" data-parent="#accordion">
|
|
<div class="card-body">
|
|
{% for user in usersofagency %}
|
|
<div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
|
|
<div class="card-body" style="margin: -15px !important;" >
|
|
<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>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header" id="chatrooms">
|
|
<h5 class="mb-0">
|
|
<button class="btn btn-link" data-toggle="collapse" data-target="#rooms" aria-expanded="true" aria-controls="rooms">
|
|
Chaträume
|
|
</button>
|
|
<button class="btn btn-primary btn-sm" style="float: right; " data-toggle="tooltip" data-placement="top" title="Erstellen Sie einen Gruppenchat." onclick="window.location.href='{% url 'chat:chat-addgroup' %}'"><i class="fas fa-plus"></i></button>
|
|
</h5>
|
|
</div>
|
|
<div id="rooms" class="collapse" aria-labelledby="chatrooms" data-parent="#accordion">
|
|
<div class="card-body">
|
|
{% for chatroom in chatrooms %}
|
|
{% if user in chatroom.chatmembers.all or user in chatroom.chatmembers_admin.all or user == chatroom.creator and chatroom.chatroomtype == 1 %}
|
|
<div class="card mb-2 hoverchatcard" id="groupchat_{{chatroom.pk}}">
|
|
<div class="card-body" style="margin: -15px !important;">
|
|
<div style="float: left;" class="col-12 ">
|
|
<h5 class="mt-3">{{chatroom.roomname}}
|
|
</h5>
|
|
<small style="font-size: 10pt;">{% for member in chatroom.chatmembers.all %}
|
|
{{member.first_name}} {{member.last_name}}{% if forloop.counter < chatroom.chatmembers.all|length %}, {% endif %}
|
|
{% endfor %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="col-9" style="" id="mainchatcontent"></div><!-- END CHATAREA -->
|
|
</div>
|
|
|
|
<!-- LOADER OVERLAY -->
|
|
<div id="overlay" style="display: none;">
|
|
<div class="loader"></div>
|
|
</div>
|
|
<style>
|
|
.loader {
|
|
position: relative;
|
|
border: 7px solid #d3d3d3;
|
|
border-radius: 50%;
|
|
border-top: 7px solid red;
|
|
width: 70px;
|
|
height: 70px;
|
|
left:50%;
|
|
top:35%;
|
|
-webkit-animation: spin 1s linear infinite; /* Safari */
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
#overlay{
|
|
position: absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
opacity: .4;
|
|
}
|
|
.container{
|
|
position:relative;
|
|
height: 300px;
|
|
width: 200px;
|
|
border:1px solid red;
|
|
}
|
|
|
|
/* Safari */
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
|
|
<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(){
|
|
clickedroomtype = $(this)[0]["id"].split("_")[0];
|
|
clickedroomid = $(this)[0]["id"].split("_")[1];
|
|
|
|
if (clickedroomtype == "userchat"){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "{% url 'chat:chat-ajax' %}",
|
|
data : {
|
|
action : "startnewchat_user_user",
|
|
new_chat_userid : $(this)[0]["id"].split("_")[1],
|
|
is_basechat : 0
|
|
},
|
|
beforeSend: function(request) {
|
|
$("#overlay").fadeIn();
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#overlay").fadeOut();
|
|
if(creator_id != false && chatmember_id != false){
|
|
chatwebsocket.close();
|
|
}
|
|
$("#mainchatcontent").html(data);
|
|
}
|
|
});
|
|
}
|
|
//Open Groupchat
|
|
else{
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "{% url 'chat:chat-ajax' %}",
|
|
data : {
|
|
action : "startnewchat_groupchat",
|
|
groupchatid : clickedroomid,
|
|
is_basechat : 0
|
|
},
|
|
beforeSend: function(request) {
|
|
$("#overlay").fadeIn();
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#overlay").fadeOut();
|
|
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 )
|
|
{
|
|
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 %}
|