256 lines
9.1 KiB
HTML
256 lines
9.1 KiB
HTML
{% 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>
|
|
|
|
|
|
<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 " id="usermessage_{{message.pk}}">
|
|
<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"><button class="btn btn-small" onclick="javascript:deleteOwnMessage({{message.pk}})"><small><i class="fas fa-trash"></i></small></button> <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" id="usermessage_{{message.pk}}">
|
|
<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">
|
|
$(document).ready(function(){
|
|
$('#chatcontentcomplete').scrollTop( $('#chatcontentcomplete').height()*200 )
|
|
});
|
|
|
|
userownid = "{{user.pk}}";
|
|
|
|
ws_string = 'wss://'
|
|
if (location.protocol !== 'https:') {
|
|
ws_string = 'ws://'
|
|
}
|
|
|
|
if(typeof chatwebsocket != "undefined"){
|
|
chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/groupchat/{{roomdata.pk}}/")
|
|
}
|
|
else{
|
|
chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/groupchat/{{roomdata.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 );
|
|
}
|
|
});
|
|
}
|
|
|
|
if(datainfo[0] == "delete_message"){
|
|
$("#usermessage_" + datainfo[1]).remove();
|
|
}
|
|
|
|
}
|
|
|
|
chatwebsocket.onclose = function(e) {
|
|
console.error('Chat socket closed unexpectedly');
|
|
};
|
|
|
|
|
|
$("#message").keyup(function(){
|
|
if($("#message").val().length > 0){
|
|
chatwebsocket.send("starttyping__{{user.pk}}__groupchat_{{roomdata.pk}}");
|
|
}
|
|
else{
|
|
chatwebsocket.send("stoptyping__{{user.pk}}__groupchat_{{roomdata.pk}}");
|
|
}
|
|
|
|
})
|
|
|
|
sending = true;
|
|
function sendNewMessage()
|
|
{
|
|
if($("#message").val().length > 0 && sending)
|
|
{
|
|
sending = false;
|
|
$.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}}__groupchat_{{roomdata.pk}}");
|
|
chatwebsocket.send("stoptyping__{{user.pk}}__groupchat_{{roomdata.pk}}");
|
|
|
|
sending = true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$(document).on('keypress',function(e) {
|
|
if(e.which == 13) {
|
|
if($("#message").val().length > 0 && sending){
|
|
sendNewMessage();
|
|
}
|
|
}
|
|
});
|
|
|
|
function deleteOwnMessage(id){
|
|
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "{% url 'chat:chat-ajax' %}",
|
|
data : {
|
|
action : "delmessage",
|
|
messageid : id
|
|
},
|
|
success: function( data )
|
|
{
|
|
chatwebsocket.send("delmessage__" + id + "__groupchat_{{roomdata.pk}}");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
{% if user in roomdata.chatmembers_admin.all or user == roomdata.creator %}
|
|
<div class="modal fade" id="confirm-delete_{{roomdata.pk}}" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Chatraum löschen</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
Möchten Sie wirklich den Chatraum {{roomdata.roomname}} löschen? Alle Nachrichten werden entfernt!
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" id="dodel_{{roomdata.pk}}" >Löschen</button>
|
|
<button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
$("#dodel_{{roomdata.pk}}").click(function(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "{% url 'chat:chat-ajax' %}",
|
|
data:{
|
|
action : "remove_chatroom",
|
|
groupchatid: {{roomdata.pk}},
|
|
},
|
|
success: function( data )
|
|
{
|
|
location.href = location.href;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|