253 lines
8.2 KiB
HTML
253 lines
8.2 KiB
HTML
{% extends "users/base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% block content %}
|
|
{% if request.user.profile.agency.module_messages %}
|
|
|
|
<div class="content-section col-12">
|
|
<h3>Mitteilungen{% if request.user.profile.showtooltips %} <small><i data-toggle="tooltip" data-placement="top" title="Verschicken Sie hier Nachrichten für Mitarbeiter." class="far fa-question-circle"></i></small>{% endif %}
|
|
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
|
|
</h3>
|
|
<hr>
|
|
|
|
|
|
|
|
<ul class="nav nav-tabs" id="messTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="send-tab" data-toggle="tab" href="#send" role="tab" aria-controls="send" aria-selected="false" >Versenden</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="usermess-tab" data-toggle="tab" href="#usermess" role="tab" aria-controls="usermess" aria-selected="false" >Meine Mitteilungen</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="settingsTabsContent">
|
|
|
|
<div class="tab-pane fade show" id="send" role="tabpanel" aria-labelledby="send-tab">
|
|
<h5 class="mt-3">Mitteilung senden{% if request.user.profile.showtooltips %} <small><i data-toggle="tooltip" data-placement="top" title="Verschicken Sie hier Nachrichten für Mitarbeiter." class="far fa-question-circle"></i></small>{% endif %}</h5>
|
|
<div class="col-6 mt-3">
|
|
<form method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{{form|crispy}}
|
|
<small>Übrige Zeichen: <span id="mewscount">4000</span></small>
|
|
<p>Ihrer Mitteilung wird eine Anrede und eine Verabscheidung hinzugefügt.</p>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary" id="send_message_btn">Mitteilung verschicken</button>
|
|
<a href="{% url 'users-dashboard' %}" class="btn">Abbrechen</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="usermess" role="tabpanel" aria-labelledby="usermess-tab">
|
|
<h5 class="mt-3">Meine Mitteilungen{% if request.user.profile.showtooltips %} <small><i data-toggle="tooltip" data-placement="top" title="Hier sehen Sie Ihre erhaltenen Mitteilungen" class="far fa-question-circle"></i></small>{% endif %}</h5>
|
|
<div class="col-12 mt-3">
|
|
{% if usermessages|length > 0 %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="allmessages">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Absender</th>
|
|
<th scope="col">Datum</th>
|
|
<th scope="col">Inhalt</th>
|
|
<th scope="col"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableresults">
|
|
{% for item in usermessages %}
|
|
<tr id="us_{{item.pk}}">
|
|
<td>{{ item.created_by.first_name }} {{ item.created_by.last_name }}</td>
|
|
<td>{{ item.created_date }}</td>
|
|
<td><a href="{% url 'message-single' item.pk %}">{{ item.content|truncatechars:30 }}</a></td>
|
|
<td><button href="#" class="btn btn-sm btn-secondary" style="float: right;" onclick="javascript:delMessage({{item.pk}})"><i class="fas fa-trash"></i></button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
Sie haben aktuell keine Mitteilungen.
|
|
{% endif %}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- END TABS CONTENT -->
|
|
|
|
<!-- CONFIRMA DELETE DIR -->
|
|
<div class="modal fade" id="delMess" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
|
|
<div class="modal-dialog " role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Mitteilung löschen</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Wollen Sie die Mitteilung wirklich löschen?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:delAction()">Löschen</button>
|
|
<button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<style>
|
|
/* DATATABLES */
|
|
.paginate_button {
|
|
padding: 0px !important;
|
|
border: 0px !important;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('#send').tab('show');
|
|
|
|
$('#allmessages').DataTable({
|
|
"language": {
|
|
"search" : "Suche",
|
|
"info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
|
|
"lengthMenu": "Zeige _MENU_ Einträge",
|
|
"zeroRecords": "Nichts gefunden",
|
|
"infoEmpty": "Keine Einträge",
|
|
"paginate": {
|
|
"first": "Erste",
|
|
"last": "Letzte",
|
|
"next": "Nächste",
|
|
"previous": "Zurück"
|
|
},
|
|
},
|
|
"pageLength": 50,
|
|
"buttons" : {
|
|
"className" : "btn-danger"
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
var delmessid = "";
|
|
function delAction(){
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "{% url 'delsinglemessage' %}",
|
|
data : {
|
|
action : "delsingle",
|
|
todelid : delmessid
|
|
},
|
|
success: function( data )
|
|
{
|
|
$("#us_" + delmessid).remove();
|
|
$("#delMess").modal("hide");
|
|
var newmesscount = $("#messcounter").html();
|
|
newmesscount = newmesscount.replace("(", "");
|
|
newmesscount = newmesscount.replace(")", "");
|
|
newmesscount = parseInt(newmesscount);
|
|
newmesscount = newmesscount - 1;
|
|
if(newmesscount > 0){
|
|
$("#messcounter").html("(" + newmesscount + ")");
|
|
$("#messcounter_badge").show();
|
|
}
|
|
else{
|
|
$("#messcounter").html("");
|
|
$("#messcounter_badge").hide();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function delMessage(id){
|
|
delmessid = id;
|
|
$("#delMess").modal("toggle");
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
{% else %}
|
|
<h3>Das Modul Mitteilungen wurde in ihrer Agentur deaktiviert.</h3>
|
|
{% endif %}
|
|
|
|
<!-- YOUTUBE PART START -->
|
|
<!--
|
|
//COPY THAT
|
|
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
|
|
-->
|
|
<script type="text/javascript">
|
|
|
|
//CHANGE
|
|
var VIDEOURL = "Gd2pR_o3Gb4"
|
|
var MODALNAME = "#youtubevideoinformation"
|
|
var VIDEOTITLE = "Informationsvideo Mitteilungen"
|
|
|
|
$(document).ready(function(){
|
|
|
|
$("#modaltitle_video").html(VIDEOTITLE);
|
|
|
|
//VIDEOCONTROLS
|
|
$( MODALNAME ).on('shown.bs.modal', function(e){
|
|
player.playVideo();
|
|
});
|
|
|
|
$( MODALNAME ).on('hidden.bs.modal', function(e){
|
|
player.pauseVideo();
|
|
});
|
|
});
|
|
|
|
|
|
var messcount_max = 4500;
|
|
$( "#id_message_content" ).keyup(function() {
|
|
newcount = messcount_max - $("#id_message_content").val().length;
|
|
|
|
$("#mewscount").html(newcount);
|
|
|
|
if(newcount < 0){
|
|
$("#send_message_btn").prop("disabled", true);
|
|
}
|
|
else{
|
|
$("#send_message_btn").prop("disabled", false);
|
|
}
|
|
});
|
|
|
|
//VIDEOPLAYER
|
|
var player;
|
|
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('video-placeholder', {
|
|
width: 760,
|
|
height: 500,
|
|
videoId: VIDEOURL,
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<script src="https://www.youtube.com/iframe_api"></script>
|
|
<!-- VIDEOMODAL -->
|
|
<div class="modal fade" id="youtubevideoinformation" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modaltitle_video"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" style="min-height: 500px;">
|
|
<div id="video-placeholder"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- YOUTUBE PART ENDE -->
|
|
{% endblock content %} |