add css, move switches to js

source/NerdPack/usr/local/emhttp/plugins/NerdPack/NerdPack.page

@@ -7,9 +7,6 @@ Title="Nerd Pack"
 <link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.switchbutton.css">
 <link type="text/css" rel="stylesheet" href="/plugins/NerdPack/css/NerdPack.css">
 
-<span id="uninstall" class="status" style="display: inline-block;margin-right: 110px;margin-top: -45px;"><input id="uninstallpkg" type="checkbox"></span>
-<span id="delete" class="status" style="display: inline-block;margin-top: -45px;"><input id="deletepkg" type="checkbox"></span>
-
 <form markdown="1" id="package_form" name="package_settings" method="POST" action="/update.php" target="progressFrame">
 
 <table class="tablesorter hover-highlight" id="tblPackages">

source/NerdPack/usr/local/emhttp/plugins/NerdPack/css/NerdPack.css

@@ -7,3 +7,10 @@
 .switch-button-label.off {
 	color: inherit;
 }
+.uptodate {
+		color:#44B012;
+		white-space:nowrap;
+}
+.updateready {
+		white-space:nowrap;
+}

source/NerdPack/usr/local/emhttp/plugins/NerdPack/js/jquery.NerdPack.js

@@ -1,75 +1,76 @@
 $(function(){
+	// add switches to title bar
+	$('#title')
+			.append("<span class='status'><input id='uninstallpkg' type='checkbox'></span>")
+			.append("<span class='status'><input id='deletepkg' type='checkbox'></span>");
+
 	// tablesorter options
-	$("#tblPackages").tablesorter({
+	$('#tblPackages').tablesorter({
 		sortList: [[0,0]],
-		widgets: ["saveSort", "filter", "stickyHeaders"],
+		widgets: ['saveSort', 'filter', 'stickyHeaders'],
 		widgetOptions: {
 			stickyHeaders_filteredToTop: true,
 			filter_hideEmpty: true,
 			filter_liveSearch: true,
 			filter_saveFilters: true,
-			filter_reset: ".reset",
+			filter_reset: '.reset',
 			filter_functions: {
-				".filter-version": true,
-				".filter-downloaded": true,
-				".filter-installed": true
+				'.filter-version': true,
+				'.filter-downloaded': true,
+				'.filter-installed': true
 			}
 		}
 	});
 
 	// "uninstall package" switch and cookie
-	$("#uninstallpkg")
+	$('#uninstallpkg')
 		.switchButton({
-			labels_placement: "left",
-			on_label: "unInstall On",
-			off_label: "unInstall Off",
-			checked: $.cookie("nerdpack_packages_uninstall") == "--uninstall"
+			labels_placement: 'left',
+			on_label: 'unInstall On',
+			off_label: 'unInstall Off',
+			checked: $.cookie('nerdpack_packages_uninstall') == '--uninstall'
 		})
 		.change(function () {
-			$.cookie("nerdpack_packages_uninstall", $(this).prop("checked") ? "--uninstall" : "", { expires: 3650 });
+			$.cookie('nerdpack_packages_uninstall', $('#uninstallpkg')[0].checked ? '--uninstall' : '', { expires: 3650 });
 		});
 
 	// "delete package" switch and cookie
-	$("#deletepkg")
+	$('#deletepkg')
 		.switchButton({
-			labels_placement: "left",
-			on_label: "delete On",
-			off_label: "delete Off",
-			checked: $.cookie("nerdpack_packages_delete") == "--delete"
+			labels_placement: 'left',
+			on_label: 'delete On',
+			off_label: 'delete Off',
+			checked: $.cookie('nerdpack_packages_delete') == '--delete'
 		})
 		.change(function () {
-			$.cookie("nerdpack_packages_delete", $(this).prop("checked") ? "--delete" : "", { expires: 3650 });
+			$.cookie('nerdpack_packages_delete', $('#deletepkg')[0].checked ? '--delete' : '', { expires: 3650 });
 		});
 
 	// select all packages switch
-	$("#checkall")
+	$('#checkall')
 		.switchButton({
-			labels_placement: "right",
-			on_label: "Select All",
-			off_label: "Select All",
-			checked: $.cookie("nerdpack_checkall") == "yes"
+			labels_placement: 'right',
+			on_label: 'Select All',
+			off_label: 'Select All',
+			checked: $.cookie('nerdpack_checkall') == 'yes'
 		})
 		.change(function () {
-			var myval = $(this).prop("checked");
-			$.cookie("nerdpack_checkall", myval ? "yes" : "no", { expires: 3650 });
-			$("#tblPackages tbody td:visible .pkgcheckbox").switchButton({checked: myval});
+			var myval = $(this)[0].checked;
+			$.cookie('nerdpack_checkall', myval ? 'yes' : 'no', { expires: 3650 });
+			$('#tblPackages tbody td:visible .pkgcheckbox').switchButton({checked: myval});
 		});
 
 	// set cookie on apply button press
-	$("#btnApply").click(function() {
+	$('#btnApply').click(function() {
 		checkDepends();
 
-		$.ajax({
-			type: "POST",
-			url: "/update.php",
-			data: $("#package_form").serializeArray(),
-			success: function() {
-				openBox("/plugins/NerdPack/scripts/packagemanager&arg1=--download"+
-							"&arg2="+$.cookie("nerdpack_packages_uninstall")+
-							"&arg3="+$.cookie("nerdpack_packages_delete"),
-							"Package Manager", 600, 900, true);
+		$.post('/update.php', $('#package_form').serializeArray(), function() {
+				openBox('/plugins/NerdPack/scripts/packagemanager&arg1=--download'+
+							'&arg2='+$.cookie('nerdpack_packages_uninstall')+
+							'&arg3='+$.cookie('nerdpack_packages_delete'),
+							'Package Manager', 600, 900, true);
 			}
-		});
+		);
 	});
 
 	packageQuery();
@@ -77,64 +78,65 @@ $(function(){
 
 //list all available packages in a table
 function packageQuery(force) {
-	$("#tblPackages tbody").html("<tr><td colspan=\"6\"><br><i class=\"fa fa-spinner fa-spin icon\"></i><em>Please wait, retrieving plugin information ...</em></td><tr>");
-	$.getJSON("/plugins/NerdPack/include/PackageQuery.php", {force: force}, function(data) {
-		$("#tblPackages tbody").empty();
-		for (var i in data) {
+	$('#tblPackages tbody').html("<tr><td colspan='6'><br><i class='fa fa-spinner fa-spin icon'></i><em>Please wait, retrieving plugin information ...</em></td><tr>");
+	$.getJSON('/plugins/NerdPack/include/PackageQuery.php', {force: force}, function(packages) {
+		$('#tblPackages tbody').empty();
+  var len = packages.length, i = 0;
+  for (i; i < len; i++) {
 			var Update;
-			if (data[i].downloadeq == data[i].downloaded && data[i].installeq == data[i].installed)
-				Update = "<span style=\"color:#44B012;white-space:nowrap;\"><i class=\"fa fa-check\"></i> up-to-date</span>";
+			if (packages[i].downloadeq == packages[i].downloaded && packages[i].installeq == packages[i].installed)
+				Update = "<span><i class='uptodate fa fa-check'></i> up-to-date </span>";
 			else
-				Update = "<span style=\"white-space:nowrap;\"><a><i class=\"fa fa-cloud-download\"></i> update ready</a></span>";
+				Update = "<span ><a><i class='updateready fa fa-cloud-download'></i> update ready </a></span>";
 
-			var Downloaded = data[i].downloaded;
-			if (data[i].downloadeq != data[i].downloaded)
+			var Downloaded = packages[i].downloaded;
+			if (packages[i].downloadeq != packages[i].downloaded)
 				Downloaded = 'old';
 
-			var Installed = data[i].installed;
-			if (data[i].installeq != data[i].installed)
+			var Installed = packages[i].installed;
+			if (packages[i].installeq != packages[i].installed)
 				Installed = 'old';
 
-			$("#tblPackages tbody").append("<tr>"+
-			"<td class='package' title='"+data[i].desc+"'>"+data[i].name+"</td>"+ // package name
+			$('#tblPackages tbody').append("<tr>"+
+			"<td class='package' title='"+packages[i].desc+"'>"+packages[i].name+"</td>"+ // package name
 			"<td>"+Update+"</td>"+ // package status
-			"<td>"+data[i].size+"</td>"+ // package size
+			"<td>"+packages[i].size+"</td>"+ // package size
 			"<td>"+Downloaded+"</td>"+ // package downloaded
 			"<td>"+Installed+"</td>"+ // package installed
-			"<td>"+data[i].plugins+"</td>"+ // package dependents
-			"<td><input class='pkgcheckbox' id='"+data[i].pkgname+"' type='checkbox' "+(data[i].config=="yes"?"checked":"")+">"+
-			"<input class='pkgvalue' type='hidden' id='"+data[i].pkgname+"_value' name='"+data[i].pkgnver+"' value='"+data[i].config+"'></td>"+
+			"<td>"+packages[i].plugins+"</td>"+ // package dependents
+			"<td><input class='pkgcheckbox' id='"+packages[i].pkgname+"' type='checkbox' "+(packages[i].config=="yes"?"checked":"")+">"+
+			"<input class='pkgvalue' type='hidden' id='"+packages[i].pkgname+"_value' name='"+packages[i].pkgnver+"' value='"+packages[i].config+"'></td>"+
 			"</tr>");
 		}
 
 		// attach switch buttons to every package checkbox all at once
-		$(".pkgcheckbox")
+		$('.pkgcheckbox')
 			.switchButton({
-				labels_placement: "right",
-				on_label: "On",
-				off_label: "Off"
+				labels_placement: 'right',
+				on_label: 'On',
+				off_label: 'Off'
 			})
 			.change(function() {
-				$(this).parent().parent().find(".pkgvalue").val(this.checked ? "yes": "no");
+				$(this).parent().parent().find('.pkgvalue').val(this.checked ? "yes": "no");
 				if (this.checked)
 					checkDepends();
-				$("#btnApply").prop("disabled", false);
+				$('#btnApply').prop("disabled", false);
 			});
 
 		// restore filters
-		var lastSearch = $("#tblPackages")[0].config.lastSearch;
-		$("#tblPackages").trigger("update");
-		$("#tblPackages").trigger("search", [lastSearch]);
+		var lastSearch = $('#tblPackages')[0].config.lastSearch;
+		$('#tblPackages').trigger('update')
+		.trigger('search', [lastSearch]);
 	});
 }
 
 function checkDepends() {
-	if ($("#screen").prop("checked")) {
-		$("#utempter").switchButton({checked: true});
-		$("#utempter", ".pkgvalue").val("yes");
+	if ($('#screen')[0].checked) {
+		$('#utempter').switchButton({checked: true});
+		$('#utempter', '.pkgvalue').val('yes');
 	}
-	if ($("#iotop").prop("checked")) {
-		$("#python").switchButton({checked: true});
-		$("#python", ".pkgvalue").val("yes");
+	if ($('#iotop')[0].checked) {
+		$('#python').switchButton({checked: true});
+		$('#python', '.pkgvalue').val('yes');
 	}
 }