1<script type="text/x-jquery-tmpl" id="custom_intervals_row"> 2 <tr class="form_row"> 3 <td> 4 <ul class="<?= CRadioButtonList::ZBX_STYLE_CLASS ?>" id="delay_flex_#{rowNum}_type"> 5 <li> 6 <input type="radio" id="delay_flex_#{rowNum}_type_0" name="delay_flex[#{rowNum}][type]" value="0" checked="checked"> 7 <label for="delay_flex_#{rowNum}_type_0"><?= _('Flexible') ?></label> 8 </li><li> 9 <input type="radio" id="delay_flex_#{rowNum}_type_1" name="delay_flex[#{rowNum}][type]" value="1"> 10 <label for="delay_flex_#{rowNum}_type_1"><?= _('Scheduling') ?></label> 11 </li> 12 </ul> 13 </td> 14 <td> 15 <input type="text" id="delay_flex_#{rowNum}_delay" name="delay_flex[#{rowNum}][delay]" maxlength="255" placeholder="<?= ZBX_ITEM_FLEXIBLE_DELAY_DEFAULT ?>"> 16 <input type="text" id="delay_flex_#{rowNum}_schedule" name="delay_flex[#{rowNum}][schedule]" maxlength="255" placeholder="<?= ZBX_ITEM_SCHEDULING_DEFAULT ?>" style="display: none;"> 17 </td> 18 <td> 19 <input type="text" id="delay_flex_#{rowNum}_period" name="delay_flex[#{rowNum}][period]" maxlength="255" placeholder="<?= ZBX_DEFAULT_INTERVAL ?>"> 20 </td> 21 <td> 22 <button type="button" id="delay_flex_#{rowNum}_remove" name="delay_flex[#{rowNum}][remove]" class="<?= ZBX_STYLE_BTN_LINK ?> element-table-remove"><?= _('Remove') ?></button> 23 </td> 24 </tr> 25</script> 26<script type="text/x-jquery-tmpl" id="preprocessing_steps_row"> 27 <?php 28 $preproc_types_cbbox = new CComboBox('preprocessing[#{rowNum}][type]', ''); 29 30 foreach (get_preprocessing_types() as $group) { 31 $cb_group = new COptGroup($group['label']); 32 33 foreach ($group['types'] as $type => $label) { 34 $cb_group->addItem(new CComboItem($type, $label)); 35 } 36 37 $preproc_types_cbbox->addItem($cb_group); 38 } 39 40 echo (new CRow([ 41 (new CCol( 42 (new CDiv())->addClass(ZBX_STYLE_DRAG_ICON) 43 ))->addClass(ZBX_STYLE_TD_DRAG_ICON), 44 $preproc_types_cbbox, 45 (new CTextBox('preprocessing[#{rowNum}][params][0]', ''))->setAttribute('placeholder', _('number')), 46 (new CTextBox('preprocessing[#{rowNum}][params][1]', ''))->setAttribute('placeholder', _('output')), 47 (new CButton('preprocessing[#{rowNum}][remove]', _('Remove'))) 48 ->addClass(ZBX_STYLE_BTN_LINK) 49 ->addClass('element-table-remove') 50 ])) 51 ->addClass('sortable') 52 ->toString() 53 ?> 54 </script> 55<script type="text/javascript"> 56 jQuery(function($) { 57 $('#visible_type, #visible_interface').click(function() { 58 // if no item type is selected, reset the interfaces to default 59 if (!$('#visible_type').is(':checked')) { 60 var itemInterfaceTypes = <?php echo CJs::encodeJson(itemTypeInterface()); ?>; 61 organizeInterfaces(itemInterfaceTypes[<?php echo CJs::encodeJson($data['initial_item_type']) ?>]); 62 } 63 else { 64 $('#type').trigger('change'); 65 } 66 }); 67 68 $('#type') 69 .change(function() { 70 // update the interface select with each item type change 71 var itemInterfaceTypes = <?php echo CJs::encodeJson(itemTypeInterface()); ?>; 72 organizeInterfaces(itemInterfaceTypes[parseInt(jQuery(this).val())]); 73 }) 74 .trigger('change'); 75 76 $('#history_mode') 77 .change(function() { 78 if ($('[name="history_mode"][value=' + <?= ITEM_STORAGE_OFF ?> + ']').is(':checked')) { 79 $('#history').prop('disabled', true).hide(); 80 } 81 else { 82 $('#history').prop('disabled', false).show(); 83 } 84 }) 85 .trigger('change'); 86 87 $('#trends_mode') 88 .change(function() { 89 if ($('[name="trends_mode"][value=' + <?= ITEM_STORAGE_OFF ?> + ']').is(':checked')) { 90 $('#trends').prop('disabled', true).hide(); 91 } 92 else { 93 $('#trends').prop('disabled', false).show(); 94 } 95 }) 96 .trigger('change'); 97 98 $('#custom_intervals').on('click', 'input[type="radio"]', function() { 99 var rowNum = $(this).attr('id').split('_')[2]; 100 101 if ($(this).val() == <?= ITEM_DELAY_FLEXIBLE; ?>) { 102 $('#delay_flex_' + rowNum + '_schedule').hide(); 103 $('#delay_flex_' + rowNum + '_delay').show(); 104 $('#delay_flex_' + rowNum + '_period').show(); 105 } 106 else { 107 $('#delay_flex_' + rowNum + '_delay').hide(); 108 $('#delay_flex_' + rowNum + '_period').hide(); 109 $('#delay_flex_' + rowNum + '_schedule').show(); 110 } 111 }); 112 113 $('#custom_intervals').dynamicRows({ 114 template: '#custom_intervals_row' 115 }); 116 117 var preproc_row_tpl = new Template($('#preprocessing_steps_row').html()), 118 preprocessing = $('#preprocessing'); 119 120 preprocessing.sortable({ 121 disabled: (preprocessing.find('tr.sortable') < 2), 122 items: 'tr.sortable', 123 axis: 'y', 124 containment: 'parent', 125 cursor: IE ? 'move' : 'grabbing', 126 handle: 'div.<?= ZBX_STYLE_DRAG_ICON ?>', 127 tolerance: 'pointer', 128 opacity: 0.6, 129 helper: function(e, ui) { 130 ui.children().each(function() { 131 var td = $(this); 132 133 td.width(td.width()); 134 }); 135 136 return ui; 137 }, 138 start: function(e, ui) { 139 $(ui.placeholder).height($(ui.helper).height()); 140 } 141 }); 142 143 preprocessing 144 .on('click', '.element-table-add', function() { 145 var row = $(this).parent().parent(); 146 row.before(preproc_row_tpl.evaluate({rowNum: preprocessing.find('tr.sortable').length})); 147 148 if (preprocessing.find('tr.sortable').length > 1) { 149 preprocessing.sortable('enable'); 150 } 151 }) 152 .on('click', '.element-table-remove', function() { 153 var row = $(this).parent().parent(); 154 row.remove(); 155 156 if (preprocessing.find('tr.sortable').length < 2) { 157 preprocessing.sortable('disable'); 158 } 159 }) 160 .on('change', 'select[name*="type"]', function() { 161 var inputs = $(this).parent().parent().find('[name*="params"]'); 162 163 switch ($(this).val()) { 164 case '<?= ZBX_PREPROC_MULTIPLIER ?>': 165 $(inputs[0]) 166 .show() 167 .attr('placeholder', <?= CJs::encodeJson(_('number')) ?>); 168 $(inputs[1]).hide(); 169 break; 170 171 case '<?= ZBX_PREPROC_RTRIM ?>': 172 case '<?= ZBX_PREPROC_LTRIM ?>': 173 case '<?= ZBX_PREPROC_TRIM ?>': 174 $(inputs[0]) 175 .show() 176 .attr('placeholder', <?= CJs::encodeJson(_('list of characters')) ?>); 177 $(inputs[1]).hide(); 178 break; 179 180 case '<?= ZBX_PREPROC_XPATH ?>': 181 case '<?= ZBX_PREPROC_JSONPATH ?>': 182 $(inputs[0]) 183 .show() 184 .attr('placeholder', <?= CJs::encodeJson(_('path')) ?>); 185 $(inputs[1]).hide(); 186 break; 187 188 case '<?= ZBX_PREPROC_REGSUB ?>': 189 $(inputs[0]) 190 .show() 191 .attr('placeholder', <?= CJs::encodeJson(_('pattern')) ?>); 192 $(inputs[1]).show(); 193 break; 194 195 case '<?= ZBX_PREPROC_BOOL2DEC ?>': 196 case '<?= ZBX_PREPROC_OCT2DEC ?>': 197 case '<?= ZBX_PREPROC_HEX2DEC ?>': 198 case '<?= ZBX_PREPROC_DELTA_VALUE ?>': 199 case '<?= ZBX_PREPROC_DELTA_SPEED ?>': 200 $(inputs[0]).hide(); 201 $(inputs[1]).hide(); 202 break; 203 } 204 }); 205 206 var $ = jQuery, 207 editableTable = function (elm, tmpl, tmpl_defaults) { 208 var table, 209 row_template, 210 row_default_values, 211 insert_point, 212 rows = 0, 213 table_row_class = 'editable_table_row'; 214 215 table = $(elm); 216 insert_point = table.find('tbody tr[data-insert-point]'); 217 row_template = new Template($(tmpl).html()); 218 row_default_values = tmpl_defaults; 219 220 table.sortable({ 221 disabled: true, 222 items: 'tbody tr.sortable', 223 axis: 'y', 224 containment: 'parent', 225 cursor: IE ? 'move' : 'grabbing', 226 handle: 'div.<?= ZBX_STYLE_DRAG_ICON ?>', 227 tolerance: 'pointer', 228 opacity: 0.6, 229 helper: function(e, ui) { 230 ui.children('td').each(function() { 231 $(this).width($(this).width()); 232 }); 233 234 return ui; 235 }, 236 start: function(e, ui) { 237 // Fix placeholder not to change height while object is being dragged. 238 $(ui.placeholder).height($(ui.helper).height()); 239 } 240 }); 241 242 table.on('click', '[data-row-action]', function (e) { 243 e.preventDefault(); 244 245 switch ($(e.currentTarget).data('row-action')) { 246 case 'remove_row' : 247 rows -= 1; 248 table.sortable('option', 'disabled', rows < 2); 249 250 $(e.currentTarget).closest('.'+table_row_class).remove(); 251 break; 252 253 case 'add_row' : 254 var row_data = $(e.currentTarget).data('values'), 255 new_row = addRow($.extend({index: rows + 1}, row_data||{})); 256 257 if (!row_data) { 258 new_row.find('[type="text"]').val(''); 259 } 260 break; 261 } 262 }); 263 264 function addRow(values) { 265 rows += 1; 266 table.sortable('option', 'disabled', rows < 2); 267 268 return $(row_template.evaluate(values)) 269 .addClass(table_row_class) 270 .addClass('sortable') 271 .data('row-values', values) 272 .insertBefore(insert_point); 273 } 274 275 function addRows(rows_values) { 276 $.each(rows_values, function(index, values) { 277 addRow($.extend({"index": index}, values)); 278 }); 279 } 280 281 return { 282 addRow: function(values) { 283 return addRow(values); 284 }, 285 addRows: function(rows_values) { 286 addRows(rows_values); 287 return table; 288 }, 289 clearTable: function() { 290 table.find('.'+table_row_class).remove(); 291 return table; 292 } 293 } 294 }; 295 296 $('[data-sortable-pairs-table]').each(function() { 297 var t = $(this), 298 table = t.find('table'), 299 data = JSON.parse(t.find('[type="text/json"]').text()), 300 template = t.find('[type="text/x-jquery-tmpl"]'), 301 et = new editableTable(table, template); 302 303 et.addRows(data); 304 305 if (t.data('sortable-pairs-table') != 1) { 306 table.sortable('option', 'disabled', true); 307 } 308 309 t.data('editableTable', et); 310 }); 311 }); 312</script> 313