diff --git a/smash/web/static/js/daily_planning.js b/smash/web/static/js/daily_planning.js
index 2bb9341335a17d58920a792e01b5a56c0834dcad..816a1ec4256b40b965c969e9108898c3b77e47bf 100644
--- a/smash/web/static/js/daily_planning.js
+++ b/smash/web/static/js/daily_planning.js
@@ -248,148 +248,146 @@ function remove_event(event) {
add_event(event, event.color, event.subject_id, event.location_id, boxBody);
}
-$(document).ready(function () {
- $('#calendar').fullCalendar({
+function addDailyPlanningCalendar(calendar_selector, replace_all, calendar_dict_props){
+
+ var customButtons = {
+ datePickerButton: {
+ text: 'select',
+ click: function () {
+ var $btnCustom = $('.fc-datePickerButton-button');
+ if ($(".calendar-datepicker").length > 0) {
+ $(".calendar-datepicker").remove();
+ }
+ else {
+ $btnCustom.after('<div class="calendar-datepicker"/>');
+ $(".calendar-datepicker").datepicker().on('changeDate', function (ev) {
+ $(calendar_selector).fullCalendar('gotoDate', ev.date);
+ $(".calendar-datepicker").remove();
+ });
+ }
+ }
+ },
+ save: {
+ text: 'Save',
+ click: function () {
+ calendarEvents = $(calendar_selector).fullCalendar('clientEvents');
+ eventsToPersist = [];
+ var saveButton = $(".fc-save-button");
+ var currentBorder = saveButton.css('border-color');
+ $.each(calendarEvents, function (i, calendar_event) {
+ if (calendar_event.rendering !== "background") {
+ eventsToPersist.push({
+ 'link_id': calendar_event.link_id,
+ 'appointment_id': calendar_event.appointment_id,
+ 'link_who': parseInt(calendar_event.resourceId),
+ 'start': calendar_event.start.format()
+ });
+ if (calendar_event.link_id !== undefined) {
+ var index = eventsCleared.indexOf(calendar_event.link_id);
+ if (index > -1) {
+ eventsCleared.splice(index, 1);
+ }
+ } else {
+ var index = appointmentsCleared.indexOf(calendar_event.appointment_id);
+ if (index > -1) {
+ appointmentsCleared.splice(index, 1);
+ }
+ }
+ }
+ });
+ $.post({
+ url: events_url,
+ data: {
+ events_to_persist: JSON.stringify(eventsToPersist),
+ events_to_clear: JSON.stringify(eventsCleared),
+ appointments_to_clear: JSON.stringify(appointmentsCleared)
+ },
+ dataType: "json"
+ }).done(function (data) {
+
+ saveButton.css('border-color', 'green');
+ setTimeout(function () {
+ saveButton.css('border-color', currentBorder);
+ }, 200);
+ }).error(function (data) {
+
+ console.log(data);
+ saveButton.css('border-color', 'red');
+ showErrorInfo("There was an unexpected problem with saving data. " + "Please contact administrators.");
+ setTimeout(function () {
+ saveButton.delay(200).css('border-color', currentBorder);
+ }, 200);
+ });
+ }
+ },
+ clear: {
+ text: 'Clear',
+ click: function () {
+ calendarEvents = $(calendar_selector).fullCalendar('clientEvents');
+ $.each(calendarEvents, function (i, calendar_event) {
+ remove_event(calendar_event);
+ });
+ }
+ },
+ toPdf: {
+ text: 'PDF',
+ click: function () {
+ var srcEl = document.getElementById("calendar");
+ var parent = srcEl.parentNode;
+ var container = document.createElement("div");
+ container.style.backgroundColor = "#FFFFFF";
+ container.style.width = "3840px";
+ document.body.appendChild(container);
+ container.appendChild(srcEl);
+
+ var pdf = new jsPDF('l', 'mm', [1485, 270]);
+ pdf.addHTML(container, function () {
+ pdf.save('daily-planning.pdf');
+ parent.appendChild(srcEl);
+ document.body.removeChild(container);
+ });
+ }
+ }
+ };
+
+ var default_properties = {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'agendaDay',
eventDurationEditable: false,
eventStartEditable: true,
editable: true,
selectable: true,
- eventOverlap: function (stillEvent, movingEvent) {
- if (stillEvent.rendering === "background") {
- return true;
- }
- return false;
- },
+ droppable: true,
weekends: false,
+ selectHelper: true,
+ groupByResource: true,
+ displayEventTime: true,
scrollTime: '08:00',
slotDuration: '00:30',
snapDuration: '00:05',
- displayEventTime: true,
- resourceOrder: 'role',
- resourceGroupField: 'role',
- dragRevertDuration: 0,
minTime: "08:00:00",
maxTime: "19:00:00",
- groupByResource: true,
- height: "auto",
- customButtons: {
- datePickerButton: {
- text: 'select',
- click: function () {
- var $btnCustom = $('.fc-datePickerButton-button');
- if ($(".calendar-datepicker").length > 0) {
- $(".calendar-datepicker").remove();
- }
- else {
- $btnCustom.after('<div class="calendar-datepicker"/>');
- $(".calendar-datepicker").datepicker().on('changeDate', function (ev) {
- $('#calendar').fullCalendar('gotoDate', ev.date);
- $(".calendar-datepicker").remove();
- });
- }
- }
- },
- save: {
- text: 'Save',
- click: function () {
- calendarEvents = $('#calendar').fullCalendar('clientEvents');
- eventsToPersist = [];
- var saveButton = $(".fc-save-button");
- var currentBorder = saveButton.css('border-color');
- $.each(calendarEvents, function (i, calendar_event) {
- if (calendar_event.rendering !== "background") {
- eventsToPersist.push({
- 'link_id': calendar_event.link_id,
- 'appointment_id': calendar_event.appointment_id,
- 'link_who': parseInt(calendar_event.resourceId),
- 'start': calendar_event.start.format()
- });
- if (calendar_event.link_id !== undefined) {
- var index = eventsCleared.indexOf(calendar_event.link_id);
- if (index > -1) {
- eventsCleared.splice(index, 1);
- }
- } else {
- var index = appointmentsCleared.indexOf(calendar_event.appointment_id);
- if (index > -1) {
- appointmentsCleared.splice(index, 1);
- }
- }
- }
- });
- $.post({
- url: events_url,
- data: {
- events_to_persist: JSON.stringify(eventsToPersist),
- events_to_clear: JSON.stringify(eventsCleared),
- appointments_to_clear: JSON.stringify(appointmentsCleared)
- },
- dataType: "json"
- }).done(function (data) {
-
- saveButton.css('border-color', 'green');
- setTimeout(function () {
- saveButton.css('border-color', currentBorder);
- }, 200);
- }).error(function (data) {
-
- console.log(data);
- saveButton.css('border-color', 'red');
- showErrorInfo("There was an unexpected problem with saving data. " +
- "Please contact administrators.");
- setTimeout(function () {
- saveButton.delay(200).css('border-color', currentBorder);
- }, 200);
- });
- }
- },
- clear: {
- text: 'Clear',
- click: function () {
- calendarEvents = $('#calendar').fullCalendar('clientEvents');
- $.each(calendarEvents, function (i, calendar_event) {
- remove_event(calendar_event);
- });
- }
- },
- toPdf: {
- text: 'PDF',
- click: function () {
- var srcEl = document.getElementById("calendar");
- var parent = srcEl.parentNode;
- var container = document.createElement("div");
- container.style.backgroundColor = "#FFFFFF";
- container.style.width = "3840px";
- document.body.appendChild(container);
- container.appendChild(srcEl);
-
- var pdf = new jsPDF('l', 'mm', [1485, 270]);
- pdf.addHTML(container, function () {
- pdf.save('daily-planning.pdf');
- parent.appendChild(srcEl);
- document.body.removeChild(container);
- });
- }
- }
-
- },
- viewRender: function (view, element) {
- var date = view.start.format('YYYY-MM-DD');
- $('#calendar').fullCalendar('removeEvents');
- get_subjects_events(date);
- },
businessHours: {
start: '08:00',
end: '19:00'
},
+ dragRevertDuration: 0,
+ height: "auto",
+ customButtons: customButtons,
header: {
left: 'prev,next today',
center: 'title, datePickerButton',
right: 'save, clear, toPdf'
},
- droppable: true,
+ // VIEW
+ viewRender: function (view, element) {
+ var date = view.start.format('YYYY-MM-DD');
+ $(calendar_selector).fullCalendar('removeEvents');
+ get_subjects_events(date);
+ },
+ // RESOURCES
+ resourceOrder: 'role',
+ resourceGroupField: 'role',
resourceAreaWidth: '15%',
resourceLabelText: 'Workers',
refetchResourcesOnNavigate: true,
@@ -421,7 +419,7 @@ $(document).ready(function () {
},
resources: function(callback){
setTimeout(function(){
- var view = $('#calendar').fullCalendar('getView');
+ var view = $(calendar_selector).fullCalendar('getView');
$.ajax({
url: resources_url,
type: 'GET',
@@ -431,13 +429,14 @@ $(document).ready(function () {
}
}).then(function(resources){
//Filter out roles
- var checked_roles = $('.role_list_item > input:checked').map( (i,e) => e.value).toArray();
- resources = resources.filter(resource => checked_roles.includes(resource.role));
- callback(resources)
+ if($('.role_list_item > input').length > 0){
+ var checked_roles = $('.role_list_item > input:checked').map( (i,e) => e.value).toArray();
+ resources = resources.filter(resource => checked_roles.includes(resource.role));
+ }
+ callback(resources);
});
}, 0);
},
- events: [],
eventRender: function (event, element) {
if (event.rendering !== 'background') {
var content =
@@ -457,6 +456,13 @@ $(document).ready(function () {
} else {
}
},
+ // EVENTS
+ eventOverlap: function (stillEvent, movingEvent) {
+ if (stillEvent.rendering === "background") {
+ return true;
+ }
+ return false;
+ },
selectAllow: function (selectInfo) {
return false;
},
@@ -471,7 +477,6 @@ $(document).ready(function () {
eventDragStart: function (event, jsEvent, view) {
$('.popover').popover('hide');
},
- selectHelper: true,
drop: function (date, jsEvent, ui, resourceId) {
$(this).remove();
},
@@ -482,9 +487,20 @@ $(document).ready(function () {
};
setTimeout(function() {resizeCalendarColumns()}, 100);
}
- });
-})
-;
+ };
+
+ // REPLACE DEFAULT PROPERTIES
+ if(replace_all){
+ default_properties = calendar_dict_props;
+ }else{
+ for (var key in calendar_dict_props) {
+ default_properties[key] = calendar_dict_props[key];
+ }
+ }
+
+ $(calendar_selector).fullCalendar(default_properties);
+
+}
//RESIZE COLUMNS AND ENABLE HORIZONTAL SCROLL
function resizeCalendarColumns(){
diff --git a/smash/web/templates/appointments/add.html b/smash/web/templates/appointments/add.html
index bf87695b3f1f00caf74b6db18777f2ec762445be..9fc04985e5e152a2daf9db4790479f9bff949f36 100644
--- a/smash/web/templates/appointments/add.html
+++ b/smash/web/templates/appointments/add.html
@@ -4,12 +4,16 @@
{% block styles %}
{{ block.super }}
+
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
<!-- fullCalendar 2.2.5-->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.min.css' %}">
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.print.css' %}" media="print">
+ <link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar_custom.print.css' %}" media="print" />
+ <link rel="stylesheet" href="{% static 'fullcalendar-scheduler/scheduler.min.css' %}">
+ <link rel="stylesheet" href="{% static 'css/daily_planning.css' %}">
{% include "includes/datetimepicker.css.html" %}
<link rel="stylesheet" href="{% static 'css/appointment.css' %}">
@@ -18,6 +22,17 @@
text-align: center !important;
margin: 0;
}
+ .tooltip_image{
+ width: 20px !important;
+ margin: 5px;
+ }
+ .subject_title{
+ padding: 0 !important;
+ }
+ .subject_title + .tooltip > .tooltip-inner, .column_title + .tooltip > .tooltip-inner {
+ background-color: #fafafa;
+ border: solid 1px #ccc;
+ }
</style>
{% endblock styles %}
@@ -47,49 +62,61 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
<form method="post" action="" class="form-horizontal">
{% csrf_token %}
- <div class="box-body">
- <div class="col-sm-6">
- {% for field in form %}
- <div class="form-group {% if field.errors %}has-error{% endif %} {% if field|is_checkbox %}multi-checkboxes{% endif %}">
- <label class="col-sm-4 control-label">
- {{ field.label }}
- </label>
-
- <div class="col-sm-8">
- {{ field|add_class:'form-control' }}
+ <div class="row">
+ <div class="box-body">
+ <div class="col-md-6">
+ {% for field in form %}
+ <div class="form-group {% if field.errors %}has-error{% endif %} {% if field|is_checkbox %}multi-checkboxes{% endif %}">
+ <label class="col-sm-4 control-label">
+ {{ field.label }}
+ </label>
+
+ <div class="col-sm-8">
+ {{ field|add_class:'form-control' }}
+ </div>
+
+ {% if field.errors %}
+ <span class="help-block">
+ {{ field.errors }}
+ </span>
+ {% endif %}
+ </div>
+ {% endfor %}
+ </div>
+ <div class="col-md-6">
+ <div class="box box-primary">
+ <div class="box-body no-padding">
+ <div id="side_calendar"></div>
</div>
-
- {% if field.errors %}
- <span class="help-block">
- {{ field.errors }}
- </span>
- {% endif %}
- </div>
- {% endfor %}
- </div>
- <div class="col-md-6">
- <div class="box box-primary">
- <div class="box-body no-padding">
- <div id="calendar"></div>
</div>
</div>
- </div>
- </div><!-- /.box-body -->
-
-
- <div class="box-footer">
- <div class="col-sm-6">
- <button type="submit" class="btn btn-block btn-success">Add</button>
- </div>
- <div class="col-sm-6">
- <a href="{% url 'web.views.visits' %}" class="btn btn-block btn-default">Cancel</a>
- </div>
- </div><!-- /.box-footer -->
+ </div><!-- /.box-body -->
+ </div>
+ <div class="row">
+ <div class="box-footer">
+ <div class="col-sm-6">
+ <button type="submit" class="btn btn-block btn-success">Add</button>
+ </div>
+ <div class="col-sm-6">
+ <a href="{% url 'web.views.visits' %}" class="btn btn-block btn-default">Cancel</a>
+ </div>
+ </div><!-- /.box-footer -->
+ </div>
</form>
</div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="box box-primary">
+ <div class="box-body no-padding">
+ <div id="calendar"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
{% endblock %}
@@ -101,8 +128,9 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
- <script src="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.min.js' %}"></script>
<script src="{% static 'js/appointment.js' %}"></script>
+ <script src="{% static 'fullcalendar-scheduler/lib/fullcalendar.min.js' %}"></script>
+ <script src="{% static 'fullcalendar-scheduler/scheduler.min.js' %}"></script>
<script>
$(function () {
$('#table').DataTable({
@@ -113,14 +141,16 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
"info": true,
"autoWidth": false
});
- $('#calendar').fullCalendar({
- defaultDate: moment('{{visit_start}}'),
+ //SIDE CALENDAR
+ addDailyPlanningCalendar('#side_calendar', true, {
+ schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
+ defaultDate: moment.max(moment('{{visit_start}}'), moment()),
+ editable: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
- editable: false,
dayClick: function (date, jsEvent, view) {
var dateString = date.format();
if (dateString.indexOf("T") >= 0) {
@@ -129,6 +159,7 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
dateString = dateString + " 09:00";
}
document.getElementById("id_datetime_when").value = dateString;
+ $('#id_datetime_when').change();
getWorkerAvailability();
},
eventClick: function (calEvent, jsEvent, view) {
@@ -214,7 +245,35 @@ New appointment for visit from {{visit_start}} to {{visit_end}}
}
$('select.search_worker_availability, input[name="datetime_when"], input[name="length"]').on("change", getWorkerAvailability);
+
+ $("#id_datetime_when").on("change paste keyup", function() {
+ var date = $("#id_datetime_when").val();
+ date = moment(date);
+ $('#calendar').fullCalendar('gotoDate', date);
+ });
+
+ var resources_url = '{% url 'web.api.workers.daily_planning' %}';
+ var events_url = '{% url 'web.api.events_persist' %}';
+
+ $(document).ready(function () {
+ addDailyPlanningCalendar('#calendar', false, {
+ eventDurationEditable: false,
+ eventStartEditable: false,
+ editable: false,
+ selectable: false,
+ droppable: false,
+ customButtons: {},
+ header: {
+ left: '',
+ center: 'title',
+ right: ''
+ }
+ });
+ });
+
</script>
{% include "includes/datetimepicker.js.html" %}
+ <script src="{% static 'js/daily_planning.js' %}"></script>
+
{% endblock scripts %}
diff --git a/smash/web/templates/daily_planning.html b/smash/web/templates/daily_planning.html
index 63b552701589c09f7ce5b04d23c9e827277bc131..4d6cc2058df16128406951a76d9223d55730fbeb 100644
--- a/smash/web/templates/daily_planning.html
+++ b/smash/web/templates/daily_planning.html
@@ -85,6 +85,10 @@
$('#calendar').fullCalendar('refetchResources');
}
+ $(document).ready(function () {
+ addDailyPlanningCalendar('#calendar', false, {});
+ });
+
</script>
{% include "includes/datepicker.js.html" %}
<script src="{% static 'js/daily_planning.js' %}"></script>