From a2613bb4f44f38be702e71f26dd4fbc8df6e80a4 Mon Sep 17 00:00:00 2001 From: jeroen Date: Thu, 1 Sep 2022 17:03:46 +0200 Subject: [PATCH] ENHANCEMENT: add.js was shared between add and edit --- assets/js/job/add.js | 207 +---------------------------------- assets/js/job/addedit.js | 204 ++++++++++++++++++++++++++++++++++ assets/js/job/edit.js | 2 + assets/scss/job/add.scss | 10 +- assets/scss/job/addedit.scss | 9 ++ assets/scss/job/edit.scss | 1 + templates/job/add.html.twig | 10 +- templates/job/edit.html.twig | 4 +- webpack.config.js | 1 + 9 files changed, 227 insertions(+), 221 deletions(-) create mode 100644 assets/js/job/addedit.js create mode 100644 assets/js/job/edit.js create mode 100644 assets/scss/job/addedit.scss create mode 100644 assets/scss/job/edit.scss diff --git a/assets/js/job/add.js b/assets/js/job/add.js index c9f99ac..41c5306 100644 --- a/assets/js/job/add.js +++ b/assets/js/job/add.js @@ -1,205 +1,2 @@ -import 'bootstrap'; -import moment from 'moment'; -import * as tempusDominus from '@eonasdan/tempus-dominus/dist/js/tempus-dominus'; -import momentparse from './momentjs-parse'; -import '/assets/scss/job/add.scss'; -import Utils from "./Utils"; - -document.addEventListener("readystatechange", event => { - if(event.target.readyState === 'complete') { - initDatePickers(); - initCronType(); - initHostType(); - initContainerType(); - initVarInputs(); - initRangeInput(); - initIntervalPattern(); - initEternalCheckbox(); - Utils.initTags(); - } -}); - -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 - } - }, -} -function initDatePickers() -{ - tempusDominus.extend(momentparse.load, 'DD/MM/yyyy HH:mm:ss'); - new tempusDominus.TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions); - new tempusDominus.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; - })); -} \ No newline at end of file +import './addedit'; +import '/assets/scss/job/add.scss'; \ No newline at end of file diff --git a/assets/js/job/addedit.js b/assets/js/job/addedit.js new file mode 100644 index 0000000..35327ef --- /dev/null +++ b/assets/js/job/addedit.js @@ -0,0 +1,204 @@ +import 'bootstrap'; +import moment from 'moment'; +import * as tempusDominus from '@eonasdan/tempus-dominus/dist/js/tempus-dominus'; +import momentparse from './momentjs-parse'; +import Utils from "./Utils"; + +document.addEventListener("readystatechange", event => { + if(event.target.readyState === 'complete') { + initDatePickers(); + initCronType(); + initHostType(); + initContainerType(); + initVarInputs(); + initRangeInput(); + initIntervalPattern(); + initEternalCheckbox(); + Utils.initTags(); + } +}); + +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 + } + }, +} +function initDatePickers() +{ + tempusDominus.extend(momentparse.load, 'DD/MM/yyyy HH:mm:ss'); + new tempusDominus.TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions); + new tempusDominus.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; + })); +} \ No newline at end of file diff --git a/assets/js/job/edit.js b/assets/js/job/edit.js new file mode 100644 index 0000000..09743c0 --- /dev/null +++ b/assets/js/job/edit.js @@ -0,0 +1,2 @@ +import './addedit'; +import '/assets/scss/job/edit.scss'; \ No newline at end of file diff --git a/assets/scss/job/add.scss b/assets/scss/job/add.scss index fecaa21..d4e45ce 100644 --- a/assets/scss/job/add.scss +++ b/assets/scss/job/add.scss @@ -1,9 +1 @@ -@import "assets/scss/base"; -@import "assets/scss/icons"; -@import "/node_modules/@eonasdan/tempus-dominus/dist/css/tempus-dominus.css"; -@import "assets/scss/tempus-dominus-dark"; - -.tag { - display: inline-block; - padding: 0 1em; -} \ No newline at end of file +@import "addedit"; \ No newline at end of file diff --git a/assets/scss/job/addedit.scss b/assets/scss/job/addedit.scss new file mode 100644 index 0000000..d788949 --- /dev/null +++ b/assets/scss/job/addedit.scss @@ -0,0 +1,9 @@ +@import "assets/scss/base"; +@import "assets/scss/icons"; +@import "/node_modules/@eonasdan/tempus-dominus/dist/css/tempus-dominus.css"; +@import "assets/scss/tempus-dominus-dark"; + +.tag { + display: inline-block; + padding: 0 1em; +} \ No newline at end of file diff --git a/assets/scss/job/edit.scss b/assets/scss/job/edit.scss new file mode 100644 index 0000000..5c539b2 --- /dev/null +++ b/assets/scss/job/edit.scss @@ -0,0 +1 @@ +@import "assets/scss/job/addedit.scss"; \ No newline at end of file diff --git a/templates/job/add.html.twig b/templates/job/add.html.twig index 02482b3..274cfbd 100644 --- a/templates/job/add.html.twig +++ b/templates/job/add.html.twig @@ -62,14 +62,14 @@
- - - {{ "job.addedit.generalinfo.hostlabel.helptext" | trans }} + +
- - + + + {{ "job.addedit.generalinfo.hostlabel.helptext" | trans }}

Job details

diff --git a/templates/job/edit.html.twig b/templates/job/edit.html.twig index 416b0a8..b1c7465 100644 --- a/templates/job/edit.html.twig +++ b/templates/job/edit.html.twig @@ -289,9 +289,9 @@ {% endblock %} {% block styles %} - {{ encore_entry_link_tags('job.add') }} + {{ encore_entry_link_tags('job.edit') }} {% endblock %} {% block scripts %} - {{ encore_entry_script_tags('job.add') }} + {{ encore_entry_script_tags('job.edit') }} {% endblock %} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index cf73714..091a0de 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,6 +24,7 @@ Encore .addEntry('job.index', './assets/js/job/index.js') .addEntry('job.view', './assets/js/job/view.js') .addEntry('job.add', './assets/js/job/add.js') + .addEntry('job.edit', './assets/js/job/edit.js') // When enabled, Webpack "splits" your files into smaller pieces for greater optimization. .splitEntryChunks()