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\TopItems\Includes\CWidgetFieldColumnsList;

​

?>

​

window.topitems_column_edit_form = new class {

​

    /**

     * @type {Overlay}

     */

    #overlay;

​

    /**

     * @type {HTMLElement}

     */

    #dialogue;

​

    /**

     * @type {HTMLFormElement}

     */

    #form;

​

    /**

     * @type {HTMLTableElement}

     */

    #thresholds_table;

​

    /**

     * @type {HTMLTableElement}

     */

    #highlights_table;

​

    init({form_id, thresholds, highlights, colors}) {

        this.#overlay = overlays_stack.getById('topitems-column-edit-overlay');

        this.#dialogue = this.#overlay.$dialogue[0];

        this.#form = document.getElementById(form_id);

​

        this.#thresholds_table = document.getElementById('thresholds_table');

        this.#highlights_table = document.getElementById('highlights_table');

​

        this.#form

            .querySelectorAll(

                '[name="display_value_as"], [name="aggregate_function"], [name="display"], [name="history"]'

            )

            .forEach(element => {

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

            });

​

        colorPalette.setThemeColors(colors);

​

        // Initialize thresholds table.

        $(this.#thresholds_table)

            .dynamicRows({

                rows: thresholds,

                template: '#thresholds-row-tmpl',

                allow_empty: true,

                dataCallback: (row_data) => {

                    if (!('color' in row_data)) {

                        const colors = this.#form.querySelectorAll(`.${ZBX_STYLE_COLOR_PICKER} input`);

                        const used_colors = [];

​

                        for (const color of colors) {

                            if (color.value !== '') {

                                used_colors.push(color.value);

                            }

                        }

​

                        row_data.color = colorPalette.getNextColor(used_colors);

                    }

                }

            })

            .on('afteradd.dynamicRows', e => {

                const $colorpicker = $('tr.form_row:last input[name$="[color]"]', e.target);

​

                $colorpicker.colorpicker({appendTo: $colorpicker.closest('.input-color-picker')});

​