NEW FEATURE: added datetimepicker

This commit is contained in:
Jeroen De Meerleer 2021-10-18 16:57:22 +02:00
parent 5c3da88979
commit 2338e07dab
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
10 changed files with 556 additions and 406 deletions

View File

@ -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>

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -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'});
document.querySelector('#lastrunselector').datetimepicker({format: 'DD/MM/YYYY HH:mm:ss'});
new TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
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()

View File

@ -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}.woff?ef3few') format('woff'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?ef3few##{$icomoon-font-family}') format('svg');
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?sh1tzq') format('truetype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?sh1tzq') format('woff'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?sh1tzq##{$icomoon-font-family}') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -26,28 +26,79 @@
-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;
content: $icon-view;
}
}
.icon-edit {
&:before {
content: $icon-edit;
content: $icon-edit;
}
}
.icon-run {
&:before {
content: $icon-run;
content: $icon-run;
}
}
.icon-warning {
&:before {
content: $icon-warning;
content: $icon-warning;
}
}
.icon-delete {
&:before {
content: $icon-delete;
content: $icon-delete;
}
}

View File

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

View File

@ -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";

823
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"