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