when editing appointment time is default time si computed automatically

smash/web/templates/appointments/edit.html

@@ -121,6 +121,7 @@
 	<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
 	<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
 	<script>
+    var appointment_types_data = null;
 		$(function () {
 			$('#table').DataTable({
 			  "paging": true,
@@ -131,6 +132,46 @@
 			  "autoWidth": false
 			});
 		});
+    function get_appointment_type_by_id(id) {
+      for (var i=0 ;i <appointment_types_data.length;i++) {
+        if (id == appointment_types_data[i].id) {
+          return appointment_types_data[i];
+        }
+      }
+      return null;
+    }
+    function compute_time(object) {
+      var vals = object.val();
+      var time = 0;
+      var max_paralel_time = 0;
+      for (var i=0;i<vals.length;i++) {
+        var appointment_type = get_appointment_type_by_id(vals[i]);
+        if (appointment_type== null) {
+          console.log("Cannot find appointment type with id: "+vals[i]);
+        } else {
+          if (appointment_type.can_be_parallelized) {
+            max_paralel_time = Math.max(max_paralel_time,appointment_type.default_duration);
+          } else {
+            time +=appointment_type.default_duration;
+          }
+        }
+      }
+      time = Math.max(time, max_paralel_time)
+      console.log(time);
+      $( "[name='length']" ).val(time+"");
+    }
+    $( "[name='appointment_types']" ).change(function() {
+      var object = $(this)
+      if (appointment_types_data===null) {
+        $.get("{% url 'web.api.appointment_types' %}", function(data) {
+          appointment_types_data= data.appointment_types;
+          compute_time(object);
+        });
+      } else {
+        compute_time(object);
+      }
+
+    });
 	</script>
 
   {% include "includes/datetimepicker.js.html" %}