add css, move switches to js

This commit is contained in:
dmacias72 2016-03-11 13:59:07 -07:00
parent 152270bd35
commit 2bd1bf50d1
4 changed files with 79 additions and 73 deletions

View File

@ -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="/webGui/styles/jquery.switchbutton.css">
<link type="text/css" rel="stylesheet" href="/plugins/NerdPack/css/NerdPack.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"> <form markdown="1" id="package_form" name="package_settings" method="POST" action="/update.php" target="progressFrame">
<table class="tablesorter hover-highlight" id="tblPackages"> <table class="tablesorter hover-highlight" id="tblPackages">

View File

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

View File

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