NEW FEATURE: added datetimepicker

assets/fonts/icomoon.svg

@@ -8,8 +8,16 @@
 <missing-glyph horiz-adv-x="512" />
 <glyph unicode="&#x20;" horiz-adv-x="256" d="" />
 <glyph unicode="&#xf002;" glyph-name="view" horiz-adv-x="475" d="M329.143 237.714c0 70.572-57.428 128-128 128s-128-57.428-128-128 57.428-128 128-128 128 57.428 128 128zM475.428 0c0-20-16.572-36.572-36.572-36.572-9.714 0-19.143 4-25.714 10.857l-98 97.714c-33.428-23.143-73.428-35.428-114-35.428-111.143 0-201.143 90-201.143 201.143s90 201.143 201.143 201.143 201.143-90 201.143-201.143c0-40.571-12.286-80.571-35.428-114l98-98c6.572-6.572 10.572-16 10.572-25.714z" />
+<glyph unicode="&#xf00d;" glyph-name="close, remove, times" horiz-adv-x="402" d="M370.857 97.714c0-7.143-2.857-14.286-8-19.428l-38.857-38.857c-5.143-5.143-12.286-8-19.428-8s-14.286 2.857-19.428 8l-84 84-84-84c-5.143-5.143-12.285-8-19.428-8s-14.285 2.857-19.428 8l-38.857 38.857c-5.143 5.143-8 12.286-8 19.428s2.857 14.286 8 19.428l84 84-84 84c-5.143 5.143-8 12.286-8 19.428s2.857 14.286 8 19.428l38.857 38.857c5.143 5.143 12.285 8 19.428 8s14.285-2.857 19.428-8l84-84 84 84c5.143 5.143 12.286 8 19.428 8s14.286-2.857 19.428-8l38.857-38.857c5.143-5.143 8-12.286 8-19.428s-2.857-14.286-8-19.428l-84-84 84-84c5.143-5.143 8-12.286 8-19.428z" />
+<glyph unicode="&#xf017;" glyph-name="clock-o" horiz-adv-x="439" d="M256 320v-128c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143v18.286c0 5.143 4 9.143 9.143 9.143h64v100.572c0 5.143 4 9.143 9.143 9.143h18.285c5.143 0 9.143-4 9.143-9.143zM374.857 219.429c0 85.714-69.714 155.428-155.429 155.428s-155.429-69.714-155.429-155.428 69.714-155.428 155.429-155.428 155.429 69.714 155.429 155.428zM438.857 219.429c0-121.143-98.286-219.428-219.429-219.428s-219.429 98.286-219.429 219.428 98.285 219.429 219.429 219.429 219.429-98.286 219.429-219.429z" />
 <glyph unicode="&#xf040;" glyph-name="edit" horiz-adv-x="433" d="M103.715 36.572l26 26-67.143 67.143-26-26v-30.572h36.572v-36.572h30.572zM253.143 301.714c0 3.714-2.571 6.286-6.286 6.286-1.714 0-3.429-0.572-4.857-2l-154.857-154.857c-1.428-1.428-2-3.143-2-4.857 0-3.714 2.572-6.286 6.285-6.286 1.715 0 3.428 0.572 4.857 2l154.857 154.857c1.429 1.429 2 3.143 2 4.857zM237.714 356.572l118.857-118.857-237.714-237.714h-118.857v118.857zM432.857 329.143c0-9.714-4-19.143-10.572-25.714l-47.428-47.428-118.857 118.857 47.428 47.143c6.572 6.857 16 10.857 25.714 10.857s19.143-4 26-10.857l67.143-66.857c6.572-6.857 10.572-16.285 10.572-26z" />
 <glyph unicode="&#xf04b;" glyph-name="run" horiz-adv-x="404" d="M395.428 210.572l-379.428-210.857c-8.857-4.857-16-0.572-16 9.428v420.572c0 10 7.143 14.285 16 9.428l379.428-210.857c8.857-4.857 8.857-12.857 0-17.714z" />
+<glyph unicode="&#xf053;" glyph-name="chevron-left" horiz-adv-x="384" d="M334.572 389.429l-151.714-151.714 151.714-151.714c7.143-7.143 7.143-18.572 0-25.714l-47.428-47.428c-7.143-7.143-18.572-7.143-25.714 0l-212 212c-7.143 7.143-7.143 18.572 0 25.714l212 212c7.143 7.143 18.572 7.143 25.714 0l47.428-47.428c7.143-7.143 7.143-18.572 0-25.715z" />
+<glyph unicode="&#xf054;" glyph-name="chevron-right" horiz-adv-x="347" d="M316.286 224.857l-212-212c-7.143-7.143-18.572-7.143-25.715 0l-47.428 47.428c-7.143 7.143-7.143 18.572 0 25.714l151.714 151.714-151.714 151.714c-7.143 7.143-7.143 18.571 0 25.714l47.428 47.428c7.143 7.143 18.572 7.143 25.715 0l212-212c7.143-7.143 7.143-18.571 0-25.714z" />
+<glyph unicode="&#xf062;" glyph-name="arrow-up" horiz-adv-x="475" d="M460.286 198c0-9.714-4-18.857-10.572-25.714l-21.428-21.428c-6.857-6.857-16.286-10.857-26-10.857s-19.143 4-25.714 10.857l-84 83.714v-201.143c0-20.572-17.143-33.428-36.572-33.428h-36.572c-19.428 0-36.572 12.857-36.572 33.428v201.143l-84-83.714c-6.572-6.857-16-10.857-25.715-10.857s-19.143 4-25.715 10.857l-21.428 21.428c-6.857 6.857-10.857 16-10.857 25.714s4 19.143 10.857 26l186 186c6.572 6.857 16 10.571 25.714 10.571s19.143-3.714 26-10.571l186-186c6.572-6.857 10.572-16.286 10.572-26z" />
+<glyph unicode="&#xf063;" glyph-name="arrow-down" horiz-adv-x="475" d="M460.286 237.714c0-9.714-4-19.143-10.572-25.714l-186-186.286c-6.857-6.572-16.286-10.572-26-10.572s-19.143 4-25.714 10.572l-186 186.286c-6.857 6.572-10.857 16-10.857 25.714s4 19.143 10.857 26l21.143 21.428c6.857 6.572 16.285 10.572 26 10.572s19.143-4 25.715-10.572l84-84v201.143c0 20 16.572 36.572 36.572 36.572h36.572c20 0 36.572-16.572 36.572-36.572v-201.143l84 84c6.572 6.572 16 10.572 25.714 10.572s19.143-4 26-10.572l21.428-21.428c6.572-6.857 10.572-16.286 10.572-26z" />
 <glyph unicode="&#xf071;" glyph-name="warning" d="M292.572 82.572v54.286c0 5.143-4 9.428-9.143 9.428h-54.857c-5.143 0-9.143-4.286-9.143-9.428v-54.286c0-5.143 4-9.428 9.143-9.428h54.857c5.143 0 9.143 4.286 9.143 9.428zM292 189.429l5.143 131.143c0 1.714-0.857 4-2.857 5.429-1.714 1.428-4.286 3.143-6.857 3.143h-62.857c-2.571 0-5.143-1.714-6.857-3.143-2-1.429-2.857-4.286-2.857-6l4.857-130.572c0-3.714 4.286-6.572 9.714-6.572h52.857c5.143 0 9.428 2.857 9.714 6.572zM288 456.286l219.428-402.285c6.285-11.143 6-24.857-0.572-36s-18.572-18-31.428-18h-438.857c-12.857 0-24.857 6.857-31.428 18s-6.857 24.857-0.572 36l219.429 402.286c6.286 11.714 18.571 19.143 32 19.143s25.715-7.428 32-19.143z" />
+<glyph unicode="&#xf073;" glyph-name="calendar" horiz-adv-x="475" d="M36.572 0h82.285v82.286h-82.285v-82.286zM137.143 0h91.429v82.286h-91.428v-82.286zM36.572 100.572h82.285v91.428h-82.285v-91.428zM137.143 100.572h91.429v91.428h-91.428v-91.428zM36.572 210.286h82.285v82.286h-82.285v-82.286zM246.857 0h91.429v82.286h-91.428v-82.286zM137.143 210.286h91.429v82.286h-91.428v-82.286zM356.572 0h82.286v82.286h-82.286v-82.286zM246.857 100.572h91.429v91.428h-91.428v-91.428zM146.286 347.429v82.285c0 4.857-4.286 9.143-9.143 9.143h-18.285c-4.857 0-9.143-4.286-9.143-9.143v-82.285c0-4.857 4.285-9.143 9.143-9.143h18.285c4.857 0 9.143 4.286 9.143 9.143zM356.572 100.572h82.286v91.428h-82.286v-91.428zM246.857 210.286h91.429v82.286h-91.428v-82.286zM356.572 210.286h82.286v82.286h-82.286v-82.286zM365.714 347.429v82.285c0 4.857-4.286 9.143-9.143 9.143h-18.286c-4.857 0-9.143-4.286-9.143-9.143v-82.285c0-4.857 4.286-9.143 9.143-9.143h18.286c4.857 0 9.143 4.286 9.143 9.143zM475.428 365.714v-365.714c0-20-16.572-36.572-36.572-36.572h-402.286c-20 0-36.572 16.572-36.572 36.572v365.714c0 20 16.572 36.571 36.572 36.571h36.572v27.429c0 25.143 20.572 45.714 45.715 45.714h18.286c25.143 0 45.714-20.572 45.714-45.714v-27.429h109.714v27.429c0 25.143 20.572 45.714 45.714 45.714h18.286c25.143 0 45.714-20.572 45.714-45.714v-27.429h36.572c20 0 36.572-16.571 36.572-36.571z" />
 <glyph unicode="&#xf1f8;" glyph-name="delete" horiz-adv-x="402" d="M146.286 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.285c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.285c5.143 0 9.143 4 9.143 9.143zM219.429 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.286c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.286c5.143 0 9.143 4 9.143 9.143zM292.572 82.286v201.143c0 5.143-4 9.143-9.143 9.143h-18.286c-5.143 0-9.143-4-9.143-9.143v-201.143c0-5.143 4-9.143 9.143-9.143h18.286c5.143 0 9.143 4 9.143 9.143zM137.143 365.714h128l-13.714 33.429c-0.857 1.143-3.429 2.857-4.857 3.143h-90.571c-1.714-0.285-4-2-4.857-3.143zM402.286 356.572v-18.285c0-5.143-4-9.143-9.143-9.143h-27.428v-270.857c0-31.428-20.572-58.286-45.714-58.286h-237.714c-25.143 0-45.715 25.714-45.715 57.143v272h-27.428c-5.143 0-9.143 4-9.143 9.143v18.286c0 5.143 4 9.143 9.143 9.143h88.285l20 47.714c5.715 14 22.857 25.428 38 25.428h91.428c15.143 0 32.286-11.428 38-25.428l20-47.714h88.286c5.143 0 9.143-4 9.143-9.143z" />
+<glyph unicode="&#xf274;" glyph-name="calendar-check-o" horiz-adv-x="475" d="M372.286 200l-146.286-146.286c-3.714-3.428-9.428-3.428-13.143 0l-82.285 82.286c-3.428 3.714-3.428 9.428 0 12.857l13.143 13.143c3.429 3.428 9.143 3.428 12.857 0l62.857-62.857 126.857 126.857c3.714 3.429 9.428 3.429 12.857 0l13.143-13.143c3.428-3.428 3.428-9.143 0-12.857zM36.572 0h402.286v292.572h-402.286v-292.572zM146.286 347.429v82.285c0 5.143-4 9.143-9.143 9.143h-18.285c-5.143 0-9.143-4-9.143-9.143v-82.285c0-5.143 4-9.143 9.143-9.143h18.285c5.143 0 9.143 4 9.143 9.143zM365.714 347.429v82.285c0 5.143-4 9.143-9.143 9.143h-18.286c-5.143 0-9.143-4-9.143-9.143v-82.285c0-5.143 4-9.143 9.143-9.143h18.286c5.143 0 9.143 4 9.143 9.143zM475.428 365.714v-365.714c0-20-16.572-36.572-36.572-36.572h-402.286c-20 0-36.572 16.572-36.572 36.572v365.714c0 20 16.572 36.571 36.572 36.571h36.572v27.429c0 25.143 20.572 45.714 45.715 45.714h18.286c25.143 0 45.714-20.572 45.714-45.714v-27.429h109.714v27.429c0 25.143 20.572 45.714 45.714 45.714h18.286c25.143 0 45.714-20.572 45.714-45.714v-27.429h36.572c20 0 36.572-16.571 36.572-36.571z" />
 </font></defs></svg>

assets/js/job/add.js

@@ -1,8 +1,9 @@
 import 'bootstrap';
+import {TempusDominus,DateTime} from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
-        // initDatePickers();
+        initDatePickers();
         initCronType();
         initHostType();
         initContainerType();
@@ -13,10 +14,51 @@ document.addEventListener("readystatechange", event => {
     }
 });
 
+const timepickerOptions = {
+    localization:{
+        locale: 'nl'
+    },
+    display: {
+        icons: {
+            time: 'icon-clock-o',
+            date: 'icon-calendar',
+            up: 'icon-arrow-up',
+            down: 'icon-arrow-down',
+            previous: 'icon-chevron-left',
+            next: 'icon-chevron-right',
+            today: 'icon-calendar-check-o',
+            clear: 'icon-delete',
+            close: 'icon-x',
+        },
+        components: {
+            seconds: true
+        }
+    },
+    hooks: { inputFormat: (context, date) => {
+            return date.getDate().toString().padStart(2, '0') + '/' +
+                (date.getMonth() + 1).toString().padStart(2, '0') + '/' +
+                date.getFullYear().toString().padStart(2, '0') + ' '  +
+                date.getHours().toString().padStart(2, '0') + ':'  +
+                date.getMinutes().toString().padStart(2, '0') + ':' +
+                date.getSeconds().toString().padStart(2, '0')
+        },
+        inputParse: (context, value) => {
+            let day = parseInt(value.substring(0,2));
+            let month = parseInt(value.substring(3,5)) - 1;
+            let year = parseInt(value.substring(6,10));
+            let hour = parseInt(value.substring(11,13));
+            let min = parseInt(value.substring(14,16));
+            let sec = parseInt(value.substring(17,19));
+            return new DateTime(year, month, day, hour, min, sec, 0).setLocale('en');
+        }
+    }
+}
 function initDatePickers()
 {
-    document.querySelector('#nextrunselector').datetimepicker({format: 'DD/MM/YYYY HH:mm:ss'});
+    new TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
-    document.querySelector('#lastrunselector').datetimepicker({format: 'DD/MM/YYYY HH:mm:ss'});
+    new TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);
+    //document.querySelector('#nextrunselector').datetimepicker({format: 'DD/MM/YYYY HH:mm:ss'});
+    //document.querySelector('#lastrunselector').datetimepicker({format: 'DD/MM/YYYY HH:mm:ss'});
 }
 
 function initCronType()

assets/scss/icons.scss

@@ -3,9 +3,9 @@
 @font-face {
   font-family: '#{$icomoon-font-family}';
   src:
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?ef3few') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?sh1tzq') format('truetype'),
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?ef3few') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?sh1tzq') format('woff'),
-          url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?ef3few##{$icomoon-font-family}') format('svg');
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?sh1tzq##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -26,6 +26,56 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-close {
+  &:before {
+    content: $icon-close; 
+  }
+}
+.icon-remove {
+  &:before {
+    content: $icon-remove; 
+  }
+}
+.icon-times {
+  &:before {
+    content: $icon-times; 
+  }
+}
+.icon-clock-o {
+  &:before {
+    content: $icon-clock-o; 
+  }
+}
+.icon-chevron-left {
+  &:before {
+    content: $icon-chevron-left; 
+  }
+}
+.icon-chevron-right {
+  &:before {
+    content: $icon-chevron-right; 
+  }
+}
+.icon-arrow-up {
+  &:before {
+    content: $icon-arrow-up; 
+  }
+}
+.icon-arrow-down {
+  &:before {
+    content: $icon-arrow-down; 
+  }
+}
+.icon-calendar {
+  &:before {
+    content: $icon-calendar; 
+  }
+}
+.icon-calendar-check-o {
+  &:before {
+    content: $icon-calendar-check-o; 
+  }
+}
 .icon-view {
   &:before {
     content: $icon-view; 
@@ -51,3 +101,4 @@
     content: $icon-delete; 
   }
 }
+

assets/scss/job/add.scss

@@ -1 +1,3 @@
 @import "../base";
+@import "../icons";
+@import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";

assets/scss/vars.scss

@@ -1,8 +1,19 @@
 $icomoon-font-family: "icomoon" !default;
 $icomoon-font-path: "../fonts" !default;
 
+$icon-close: "\f00d";
+$icon-remove: "\f00d";
+$icon-times: "\f00d";
+$icon-clock-o: "\f017";
+$icon-chevron-left: "\f053";
+$icon-chevron-right: "\f054";
+$icon-arrow-up: "\f062";
+$icon-arrow-down: "\f063";
+$icon-calendar: "\f073";
+$icon-calendar-check-o: "\f274";
 $icon-view: "\f002";
 $icon-edit: "\f040";
 $icon-run: "\f04b";
 $icon-warning: "\f071";
 $icon-delete: "\f1f8";
+

package.json

@@ -7,6 +7,7 @@
     "lib": "lib"
   },
   "dependencies": {
+    "@eonasdan/tempus-dominus": "^6.0.0-alpha1.0.3",
     "@popperjs/core": "^2.10.1",
     "bootstrap": "^5.1.1",
     "font-awesome": "^4.7.0"