Permalink
Browse files

narcissus: implement "shopping basket" sidebar that shows the selecte…

…d config in real time
  • Loading branch information...
1 parent c2ac571 commit 6a104dbf611e8542899dd7ef3acb3f6b9bfa656a @koenkooi koenkooi committed Mar 31, 2010
Showing with 152 additions and 69 deletions.
  1. BIN conf/beagleboard/sd/u-boot.bin
  2. +33 −14 css/dominion.css
  3. +16 −52 index.html
  4. +1 −1 machine-list.html
  5. +1 −1 scripts/extract-supported-machines.sh
  6. +101 −1 scripts/js/narcissus.js
Binary file not shown.
View
@@ -157,19 +157,6 @@ div.spacer {
padding: 2px;
}
-div.menubar {
- margin: 0;
- text-align: right;
- position: fixed;
- top: 8px;
- left: 8px;
- right: 8px;
- overflow: hidden;
- clip: auto;
- background: transparent;
- z-index:10;
-}
-
table.menuspacer {
margin: 0;
border-spacing: 0;
@@ -366,7 +353,7 @@ div.nblock {
margin: 3px;
padding: 1em;
background: #eeeeee;
- width:69%;
+ width: 60%;
clear: left;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
@@ -377,3 +364,35 @@ div.nblock {
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
}
+
+.styledinput {
+ border: none 0px transparent;
+ rbackground-color:transparent;
+ width: 100%;
+ _display:inline;
+ opacity: 0.8;
+}
+
+div.summaryblock {
+ position: absolute;
+ right: 1em;
+ top: 10em;
+ padding: 1em;
+ background: #eeeeff;
+ width: 30%;
+ clear: left;
+ -moz-border-radius-topleft: 8px;
+ -webkit-border-top-left-radius: 8px;
+ -moz-border-radius-topright: 8px;
+ -webkit-border-top-right-radius: 8px;
+ -moz-border-radius-bottomleft: 8px;
+ -webkit-border-bottom-left-radius: 8px;
+ -moz-border-radius-bottomright: 8px;
+ -webkit-border-bottom-right-radius: 8px;
+ opacity: 0.6;
+}
+
+
+
+
+
View
@@ -1,62 +1,13 @@
<html>
<head>
+<link rel="stylesheet" type="text/css" title="dominion" href="css/dominion.css" media="screen" />
+
<title>Narcissus - Online image builder for the angstrom distribution</title>
<script language="javascript" type="text/javascript" src="scripts/js/MochiKit.js"></script>
<script language="javascript" type="text/javascript" src="scripts/js/narcissus.js"></script>
<script language="javascript" type="text/javascript" src="scripts/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scripts/js/webtoolkit.md5.js"></script>
-<script language="javascript" type="text/javascript">
-function initForm() {
- /* load list of machines using javascript, change the .html to .php to generate the list at runtime */
- $('#machinedialog').load('machine-list.html #machinelist');
-
- var currentTime = new Date();
- var unixTime = "" + currentTime.getTime();
- document.entry_form.name.value = "random-" + MD5(unixTime);
-
- toggleVisibility('packageblock');
-/*
- toggleVisibility('machinedialog');
- toggleVisibility('releasedialog');
- toggleVisibility('basesystemdialog');
- toggleVisibility('devman');
- toggleVisibility('imagetypebox');
- toggleVisibility('imagename');
-
- toggleVisibility('buildbutton');
- toggleVisibility('patchbox');
-*/
- toggleVisibility('expert');
-
- toggleVisibility('devel');
- toggleVisibility('console_packages');
- toggleVisibility('platform_packages');
- toggleVisibility('network_packages');
-
- toggleVisibility('packageblock');
- toggleVisibility('x11_packages');
-
- environmentChange();
-}
-
-function environmentChange() {
- if(document.entry_form.environment.selectedIndex == 1) {
- showHideElement('x11_packages_block', 1);
- showHideElement('x11_wm_block', 1);
- }
- else {
- showHideElement('x11_packages_block', 0);
- showHideElement('x11_wm_block', 0);
- }
-}
-
-function guruChange() {
- toggleVisibility('expert');
-}
-</script>
-
-<link rel="stylesheet" type="text/css" title="dominion" href="css/dominion.css" media="screen" />
</head>
<body onLoad="initForm();"><div id="summary"></div><form name="entry_form" onsubmit="javascript:configureImage(); toggleVisibility('buildbutton'); return false">
<div id="settings">
@@ -68,7 +19,7 @@
</div>
<div id='imagename' class="nblock">
Choose your image name.<br/><font size="-2">This is used in the filename offered for download, makes it easier to distinguish between rootfs images after downloading.</font><br/><br/>
- <input type="text" name="name" id="name"/>
+ <input type="text" name="name" id="name" class="styledinput" onKeyUp="showValues();"/>
</div>
<div id="guru" class="nblock">
@@ -272,6 +223,12 @@
<center><input type="submit" value="Build me!"/></center></form>
</div>
+<div class="summaryblock">
+ <b>Current configuration:</b><br/>
+ <span id="results"></span><br/>
+ <b>Additional Packages:</b><br/><span id="additional_packages"></span>
+</div>
+
<br clear='all'/>
<div id="beverage"></div>
<div id="pkg_progress"></div>
@@ -282,4 +239,11 @@
<div id="patchbox"><br/><br/>Patches are welcome for the <a href="http://dominion.thruhere.net/git/cgit.cgi/narcissus/">narcissus sources</a></div>
</body>
+
+<script>
+$(":checkbox, :radio").click(showValues);
+$("select").change(showValues);
+//showValues();
+</script>
+
</html>
View
@@ -1,6 +1,6 @@
<div id='machinelist'>
Select the machine you want to build your rootfs image for:<br/><br/>
- <select name='machine'>
+ <select name='machine' onChange='showValues();'>
<option value="a780">a780</option>
<option value="akita">akita</option>
<option value="am3517-evm">am3517-evm</option>
@@ -11,7 +11,7 @@ fi
echo "<div id='machinelist'>" > machine-list.html
echo " Select the machine you want to build your rootfs image for:<br/><br/>" >> machine-list.html
-echo " <select name='machine'>" >> machine-list.html
+echo " <select name='machine' onChange='showValues();'>" >> machine-list.html
for machine in $(find conf/ -name "arch.conf" | awk -F/ '{print $2}' | sort | uniq) ; do
echo " <option value=\"$machine\">$machine</option>" >> machine-list.html
View
@@ -18,6 +18,106 @@ var repourl = "http://www.angstrom-distribution.org/repo/?pkgname=";
//var workerurl = 'http://amethyst.openembedded.net/~koen/narcissus/backend.php';
var workerurl = "backend.php";
+function initForm() {
+ /* load list of machines using javascript, change the .html to .php to generate the list at runtime */
+ $('#machinedialog').load('machine-list.html #machinelist');
+
+ var currentTime = new Date();
+ var unixTime = "" + currentTime.getTime();
+ document.entry_form.name.value = "random-" + MD5(unixTime).substr(4,8);
+
+ toggleVisibility('packageblock');
+/*
+ toggleVisibility('machinedialog');
+ toggleVisibility('releasedialog');
+ toggleVisibility('basesystemdialog');
+ toggleVisibility('devman');
+ toggleVisibility('imagetypebox');
+ toggleVisibility('imagename');
+
+ toggleVisibility('buildbutton');
+ toggleVisibility('patchbox');
+*/
+ toggleVisibility('expert');
+
+ toggleVisibility('devel');
+ toggleVisibility('console_packages');
+ toggleVisibility('platform_packages');
+ toggleVisibility('network_packages');
+
+ toggleVisibility('packageblock');
+ toggleVisibility('x11_packages');
+
+ environmentChange();
+ showValues();
+}
+
+function environmentChange() {
+ if(document.entry_form.environment.selectedIndex == 1) {
+ showHideElement('x11_packages_block', 1);
+ showHideElement('x11_wm_block', 1);
+ }
+ else {
+ showHideElement('x11_packages_block', 0);
+ showHideElement('x11_wm_block', 0);
+ }
+}
+
+function guruChange() {
+ toggleVisibility('expert');
+}
+
+// Removes redundant elements from the array
+function unique(a)
+{
+ var r = new Array();
+ o:for(var i = 0, n = a.length; i < n; i++) {
+ for(var x = i + 1 ; x < n; x++)
+ {
+ if(a[x]==a[i]) continue o;
+ }
+ r[r.length] = a[i];
+ }
+ return r;
+}
+
+function showValues() {
+ var extratext = "";
+ var fields = $(":input").serializeArray();
+ $("#results").empty();
+ $("#additional_packages").empty();
+ jQuery.each(fields, function(i, field){
+
+ switch(field.name) {
+ case 'machine':
+ $("#results").append("Machine: " + field.value + "<br/>");
+ break;
+ case 'name':
+ $("#results").append("Image name: " + field.value + "<br/>");
+ break;
+ case 'pkg':
+ break;
+ case 'devmanager':
+ break;
+ case 'configs':
+ break;
+ case 'imagetype':
+ $("#results").append("Image type: " + field.value + "<br/> ");
+ break;
+ case 'guru':
+ break;
+ default:
+ extratext = extratext + field.value + " ";
+ break;
+ }
+ });
+
+ pkg_array = extratext.split(' ');
+ pkg_array.sort();
+ extratext = unique(pkg_array).join('<br/>');
+ $("#additional_packages").append(extratext);
+}
+
function showSummary(){
document.getElementById('summary').innerHTML = '<b>Summary:</b><br/><br/>Machine: ' + document.entry_form.machine.value + '<br/>Release: ' + document.entry_form.configs.value + '<br/>Name: ' + document.entry_form.name.value;
}
@@ -77,7 +177,7 @@ function configureImage(){
progress_text += "<tr><td colspan=\"2\">Assembling image</td><td></td><td id='td-assemble'></td></tr>\n";
progress_text += "</table>\n";
- showSummary();
+ //showSummary();
document.getElementById('pkg_progress').innerHTML = progress_text;
var params = 'action=configure_image&machine=' + document.entry_form.machine.value + '&release=' + document.entry_form.configs.value + '&name=' + document.entry_form.name.value;

0 comments on commit 6a104db

Please sign in to comment.