window.widget_clock_form = new class { init() { this._form = document.getElementById('widget-dialogue-form'); this._time_type = document.getElementById('time_type'); this._clock_type = document.getElementById('clock_type'); this._show_date = document.getElementById('show_1'); this._show_time = document.getElementById('show_2'); this._show_tzone = document.getElementById('show_3'); for (const colorpicker of this._form.querySelectorAll('. input')) { $(colorpicker).colorpicker({ appendTo: '.overlay-dialogue-body', use_default: true, onUpdate: window.setIndicatorColor }); } this._time_type.addEventListener('change', () => { ZABBIX.Dashboard.reloadWidgetProperties(); this.updateForm(); }); for (const checkbox of this._clock_type.querySelectorAll('input')) { checkbox.addEventListener('change', () => this.updateForm()); } const show = [this._show_date, this._show_time, this._show_tzone]; for (const checkbox of show) { checkbox.addEventListener('change', (e) => { if (show.filter((checkbox) => checkbox.checked).length > 0) { this.updateForm(); } else { e.target.checked = true; } }); } this.updateForm(); } updateForm() { const is_digital = this._clock_type.querySelector('input:checked').value == ; for (const element of this._form.querySelectorAll('.js-row-show')) { element.style.display = is_digital ? '' : 'none'; } this._form.querySelector('.js-fieldset-adv-conf').style.display = is_digital ? 'contents' : 'none'; if (is_digital) { for (const element of this._form.querySelectorAll('.fields-group-date')) { element.style.display = this._show_date.checked ? '' : 'none'; } for (const element of this._form.querySelectorAll('.fields-group-time')) { element.style.display = this._show_time.checked ? '' : 'none'; } for (const element of this._form.querySelectorAll('.fields-group-tzone')) { element.style.display = this._show_tzone.checked ? '' : 'none'; } for (const element of this._form.querySelectorAll('.field-tzone-timezone, .field-tzone-format')) { element.style.display = this._time_type.value != ? '' : 'none'; } } } };