<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4 & Angular 8
Author: KeenThemes
Website: http://www.keenthemes.com/
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
<!-- begin::Head -->
<head>
<base href="/static/">
<meta charset="utf-8" />
<title>ARE</title>
<meta name="description" content="Child datatable from local data">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--begin::Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
<!--end::Fonts -->
<!--begin::Global Theme Styles(used by all pages) -->
<!--begin:: Vendor Plugins -->
<link href="assets/plugins/general/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/tether/dist/css/tether.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-timepicker/css/bootstrap-timepicker.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/select2/dist/css/select2.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/ion-rangeslider/css/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/nouislider/distribute/nouislider.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/dropzone/dist/dropzone.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/quill/dist/quill.snow.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/summernote/dist/summernote.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/bootstrap-markdown/css/bootstrap-markdown.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/animate.css/animate.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/toastr/build/toastr.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/dual-listbox/dist/dual-listbox.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/cropperjs/dist/cropper.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/morris.js/morris.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/sweetalert2/dist/sweetalert2.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/socicon/css/socicon.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/plugins/line-awesome/css/line-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/plugins/flaticon/flaticon.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/plugins/flaticon2/flaticon.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/general/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" />
<!--end:: Vendor Plugins -->
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--begin:: Vendor Plugins for custom pages -->
<link href="assets/plugins/custom/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/@fullcalendar/core/main.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/@fullcalendar/daygrid/main.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/@fullcalendar/list/main.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/@fullcalendar/timegrid/main.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/datatables.net-select-bs4/css/select.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/jstree/dist/themes/default/style.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/jqvmap/dist/jqvmap.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/uppy/dist/uppy.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/custom/jkanban/dist/jkanban.min.css" rel="stylesheet" type="text/css" />
<!--end:: Vendor Plugins for custom pages -->
<!--end::Global Theme Styles -->
<!--begin::Layout Skins(used by all pages) -->
<!--end::Layout Skins -->
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
</head>
<!-- end::Head -->
<!-- begin::Body -->
<body class="kt-page--loading-enabled kt-page--loading ">
<!-- begin::Page loader -->
<!-- end::Page Loader -->
<!-- begin:: Page -->
<div class="kt-grid kt-grid--hor kt-grid--root">
<div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
<div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">
<div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch" id="kt_body">
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
<!-- begin:: Content -->
<div class="kt-container kt-grid__item kt-grid__item--fluid">
<div class="alert alert-light alert-elevate" role="alert">
<div class="alert-icon"><i class="flaticon-warning kt-font-brand"></i></div>
<div class="alert-text">
Autonomous Routing Engine.
</div>
</div>
<div class="kt-portlet kt-portlet--mobile">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon-doc"></i>
</span>
<h3 class="kt-portlet__head-title">
Select Files
</h3>
<div class="kt-portlet__body">
<form id="myFileForm" action="/FindSolution/" method="post" enctype="multipart/form-data">{% csrf_token %}
<label for="fileUploadBookings">{{ Tours }}</label>
<input name="Bookings" type="file" id="fileUploadBookings" required>
<label for="fileUploadDrivers">{{ Drivers }}</label>
<input name="Drivers" type="file" id="fileUploadDrivers">
<input class="btn btn-primary" type="submit" id="fileSubmit" required>
</form >
<label id="popUp">{% if error != None %} {{ error }} {% endif %} </label>
</div>
</div>
</div>
</div>
{% if routes != None %}
<div class="kt-portlet kt-portlet--mobile">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Route
</h3>
</div>
</div>
</div>
<div class="kt-portlet__body">
</div>
<div class="kt-portlet__body kt-portlet__body--fit">
<!--begin: Datatable -->
<div class="kt-datatable-route" id="child_data_route"></div>
<!--end: Datatable -->
</div>
{% endif %}
</div>
</div>
<!-- end:: Content -->
</div>
</div>
</div>
</div>
<!-- end:: Page -->
<!-- begin::Global Config(global config for global JS sciprts) -->
<script>
var KTAppOptions = {
"colors": {
"state": {
"brand": "#591df1",
"light": "#ffffff",
"dark": "#282a3c",
"primary": "#5867dd",
"success": "#34bfa3",
"info": "#36a3f7",
"warning": "#ffb822",
"danger": "#fd3995"
},
"base": {
"label": ["#c5cbe3", "#a1a8c3", "#3d4465", "#3e4466"],
"shape": ["#f0f3ff", "#d9dffa", "#afb4d4", "#646c9a"]
}
}
};
</script>
<!-- end::Global Config -->
<!--begin::Global Theme Bundle(used by all pages) -->
<!--begin:: Vendor Plugins -->
<script src="assets/plugins/general/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="assets/plugins/general/popper.js/dist/umd/popper.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/js-cookie/src/js.cookie.js" type="text/javascript"></script>
<script src="assets/plugins/general/moment/min/moment.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/tooltip.js/dist/umd/tooltip.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/perfect-scrollbar/dist/perfect-scrollbar.js" type="text/javascript"></script>
<script src="assets/plugins/general/sticky-js/dist/sticky.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/wnumb/wNumb.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery-form/dist/jquery.form.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/block-ui/jquery.blockUI.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-datepicker/js/locales/bootstrap-datepicker.fr.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/bootstrap-datepicker.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-datetime-picker/js/locales/bootstrap-datetimepicker.fr.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-timepicker/js/bootstrap-timepicker.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/bootstrap-timepicker.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-maxlength/src/bootstrap-maxlength.js" type="text/javascript"></script>
<script src="assets/plugins/general/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-select/dist/js/bootstrap-select.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-switch/dist/js/bootstrap-switch.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/bootstrap-switch.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/select2/dist/js/select2.full.js" type="text/javascript"></script>
<script src="assets/plugins/general/ion-rangeslider/js/ion.rangeSlider.js" type="text/javascript"></script>
<script src="assets/plugins/general/corejs-typeahead/dist/typeahead.bundle.js" type="text/javascript"></script>
<script src="assets/plugins/general/handlebars/dist/handlebars.js" type="text/javascript"></script>
<script src="assets/plugins/general/inputmask/dist/jquery.inputmask.bundle.js" type="text/javascript"></script>
<script src="assets/plugins/general/inputmask/dist/inputmask/inputmask.date.extensions.js" type="text/javascript"></script>
<script src="assets/plugins/general/inputmask/dist/inputmask/inputmask.numeric.extensions.js" type="text/javascript"></script>
<script src="assets/plugins/general/nouislider/distribute/nouislider.js" type="text/javascript"></script>
<script src="assets/plugins/general/owl.carousel/dist/owl.carousel.js" type="text/javascript"></script>
<script src="assets/plugins/general/autosize/dist/autosize.js" type="text/javascript"></script>
<script src="assets/plugins/general/clipboard/dist/clipboard.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/dropzone/dist/dropzone.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/dropzone.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/quill/dist/quill.js" type="text/javascript"></script>
<script src="assets/plugins/general/@yaireo/tagify/dist/tagify.polyfills.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/@yaireo/tagify/dist/tagify.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/summernote/dist/summernote.js" type="text/javascript"></script>
<script src="assets/plugins/general/markdown/lib/markdown.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-markdown/js/bootstrap-markdown.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/bootstrap-markdown.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/bootstrap-notify/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/bootstrap-notify.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery-validation/dist/additional-methods.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/jquery-validation.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/toastr/build/toastr.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/dual-listbox/dist/dual-listbox.js" type="text/javascript"></script>
<script src="assets/plugins/general/cropperjs/dist/cropper.js" type="text/javascript"></script>
<script src="assets/plugins/general/raphael/raphael.js" type="text/javascript"></script>
<script src="assets/plugins/general/morris.js/morris.js" type="text/javascript"></script>
<script src="assets/plugins/general/chart.js/dist/Chart.bundle.js" type="text/javascript"></script>
<script src="assets/plugins/general/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/plugins/jquery-idletimer/idle-timer.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/waypoints/lib/jquery.waypoints.js" type="text/javascript"></script>
<script src="assets/plugins/general/counterup/jquery.counterup.js" type="text/javascript"></script>
<script src="assets/plugins/general/es6-promise-polyfill/promise.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/sweetalert2/dist/sweetalert2.min.js" type="text/javascript"></script>
<script src="assets/plugins/general/js/global/integration/plugins/sweetalert2.init.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery.repeater/src/lib.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery.repeater/src/jquery.input.js" type="text/javascript"></script>
<script src="assets/plugins/general/jquery.repeater/src/repeater.js" type="text/javascript"></script>
<!--end:: Vendor Plugins -->
<script src="assets/js/scripts.bundle.js" type="text/javascript"></script>
<!--begin:: Vendor Plugins for custom pages -->
<script src="assets/plugins/custom/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/core/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/daygrid/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/google-calendar/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/interaction/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/list/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/@fullcalendar/timegrid/main.js" type="text/javascript"></script>
<script src="assets/plugins/custom/gmaps/gmaps.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/dist/es5/jquery.flot.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.resize.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.categories.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.pie.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.stack.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.crosshair.js" type="text/javascript"></script>
<script src="assets/plugins/custom/flot/source/jquery.flot.axislabels.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-bs4/js/dataTables.bootstrap4.js" type="text/javascript"></script>
<script src="assets/plugins/custom/js/global/integration/plugins/datatables.init.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-autofill/js/dataTables.autoFill.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jszip/dist/jszip.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/pdfmake/build/pdfmake.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/pdfmake/build/vfs_fonts.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons/js/buttons.colVis.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons/js/buttons.flash.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons/js/buttons.html5.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-buttons/js/buttons.print.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-colreorder/js/dataTables.colReorder.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-keytable/js/dataTables.keyTable.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-responsive/js/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-rowgroup/js/dataTables.rowGroup.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-rowreorder/js/dataTables.rowReorder.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-scroller/js/dataTables.scroller.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/datatables.net-select/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jstree/dist/jstree.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/jquery.vmap.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jqvmap/dist/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="assets/plugins/custom/uppy/dist/uppy.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="assets/plugins/custom/tinymce/themes/silver/theme.js" type="text/javascript"></script>
<script src="assets/plugins/custom/tinymce/themes/mobile/theme.js" type="text/javascript"></script>
<script src="assets/plugins/custom/jkanban/dist/jkanban.min.js" type="text/javascript"></script>
<!--end:: Vendor Plugins for custom pages -->
<!--end::Global Theme Bundle -->
<!--begin::Page Scripts(used by this page) -->
{% if routes != None %}
<script>
var KTDatatableChildDataLocalDemo = function() {
// Private functions
var subTableInit = function(e) {
$('<div/>').attr('id', 'child_data_route' + e.data.Driver).appendTo(e.detailCell).KTDatatable({
data: {
type: 'local',
source: e.data.Tours,
pageSize: 30,
},
// layout definition
layout: {
scroll: true,
height: 400,
footer: false,
},
sortable: false,
pagination: false,
// columns definition
columns: [
{
field: 'Id',
title: 'Tour Id',
type: 'number',
width: 70,
}, {
field: 'PickupTime',
title: 'Pickup Time',
type: 'number',
}, {
field: 'PickupLat',
title: 'Pickup Lat',
type: 'number',
}, {
field: 'PickupLong',
title: 'Pickup Long',
type: 'number',
}, {
field: 'DropoffLat',
title: 'Dropoff Lat',
type: 'number',
}, {
field: 'DropoffLong',
title: 'Dropoff Long',
type: 'number',
}, {
field: 'Distance',
title: 'Distance KM',
type: 'number',
width: 100,
}, {
field: 'Duration',
title: 'Duration Min',
type: 'number',
width: 100,
}],
});
};
// demo initializer
var mainTableInit = function() {
var dataJSONArray = {{ routes|safe }}
var datatable = $('.kt-datatable-route').KTDatatable({
// datasource definition
data: {
type: 'local',
source: dataJSONArray,
pageSize: 10, // display 20 records per page
},
// layout definition
layout: {
scroll: true,
height: 300,
footer: false,
spinner: {
type: 1,
theme: 'default',
},
},
sortable: false,
filterable: false,
pagination: false,
detail: {
title: 'Load sub table',
content: subTableInit,
},
// columns definition
columns: [
{
field: 'Driver',
title: '',
sortable: false,
width: 30,
textAlign: 'center',
}, {
field: 'DriverId',
title: 'Driver Id',
}, {
field: 'DepotLat',
title: 'Depot Lat',
type: 'number',
}, {
field: 'DepotLong',
title: 'Depot Long',
type: 'number',
}, {
field: 'StartTime',
title: 'Start Time',
}, {
field: 'BusyTime',
title: 'Busy Time Min',
type: 'number',
}, {
field: 'BusyKM',
title: 'Busy KM',
type: 'number',
}, {
field: 'FreeTime',
title: 'Free Time Min',
type: 'number',
}, {
field: 'FreeKM',
title: 'Free KM',
type: 'number',
}],
});
};
return {
// Public functions
init: function() {
// init dmeo
mainTableInit();
},
};
}();
jQuery(document).ready(function() {
KTDatatableChildDataLocalDemo.init();
});
</script>
{% endif %}
<!--<script src="assets/js/pages/crud/metronic-datatable/child/data-local.js" type="text/javascript" defer></script>-->
<!--end::Page Scripts -->
</body>
<!-- end::Body -->
</html>