Zabbix

<?php declare(strict_types = 0);

/*

** Copyright (C) 2001-2025 Zabbix SIA

**

** This program is free software: you can redistribute it and/or modify it under the terms of

** the GNU Affero General Public License as published by the Free Software Foundation, version 3.

**

** 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 Affero General Public License for more details.

**

** You should have received a copy of the GNU Affero General Public License along with this program.

** If not, see <https://www.gnu.org/licenses/>.

**/

​

​

use Widgets\Item\Widget;

​

?>

​

window.widget_item_form = new class {

​

    #is_item_numeric = false;

​

    init({thresholds_colors}) {

        this._form = document.getElementById('widget-dialogue-form');

​

        this._show_description = document.getElementById(`show_${<?= Widget::SHOW_DESCRIPTION ?>}`);

        this._show_value = document.getElementById(`show_${<?= Widget::SHOW_VALUE ?>}`);

        this._show_time = document.getElementById(`show_${<?= Widget::SHOW_TIME ?>}`);

        this._show_change_indicator = document.getElementById(`show_${<?= Widget::SHOW_CHANGE_INDICATOR ?>}`);

​

        this._units_show = document.getElementById('units_show');

​

        jQuery('#itemid').on('change', () => {

            this.#promiseGetItemType()

                .then((type) => {

                    if (this._form.isConnected) {

                        this.#is_item_numeric = type !== null && this.#isItemValueTypeNumeric(type);

                        this.updateForm();

                    }

                });

        });

​

        for (const colorpicker of this._form.querySelectorAll('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {

            $(colorpicker).colorpicker({

                appendTo: ".overlay-dialogue-body",

                use_default: !colorpicker.name.includes('thresholds'),

                onUpdate: ['up_color', 'down_color', 'updown_color'].includes(colorpicker.name)

                    ? (color) => this.setIndicatorColor(colorpicker.name, color)

                    : null

            });

        }

​

        const show = [this._show_description, this._show_value, this._show_time, this._show_change_indicator];

​

        for (const checkbox of show) {

            checkbox.addEventListener('change', () => this.updateForm());

        }

​

        document.getElementById('units_show').addEventListener('change', () => this.updateForm());

        document.getElementById('aggregate_function').addEventListener('change', () => this.updateForm());

        document.getElementById('history').addEventListener('change', () => this.updateForm());

​

        colorPalette.setThemeColors(thresholds_colors);

​

        this.updateForm();

​

        this.#promiseGetItemType()

            .then((type) => {

                if (this._form.isConnected) {

                    this.#is_item_numeric = type !== null && this.#isItemValueTypeNumeric(type);

                    this.updateForm();

                }

            });

    }

​

    updateForm() {

        const aggregate_function = document.getElementById('aggregate_function');

​

        for (const element of this._form.querySelectorAll('.fields-group-description')) {

            element.style.display = this._show_description.checked ? '' : 'none';

​

            for (const input of element.querySelectorAll('input, textarea')) {

                input.disabled = !this._show_description.checked;

            }

        }

​

        for (const element of this._form.querySelectorAll('.fields-group-value')) {

            element.style.display = this._show_value.checked ? '' : 'none';

​