217 lines
10 KiB
JavaScript
217 lines
10 KiB
JavaScript
import 'bootstrap';
|
|
import {TempusDominus,DateTime} from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
|
|
|
|
document.addEventListener("readystatechange", event => {
|
|
if(event.target.readyState === 'complete') {
|
|
initDatePickers();
|
|
initCronType();
|
|
initHostType();
|
|
initContainerType();
|
|
initVarInputs();
|
|
initRangeInput();
|
|
initIntervalPattern();
|
|
initEternalCheckbox();
|
|
}
|
|
});
|
|
|
|
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,
|
|
useTwentyfourHour: 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()
|
|
{
|
|
new TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
|
|
new TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);
|
|
}
|
|
|
|
function initCronType()
|
|
{
|
|
let crontypegroupbtn = document.querySelector('.crontype-group button');
|
|
crontypegroupbtn.dataset.defaultText = crontypegroupbtn.innerHTML.trim();
|
|
|
|
document.querySelectorAll('.crontype-item').forEach(elem => {
|
|
elem.addEventListener('click', event => {
|
|
let type = event.target.dataset.type;
|
|
document.getElementById('crontypeButton').innerText = event.target.innerText;
|
|
document.querySelector('.crontype').value = type;
|
|
document.querySelectorAll('.crontype-inputs:not(.d-none)').forEach(elem => elem.classList.add('d-none'));
|
|
document.querySelector('.crontype-' + type).classList.remove('d-none');
|
|
|
|
document.querySelectorAll('.crontype-inputs:not(.d-none) input').forEach(elem => elem.disabled = false);
|
|
document.querySelectorAll('.crontype-inputs.d-none input').forEach(elem => elem.disabled = true);
|
|
|
|
if (type == 'http') {
|
|
document.querySelectorAll('.croncategory-group:not(.crontype-group) button').forEach(elem => elem.innerText = elem.dataset.defaultText)
|
|
|
|
document.querySelectorAll('.croncategory-group').forEach(elem => elem.classList.remove('btn-group'));
|
|
document.querySelectorAll('.croncategory-group:not(.crontype-group)').forEach(elem => elem.classList.add('d-none'));
|
|
document.querySelectorAll('.croncategory-inputs:not(.crontype-inputs)').forEach(elem => elem.classList.add('d-none'));
|
|
|
|
document.querySelectorAll('.croncategory-inputs:not(.d-none) input').forEach(elem => elem.disabled = false);
|
|
document.querySelectorAll('.croncategory-inputs.d-none input').forEach(elem => elem.disabled = true);
|
|
}
|
|
if (type == 'reboot') {
|
|
if (document.querySelector('#btn-group-discriminator') === null) {
|
|
let discriminator = document.createElement('div');
|
|
discriminator.classList.add('d-none');
|
|
discriminator.id = 'btn-group-discriminator';
|
|
document.querySelector('body').append(discriminator);
|
|
}
|
|
document.querySelectorAll('.croncategory-group.containertype-group button').forEach(elem => elem.innerText = elem.dataset.defaultText)
|
|
|
|
document.querySelectorAll('.croncategory-group').forEach(elem => elem.classList.add('btn-group'))
|
|
document.querySelectorAll('.croncategory-group').forEach(elem => elem.classList.remove('d-none'))
|
|
|
|
if(document.querySelector('#btn-group-discriminator') !== null) {
|
|
document.querySelector('#btn-group-discriminator').append(document.querySelector('.containertype-group'));
|
|
}
|
|
|
|
let containergroupselect = document.querySelector('.croncategory-selector .containertype-group');
|
|
if (containergroupselect !== null) containergroupselect.remove();
|
|
|
|
document.querySelectorAll('.croncategory-group.containertype-group').forEach(elem => elem.classList.add('d-none'))
|
|
document.querySelectorAll('.croncategory-inputs.containertype-inputs').forEach(elem => elem.classList.add('d-none'))
|
|
|
|
document.querySelectorAll('.croncategory-inputs:not(.d-none) input').forEach(elem => elem.disabled = false)
|
|
document.querySelectorAll('.croncategory-inputs.d-none input').forEach(elem => elem.disabled = true)
|
|
}
|
|
if (type == 'command') {
|
|
if (document.querySelector('#btn-group-discriminator .containertype-group') !== null) {
|
|
document.querySelector('.croncategory-selector').append(document.querySelector('#btn-group-discriminator .containertype-group'));
|
|
}
|
|
document.querySelectorAll('.croncategory-group').forEach(elem => elem.classList.add('btn-group'));
|
|
document.querySelectorAll('.croncategory-group').forEach(elem => elem.classList.remove('d-none'));
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
function initHostType()
|
|
{
|
|
|
|
document.querySelector('.hosttype-group button').dataset.defaultText = document.querySelector('.hosttype-group button').innerHTML.trim();
|
|
document.querySelectorAll('.hosttype-item').forEach(elem => {
|
|
elem.addEventListener('click', event => {
|
|
|
|
document.querySelector('#hosttypeButton').innerHTML = event.target.innerHTML;
|
|
let type = event.target.dataset.type;
|
|
document.querySelector('.hosttype').value = type;
|
|
document.querySelectorAll('.hosttype-inputs:not(.d-none)').forEach(elem => elem.classList.add('d-none'));
|
|
document.querySelectorAll('.hosttype-' + type).forEach(elem => elem.classList.remove('d-none'));
|
|
|
|
document.querySelectorAll('.hosttype-inputs:not(.d-none) input').forEach(elem => elem.disabled = false);
|
|
document.querySelectorAll('.hosttype-inputs.d-none input').forEach(elem => elem.disabled = true);
|
|
})
|
|
})
|
|
|
|
if (document.querySelector('.privkey-keep') !== null) {
|
|
document.querySelector('.privkey-keep').addEventListener('click', event => {
|
|
document.querySelector('#privkey').disabled = event.target.checked
|
|
})
|
|
}
|
|
}
|
|
|
|
function initContainerType()
|
|
{
|
|
|
|
document.querySelector('.containertype-group button').dataset.defaultText = document.querySelector('.containertype-group button').innerHTML.trim();
|
|
document.querySelectorAll('.containertype-item').forEach(elem => {
|
|
elem.addEventListener('click', event => {
|
|
|
|
document.querySelector('#containertypeButton').innerHTML = event.target.innerHTML;
|
|
let type = event.target.dataset.type;
|
|
document.querySelector('.containertype').value = type;
|
|
|
|
|
|
document.querySelectorAll('.containertype-inputs:not(.d-none)').forEach(elem => elem.classList.add('d-none'));
|
|
document.querySelectorAll('.containertype-' + type).forEach(elem => elem.classList.remove('d-none'));
|
|
|
|
document.querySelectorAll('.containertype-inputs:not(.d-none) input').forEach(elem => elem.disabled = false);
|
|
document.querySelectorAll('.containertype-inputs.d-none input').forEach(elem => elem.disabled = true);
|
|
})
|
|
})
|
|
}
|
|
|
|
function initRangeInput() {
|
|
document.querySelector('.range-input-fail-pct').addEventListener('input', event => {
|
|
document.querySelector('.range-value-fail-pct').innerHTML = event.target.value + '%';
|
|
})
|
|
}
|
|
|
|
function initVarInputs()
|
|
{
|
|
document.querySelector('.addvar-btn').addEventListener('click', event => {
|
|
let index = document.querySelectorAll('.var-group').length;
|
|
let group = document.querySelector('.var-group');
|
|
|
|
let newgroup = group.cloneNode(true);
|
|
newgroup.classList.remove('d-none');
|
|
newgroup.dataset.index = index;
|
|
newgroup.querySelector('.var-issecret').name = 'var-issecret[' + index + ']';
|
|
newgroup.querySelector('.var-issecret').addEventListener('click', handleSecretCheckbox);
|
|
newgroup.querySelector('.var-id').name = 'var-id[' + index + ']';
|
|
newgroup.querySelector('.var-value').name = 'var-value[' + index + ']';
|
|
|
|
document.querySelector('.vars').append(newgroup);
|
|
document.querySelector('.vars-description').classList.remove('d-none');
|
|
})
|
|
document.querySelectorAll('.var-issecret').forEach(elem => elem.addEventListener('click', handleSecretCheckbox));
|
|
}
|
|
|
|
function handleSecretCheckbox(event) {
|
|
let ischecked = event.target.checked;
|
|
event.target.closest('.var-group').querySelector('.var-value').type = ischecked ? 'password' : 'text';
|
|
}
|
|
|
|
function initEternalCheckbox() {
|
|
document.querySelector('.lastrun-eternal').addEventListener('click', event => {
|
|
let nextrunselector = document.querySelector('#lastrunselector');
|
|
nextrunselector.disabled = event.target.checked;
|
|
nextrunselector.placeholder = event.target.checked ? '' : nextrunselector.dataset.placeholder;
|
|
nextrunselector.value = '';
|
|
})
|
|
}
|
|
|
|
function initIntervalPattern()
|
|
{
|
|
document.querySelectorAll('.intervalpattern-item').forEach(elem => elem.addEventListener('click', event => {
|
|
let time = event.target.dataset.time;
|
|
document.querySelector('#interval').value = time;
|
|
}));
|
|
} |