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>
</small>
</div>

<div id=results class=shadowbox
    style="width: 90%; display: none; margin: 1 0 1em 0">
	<div>
		<pre id=result_txt>
		Updating package list...
		</pre>
	</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');

	$('#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) { 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');
//	}

	function execopkg(arg)
	{
		$('#dspinner').show();
		$dialog.dialog('open');
		$('#dresults').load(opkg + arg, function() {
			$('#dspinner').hide('slow');
		});
//		$('#dresults').empty();
//		$.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" -->