484 lines
18 KiB
Twig
484 lines
18 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 %}
|
|
{% if app.user and ingroup %}
|
|
{{ 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 style='cursor:pointer' onclick='seeUser({{message.user.id}})' 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) }}
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block localexternalscript %}
|
|
<script src="/{{alias}}/bundles/goswebsocket/js/vendor/autobahn.min.js"></script>
|
|
<script type="text/javascript" src="/{{alias}}/ckeditor/adapters/jquery.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
{% if websocket_activate and app.user %}
|
|
var WS = (function()
|
|
{
|
|
var GosSocket = function(uri, sessionConfig){
|
|
this._uri = uri;
|
|
this._session = false;
|
|
this._listeners = {};
|
|
this.connect(sessionConfig);
|
|
};
|
|
|
|
GosSocket.prototype.connect = function (sessionConfig) {
|
|
var that = this;
|
|
|
|
ab.connect(this._uri,
|
|
|
|
//Function on connect
|
|
function(session){
|
|
that.fire({type: "socket/connect", data: session });
|
|
},
|
|
|
|
//Function on disconnect / error
|
|
function(code, reason){
|
|
that._session = false;
|
|
|
|
that.fire({type: "socket/disconnect", data: {code: code, reason: reason}});
|
|
},
|
|
|
|
sessionConfig
|
|
);
|
|
};
|
|
|
|
GosSocket.prototype.on = function(type, listener){
|
|
if (typeof this._listeners[type] == "undefined"){
|
|
this._listeners[type] = [];
|
|
}
|
|
|
|
this._listeners[type].push(listener);
|
|
};
|
|
|
|
GosSocket.prototype.fire = function(event){
|
|
if (typeof event == "string"){
|
|
event = { type: event };
|
|
}
|
|
if (!event.target){
|
|
event.target = this;
|
|
}
|
|
|
|
if (!event.type){ //falsy
|
|
throw new Error("Event object missing 'type' property.");
|
|
}
|
|
|
|
if (this._listeners[event.type] instanceof Array){
|
|
var listeners = this._listeners[event.type];
|
|
for (var i=0, len=listeners.length; i < len; i++){
|
|
listeners[i].call(this, event.data);
|
|
}
|
|
}
|
|
};
|
|
|
|
GosSocket.prototype.off = function(type, listener){
|
|
if (this._listeners[type] instanceof Array){
|
|
var listeners = this._listeners[type];
|
|
for (var i=0, len=listeners.length; i < len; i++){
|
|
if (listeners[i] === listener){
|
|
listeners.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
return {
|
|
connect: function(uri, sessionConfig)
|
|
{
|
|
return new GosSocket(uri, sessionConfig);
|
|
}
|
|
}
|
|
|
|
})();
|
|
{% endif %}
|
|
|
|
$(document).ready(function(){
|
|
if (CKEDITOR.instances["chat_message"]) CKEDITOR.instances["chat_message"].destroy();
|
|
if (CKEDITOR.instances["chat_messagemail"]) CKEDITOR.instances["chat_messagemail"].destroy();
|
|
|
|
setTimeout(function(){
|
|
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
|
|
});
|
|
},500);
|
|
|
|
$(".switch").bootstrapSwitch();
|
|
$("#mymodal-sendmail").removeAttr("tabindex");
|
|
|
|
websocket();
|
|
|
|
setInterval(function(){
|
|
islive();
|
|
}, 15000);
|
|
});
|
|
|
|
{% if websocket_activate and app.user %}
|
|
|
|
var session;
|
|
var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" };
|
|
var timer;
|
|
var delayRetry=500;
|
|
var isdeco=false;
|
|
var tosend=false;
|
|
var tosendmail=false;
|
|
var todelete=false;
|
|
var idtodelete;
|
|
var isalive;
|
|
|
|
function websocket()
|
|
{
|
|
var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
|
|
webSocket = WS.connect(_WS_URI,{retryDelay: delayRetry});
|
|
|
|
webSocket.on("socket/connect", function (sess) {
|
|
console.log("=== CONNECT ===");
|
|
|
|
// Sauvegardce de la session
|
|
session=sess;
|
|
|
|
//the callback function in "subscribe" is called everytime an event is published in that channel.
|
|
sess.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
|
|
|
|
if(!isalive||isdeco) islive();
|
|
|
|
// Récupération lastmessage
|
|
if(isdeco) recuplastmsg();
|
|
|
|
// Si action en cours
|
|
if(tosend) sendbtn();
|
|
if(tosendmail) sendbtnmail();
|
|
if(todelete) delmessage(idtodelete);
|
|
|
|
// Il est co
|
|
isdeco=false;
|
|
|
|
if(payload.msg) {
|
|
html ="<div id='message-"+payload.msg.id+"' class='message row'>";
|
|
html+="<div class='msgavatar'>";
|
|
html+="<img style='pointer:cursor' onclick='seeUser("+payload.msg.userid+")' 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);
|
|
}
|
|
});
|
|
});
|
|
|
|
webSocket.on("socket/disconnect", function(error){
|
|
laberror="Disconnected for " + error.reason + " with code " + error.code;
|
|
console.log("=== DISCONNECT ===");
|
|
console.log(laberror);
|
|
isdeco=true;
|
|
});
|
|
}
|
|
|
|
$( "#sendbtn" ).click(function() {
|
|
sendbtn();
|
|
});
|
|
|
|
function sendbtn() {
|
|
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) {
|
|
try {
|
|
// Flager que l'envoit c'est fait
|
|
tosend=false;
|
|
$("#sendbtn").html("Envoyer");
|
|
$("#sendbtn").removeClass("btn-danger");
|
|
$("#sendbtn").css('cursor','auto');
|
|
|
|
// Push envent sur le websocket
|
|
event={mykey: "{{userkey}}", type: "add", message: data};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
CKEDITOR.instances["chat_message"].setData('');
|
|
}
|
|
catch(error) {
|
|
// L'envoi ne s'est pas fait
|
|
console.log("Retry to send");
|
|
|
|
// On flag le fait de retenter l'envoit à la reconnexion
|
|
tosend=true;
|
|
|
|
// On signal que l'envoi est en cours sur le bouton
|
|
$("#sendbtn").html("Envoi en cours");
|
|
$("#sendbtn").addClass("btn-danger");
|
|
$("#sendbtn").css('cursor','progress');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$( "#sendbtnmail" ).click(function() {
|
|
sendbtnmail();
|
|
});
|
|
|
|
function sendbtnmail() {
|
|
var data = CKEDITOR.instances["chat_messagemail"].getData();
|
|
var subject=$("#mailsuject").val();
|
|
var mailto=$("#mailto").val();
|
|
|
|
if(data&&subject&&mailto) {
|
|
try {
|
|
// Flager que l'envoit c'est fait
|
|
tosendmail=false;
|
|
$("#sendbtnmail").html("Envoyer");
|
|
$("#sendbtnmail").removeClass("btn-danger");
|
|
$("#sendbtnmail").css('cursor','auto');
|
|
|
|
// Push envent sur le websocket
|
|
event={mykey: "{{userkey}}", type: "add", message: data, mail: "true", to: mailto, subject: subject};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
CKEDITOR.instances["chat_message"].setData('');
|
|
|
|
// Cacher la popup
|
|
$("#sendbymail").bootstrapSwitch('state',false);
|
|
$('#mymodal-sendmail').modal('hide');
|
|
}
|
|
catch(error) {
|
|
// L'envoi ne s'est pas fait
|
|
console.log("Retry to send");
|
|
|
|
// On flag le fait de retenter l'envoit à la reconnexion
|
|
tosendmail=true;
|
|
|
|
// On signal que l'envoi est en cours sur le bouton
|
|
$("#sendbtnmail").html("Envoi en cours");
|
|
$("#sendbtnmail").addClass("btn-danger");
|
|
$("#sendbtnmail").css('cursor','progress');
|
|
}
|
|
|
|
}
|
|
else alert("Sujet, corps et destinataire(s) obligatoire");
|
|
}
|
|
|
|
$(document).on('click', '.delmessage', function(){
|
|
delmessage($(this).data("id"));
|
|
});
|
|
|
|
function delmessage(id) {
|
|
try {
|
|
// Flager que l'envoit c'est fait
|
|
todelete=false;
|
|
idtodelete=null;
|
|
|
|
// Push envent sur le websocket
|
|
event={mykey: "{{userkey}}", type: "del", id: id};
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
}
|
|
catch(error){
|
|
// Le delete ne s'est pas fait
|
|
console.log("Retry to delete");
|
|
|
|
// On flag le fait de retenter l'envoit à la reconnexion
|
|
todelete=true;
|
|
idtodelete=id;
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '#listtoavatar img', function(){
|
|
var mail = ";"+$(this).data("mail");
|
|
$("#mailto").val($("#mailto").val().replace(mail, ""));
|
|
$(this).remove();
|
|
});
|
|
|
|
function recuplastmsg() {
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "{{ path('cadoles_websocket_message_list') }}",
|
|
data: {
|
|
"id": {{ groupid }},
|
|
},
|
|
success: function(datas) {
|
|
$.each(datas, function(i,data) {
|
|
// Le message a-t-il été déposé durant la déconnexion ?
|
|
if(!$("#message-"+data.id).length) {
|
|
html ="<div id='message-"+data.id+"' class='message row'>";
|
|
html+="<div class='msgavatar'>";
|
|
html+="<img style='cursor:pointer' onclick='seeUser("+data.userid+")' id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+data.useravatar+"' class='avatar'><br>";
|
|
if(data.userid=={{app.user.id}} || '{{ fgmanager }}'=='1') {
|
|
html+="<i class='delmessage fa fa-trash fa-fw' data-id='"+data.id+"' style='cursor: pointer;'></i>";
|
|
}
|
|
html+="</div>";
|
|
html+="<div class='msgdiv'>"
|
|
html+="<div class='msgtitle'>"+data.userlastname+"<br><small>"+new Date(data.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
|
|
html+="<div class='msgtopic'>"+data.message+"</div>";
|
|
html+="</div>";
|
|
html+="</div>";
|
|
$(".mychat").prepend(html);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// islive
|
|
function islive() {
|
|
if(!session) return;
|
|
isalive=true;
|
|
event={mykey: "{{userkey}}", type: "islive", userid: {{app.user.id}}};
|
|
console.log("send islive");
|
|
session.publish("websocket/channel/{{groupid}}", event);
|
|
}
|
|
|
|
|
|
|
|
{% endif %}
|
|
|
|
{% endblock %} |