Project

General

Profile

Download (23.2 KB) Statistics
| Branch: | Tag: | Revision:
1
/*
2
 * pfSenseHelpers.js
3
 *
4
 * part of pfSense (https://www.pfsense.org)
5
 * Copyright (c) 2004-2018 Rubicon Communications, LLC (Netgate)
6
 * All rights reserved.
7
 *
8
 * Licensed under the Apache License, Version 2.0 (the "License");
9
 * you may not use this file except in compliance with the License.
10
 * You may obtain a copy of the License at
11
 *
12
 * http://www.apache.org/licenses/LICENSE-2.0
13
 *
14
 * Unless required by applicable law or agreed to in writing, software
15
 * distributed under the License is distributed on an "AS IS" BASIS,
16
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17
 * See the License for the specific language governing permissions and
18
 * limitations under the License.
19
 */
20

    
21
// These helper functions are used on many/most UI pages to hide/show/disable/enable form elements where required
22

    
23
// Cause the input to be displayed as a required field by adding the element-required class to the label
24
function setRequired(id, req) {
25
	if (req)
26
		$('#' + id).parent().parent('div').find('span:first').addClass('element-required');
27
	else
28
		$('#' + id).parent().parent('div').find('span:first').removeClass('element-required');
29
}
30

    
31
// Hides the <div> in which the specified input element lives so that the input, its label and help text are hidden
32
function hideInput(id, hide) {
33
	if (hide)
34
		$('#' + id).parent().parent('div').addClass('hidden');
35
	else
36
		$('#' + id).parent().parent('div').removeClass('hidden');
37
}
38

    
39
// Hides the <div> in which the specified group input element lives so that the input,
40
// its label and help text are hidden
41
function hideGroupInput(id, hide) {
42
	if (hide)
43
		$('#' + id).parent('div').addClass('hidden');
44
	else
45
		$('#' + id).parent('div').removeClass('hidden');
46
}
47

    
48
// Hides the <div> in which the specified checkbox lives so that the checkbox, its label and help text are hidden
49
function hideCheckbox(id, hide) {
50
	if (hide)
51
		$('#' + id).parent().parent().parent('div').addClass('hidden');
52
	else
53
		$('#' + id).parent().parent().parent('div').removeClass('hidden');
54
}
55

    
56
// Disables the specified input element
57
function disableInput(id, disable) {
58
	$('#' + id).prop("disabled", disable);
59
}
60

    
61
// Hides all elements of the specified class. This will usually be a section
62
function hideClass(s_class, hide) {
63
	if (hide)
64
		$('.' + s_class).hide();
65
	else
66
		$('.' + s_class).show();
67
}
68

    
69
function hideSelect(id, hide) {
70
	if (hide)
71
		$('#' + id).parent('div').parent('div').addClass('hidden');
72
	else
73
		$('#' + id).parent('div').parent('div').removeClass('hidden');
74
}
75

    
76
function hideMultiCheckbox(id, hide) {
77
	if (hide)
78
		$("[name=" + id + "]").parent().addClass('hidden');
79
	else
80
		$("[name=" + id + "]").parent().removeClass('hidden');
81
}
82

    
83
// Hides the <div> in which the specified IP address element lives so that the input, any mask selector, its label and help text are hidden
84
function hideIpAddress(id, hide) {
85
	if (hide)
86
		$('#' + id).parent().parent().parent('div').addClass('hidden');
87
	else
88
		$('#' + id).parent().parent().parent('div').removeClass('hidden');
89
}
90

    
91
// Hides all elements of the specified class belonging to a multiselect.
92
function hideMultiClass(s_class, hide) {
93
	if (hide)
94
		$('.' + s_class).parent().parent().hide();
95
	else
96
		$('.' + s_class).parent().parent().show();
97
}
98

    
99
// Hides div whose label contains the specified text. (Good for StaticText)
100
function hideLabel(text, hide) {
101

    
102
	var element = $('label:contains(' + text + ')');
103

    
104
	if (hide)
105
		element.parent('div').addClass('hidden');
106
	else
107
		element.parent('div').removeClass('hidden');
108
}
109

    
110
// Hides the '/' and the subnet mask of an Ip_Address/subnet_mask group
111
function hideMask(name, hide) {
112
	if (hide) {
113
		$('[id^=' + name + ']').hide();
114
		$('[id^=' + name + ']').prev('span').hide();
115
		$('[id^=' + name + ']').parent('div').removeClass('input-group');
116
	} else {
117
		$('[id^=' + name + ']').show();
118
		$('[id^=' + name + ']').prev('span').show();
119
		$('[id^=' + name + ']').parent('div').addClass('input-group');
120
	}
121
}
122

    
123
// Set the help text for a given input
124
function setHelpText(id, text) {
125
	$('#' + id).parent().parent('div').find('span:nth-child(2)').html(text);
126
}
127

    
128
// Toggle table row checkboxes and background colors on the pages that use sortable tables:
129
//	/usr/local/www/firewall_nat.php
130
//	/usr/local/www/firewall_nat_1to1.php
131
//	/usr/local/www/firewall_nat_out.php
132
//	/usr/local/www/firewall_rules.php
133
//	/usr/local/www/vpn_ipsec.php
134
// Striping of the tables is handled here, NOT with the Bootstrap table-striped class because it would
135
// get confused when rows are sorted or deleted.
136

    
137
function fr_toggle(id, prefix) {
138
	if (!prefix)
139
		prefix = 'fr';
140

    
141
	var checkbox = document.getElementById(prefix + 'c' + id);
142
	checkbox.checked = !checkbox.checked;
143
	fr_bgcolor(id, prefix);
144
}
145

    
146
// Change background color of selected row based on state of checkbox
147
function fr_bgcolor(id, prefix) {
148
	if (!prefix)
149
		prefix = 'fr';
150

    
151
	var row = $('#' + prefix + id);
152

    
153
	if ($('#' + prefix + 'c' + id).prop('checked') ) {
154
		row.addClass('active');
155
	} else {
156
		row.removeClass('active');
157
	}
158
}
159

    
160
// The following functions are used by Form_Groups assigned a class of "repeatable" and provide the ability
161
// to add/delete rows of sequentially numbered elements, their labels and their help text
162
// See firewall_aliases_edit.php for an example
163

    
164
// NOTE: retainhelp is a global var that when defined prevents any help text from being deleted as lines are inserted.
165
// IOW it causes every row to have help text, not just the last row
166

    
167
function setMasks() {
168
	// Find all ipaddress masks and make dynamic based on address family of input
169
	$('span.pfIpMask + select').each(function (idx, select){
170
		var input = $(select).prevAll('input[type=text]');
171

    
172
		input.on('change', function(e){
173
			var isV6 = (input.val().indexOf(':') != -1), min = 0, max = 128;
174
			if (!isV6)
175
				max = 32;
176

    
177
			if (input.val() == "")
178
				return;
179

    
180
			while (select.options.length > max)
181
				select.remove(0);
182

    
183
			if (select.options.length < max) {
184
				for (var i=select.options.length; i<=max; i++)
185
					select.options.add(new Option(i, i), 0);
186
			}
187
		});
188

    
189
		// Fire immediately
190
		input.change();
191
	});
192
}
193

    
194
// Complicated function to move all help text associated with this input id to the same id
195
// on the row above. That way if you delete the last row, you don't lose the help
196
function moveHelpText(id) {
197

    
198
	$('#' + id).parent('div').parent('div').find('input, select, checkbox, button').each(function() {	 // For each <span></span>
199
		var fromId = this.id;
200
		var toId = decrStringInt(fromId);
201
		var helpSpan;
202

    
203

    
204
		if (!$(this).hasClass('pfIpMask') && !$(this).hasClass('btn')) {
205
			if ($('#' + decrStringInt(fromId)).parent('div').hasClass('input-group')) {
206
				helpSpan = $('#' + fromId).parent('div').parent('div').find('span:last').clone();
207
			} else {
208
				helpSpan = $('#' + fromId).parent('div').find('span:last').clone();
209
			}
210

    
211
			if ($(helpSpan).hasClass('help-block')) {
212
				if ($('#' + decrStringInt(fromId)).parent('div').hasClass('input-group')) {
213
					$('#' + decrStringInt(fromId)).parent('div').after(helpSpan);
214
				} else {
215
					$('#' + decrStringInt(fromId)).after(helpSpan);
216
				}
217
			}
218
		}
219
	});
220
}
221

    
222
// Increment the number at the end of the string
223
function bumpStringInt( str )	{
224
  var data = str.match(/(\D*)(\d+)(\D*)/), newStr = "";
225

    
226
  if (data)
227
	newStr = data[ 1 ] + ( Number( data[ 2 ] ) + 1 ) + data[ 3 ];
228

    
229
  return newStr || str;
230
}
231

    
232
// Decrement the number at the end of the string
233
function decrStringInt( str )	{
234
  var data = str.match(/(\D*)(\d+)(\D*)/), newStr = "";
235

    
236
  if (data)
237
	newStr = data[ 1 ] + ( Number( data[ 2 ] ) - 1 ) + data[ 3 ];
238

    
239
  return newStr || str;
240
}
241

    
242
// Called after a delete so that there are no gaps in the numbering. Most of the time the config system doesn't care about
243
// gaps, but I do :)
244
function renumber() {
245
	var idx = 0;
246

    
247
	$('.repeatable').each(function() {
248

    
249
		$(this).find('input').each(function() {
250
			$(this).prop("id", this.id.replace(/\d+$/, "") + idx);
251
			$(this).prop("name", this.name.replace(/\d+$/, "") + idx);
252
		});
253

    
254
		$(this).find('select').each(function() {
255
			$(this).prop("id", this.id.replace(/\d+$/, "") + idx);
256
			$(this).prop("name", this.name.replace(/\d+$/, "") + idx);
257
		});
258

    
259
		$(this).find('button').each(function() {
260
			$(this).prop("id", this.id.replace(/\d+$/, "") + idx);
261
			$(this).prop("name", this.name.replace(/\d+$/, "") + idx);
262
		});
263

    
264
//		$(this).find('label').attr('for', $(this).find('label').attr('for').replace(/\d+$/, "") + idx);
265

    
266
		idx++;
267
	});
268
}
269

    
270
function delete_row(rowDelBtn) {
271
	var rowLabel;
272

    
273
	// If we are deleting row zero, we need to save/restore the label
274
	if ( (rowDelBtn == "deleterow0") && ((typeof retainhelp) == "undefined")) {
275
		rowLabel = $('#' + rowDelBtn).parent('div').parent('div').find('label').text();
276
	}
277

    
278
	$('#' + rowDelBtn).parent('div').parent('div').remove();
279

    
280
	renumber();
281
	checkLastRow();
282

    
283
	if (rowDelBtn == "deleterow0") {
284
		$('#' + rowDelBtn).parent('div').parent('div').find('label').text(rowLabel);
285
	}
286
}
287

    
288
function checkLastRow() {
289
	if (($('.repeatable').length <= 1) && (! $('#deleterow0').hasClass("nowarn"))) {
290
		$('#deleterow0').hide();
291
	} else {
292
		$('[id^=deleterow]').show();
293
	}
294
}
295

    
296
function add_row() {
297
	// Find the last repeatable group
298
	var lastRepeatableGroup = $('.repeatable:last');
299

    
300
	// If the number of repeats exceeds the maximum, do not add another clone
301
	if ($('.repeatable').length >= lastRepeatableGroup.attr('max_repeats')) {
302
		// Alert user if alert message is specified
303
		if (typeof lastRepeatableGroup.attr('max_repeats_alert') !== 'undefined') {
304
			alert(lastRepeatableGroup.attr('max_repeats_alert'));
305
		}
306
		return;
307
	}
308

    
309
	// Clone it
310
	var newGroup = lastRepeatableGroup.clone();
311

    
312
	// Increment the suffix number for each input element in the new group
313
	$(newGroup).find('input').each(function() {
314
		$(this).prop("id", bumpStringInt(this.id));
315
		$(this).prop("name", bumpStringInt(this.name));
316
		if (!$(this).is('[id^=delete]'))
317
			$(this).val('');
318
	});
319

    
320
	// Increment the suffix number for the deleterow button element in the new group
321
	$(newGroup).find('[id^=deleterow]').each(function() {
322
		$(this).prop("id", bumpStringInt(this.id));
323
		$(this).prop("name", bumpStringInt(this.name));
324
	});
325

    
326
	// Do the same for selectors
327
	$(newGroup).find('select').each(function() {
328
		$(this).prop("id", bumpStringInt(this.id));
329
		$(this).prop("name", bumpStringInt(this.name));
330
		// If this selector lists mask bits, we need it to be reset to all 128 options
331
		// and no items selected, so that automatic v4/v6 selection still works
332
		if ($(this).is('[id^=address_subnet]')) {
333
			$(this).empty();
334
			for (idx=128; idx>0; idx--) {
335
				$(this).append($('<option>', {
336
					value: idx,
337
					text: idx
338
				}));
339
			}
340
		}
341
	});
342

    
343
	// And for "for" tags
344
//	$(newGroup).find('label').attr('for', bumpStringInt($(newGroup).find('label').attr('for')));
345

    
346
	$(newGroup).find('label:first').text(""); // Clear the label. We only want it on the very first row
347

    
348
	// Insert the updated/cloned row
349
	$(lastRepeatableGroup).after(newGroup);
350

    
351
	// Delete any help text from the group we have cloned
352
	$(lastRepeatableGroup).find('.help-block').each(function() {
353
		if ((typeof retainhelp) == "undefined")
354
			$(this).remove();
355
	});
356

    
357
	setMasks();
358

    
359
	checkLastRow();
360

    
361
	// Autocomplete
362
	if ( typeof addressarray !== 'undefined') {
363
		$('[id^=address]').each(function() {
364
			if (this.id.substring(0, 8) != "address_") {
365
				$(this).autocomplete({
366
					source: addressarray
367
				});
368
			}
369
		});
370
	}
371

    
372
	// Now that we are no longer cloning the event handlers, we need to remove and re-add after a new row
373
	// has been added to the table
374
	$('[id^=delete]').unbind();
375
	$('[id^=delete]').click(function(event) {
376
		if ($('.repeatable').length > 1) {
377
			if ((typeof retainhelp) == "undefined")
378
				moveHelpText($(this).attr("id"));
379

    
380
			delete_row($(this).attr("id"));
381
		} else if ($(this).hasClass("nowarn")) {
382
			clearRow0();
383
		} else {
384
			alert('The last row may not be deleted.');
385
		}
386
	});
387
}
388

    
389
// These are action buttons, not submit buttons
390
$('[id^=addrow]').prop('type','button');
391
$('[id^=delete]').prop('type','button');
392

    
393
// on click . .
394
$('[id^=addrow]').click(function() {
395
	add_row();
396
});
397

    
398
$('[id^=delete]').click(function(event) {
399
	if ($('.repeatable').length > 1) {
400
		if ((typeof retainhelp) == "undefined")
401
			moveHelpText($(this).attr("id"));
402

    
403
		delete_row($(this).attr("id"));
404
		} else if ($(this).hasClass("nowarn")) {
405
			clearRow0();
406
		} else {
407
			alert('The last row may not be deleted.');
408
		}
409
});
410

    
411
function clearRow0() {
412
	$('#deleterow0').parent('div').parent().find('input[type=text]').val('');
413
	$('#deleterow0').parent('div').parent().find('input[type=checkbox]:checked').removeAttr('checked');
414
}
415

    
416
// "More information" handlers --------------------------------------------------------------------
417

    
418
// If there is an infoblock, automatically add an info icon that toggles its display
419

    
420
var sfx = 0;
421

    
422
$('.infoblock').each(function() {
423
	// If the block has the class "blockopen" it is initially open
424
	if (! $(this).hasClass("blockopen")) {
425
		$(this).hide();
426
	} else {
427
		$(this).removeClass("blockopen");
428
	}
429

    
430
	// Add the "i" icon before the infoblock, incrementing the icon id for each block (in case there are multiple infoblocks on a page)
431
	$(this).before('<i class="fa fa-info-circle icon-pointer" style="color: #337AB7; font-size:20px; margin-left: 10px; margin-bottom: 10px;" id="showinfo' + sfx.toString() + '" title="More information"></i>');
432
	$(this).removeClass("infoblock");
433
	$(this).addClass("infoblock" + sfx.toString());
434
	sfx++;
435
});
436

    
437
// Show the help on clicking the info icon
438
$('[id^="showinfo"]').click(function() {
439
	var id = $(this).attr("id");
440
	$('.' + "infoblock" + id.substr(8)).toggle();
441
	document.getSelection().removeAllRanges();		// Ensure the text is un-selected (Chrome browser quirk)
442
});
443
// ------------------------------------------------------------------------------------------------
444

    
445
// Put a dummy row into any empty table to keep IE happy
446
// Commented out due to https://redmine.pfsense.org/issues/7504
447
//$('tbody').each(function(){
448
//	$(this).html($.trim($(this).html()))
449
//});
450

    
451
$('tbody:empty').html("<tr><td></td></tr>");
452

    
453
// Hide configuration button for panels without configuration
454
$('.container .panel-heading a.config').each(function (idx, el){
455
	var config = $(el).parents('.panel').children('.panel-footer');
456
	if (config.length == 1)
457
		$(el).removeClass('hidden');
458
});
459

    
460
// Initial state & toggle icons of collapsed panel
461
$('.container .panel-heading a[data-toggle="collapse"]').each(function (idx, el){
462
	var body = $(el).parents('.panel').children('.panel-body')
463
	var isOpen = body.hasClass('in');
464

    
465
	$(el).children('i').toggleClass('fa-plus-circle', !isOpen);
466
	$(el).children('i').toggleClass('fa-minus-circle', isOpen);
467

    
468
	body.on('shown.bs.collapse', function(){
469
		$(el).children('i').toggleClass('fa-minus-circle', true);
470
		$(el).children('i').toggleClass('fa-plus-circle', false);
471
	});
472

    
473
	body.on('hidden.bs.collapse', function(){
474
		$(el).children('i').toggleClass('fa-minus-circle', false);
475
		$(el).children('i').toggleClass('fa-plus-circle', true);
476
	});
477
});
478

    
479
// Separator bar stuff ------------------------------------------------------------------------
480

    
481
// Globals
482
gColor = 'bg-info';
483
newSeparator = false;
484
saving = false;
485
dirty = false;
486

    
487
$("#addsep").prop('type' ,'button');
488

    
489
$("#addsep").click(function() {
490
	if (newSeparator) {
491
		return(false);
492
	}
493

    
494
	gColor = 'bg-info';
495
	// Insert a temporary bar in which the user can enter some optional text
496
	sepcols = $( "#ruletable tr th" ).length - 2;
497

    
498
	$('#ruletable > tbody:last').append('<tr>' +
499
		'<td class="' + gColor + '" colspan="' + sepcols + '"><input id="newsep" placeholder="' + svbtnplaceholder + '" class="col-md-12" type="text" /></td>' +
500
		'<td class="' + gColor + '" colspan="2"><button class="btn btn-primary btn-sm" id="btnnewsep"><i class="fa fa-save icon-embed-btn"></i>' + svtxt + '</button>' +
501
		'<button class="btn btn-info btn-sm" id="btncncsep"><i class="fa fa-undo icon-embed-btn"></i>' + cncltxt + '</button>' +
502
		'&nbsp;&nbsp;&nbsp;&nbsp;' +
503
		'&nbsp;&nbsp;<a id="sepclrblue" value="bg-info"><i class="fa fa-circle text-info icon-pointer"></i></a>' +
504
		'&nbsp;&nbsp;<a id="sepclrred" value="bg-danger"><i class="fa fa-circle text-danger icon-pointer"></i></a>' +
505
		'&nbsp;&nbsp;<a id="sepclrgreen" value="bg-success"><i class="fa fa-circle text-success icon-pointer"></i></a>' +
506
		'&nbsp;&nbsp;<a id="sepclrorange" value="bg-warning"><i class="fa fa-circle text-warning icon-pointer"></i></button>' +
507
		'</td></tr>');
508

    
509
	$('#newsep').focus();
510
	newSeparator = true;
511

    
512
	$("#btnnewsep").prop('type' ,'button');
513

    
514
	// Watch escape and enter keys
515
	$('#newsep').keyup(function(e) {
516
		if (e.which == 27) {
517
			$('#btncncsep').trigger('click');
518
		}
519
	});
520

    
521
	$('#newsep').keypress(function(e) {
522
		if (e.which == 13) {
523
			$('#btnnewsep').trigger('click');
524
		}
525
	});
526

    
527
	handle_colors();
528

    
529
	// Replace the temporary separator bar with the final version containing the
530
	// user's text and a delete icon
531
	$("#btnnewsep").click(function() {
532
		var septext = escapeHtml($('#newsep').val());
533
		sepcols = $( "#ruletable tr th" ).length - 1;
534

    
535
		$(this).parents('tr').replaceWith('<tr class="ui-sortable-handle separator">' +
536
			'<td class="' + gColor + '" colspan="' + sepcols + '">' + '<span class="' + gColor + '">' + septext + '</span></td>' +
537
			'<td class="' + gColor + '"><a href="#"><i class="fa fa-trash sepdel"></i></a>' +
538
			'</td></tr>');
539

    
540
		$('#order-store').removeAttr('disabled');
541
		newSeparator = false;
542
		dirty = true;
543
	});
544

    
545
	// Cancel button
546
	$('#btncncsep').click(function(e) {
547
		e.preventDefault();
548
		$(this).parents('tr').remove();
549
		newSeparator = false;
550
	});
551
});
552

    
553
// Delete a separator row
554
$(function(){
555
	$('table').on('click','tr a .sepdel',function(e){
556
		e.preventDefault();
557
		$(this).parents('tr').remove();
558
		$('#order-store').removeAttr('disabled');
559
		dirty = true;
560
	});
561
});
562

    
563
// Compose an input array containing the row #, color and text for each separator
564
function save_separators() {
565
	var row = 0;
566
	var sepinput;
567
	var sepnum = 0;
568

    
569
	$('#ruletable > tbody > tr').each(function() {
570
		if ($(this).hasClass('separator')) {
571
			seprow = $(this).next('tr').attr("id");
572
			if (seprow == undefined) {
573
				seprow = "fr" + row;
574
			}
575

    
576
			sepinput = '<input type="hidden" name="separator[' + sepnum + '][row]" value="' + seprow + '"></input>';
577
			$('form').append(sepinput);
578
			sepinput = '<input type="hidden" name="separator[' + sepnum + '][text]" value="' + escapeHtml($(this).find('td').text()) + '"></input>';
579
			$('form').append(sepinput);
580
			sepinput = '<input type="hidden" name="separator[' + sepnum + '][color]" value="' + $(this).find('td').prop('class') + '"></input>';
581
			$('form').append(sepinput);
582
			sepinput = '<input type="hidden" name="separator[' + sepnum + '][if]" value="' + iface + '"></input>';
583
			$('form').append(sepinput);
584
			sepnum++;
585
		} else {
586
			if ($(this).parent('tbody').hasClass('user-entries')) {
587
				row++;
588
			}
589
		}
590
	});
591
}
592

    
593
function reindex_rules(section) {
594
	var row = 0;
595

    
596
	section.find('tr').each(function() {
597
		if (this.id) {
598
			$(this).attr("id", "fr" + row);
599
			$(this).attr("onclick", "fr_toggle(" + row + ")")
600
			$(this).find('input:checkbox:first').each(function() {
601
				$(this).attr("id", "frc" + row);
602
				$(this).attr("onclick", "fr_toggle(" + row + ")");
603
			});
604

    
605
			row++;
606
		}
607
	});
608
}
609

    
610
function handle_colors() {
611
	$('[id^=sepclr]').prop("type", "button");
612

    
613
	$('[id^=sepclr]').click(function () {
614
		var color =	 $(this).attr('value');
615
		// Clear all the color classes
616
		$(this).parent('td').prop('class', '');
617
		$(this).parent('td').prev('td').prop('class', '');
618
		// Install our new color class
619
		$(this).parent('td').addClass(color);
620
		$(this).parent('td').prev('td').addClass(color);
621
		// Set the global color
622
		gColor = color;
623
	});
624
}
625

    
626
//JS equivalent to PHP htmlspecialchars()
627
function escapeHtml(text) {
628
	var map = {
629
		'&': '&amp;',
630
		'<': '&lt;',
631
		'>': '&gt;',
632
		'"': '&quot;',
633
		"'": '&#039;'
634
	};
635

    
636
	return text.replace(/[&<>"']/g, function(m) { return map[m]; });
637
}
638
// --------------------------------------------------------------------------------------------
639

    
640
// Select every option in the specified multiselect
641
function AllServers(id, selectAll) {
642
   for (i = 0; i < id.length; i++)	   {
643
	   id.eq(i).prop('selected', selectAll);
644
   }
645
}
646

    
647
// Move all selected options from one multiselect to another
648
function moveOptions(From, To)	{
649
	var len = From.length;
650
	var option;
651

    
652
	if (len > 0) {
653
		for (i=0; i<len; i++) {
654
			if (From.eq(i).is(':selected')) {
655
				option = From.eq(i).val();
656
				value  = From.eq(i).text();
657
				To.append(new Option(value, option));
658
				From.eq(i).remove();
659
			}
660
		}
661
	}
662
}
663

    
664
// ------------- Service start/stop/restart functions.
665
// If a start/stop/restart button is clicked, parse the button name and make a POST via AJAX
666
$('[id*=restartservice-], [id*=stopservice-], [id*=startservice-]').click(function(event) {
667
	var args = this.id.split('-');
668
	var action, name, mode_zone, id;
669

    
670
	if (args[0] == "openvpn") {
671
		action = args[1];
672
		name = args[0];
673
		mode_zone = args[2];
674
		id = args[3];
675
	} else if (args[0] == "captiveportal") {
676
		action = args[1];
677
		name = args[0];
678
		mode_zone = args[2];
679
		id = args[3];
680
	} else {
681
		action = args[0];
682
		args.shift();
683
		name = args.join('-');
684
	}
685

    
686
	$(this).children('i').removeClass().addClass('fa fa-cog fa-spin text-success');
687
	this.blur();
688

    
689
	ajaxRequest = $.ajax(
690
		{
691
			url: "/status_services.php",
692
			type: "post",
693
			data: {
694
				ajax: 		"ajax",
695
				mode: 		action,
696
				service: 	name,
697
				vpnmode: 	mode_zone,
698
				zone: 		mode_zone,
699
				id: 		id
700
			}
701
		}
702
	);
703

    
704
	// Once the AJAX call has returned, refresh the page to show the new service
705
	ajaxRequest.done(function (response, textStatus, jqXHR) {
706
		location.reload(true);
707
	});
708
});
709

    
710
// The scripts that follow are an EXPERIMENT in using jQuery/Javascript to automatically convert
711
// GET calls to POST calls
712
// Any anchor with the attribute "usepost" usses these functions.
713

    
714
// Any time an anchor is clicked and the "usepost" attibute is present, convert the href attribute
715
// to POST format, make a POST form and submit it
716

    
717
interceptGET();
718

    
719
function interceptGET() {
720
	$('a').click(function(e) {
721
		// Does the clicked anchor have the "usepost" attribute?
722
		var attr = $(this).attr('usepost');
723

    
724
		if (typeof attr !== typeof undefined && attr !== false) {
725
			// Automatically apply a confirmation dialog to "Delete" icons
726
			if (!($(this).hasClass('no-confirm')) && !($(this).hasClass('icon-embed-btn')) &&
727
			   ($(this).hasClass('fa-trash'))) {
728
				var msg = $.trim(this.textContent).toLowerCase();
729

    
730
				if (!msg)
731
					var msg = $.trim(this.value).toLowerCase();
732

    
733
				var q = 'Are you sure you wish to '+ msg +'?';
734

    
735
				if ($(this).attr('title') != undefined)
736
					q = 'Are you sure you wish to '+ $(this).attr('title').toLowerCase() + '?';
737

    
738
				if (!confirm(q)) {
739
					return false;
740
				}
741
			}
742

    
743
			var target = $(this).attr("href").split("?");
744

    
745
			postSubmit(get2post(target[1]),target[0]);
746
			return false;
747
		}
748
	});
749
}
750

    
751
// Convert a GET argument list such as ?name=fred&action=delete into an object of POST
752
// parameters such as {name : fred, action : delete}
753
function get2post(getargs) {
754
	var argdict = {};
755
	var argarray = getargs.split('&');
756

    
757
	argarray.forEach(function(arg) {
758
		arg = arg.split('=');
759
		argdict[arg[0]] = arg[1];
760
	});
761

    
762
	return argdict;
763
}
764

    
765
// Create a form, add, the POST data and submit it
766
function postSubmit(data, target) {
767
	var $form = $('<form>');
768

    
769
	for (var name in data) {
770
		$form.append(
771
			$("<input>")
772
				.attr("type", "hidden")
773
				.attr("name", name)
774
				.val(data[name])
775
		);
776
    }
777

    
778
	$form
779
		.attr("method", "POST")
780
		.attr("action", target)
781
		// The CSRF magic is required because we will be viewing the results of the POST
782
		.append(
783
			$("<input>")
784
				.attr("type", "hidden")
785
				.attr("name", "__csrf_magic")
786
				.val(csrfMagicToken)
787
		)
788
		.appendTo('body')
789
		.submit();
790
}
791

    
(2-2/4)