Chat mit BUtton für eine Person FERTIG!
This commit is contained in:
Holger Trampe
parent
bcc87e7811
commit
1edadf3a76
|
|
@ -23,7 +23,7 @@
|
|||
</style>
|
||||
<div class="card col-2" style="position: fixed; right: 35px; bottom: 75px;">
|
||||
<div class="card-body">
|
||||
<h4>Chat starten
|
||||
<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>
|
||||
|
|
@ -32,16 +32,48 @@
|
|||
|
||||
<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 %} green {% else %} grey {% endif %};">
|
||||
<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;"><small><i class="far fa-comment"></i></small></button>
|
||||
<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>
|
||||
<div class="chat-popup">
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
{% load counter_tag %}
|
||||
{% if roomdata.creator == user %}
|
||||
<h4 id="chattitle">Gespräch mit {{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>
|
||||
<h4 id="chattitle">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>
|
||||
{% else %}
|
||||
<h4 id="chattitle">Gespräch mit {{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>
|
||||
<h4 id="chattitle">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
|
@ -56,39 +56,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% endfor %}
|
||||
|
||||
<!-- SINGLE MESSAGE -->
|
||||
<!--
|
||||
<div style="" class="chatmessageele_me col-7 mb-3 ">
|
||||
<div class='icon-container ml-2 mt-1 ' style="float: right;">
|
||||
<img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
|
||||
</div>
|
||||
<h6 class="mt-3"><small>{{user.first_name}} {{user.last_name}}, 13:45 18.05.2020</small></h6>
|
||||
<div style="text-align: left;" class="mt-1">
|
||||
<span style="float: right !important; font-size: 1.0em;">
|
||||
Ich finde schon, dass wir hier langsam mal mit den Daten arbeiten sollten...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="" class="chatmessageele_other col-7 mb-3 ">
|
||||
<div class='icon-container mr-2 mt-1 ' style="float: left;">
|
||||
<img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
|
||||
</div>
|
||||
<h6 class="mt-3"><small>{{user.first_name}} {{user.last_name}}, 13:45 18.05.2020</small></h6>
|
||||
<div style="text-align: left;" class="mt-1">
|
||||
<span style="float: left !important; font-size: 1.0em;">
|
||||
Ich finde schon, dass wir hier langsam mal mit den Daten arbeiten sollten...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div><!-- END CHAT MESSAGES -->
|
||||
<span id="scrolltarget"> </span>
|
||||
</div><!-- END CARD BODY-->
|
||||
|
|
@ -100,9 +68,6 @@
|
|||
<small id="is_typing_name" class="">
|
||||
</small>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="card-footer bg-transparent border-success">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Neue Nachricht" id="message" aria-describedby="">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
<style type="text/css">
|
||||
.scroll {
|
||||
max-height: 400px;
|
||||
min-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
{% load counter_tag %}
|
||||
{% if roomdata.creator == user %}
|
||||
<h4 id="chattitle">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}
|
||||
{% else %}
|
||||
<h4 id="chattitle">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}
|
||||
{% endif %}
|
||||
<button class="btn btn-sm btn-secondary" style="float: right;" onclick="javascript:closeSingleChat()"><small><i class="fas fa-times"></i></small></button>
|
||||
</h4>
|
||||
<hr>
|
||||
<div class="card" >
|
||||
<div class="card-body scroll" id="chatcontentcomplete">
|
||||
|
||||
<div id="roomstart" style="min-width: 100%; text-align: center;">
|
||||
<small>Unterhaltung gestartet am {{roomdata.chatroom_createddate}}</small>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div id="chatmessages">
|
||||
{% for message in roomdata.messages.all %}
|
||||
|
||||
{% if forloop.counter0 == 0 %}
|
||||
{% setMessageDayInfo message %}
|
||||
{% else %}
|
||||
{% getMessageDayInfo message as newday %}
|
||||
{% if newday == True %}
|
||||
<div style="" class="chatmessageele_breaker col-12 mb-3">
|
||||
<div class="col-12 mb-3" style="text-align: center;">
|
||||
<hr>
|
||||
<small>{{message.sendtime|date:"d.m.Y"}}</small>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if message.author == request.user %}
|
||||
<div style="" class="chatmessageele_me col-7 mb-3 ">
|
||||
<div class='icon-container ml-2 mt-1 ' style="float: right;">
|
||||
<img class="img-profile roundimg" src="{{ message.author.profile.get_photo_url }}">
|
||||
</div>
|
||||
<h6 class="mt-3"><small>{{message.sendtime|date:"H:i"}}</small></h6>
|
||||
<div style="text-align: left;" class="mt-1">
|
||||
<span style="float: right !important; font-size: 1.0em;">
|
||||
{{message.content}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="" class="chatmessageele_other col-7 mb-3">
|
||||
<div class='icon-container mr-2 mt-1 ' style="float: left;">
|
||||
<img class="img-profile roundimg" src="{{ message.author.profile.get_photo_url }}">
|
||||
</div>
|
||||
<h6 class="mt-3"><small>{{message.author.first_name}} {{message.author.last_name}}, {{message.sendtime|date:"H:i"}}</small></h6>
|
||||
<div style="text-align: left;" class="mt-1">
|
||||
<span style="float: left !important; font-size: 1.0em;">
|
||||
{{message.content}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div><!-- END CHAT MESSAGES -->
|
||||
<span id="scrolltarget"> </span>
|
||||
</div><!-- END CARD BODY-->
|
||||
|
||||
<div id="is_typing" class="ml-2">
|
||||
<div class="spinner-grow spinner-border-sm" id="typingspinner" role="status" style="display: none;">
|
||||
<span class="sr-only">Jemand tippt...</span>
|
||||
</div>
|
||||
<small id="is_typing_name" class="">
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-success">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Neue Nachricht" id="message" aria-describedby="">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" id="sendNewMessgeButton" onclick="javascript:sendNewMessage()" type="button"><i class="fas fa-location-arrow"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function closeSingleChat(){
|
||||
chatwebsocket.close();
|
||||
$("#dynamicchatwindow").hide();
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$('#chatcontentcomplete').scrollTop( $('#chatcontentcomplete').height()*200 )
|
||||
});
|
||||
|
||||
userownid = "{{user.pk}}";
|
||||
|
||||
creator_id = {{roomdata.creator.pk}};
|
||||
chatmember_id = {{roomdata.chatmember_single.pk}};
|
||||
|
||||
ws_string = 'wss://'
|
||||
if (location.protocol !== 'https:') {
|
||||
ws_string = 'ws://'
|
||||
}
|
||||
if(typeof chatwebsocket != "undefined"){
|
||||
chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/chat/{{roomdata.creator.pk}}/{{roomdata.chatmember_single.pk}}/")
|
||||
}
|
||||
else{
|
||||
chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/chat/{{roomdata.creator.pk}}/{{roomdata.chatmember_single.pk}}/")
|
||||
}
|
||||
|
||||
chatwebsocket.onmessage = function(e) {
|
||||
|
||||
|
||||
datainfo = e["data"].split("__");
|
||||
if(datainfo[0] == "starttyping")
|
||||
{
|
||||
typingname = (datainfo[1].split("_"))[1];
|
||||
typingid = (datainfo[1].split("_"))[0];
|
||||
if(typingid != userownid){
|
||||
$("#is_typing_name").html("" + typingname);
|
||||
$("#typingspinner").show();
|
||||
}
|
||||
}
|
||||
|
||||
if(datainfo[0] == "stoptyping")
|
||||
{
|
||||
$("#is_typing_name").html(" ");
|
||||
$("#typingspinner").hide();
|
||||
}
|
||||
|
||||
if(datainfo[0] == "reloadmessages")
|
||||
{
|
||||
$.ajax(
|
||||
{
|
||||
type: "GET",
|
||||
url: "{% url 'chat:chat-ajax' %}",
|
||||
data : {
|
||||
action : "loadnewestmessage",
|
||||
room : {{roomdata.pk}}
|
||||
},
|
||||
success: function( data )
|
||||
{
|
||||
$("#chatmessages").append(data);
|
||||
$('#chatcontentcomplete').scrollTop( $('#chatcontentcomplete').height()*200 );
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
chatwebsocket.onclose = function(e) {
|
||||
console.error('Chat socket closed unexpectedly');
|
||||
};
|
||||
|
||||
|
||||
$("#message").keyup(function(){
|
||||
if($("#message").val().length > 0){
|
||||
chatwebsocket.send("starttyping__{{user.pk}}__privatechat_{{roomdata.creator.pk}}_{{roomdata.chatmember_single.pk}}");
|
||||
}
|
||||
else{
|
||||
chatwebsocket.send("stoptyping__{{user.pk}}__privatechat_{{roomdata.creator.pk}}_{{roomdata.chatmember_single.pk}}");
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
function sendNewMessage()
|
||||
{
|
||||
if($("#message").val().length > 0)
|
||||
{
|
||||
$.ajax(
|
||||
{
|
||||
type: "GET",
|
||||
url: "{% url 'chat:chat-ajax' %}",
|
||||
data : {
|
||||
action : "addnewmessage",
|
||||
new_chat_userid : userownid,
|
||||
message : $("#message").val(),
|
||||
room : {{roomdata.pk}}
|
||||
},
|
||||
success: function( data )
|
||||
{
|
||||
$("#message").val("");
|
||||
chatwebsocket.send("load__{{user.pk}}__privatechat_{{roomdata.creator.pk}}_{{roomdata.chatmember_single.pk}}");
|
||||
chatwebsocket.send("stoptyping__{{user.pk}}__privatechat_{{roomdata.creator.pk}}_{{roomdata.chatmember_single.pk}}");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).on('keypress',function(e) {
|
||||
if(e.which == 13) {
|
||||
if($("#message").val().length > 0){
|
||||
sendNewMessage();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -119,7 +119,8 @@
|
|||
url: "{% url 'chat:chat-ajax' %}",
|
||||
data : {
|
||||
action : "startnewchat_user_user",
|
||||
new_chat_userid : $(this)[0]["id"].split("_")[1]
|
||||
new_chat_userid : $(this)[0]["id"].split("_")[1],
|
||||
is_basechat : 0
|
||||
},
|
||||
success: function( data )
|
||||
{
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ def getloggedusers(request):
|
|||
users_online = Room.objects.get(channel_name="agency_" + str(request.user.profile.agency.pk))
|
||||
|
||||
context = {
|
||||
"usersofagency" : User.objects.filter(profile__agency=request.user.profile.agency).exclude(pk=request.user.pk).oder_by("last_name"),
|
||||
"usersofagency" : User.objects.filter(profile__agency=request.user.profile.agency).exclude(pk=request.user.pk).order_by("last_name"),
|
||||
"onlineusers" : users_online.get_users()
|
||||
}
|
||||
|
||||
|
|
@ -90,8 +90,10 @@ def chatajaxmain(request):
|
|||
context = {
|
||||
"roomdata" : list(getroom)[0]
|
||||
}
|
||||
|
||||
return render(request, "chat/chat_content.html", context)
|
||||
if(request.GET["is_basechat"] == "1"):
|
||||
return render(request, "chat/chat_content_basechat.html", context)
|
||||
else:
|
||||
return render(request, "chat/chat_content.html", context)
|
||||
elif request.GET["action"] == "addnewmessage":
|
||||
room = ChatRoom.objects.get(pk=request.GET["room"])
|
||||
if(request.user == room.creator or request.user == room.chatmember_single):
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@
|
|||
<a style="color: #999; text-decoration: none;" href="{% url 'impressumda' %}">Impressum</a>
|
||||
</div>
|
||||
<div style="margin-top: 10px; margin-bottom: 5px;" class="sidebar-heading">
|
||||
Version 0.9.0
|
||||
Version 0.9.1
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
|
|
@ -434,10 +434,22 @@
|
|||
</div> <!-- End of Main Content CONTAINER FLUID-->
|
||||
<!-- End of Content Wrapper -->
|
||||
{% if active_link != 'chat' %}
|
||||
<!--
|
||||
|
||||
<div id="chat_alluserscontent" style="position: fixed; bottom: 75px; right: 36px; z-index: 999;"></div>
|
||||
<button id="chatButton" class="btn btn-primary" style="position: fixed; right: 36px; bottom: 30px;"><i class="far fa-comments"></i></button>
|
||||
-->
|
||||
|
||||
<!-- CHATAREA -->
|
||||
|
||||
<div id="dynamicchatwindow" class="col-4" style="position: absolute; bottom: 0px; right: 100px; display: none;">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<span id="dynamicchatwindow_content"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CHATAREA END -->
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue