1<?php 2/* 3** Zabbix 4** Copyright (C) 2001-2021 Zabbix SIA 5** 6** This program is free software; you can redistribute it and/or modify 7** it under the terms of the GNU General Public License as published by 8** the Free Software Foundation; either version 2 of the License, or 9** (at your option) any later version. 10** 11** This program is distributed in the hope that it will be useful, 12** but WITHOUT ANY WARRANTY; without even the implied warranty of 13** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 14** GNU General Public License for more details. 15** 16** You should have received a copy of the GNU General Public License 17** along with this program; if not, write to the Free Software 18** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 19**/ 20 21 22/** 23 * @var CView $this 24 */ 25?> 26 27<script type="text/javascript"> 28 jQuery(function($) { 29 var editableTable = function(elm, tmpl) { 30 var table = $(elm), 31 row_template = new Template($(tmpl).html()), 32 insert_point = table.find('tbody tr[data-insert-point]'), 33 row_index = 0, 34 table_row_class = 'editable_table_row'; 35 36 table.sortable({ 37 disabled: true, 38 items: 'tbody tr.sortable', 39 axis: 'y', 40 containment: 'parent', 41 cursor: 'grabbing', 42 handle: 'div.<?= ZBX_STYLE_DRAG_ICON ?>', 43 tolerance: 'pointer', 44 opacity: 0.6, 45 helper: function(e, ui) { 46 ui.children('td').each(function() { 47 $(this).width($(this).width()); 48 }); 49 50 return ui; 51 }, 52 start: function(e, ui) { 53 // Fix placeholder not to change height while object is being dragged. 54 $(ui.placeholder).height($(ui.helper).height()); 55 } 56 }); 57 58 table.on('click', '[data-row-action]', function(e) { 59 e.preventDefault(); 60 61 switch ($(e.currentTarget).data('row-action')) { 62 case 'remove_row': 63 removeRow($(e.currentTarget).closest('.' + table_row_class)); 64 break; 65 66 case 'add_row': 67 var row_data = $(e.currentTarget).data('values'), 68 new_row = addRow(row_data || {}); 69 70 if (!row_data) { 71 new_row.find('[type="text"]').val(''); 72 } 73 break; 74 } 75 }); 76 77 /** 78 * Enable or disable table rows sorting according to rows count. At least 2 rows should exists to be able 79 * sort rows using drag and drop. 80 */ 81 function setSortableState() { 82 var allow_sort = table.find('.' + table_row_class).length < 2; 83 table.sortable('option', 'disabled', allow_sort); 84 } 85 86 /** 87 * Add table row. Returns new added row DOM node. 88 * 89 * @param {object} values Object with data for added row. 90 * 91 * @return {object} 92 */ 93 function addRow(values) { 94 row_index += 1; 95 values.index = row_index; 96 97 var new_row = $(row_template.evaluate(values)) 98 .addClass(table_row_class) 99 .addClass('sortable') 100 .data('values', values) 101 .insertBefore(insert_point); 102 103 setSortableState(); 104 105 return new_row; 106 } 107 108 /** 109 * Add multiple rows to table. 110 * 111 * @param {array} rows_values Array of objects for every added row. 112 */ 113 function addRows(rows_values) { 114 $.each(rows_values, function(index, values) { 115 addRow(values); 116 }); 117 } 118 119 /** 120 * Remove table row. 121 * 122 * @param {object} row_node Table row DOM node to be removed. 123 */ 124 function removeRow(row_node) { 125 row_node.remove(); 126 setSortableState(); 127 } 128 129 return { 130 addRow: function(values) { 131 return addRow(values); 132 }, 133 addRows: function(rows_values) { 134 addRows(rows_values); 135 return table; 136 }, 137 removeRow: function(row_node) { 138 removeRow(row_node); 139 }, 140 getTableRows: function() { 141 return table.find('.' + table_row_class); 142 } 143 }; 144 }; 145 146 var $data_sortable_table = $('[data-sortable-pairs-table]'); 147 148 if ($data_sortable_table.length === 0) { 149 const headers_elem = document.querySelector('#headers_pairs'); 150 151 if (!headers_elem) { 152 return false; 153 } 154 155 let obj = headers_elem; 156 if (headers_elem.tagName === 'SPAN') { 157 obj = headers_elem.originalObject; 158 } 159 160 $data_sortable_table = $(obj); 161 } 162 163 $data_sortable_table.each(function() { 164 var t = $(this), 165 table = t.find('table'), 166 data = JSON.parse(t.find('[type="text/json"]').text()), 167 template = t.find('[type="text/x-jquery-tmpl"]'), 168 container = new editableTable(table, template); 169 170 container.addRows(data); 171 172 if (t.data('sortable-pairs-table') != 1) { 173 table.sortable('option', 'disabled', true); 174 } 175 176 t.data('editableTable', container); 177 }); 178 }); 179</script> 180