1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<?php declare(strict_types = 0);
/*
** Zabbix
** Copyright (C) 2001-2022 Zabbix SIA
**
** This program is free software; you can redistribute it and/or modify
** it under the terms of the GNU General Public License as published by
** the Free Software Foundation; either version 2 of the License, or
** (at your option) any later version.
**
** This program is distributed in the hope that it will be useful,
** but WITHOUT ANY WARRANTY; without even the implied warranty of
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
** GNU General Public License for more details.
**
** You should have received a copy of the GNU General Public License
** along with this program; if not, write to the Free Software
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
**/
use Widgets\Clock\Widget;
?>
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');
this._advanced_configuration = document.getElementById('adv_conf');
for (const colorpicker of this._form.querySelectorAll('.<?= ZBX_STYLE_COLOR_PICKER ?> 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._advanced_configuration.addEventListener('change', () => this.updateForm());
this.updateForm();
}
updateForm() {
const is_digital = this._clock_type.querySelector('input:checked').value == <?= Widget::TYPE_DIGITAL ?>;
const show_date_row = is_digital && this._advanced_configuration.checked && this._show_date.checked;
const show_time_row = is_digital && this._advanced_configuration.checked && this._show_time.checked;
const show_tzone_row = is_digital && this._advanced_configuration.checked && this._show_tzone.checked;
for (const element of this._form.querySelectorAll('.js-row-show, .js-row-adv-conf')) {
element.style.display = is_digital ? '' : 'none';
}
for (const element of this._form.querySelectorAll('.js-row-bg-color')) {
element.style.display = is_digital && this._advanced_configuration.checked ? '' : 'none';
}
for (const element of this._form.querySelectorAll('.fields-group-date')) {
element.style.display = show_date_row ? '' : 'none';
}
for (const element of this._form.querySelectorAll('.fields-group-time')) {
element.style.display = show_time_row ? '' : 'none';
}
for (const element of this._form.querySelectorAll('.fields-group-tzone')) {
element.style.display = show_tzone_row ? '' : 'none';
}
for (const element of this._form.querySelectorAll('.field-tzone-timezone, .field-tzone-format')) {
element.style.display = this._time_type.value != <?= TIME_TYPE_HOST ?> ? '' : 'none';
}
}
};
|
