291 lines
13 KiB
Twig
291 lines
13 KiB
Twig
{% extends '@CadolesCore/base.html.twig' %}
|
|
|
|
{% block localstyle %}
|
|
{% if framed %}
|
|
{% if border %}
|
|
#page-wrapper:last-of-type {
|
|
//padding: 5px 25px 10px 15px;
|
|
//background: transparent;
|
|
}
|
|
{% else %}
|
|
#page-wrapper {
|
|
//padding: 5px 25px 0px 15px;
|
|
//background: transparent;
|
|
}
|
|
{% endif %}
|
|
{% else %}
|
|
#page-wrapper { padding-top:20px; padding-bottom:30px; }
|
|
{% endif %}
|
|
|
|
.message {
|
|
padding:10px;
|
|
margin-top: 5px;
|
|
background-color: #{{ colorbodyback }};
|
|
color: #{{ colorbodyfont }};
|
|
}
|
|
.msgavatar {
|
|
float:left;
|
|
height:40px;
|
|
text-align: center;
|
|
}
|
|
.msgdiv {
|
|
padding-left:60px;
|
|
}
|
|
.msgtitle {
|
|
line-height: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.bootstrap-switch{
|
|
margin-top:5px;
|
|
}
|
|
.labelswitch {
|
|
line-height: 40px;
|
|
float: right;
|
|
margin-right: 10px;
|
|
}
|
|
#listtoavatar img {
|
|
margin:0px 5px 5px 0px;
|
|
cursor:pointer;
|
|
}
|
|
.cke_bottom{ display:none }
|
|
{% endblock %}
|
|
|
|
{% block pagewrapper %}
|
|
{{ form_start(form) }}
|
|
<div class='row'>
|
|
{{ form_widget(form.message) }}
|
|
<input id="sendbymail" type="checkbox" id="item_essential" name="item[essential]" style="float:right" class='switch' ></input>
|
|
<label class="custom-control-label" for="sendbymail">Envoyer par Mail ?</label>
|
|
<a id="sendbtn" class="btn btn-success" style="margin-top:5px; width:100%; margin-bottom:15px">Envoyer</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mychat">
|
|
{% for message in messages %}
|
|
<div id='message-{{message.id}}' class='message row'>
|
|
<div class='msgavatar'>
|
|
<img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/{{message.user.avatar}}' class='avatar'><br>
|
|
{% if fgmanager or message.user == app.user %}
|
|
<i class='delmessage fa fa-trash fa-fw' data-id='{{message.id}}' style='cursor: pointer;'></i>
|
|
{% endif %}
|
|
</div>
|
|
<div class='msgdiv'>
|
|
<div class='msgtitle'>
|
|
{{message.user.lastname}} {{message.user.firstname}}<br>
|
|
<small>{{message.submitdate|date('d/m/Y H:i')}}</small>
|
|
</div>
|
|
<div class='msgtopic'>{{message.topic | raw}}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="mymodal-sendmail" class="modal fade" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Notifier par Mail</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group ">
|
|
<label class="control-label required" for="mailsuject">Sujet du Mail<span class="mandatory">*</span></label>
|
|
<input type="text" id="mailsuject" name="mailsuject" required="required" class="form-control">
|
|
</div>
|
|
<div>
|
|
<label class="control-label required">Destinataires (cliquez sur les images pour les enlever de la liste des destinataires)<span class="mandatory">*</span></label>
|
|
<div id="listtoavatar"></div>
|
|
<input type="hidden" id="mailto" name="mailto" required="required" class="form-control">
|
|
</div>
|
|
<div class="form-group" style="margin-top:10px">
|
|
<label class="control-label required">Corps du Mail<span class="mandatory">*</span></label>
|
|
{{ form_widget(form.messagemail) }}
|
|
</div>
|
|
<a id="sendbtnmail" class="btn btn-success" style="margin-top:5px; width:100%; margin-bottom:15px">Envoyer</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
{% endblock %}
|
|
|
|
{% block localexternalscript %}
|
|
<script src="/{{alias}}/bundles/goswebsocket/js/vendor/autobahn.min.js"></script>
|
|
<script src="/{{alias}}/bundles/goswebsocket/js/gos_web_socket_client.js"></script>
|
|
<script type="text/javascript" src="/{{alias}}/ckeditor/adapters/jquery.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
$(document).ready(function(){
|
|
if (CKEDITOR.instances["chat_message"]) CKEDITOR.instances["chat_message"].destroy();
|
|
if (CKEDITOR.instances["chat_messagemail"]) CKEDITOR.instances["chat_messagemail"].destroy();
|
|
|
|
CKEDITOR.replace( 'chat_message', {
|
|
toolbar: [
|
|
{ name: 'custo01', items: [ 'Bold','Italic','Underline','RemoveFormat' ] },
|
|
{ name: 'custo02', items: [ 'NumberedList','BulletedList' ] },
|
|
{ name: 'custo03', items: [ 'Smiley','Link','Unlink' ]}
|
|
],
|
|
height: 100
|
|
});
|
|
|
|
CKEDITOR.replace( 'chat_messagemail', {
|
|
toolbar: [
|
|
{ name: 'custo01', items: [ 'Bold','Italic','Underline','RemoveFormat' ] },
|
|
{ name: 'custo02', items: [ 'NumberedList','BulletedList' ] },
|
|
{ name: 'custo03', items: [ 'Smiley','Link','Unlink' ]}
|
|
],
|
|
height: 150
|
|
});
|
|
|
|
$(".switch").bootstrapSwitch();
|
|
var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" };
|
|
$("#mymodal-sendmail").removeAttr("tabindex");
|
|
|
|
{% if websocket_activate and app.user %}
|
|
var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
|
|
var webSocket = WS.connect(_WS_URI);
|
|
var timer;
|
|
|
|
webSocket.on("socket/connect", function (session) {
|
|
// Reinit du tps de tentative de reco
|
|
$('#modalinfo').modal('hide');
|
|
clearInterval(timer);
|
|
|
|
//the callback function in "subscribe" is called everytime an event is published in that channel.
|
|
session.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
|
|
if(payload.msg) {
|
|
html ="<div id='message-"+payload.msg.id+"' class='message row'>";
|
|
html+="<div class='msgavatar'>";
|
|
html+="<img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+payload.msg.avatar+"' class='avatar'><br>";
|
|
if(payload.msg.userid=={{app.user.id}} || '{{ fgmanager }}'=='1') {
|
|
html+="<i class='delmessage fa fa-trash fa-fw' data-id='"+payload.msg.id+"' style='cursor: pointer;'></i>";
|
|
}
|
|
html+="</div>";
|
|
html+="<div class='msgdiv'>"
|
|
html+="<div class='msgtitle'>"+payload.msg.lastname+"<br><small>"+new Date(payload.msg.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
|
|
html+="<div class='msgtopic'>"+payload.msg.message+"</div>";
|
|
html+="</div>";
|
|
html+="</div>";
|
|
$(".mychat").prepend(html);
|
|
|
|
//console.log("Received message by "+payload.msg.userid+" = ",payload.msg);
|
|
}
|
|
|
|
if(payload.log) {
|
|
console.log("Received message", payload.log);
|
|
}
|
|
|
|
if(payload.del) {
|
|
$("#message-"+payload.del).remove();
|
|
}
|
|
|
|
if(payload.alert) {
|
|
alert(payload.alert);
|
|
}
|
|
});
|
|
|
|
$( "#sendbtn" ).click(function() {
|
|
var data = CKEDITOR.instances["chat_message"].getData();
|
|
if($("#sendbymail").bootstrapSwitch('state')) {
|
|
CKEDITOR.instances["chat_messagemail"].setData(data);
|
|
$("#mailsuject").val("{{app.session.get('appname')}} = Notification {{ group.label }}");
|
|
$("#mailto").val("");
|
|
$("#listtoavatar").html("");
|
|
|
|
{% for user in group.users %}
|
|
{%if(user.user!=app.user)%}
|
|
$("#mailto").val($("#mailto").val()+";{{user.user.email}}");
|
|
$("#listtoavatar").append($("<img class='avatar' title='{{user.user.lastname}} {{user.user.firstname}}' data-mail='{{user.user.email}}' src='\\{{alias}}\\uploads\\avatar\\{{user.user.avatar}}'>"));
|
|
{%endif%}
|
|
{% endfor %}
|
|
|
|
$('#mymodal-sendmail').modal('show');
|
|
}
|
|
else {
|
|
if(data) {
|
|
event={mykey: "{{userkey}}", type: "add", message: data};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
CKEDITOR.instances["chat_message"].setData('');
|
|
|
|
/* Ne plus envoyer d'event compteur on passe par de l'ajax
|
|
event={type: "add", group:{{groupid}}};
|
|
parent.parent.counter(event);
|
|
*/
|
|
}
|
|
}
|
|
});
|
|
|
|
$( "#sendbtnmail" ).click(function() {
|
|
var data = CKEDITOR.instances["chat_messagemail"].getData();
|
|
var subject=$("#mailsuject").val();
|
|
var mailto=$("#mailto").val();
|
|
|
|
if(data&&subject&&mailto) {
|
|
event={mykey: "{{userkey}}", type: "add", message: data, mail: "true", to: mailto, subject: subject};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
CKEDITOR.instances["chat_message"].setData('');
|
|
|
|
event={type: "add", group:{{groupid}}};
|
|
parent.parent.counter(event);
|
|
$("#sendbymail").bootstrapSwitch('state',false);
|
|
|
|
$('#mymodal-sendmail').modal('hide');
|
|
|
|
}
|
|
else alert("Sujet, corps et destinataire(s) obligatoire");
|
|
});
|
|
|
|
$(document).on('click', '.delmessage', function(){
|
|
id=$(this).data("id");
|
|
event={mykey: "{{userkey}}", type: "del", id: id};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
});
|
|
|
|
$(document).on('click', '#listtoavatar img', function(){
|
|
var mail = ";"+$(this).data("mail");
|
|
$("#mailto").val($("#mailto").val().replace(mail, ""));
|
|
$(this).remove();
|
|
});
|
|
});
|
|
|
|
webSocket.on("socket/disconnect", function(error){
|
|
laberror="Disconnected for " + error.reason + " with code " + error.code;
|
|
console.log(laberror);
|
|
|
|
$('#modalinfo').modal('show');
|
|
if(error.code==2) {
|
|
$('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous avez dépassé le nombre de reconnexion maximum<br><br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
|
|
|
|
clearInterval(timer);
|
|
var nbtentative=10;
|
|
timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
|
|
|
|
setTimeout(function(){ location.reload(true); }, 10000);
|
|
}
|
|
|
|
if(error.code==3) {
|
|
$('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
|
|
|
|
clearInterval(timer);
|
|
var nbtentative=10;
|
|
timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
|
|
|
|
setTimeout(function(){ location.reload(true); }, 10000);
|
|
}
|
|
|
|
if(error.code==6 || error.code==5) {
|
|
$('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous allez être reconnecté d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
|
|
|
|
clearInterval(timer);
|
|
var nbtentative=5;
|
|
timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
|
|
}
|
|
});
|
|
|
|
{% endif %}
|
|
});
|
|
|
|
{% endblock %} |