ninegate/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Calendar/view.html.twig

607 lines
29 KiB
Twig

{% extends '@CadolesCore/base.html.twig' %}
{% block pagewrapper %}
{% if access=="config" %}
<div class="pagemenu">
<a href="{{ path('cadoles_portal_config_calendar_view', {id:entity.id})}}">{{ entity.name }}</a>
<a href='{{ path('cadoles_portal_config_calendar_update', {id:entity.id}) }}' title='Modifier le panel'><i class='fa fa-gear fa-fw'></i></a>
<a href='{{ path('cadoles_portal_config_calendar_delete', { id: entity.id }) }}' data-method='delete' data-confirm='Êtes-vous sûr de vouloir supprimer ?' title='Supprimer le panel'><i class='fa fa-trash fa-fw'></i></a>
</div>
{% else %}
<div style="margin:10px 0px 10px 0px; text-align:left;height:34px;">
{% if not idpage is empty %}
<a href="{{path('cadoles_portal_user_page_view',{id:idpage,usage:'group',group:idgroup})}}" class="btn btn-success">Revenir sur le Groupe</a>
{% endif %}
</div>
<ul class="nav navbar-default nav-pills">
<li id="menucalendar-0" class="{% if entity.id is not defined %}active{%endif%}" style="cursor:pointer">
<a href="{{ path("cadoles_portal_user_calendar_view") }}">
Tout
</a>
</li>
{% for calendar in calendars %}
<li id="menucalendar-{{calendar.id}}" data-open="{% if calendar.canupdate %}true{%endif%}" class="{% if entity.id is defined and entity.id==calendar.id%}active{%endif%}" style="cursor:pointer">
<a href="{{ path("cadoles_portal_user_calendar_view",{'id':calendar.id}) }}">
{% if not calendar.groups is empty %}
<i class="fa fa-users fa-fw"></i>
{% elseif app.user==calendar.user %}
<i class="fa fa-user fa-fw"></i>
{%endif%}
{{ calendar.name }}
{% if calendar.canupdate %}
<i class="fa fa-pencil"></i>
{% else %}
<i class="fa fa-lock"></i>
{% endif %}
</a>
</li>
{% endfor %}
{% if canupdate %}
<li><a id="menusubmit" style="cursor:pointer" onclick="submitCalendar()" title='Ajouter un calendrier'><i class='fa fa-plus fa-fw'></i></a></li>
{% endif %}
<li><a id="menuupdate" style="cursor:pointer;display:none" onclick="updateCalendar()" title='Modifier un calendrier'><i class='fa fa-file fa-fw'></i></a></li>
<li><a id="menushare" style="cursor:pointer;display:none" onclick="shareCalendar()" title='Partager un calendrier'><i class='fa fa-share-alt fa-fw'></i></a></li>
<li><a id="menudelete" style="cursor:pointer;display:none" onclick="deleteCalendar()" title='Supprimer un calendrier'><i class='fa fa-trash fa-fw'></i></a></li>
</ul>
<br>
{% endif %}
<div id="calendar"></div>
<!-- CREATION EVENEMENT -->
<div id="mymodal-event-add" 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">&times;</button>
<h4 class="modal-title">Evénement</h4>
</div>
<div class="modal-body">
<input id='vladd' name='vladd' class='btn btn-success' type='submit' onClick='submitEvent();' value='Valider' />
&nbsp;
<input class='btn btn-default' type='submit' value='Annuler' onClick='$("#mymodal-event-add").modal("hide");'>
<input name="calendar_id" id="calendar_id" type="hidden" class="form-control" placeholder="Nom">
<input name="envent_id" id="envent_id" type="hidden" class="form-control" placeholder="Nom">
<fieldset class="fieldset form-horizontal" style="clear:both; margin-top:30px;">
<div class="form-group">
<label for="event_calendar" class="col-sm-5 control-label">Calendrier*</label>
<div class="col-sm-7">
<select name="event_calendar" id="event_calendar" class="form-control">
{% if access=="config" %}
{% for calendar in calendars %}
<option value='{{ calendar.id}}'>{{ calendar.name}}</option>
{% endfor %}
{% else %}
{% for calendar in calendars %}
{% if calendar.canupdate %}
<option value='{{ calendar.id}}'>{{ calendar.name}}</option>
{% endif %}
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="form-group">
<label for="event_title" class="col-sm-5 control-label">Titre*</label>
<div class="col-sm-7"><input name="event_title" id="event_title" type="titre" class="form-control focus" placeholder="Titre"></div>
</div>
<div class="form-group">
<label for="event_description" class="col-sm-5 control-label">Description</label>
<div class="col-sm-7"><textarea style="height:150px" name="event_description" id="event_description" type="titre" class="form-control focus" placeholder="Description"></textarea></div>
</div>
<div class="form-group">
<label for="event_allday" class="col-sm-5 control-label">Evènement sur la journée*</label>
<div class="col-sm-7"><input id="event_allday" name="event_allday" type="checkbox" class="switch" onChange="switchallDay('SUBMIT');"></div>
</div>
<div class="form-group" id="form_event_start_time">
<label for="date" class="col-sm-5 control-label">Date Début*</label>
<div class="col-sm-7"><input name="event_start_time" id="event_start_time" type="titre" class="form-control" placeholder="Date Début" value=""></div>
</div>
<div class="form-group" id="form_event_end_time">
<label for="date" class="col-sm-5 control-label">Date Fin*</label>
<div class="col-sm-7"><input name="event_end_time" id="event_end_time" type="titre" class="form-control" placeholder="Date Fin" value=""></div>
</div>
<div class="form-group" id="form_event_start">
<label for="date" class="col-sm-5 control-label">Date Début*</label>
<div class="col-sm-7"><input name="event_start" id="event_start" type="titre" class="form-control" placeholder="Date Début" value=""></div>
</div>
<div class="form-group" id="form_event_end">
<label for="date" class="col-sm-5 control-label">Date Fin*</label>
<div class="col-sm-7"><input name="event_end" id="event_end" type="titre" class="form-control" placeholder="Date Fin" value=""></div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!-- UPDATE / DELETE EVENEMENT -->
<div id="mymodal-event-mod" 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">&times;</button>
<h4 class="modal-title">Evénement</h4>
</div>
<div class="modal-body">
<input id='vladd' name='vladd' class='btn btn-success' type='submit' onClick='updateEvent();' value='Valider' />
&nbsp;
<input class="btn btn-primary" type='submit' value='Partager' onClick='shareEvent();' />
&nbsp;
<input class='btn btn-default' type='submit' value='Annuler' onClick='$("#mymodal-event-mod").modal("hide");'>
<input name="calendar_id" id="calendar_id" type="hidden" class="form-control" placeholder="Nom">
<input name="event_id" id="event_id" type="hidden" class="form-control" placeholder="Nom">
<fieldset class="fieldset form-horizontal" style="clear:both; margin-top:30px;">
<div class="form-group">
<label for="event_calendar" class="col-sm-5 control-label">Calendrier*</label>
<div class="col-sm-7">
<select name="event_calendar" id="event_calendar" class="form-control">
{% if access=="config" %}
{% for calendar in calendars %}
<option value='{{ calendar.id}}'>{{ calendar.name}}</option>
{% endfor %}
{% else %}
{% for calendar in calendars %}
{% if calendar.canupdate %}
<option value='{{ calendar.id}}'>{{ calendar.name}}</option>
{% endif %}
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="form-group">
<label for="event_title" class="col-sm-5 control-label">Titre*</label>
<div class="col-sm-7"><input name="event_title" id="event_title" type="titre" class="form-control focus" placeholder="Titre"></div>
</div>
<div class="form-group">
<label for="event_description" class="col-sm-5 control-label">Description</label>
<div class="col-sm-7"><textarea style="height:150px" name="event_description" id="event_description" type="titre" class="form-control focus" placeholder="Description"></textarea></div>
</div>
<div class="form-group">
<label for="event_allday" class="col-sm-5 control-label">Evènement sur la journée*</label>
<div class="col-sm-7"><input id="event_allday" name="event_allday" type="checkbox" class="switch" onChange="switchallDay('UPDATE');"></div>
</div>
<div class="form-group" id="form_event_start_time">
<label for="date" class="col-sm-5 control-label">Date Début*</label>
<div class="col-sm-7"><input name="event_start_time" id="event_start_timem" type="titre" class="form-control" placeholder="Date Début" value=""></div>
</div>
<div class="form-group" id="form_event_end_time">
<label for="date" class="col-sm-5 control-label">Date Fin*</label>
<div class="col-sm-7"><input name="event_end_time" id="event_end_timem" type="titre" class="form-control" placeholder="Date Fin" value=""></div>
</div>
<div class="form-group" id="form_event_start">
<label for="date" class="col-sm-5 control-label">Date Début*</label>
<div class="col-sm-7"><input name="event_start" id="event_startm" type="titre" class="form-control" placeholder="Date Début" value=""></div>
</div>
<div class="form-group" id="form_event_end">
<label for="date" class="col-sm-5 control-label">Date Fin*</label>
<div class="col-sm-7"><input name="event_end" id="event_endm" type="titre" class="form-control" placeholder="Date Fin" value=""></div>
</div>
</fieldset>
<input id='vldel' name='vldel' class='btn btn-danger' type='submit' onClick='deleteEvent();' value='Suppression' />
</div>
</div>
</div>
</div>
{% endblock %}
{% block localjavascript %}
var idcalendar;
var defautView='month';
{% if app.user %}
{% if app.user.viewcalendar == 2 %}
var defautView='agendaWeek';
{% elseif app.user.viewcalendar == 3 %}
var defautView='agendaDay';
{% endif %}
{% endif %}
$('document').ready(function(){
{% if entity.id is defined %}
{% for calendar in calendars %}
{% if calendar.id==entity.id %}
showCalendar({{ calendar.id }}, {{ calendar.canupdate }});
{% endif %}
{% endfor %}
{% else %}
{% set onecalendarcanupdate = false %}
{% for calendar in calendars %}
{% if calendar.canupdate %}
{% set onecalendarcanupdate = true %}
{% endif %}
{% endfor %}
showCalendar(0, {{ onecalendarcanupdate }});
{% endif %}
});
function submitCalendar() {
var url="{{ path('cadoles_portal_'~access~'_calendar_submit') }}";
$(location).attr('href',url);
}
function updateCalendar() {
var url="{{ path('cadoles_portal_'~access~'_calendar_update',{id:'xx'}) }}";
url=url.replace('xx',idcalendar);
$(location).attr('href',url);
}
function shareCalendar() {
var url="{{ path('cadoles_portal_'~access~'_calendar_share',{id:'xx'}) }}";
url=url.replace('xx',idcalendar);
$(location).attr('href',url);
}
function deleteCalendar() {
if (confirm('Êtes-vous sûr de vouloir supprimer ?')) {
var url="{{ path('cadoles_portal_'~access~'_calendar_delete',{id:'xx'}) }}";
url=url.replace('xx',idcalendar);
$(location).attr('href',url);
}
}
// Affichages des calendars
function showCalendar(id,canupdate) {
idcalendar=id;
urltoload="{{ path('cadoles_portal_'~access~'_calendarevent_load',{'idcalendar':'xx'}) }}";
urltoload=urltoload.replace('xx',idcalendar);
// Rendre actif le page en cours dans le menu
$(".navbar-default li").removeClass("active");
$("#menucalendar-"+id).addClass("active");
// Cacher les actions possibles sur la page
$("#menuupdate").hide();
$("#menushare").hide();
$("#menudelete").hide();
if($("#menucalendar-"+id).data("open")) {
console.log($("#menucalendar-"+id).data("open"));
$("#menuupdate").show();
$("#menushare").show();
$("#menudelete").show();
}
$('#calendar').fullCalendar( 'destroy' );
$('#calendar').fullCalendar({
lang: 'fr',
selectable: canupdate,
selectHelper: true,
editable: canupdate,
eventLimit: true,
defaultView: defautView,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
// Creation Evenement
select: function(start, end) {
{% if app.user %}
var allDay = !start.hasTime() && !end.hasTime();
$("#mymodal-event-add #event_title").val("");
$("#mymodal-event-add #event_description").val("");
$("#mymodal-event-add #event_start_time").val(moment(start).format("DD/MM/YYYY HH:mm"));
$("#mymodal-event-add #event_end_time").val(moment(end).format("DD/MM/YYYY HH:mm"));
$("#mymodal-event-add #event_start").val(moment(start).format("DD/MM/YYYY"));
$("#mymodal-event-add #event_end").val(moment(end).subtract("1","s").format("DD/MM/YYYY"));
if(allDay) $("#mymodal-event-add #event_end_time").val(moment(end).subtract("1","s").format("DD/MM/YYYY HH:mm"));
$("#mymodal-event-add #event_calendar option[value='"+idcalendar+"']").prop('selected', true);
$("#mymodal-event-add #event_allday").bootstrapSwitch('state', allDay);
switchallDay("SUBMIT");
$('#mymodal-event-add').modal('show');
{% endif %}
},
// Modification Evenement
eventClick: function(event, jsEvent, view) {
if(event.editable) {
$("#mymodal-event-mod #event_id").val(event.id);
$("#mymodal-event-mod #event_title").val(event.title);
$("#mymodal-event-mod #event_description").val(event.description);
$("#mymodal-event-mod #event_start_timem").val(event.start.format("DD/MM/YYYY HH:mm"));
$("#mymodal-event-mod #event_end_timem").val(event.end.format("DD/MM/YYYY HH:mm"));
$("#mymodal-event-mod #event_startm").val(event.start.format("DD/MM/YYYY"));
$("#mymodal-event-mod #event_endm").val(event.end.subtract("1","s").format("DD/MM/YYYY"));
$("#mymodal-event-mod #event_allday").bootstrapSwitch('state', event.allDay);
$("#mymodal-event-mod #event_calendar option[value='"+event.calendar+"']").prop('selected', true);
switchallDay("UPDATE");
$('#mymodal-event-mod').modal('show');
}
},
// Deplacement Evenement
eventDrop: function(event, delta, revertFunc) {
$.ajax({
method: "POST",
url: "{{ path('cadoles_portal_'~access~'_calendarevent_update') }}",
data: {
"id": event.id,
"title": event.title,
"description":event.description,
"start": event.start.format("YYYY-MM-DD HH:mm"),
"end": event.end.format("YYYY-MM-DD HH:mm"),
"allday": event.allDay,
"idcalendar": event.calendar
}
});
},
// Resize Evenement
eventResize: function(event, delta, revertFunc) {
$.ajax({
method: "POST",
url: "{{ path('cadoles_portal_'~access~'_calendarevent_update') }}",
data: {
"id": event.id,
"title": event.title,
"description":event.description,
"start": event.start.format("YYYY-MM-DD HH:mm"),
"end": event.end.format("YYYY-MM-DD HH:mm"),
"allday": event.allDay,
"idcalendar": event.calendar
}
});
},
{% if app.user %}
viewRender: function( view, element ) {
if(view.name!=defautView) {
$.ajax({
method: "POST",
url: "{{ path('cadoles_core_user_viewcalendar') }}",
data: {
"view": view.name,
}
});
defautView=view.name;
}
},
{% endif %}
eventRender: function(event, element) {
element.attr('title', event.description);
},
events:urltoload
});
}
function switchallDay(form) {
if(form=="SUBMIT") {
if($("#mymodal-event-add #event_allday").bootstrapSwitch('state')) {
$("#mymodal-event-add #form_event_start_time").hide();
$("#mymodal-event-add #form_event_end_time").hide();
$("#mymodal-event-add #form_event_start").show();
$("#mymodal-event-add #form_event_end").show();
}
else {
$("#mymodal-event-add #form_event_start_time").show();
$("#mymodal-event-add #form_event_end_time").show();
$("#mymodal-event-add #form_event_start").hide();
$("#mymodal-event-add #form_event_end").hide();
}
}
else if(form=="UPDATE") {
if($("#mymodal-event-mod #event_allday").bootstrapSwitch('state')) {
$("#mymodal-event-mod #form_event_start_time").hide();
$("#mymodal-event-mod #form_event_end_time").hide();
$("#mymodal-event-mod #form_event_start").show();
$("#mymodal-event-mod #form_event_end").show();
}
else {
$("#mymodal-event-mod #form_event_start_time").show();
$("#mymodal-event-mod #form_event_end_time").show();
$("#mymodal-event-mod #form_event_start").hide();
$("#mymodal-event-mod #form_event_end").hide();
}
}
}
function submitEvent() {
$("#mymodal-event-add .alert").remove();
if($("#mymodal-event-add #event_title").val()=="") {
$("#mymodal-event-add fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Titre obligatoire</div>");
return;
}
// Allday
if($("#mymodal-event-add #event_allday").bootstrapSwitch('state')) {
var start=moment($("#mymodal-event-add #event_start").val(),"DD/MM/YYYY");
var end=moment($("#mymodal-event-add #event_end").val(),"DD/MM/YYYY").add("1","d");
if( start.isAfter(end) ) {
$("#mymodal-event-add fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Date de début supérieure à date de fin</div>");
return;
}
var dstart=moment($("#mymodal-event-add #event_start").val(),"DD/MM/YYYY").format("YYYY-MM-DD 00:00");
var dend=moment($("#mymodal-event-add #event_end").val(),"DD/MM/YYYY").add("1","d").format("YYYY-MM-DD 00:00");
}
else {
var start=moment($("#mymodal-event-add #event_start_time").val(),"DD/MM/YYYY HH:mm");
var end=moment($("#mymodal-event-add #event_end_time").val(),"DD/MM/YYYY HH:mm");
if( start.isAfter(end) ) {
$("#mymodal-event-add fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Date de début supérieure à date de fin</div>");
return;
}
var dstart=moment($("#mymodal-event-add #event_start_time").val(),"DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm");
var dend=moment($("#mymodal-event-add #event_end_time").val(),"DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm");
}
$.ajax({
method: "POST",
url: "{{ path('cadoles_portal_'~access~'_calendarevent_submit') }}",
data: {
"title":$("#mymodal-event-add #event_title").val(),
"description":$("#mymodal-event-add #event_description").val(),
"start": dstart,
"end": dend,
"allday": $("#mymodal-event-add #event_allday").bootstrapSwitch('state'),
"idcalendar": $("#mymodal-event-add #event_calendar").val()
},
success: function(data) {
console.log(data.id);
// Ajout de l'event dans fullcalendar
$('#calendar').fullCalendar('renderEvent',
{
id: data.id,
title: $("#mymodal-event-add #event_title").val(),
description: $("#mymodal-event-add #event_description").val(),
start: start,
end: end,
editable: true,
color: data.color,
allDay: $("#mymodal-event-add #event_allday").bootstrapSwitch('state'),
calendar: $("#mymodal-event-add #event_calendar").val()
},
false // make the event "stick"
);
$("#mymodal-event-add").modal("hide");
}
});
}
function updateEvent() {
$("#mymodal-event-mod .alert").remove();
if($("#mymodal-event-mod #event_title").val()=="") {
$("#mymodal-event-mod fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Titre obligatoire</div>");
return;
}
// Allday
if($("#mymodal-event-mod #event_allday").bootstrapSwitch('state')) {
var start=moment($("#mymodal-event-mod #event_startm").val(),"DD/MM/YYYY");
var end=moment($("#mymodal-event-mod #event_endm").val(),"DD/MM/YYYY").add("1","d");
if( start.isAfter(end) ) {
$("#mymodal-event-mod fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Date de début supérieure à date de fin</div>");
return;
}
var dstart=moment($("#mymodal-event-mod #event_startm").val(),"DD/MM/YYYY").format("YYYY-MM-DD 00:00");
var dend=moment($("#mymodal-event-mod #event_endm").val(),"DD/MM/YYYY").add("1","d").format("YYYY-MM-DD 00:00");
}
else {
var start=moment($("#mymodal-event-mod #event_start_timem").val(),"DD/MM/YYYY HH:mm");
var end=moment($("#mymodal-event-mod #event_end_timem").val(),"DD/MM/YYYY HH:mm");
if( start.isAfter(end) ) {
$("#mymodal-event-mod fieldset").append("<div class='alert alert-danger' style='margin: 5px 0px'>Date de début supérieure à date de fin</div>");
return;
}
var dstart=moment($("#mymodal-event-mod #event_start_timem").val(),"DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm");
var dend=moment($("#mymodal-event-mod #event_end_timem").val(),"DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm");
}
$.ajax({
method: "POST",
url: "{{ path('cadoles_portal_'~access~'_calendarevent_update') }}",
data: {
"id": $("#mymodal-event-mod #event_id").val(),
"title":$("#mymodal-event-mod #event_title").val(),
"description":$("#mymodal-event-mod #event_description").val(),
"start": dstart,
"end": dend,
"allday": $("#mymodal-event-mod #event_allday").bootstrapSwitch('state'),
"idcalendar": $("#mymodal-event-mod #event_calendar").val()
},
success: function(data) {
var idevent=$("#mymodal-event-mod #event_id").val();
// Modifification de l'event dans fullcalendar
$('#calendar').fullCalendar( 'removeEvents', idevent );
$('#calendar').fullCalendar('renderEvent',
{
id: idevent,
title: $("#mymodal-event-mod #event_title").val(),
description: $("#mymodal-event-mod #event_description").val(),
start: start,
end: end,
editable: true,
color: data.color,
allDay: $("#mymodal-event-mod #event_allday").bootstrapSwitch('state'),
calendar: $("#mymodal-event-mod #event_calendar").val()
},
false // make the event "stick"
);
$("#mymodal-event-mod").modal("hide");
}
});
}
function shareEvent() {
var id=$("#mymodal-event-mod #event_id").val();
var url="{{ path('cadoles_portal_'~access~'_calendarevent_share',{id:'xx'}) }}";
url=url.replace('xx',id);
$(location).attr('href',url);
}
function deleteEvent() {
$.ajax({
method: "POST",
url: "{{ path('cadoles_portal_'~access~'_calendarevent_delete') }}",
data: {
"id": $("#mymodal-event-mod #event_id").val(),
"idcalendar": $("#mymodal-event-mod #event_calendar").val()
},
success: function(data) {
var idevent=$("#mymodal-event-mod #event_id").val();
// Supression de l'event dans fullcalendar
$('#calendar').fullCalendar( 'removeEvents', idevent );
$("#mymodal-event-mod").modal("hide");
}
});
}
{% endblock %}