webif/var/mongoose/html/pkg.shtml

<!--#include virtual="/lib/header.shtml" -->

<style type=text/css>
button.install
{
	display: none;
	background-image: none;
	background: #ccff99;
}
button.remove
{
	display: none;
	background-image: none;
	background: #ff6666;
}
button.upgrade
{
	display: none;
}
</style>

<div class=va style="padding: 0 0 1em 0">
<h1 style="display: inline" class=va>Package Management</h1>
<small>
<button class=va id=opkgupdate style="display: none">
Update package list from Internet
</button>
<button class=va id=opkgupgradeall style="display: none">
Upgrade all packages
</button>
</small>
</div>

<div id=refreshing class=shadowbox
    style="display: none; margin: 1 0 1em 0">
<div>
	<img border=0 src=/img/loading.gif>
	Refreshing...
</div>
</div>

<div id=dialogue style="display: none; align: center">
	<pre id=dresults></pre>
	<div id=dspinner><img border=0 src=/img/loading.gif>Processing request...</div>
</div>

<script type=text/javascript src=/js/iajax.js></script>
<script type=text/javascript>

var opkg = '/cgi-bin/opkg.jim?cmd=';

$(document).ready(function() {

	$('#opkgupdate')
	    .button()
	    .click(function() { execopkg('update'); })
	    .fadeIn('slow');

	$('#opkgupgradeall')
	    .button()
	    .click(function() { execopkg('upgrade'); })
	    .fadeIn('slow');

	$('#pkgtabs').tabs({
		load: setup_buttons,
		spinner: '<img border=0 src=/img/loading.gif> ' +
		    '<em>Loading...</em>'
	});

	var $dialog = $('#dialogue').dialog({
		title: "Package Management Results",
		modal: false, autoOpen: false,
		height: 500, width: 700,
		show: 'scale', hide: 'fade',
		draggable: true, resizable: true,
		buttons: { "Close":
		    function() {$(this).dialog('close');}},
		close: function(e,u) {
			$('#refreshing').show('slow');
			$('#pkgtabs').hide('fast');
			window.location.reload(true);
		}
	});

	jQuery.ajaxSetup({progressInterval: 1});

	function loaddata(data, isfinal)
	{
		//console.log('loaddata called, final=' + isfinal);
		//console.log('Data: ' + data);
		$('#dresults').append(data);
		if (isfinal)
		{
			$('#dspinner').hide('slow');
			if (!$('#dresults').text())
				$('#dresults').append('Nothing to do.');
		}
	}

	function execopkg(arg)
	{
		$('button.va')
		    .attr('disabled', true)
		    .addClass('ui-state-disabled');
		$('#dspinner').show();
		$('#dresults').empty();
		$dialog.dialog('open');

//		$('#dresults').load(opkg + arg, function() {
//			$('#dspinner').hide('slow');
//		});

		$.ajax({
			type: "GET",
			url: opkg + arg,
			progress: loaddata,
			success: function(data) {
				//console.log("ajax success");
				loaddata(data, true);
			},
			error: function(_, _, e) {
				//console.log("ajax error");
				alert(e);
			}
		});
	}

	function setup_buttons()
	{
		$('button.remove, button.install, button.upgrade')
		    .button()
		    .click(function() {
			if ($(this).attr('action') == 'remove' &&
			    !confirm('Please confirm removal of the ' +
			    $(this).attr('id') + ' package.'))
				return;
			execopkg(encodeURIComponent($(this).attr('action') +
			    ' ' + $(this).attr('id')));
		}).fadeIn('slow');
	}
});


</script>

<div id=pkgtabs>
<ul>
	<li>
		<a href=/cgi-bin/pkg.jim?type=inst>
		<span>Installed</span>
		</a>
	</li><li>
		<a href=/cgi-bin/pkg.jim?type=upgr>
		<span>Upgrades</span>
		</a>
	</li><li>
		<a href=/cgi-bin/pkg.jim?type=avail>
		<span>Available</span>
		</a>
	</li>
</ul>
</div>

<!--#include virtual="/lib/footer.shtml" -->