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

…d config in real time
Angstrom-distribution · Mar 31, 2010 · 6a104db · 6a104db
1 parent c2ac571
commit 6a104db
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 69 deletions.
diff --git a/conf/beagleboard/sd/u-boot.bin b/conf/beagleboard/sd/u-boot.bin
diff --git a/css/dominion.css b/css/dominion.css
@@ -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;
+}
+
+
+
+
+
diff --git a/index.html b/index.html
@@ -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>
diff --git a/machine-list.html b/machine-list.html
@@ -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>

diff --git a/scripts/extract-supported-machines.sh b/scripts/extract-supported-machines.sh
@@ -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

diff --git a/scripts/js/narcissus.js b/scripts/js/narcissus.js
@@ -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;