QS 0.9.1 Chat noch ein wenig verbessert
This commit is contained in:
Holger Trampe
parent
984751c59b
commit
a84dbf9d59
|
|
@ -1,8 +1,8 @@
|
|||
{% load counter_tag %}
|
||||
{% if roomdata.creator == user %}
|
||||
<h4 id="chattitle">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>
|
||||
<h4 id="chattitle" style="margin-top: -3px;">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>
|
||||
{% else %}
|
||||
<h4 id="chattitle">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>
|
||||
<h4 id="chattitle" style="margin-top: -3px;">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
{% load counter_tag %}
|
||||
<h4 id="chattitle" style="margin-top: -3px">{{roomdata.roomname}}
|
||||
{% if user in roomdata.chatmembers_admin.all or user == roomdata.creator %}
|
||||
<span style="margin-top: -10px">
|
||||
<button class="btn btn-secondary btn-sm ml-2 " style="float: right;" onclick="javascript:$('#confirm-delete_{{roomdata.pk}}').modal('toggle')"><small><i class="fas fa-trash"></i></small></button>
|
||||
<button class="btn btn-secondary btn-sm " onclick="window.location.href='{% url 'chat:chat-update' roomdata.pk %}'" style="float: right;"><small><i class="fas fa-pen"></i></small></button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</h4>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,16 +55,16 @@
|
|||
}
|
||||
</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." class="far fa-question-circle"></i></small>
|
||||
</h3>
|
||||
<small><b>ACHTUNG! Der Chat befindet sich im Beta-Stadium! Bitte vermeiden Sie es daher, persönliche oder intime Informationen zu verschicken, bis alle Funktionen ausreichend erprobt sind. Vielen Dank!</b></small>
|
||||
<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>
|
||||
|
||||
<div class="col-3">
|
||||
<!--
|
||||
<h5>Mitarbeiter</h5>
|
||||
<hr>
|
||||
{% for user in usersofagency %}
|
||||
<div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
|
||||
|
|
@ -109,16 +109,133 @@
|
|||
</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 class="col-9" style="" id="mainchatcontent">
|
||||
|
||||
</div><!-- END CHATAREA -->
|
||||
</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;
|
||||
|
|
@ -147,8 +264,12 @@
|
|||
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();
|
||||
}
|
||||
|
|
@ -167,8 +288,12 @@
|
|||
groupchatid : clickedroomid,
|
||||
is_basechat : 0
|
||||
},
|
||||
beforeSend: function(request) {
|
||||
$("#overlay").fadeIn();
|
||||
},
|
||||
success: function( data )
|
||||
{
|
||||
$("#overlay").fadeOut();
|
||||
if(creator_id != false && chatmember_id != false){
|
||||
chatwebsocket.close();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue