<?php declare(strict_types = 0);
use Widgets\Clock\Widget;
window.widget_clock_form = new class {
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('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
$(colorpicker).colorpicker({
appendTo: '.overlay-dialogue-body',
onUpdate: window.setIndicatorColor
this._time_type.addEventListener('change', () => this.updateForm());
for (const checkbox of this._clock_type.querySelectorAll('input')) {
checkbox.addEventListener('change', () => this.updateForm());
for (const checkbox of [this._show_date, this._show_time, this._show_tzone]) {
checkbox.addEventListener('change', () => this.updateForm());
document.querySelectorAll('.js-row-itemid').forEach(element => {
element.style.display = this._time_type.value == <?= TIME_TYPE_HOST ?> ? '' : 'none'
$('#itemid').multiSelect(this._time_type.value != <?= TIME_TYPE_HOST ?> ? 'disable' : 'enable');
const is_digital = this._clock_type.querySelector('input:checked').value == <?= Widget::TYPE_DIGITAL ?>;
for (const element of this._form.querySelectorAll('.js-row-show')) {
element.style.display = is_digital ? '' : 'none';