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		$('[data-sortable-pairs-table]').each(function() {
147			var t = $(this),
148				table = t.find('table'),
149				data = JSON.parse(t.find('[type="text/json"]').text()),
150				template = t.find('[type="text/x-jquery-tmpl"]'),
151				container = new editableTable(table, template);
152
153			container.addRows(data);
154
155			if (t.data('sortable-pairs-table') != 1) {
156				table.sortable('option', 'disabled', true);
157			}
158
159			t.data('editableTable', container);
160		});
161	});
162</script>
163