when adding new appointment info about worker availabilities is visible

smash/web/static/js/appointment.js

@@ -17,7 +17,7 @@ function appointment_type_behaviour(checkboxes, outObject, api_call) {
             if ((checkbox.is(":checked") && checkbox.attr('id') != object_id) || (!checkbox.is(":checked") && checkbox.attr('id') == object_id)) {
                 var appointment_type = appointment_types_data[val];
                 if (appointment_type.can_be_parallelized) {
-                    result = Math.max(result, appointment_type.default_duration)
+                    result = Math.max(result, appointment_type.default_duration);
                 }
             }
         });
@@ -36,7 +36,7 @@ function appointment_type_behaviour(checkboxes, outObject, api_call) {
             if ((checkbox.is(":checked") && checkbox.attr('id') != object_id) || (!checkbox.is(":checked") && checkbox.attr('id') == object_id)) {
                 var appointment_type = appointment_types_data[val];
                 if (!appointment_type.can_be_parallelized) {
-                    result += appointment_type.default_duration
+                    result += appointment_type.default_duration;
                 }
             }
         });
@@ -66,6 +66,7 @@ function appointment_type_behaviour(checkboxes, outObject, api_call) {
             }
             global_time = Math.max(global_parallel_time, global_sequential_time);
             $(outObject).val(global_time + "");
+            $(outObject).trigger("change");
         }
 
     }
@@ -117,7 +118,7 @@ function appointment_date_change_behaviour(datetime_picker, worker_select, minut
         id = parseInt(id);
         for (var i = 0; i < availabilities.length; i++) {
             var availability = availabilities[i];
-            if (availability.link_who === id && appointment_id !== availability.appointment_id) {
+            if (availability.link_who === id && (appointment_id !== availability.appointment_id || appointment_id === undefined)) {
                 var event_start = Date.parse(availability.link_when);
                 var event_end = Date.parse(availability.link_end);
                 if (partialMatch && event_start >= date_start && event_start <= date_end) {
@@ -157,30 +158,33 @@ function appointment_date_change_behaviour(datetime_picker, worker_select, minut
         $(worker_select).addClass(previousClass);
     });
 
-    $(datetime_picker).on("dp.change", function () {
-        if ($(this).val() != "") {
-            var datetime_start = Date.parse($(this).val());
+    function timeChange() {
+        if ($(datetime_picker).val() != "") {
+            var datetime_start = Date.parse($(datetime_picker).val());
             var datetime_end = datetime_start + 60 * 1000 * parseInt(minutes_input.val());
-            var date = $(this).val().substr(0, 10);
+            if (isNaN(datetime_end)) {
+                datetime_end = datetime_start;
+            }
+            var date = $(datetime_picker).val().substr(0, 10);
             $.get('/api/availabilities/' + date, function (data) {
                 var options = $("option", worker_select);
                 for (var i = 0; i < options.length; i++) {
                     var option = options[i];
                     if (match_availability(option.value, data.holidays, true, datetime_start, datetime_end)) {
-                        console.log(data.holidays);
-                        console.log("HOLIDAY");
+                        // console.log(data.holidays);
+                        // console.log("HOLIDAY");
                         option.className = "worker-option-holiday";
                     } else if (match_availability(option.value, data.conflicts, true, datetime_start, datetime_end)) {
-                        console.log(data.conflicts);
-                        console.log("CONFLICT");
+                        // console.log(data.conflicts);
+                        // console.log("CONFLICT");
                         option.className = "worker-option-conflict";
                     } else if (match_availability(option.value, data.availabilities, false, datetime_start, datetime_end)) {
-                        console.log(data.availabilities);
-                        console.log("MATCH");
+                        // console.log(data.availabilities);
+                        // console.log("MATCH");
                         option.className = "worker-option-match";
                     } else if (match_availability(option.value, data.availabilities, true, datetime_start, datetime_end)) {
-                        console.log(data.availabilities);
-                        console.log("PARTIAL_MATCH");
+                        // console.log(data.availabilities);
+                        // console.log("PARTIAL_MATCH");
                         option.className = "worker-option-partial-match";
                     } else {
                         option.className = "worker-option-no-match";
@@ -189,7 +193,10 @@ function appointment_date_change_behaviour(datetime_picker, worker_select, minut
                 $(worker_select).trigger("change");
             });
         }
-    });
+    }
+
+    $(datetime_picker).on("dp.change", timeChange);
+    $(minutes_input).on("change", timeChange);
 
 }
 

smash/web/templates/appointments/add.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.print.css' %}" media="print">
 
     {% include "includes/datetimepicker.css.html" %}
+    <link rel="stylesheet" href="{% static 'css/appointment.css' %}">
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -139,6 +140,7 @@
 
         appointment_type_behaviour($("input[name='appointment_types']"), $("input[name='length']"), "{% url 'web.api.appointment_types' %}");
         appointment_flying_team_place_behaviour($("select[name='flying_team']"), $("select[name='location']"));
+        appointment_date_change_behaviour($("input[name='datetime_when']"), $("select[name='worker_assigned']"), $("input[name='length']"));
     </script>
 
     {% include "includes/datetimepicker.js.html" %}