From 7f0e21228a04d393540e633d667eef1f50137797 Mon Sep 17 00:00:00 2001
From: dpavlin <dpavlin@8392b6e1-25fa-0310-8288-cc32f8e212ea>
Date: Thu, 22 Sep 2005 13:31:04 +0000
Subject: [PATCH] added progress bar which changes color as filled capacity
 approach 90%

git-svn-id: svn+ssh://llin/home/dpavlin/private/svn/BackupPC/trunk@128 8392b6e1-25fa-0310-8288-cc32f8e212ea
---
 lib/BackupPC/SearchLib.pm | 195 +++++++++++++++++++++++++++++++-------
 1 file changed, 159 insertions(+), 36 deletions(-)

diff --git a/lib/BackupPC/SearchLib.pm b/lib/BackupPC/SearchLib.pm
index 15813f4..5e42fff 100644
--- a/lib/BackupPC/SearchLib.pm
+++ b/lib/BackupPC/SearchLib.pm
@@ -352,40 +352,77 @@ sub displayBackupsGrid() {
 <style>
 <!--
 
-div#fixedBox
-  {
-  position: absolute;
-  bottom: 1em;
-  left: 0.5em;
-  padding: 0.5em;
-  width: 10em;
-  background: #e0f0e0;
-  border: 1px solid #00ff00;
-  }
-@media screen
-  {
-  div#fixedBox
-    {
-    position: fixed;
-    }
-  /* Don't do this at home */
-  * html
-    {
-    overflow-y: hidden;
-    }
-  * html body
-    {
-    overflow-y: auto;
-    height: 100%;
-    padding: 0 1em 0 12em;
-    font-size: 100%;
-    }
-  * html div#fixedBox
-    {
-    position: absolute;  
-    }
-  /* All done. */
-  }
+div#fixedBox {
+	position: absolute;
+	bottom: 1em;
+	left: 0.5em;
+	padding: 0.5em;
+	width: 10em;
+	background: #e0f0e0;
+	border: 1px solid #00ff00;
+}
+@media screen {
+	div#fixedBox {
+		position: fixed;
+	}
+	/* Don't do this at home */
+	* html {
+		overflow-y: hidden;
+	}
+	* html body {
+		overflow-y: auto;
+		height: 100%;
+		padding: 0 1em 0 12em;
+		font-size: 100%;
+	}
+	* html div#fixedBox {
+		position: absolute;	
+	}
+	/* All done. */
+}
+
+#mContainer {
+	position: relative;
+	width: 100%;
+	height: 1.1em;
+	padding: 0px;
+	border: 1px solid #000000;
+}
+
+#gradient {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	display: block;
+	background-color: #ffff00;
+}
+
+#mask {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	display: block;
+	font-size: 1px;
+	background-color: #FFFFFF;
+	overflow: hidden;
+}
+
+#progressIndicator {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	display: block;
+	font-weight: bold;
+	color: #404040;
+	font-size: 10pt;
+	text-align: center;
+}
 
 -->
 </style>
@@ -393,6 +430,7 @@ div#fixedBox
 <!--
 
 var debug_div = null;
+var media_size = 4400 * 1024;
 
 function debug(msg) {
 //	return; // Disable debugging
@@ -461,12 +499,90 @@ function sumiraj(e) {
 		}
 	}
     	element_id('forma').totalsize.value = suma;
+	pbar_set(suma, media_size);
 	debug('total size: '+suma);
     	return suma;
 }
 
+/* progress bar */
+
+var _pbar_width = 0;
+var _pbar_warn = 10;	// change color in last 10%
+
+function pbar_reset() {
+	element_id("mask").style.left = "0px";
+	_pbar_width = element_id("mContainer").offsetWidth - 2;
+	element_id("mask").style.width = _pbar_width + "px";
+	element_id("progressIndicator").style.zIndex  = 10;
+	element_id("mask").style.display = "block";
+	element_id("progressIndicator").innerHTML = "0";
+}
+
+function dec2hex(d) {
+        var hch="0123456789ABCDEF";
+        var a=d%16;
+        var q=(d-a)/16;
+        return hch.charAt(q)+hch.charAt(a);
+}
+
+
+function pbar_set(amount, max) {
+
+	debug('pbar_set( '+amount+' , '+max+' )');
+
+	curWidth = parseInt(element_id("mask").offsetWidth);
+	curLeft = parseInt(element_id("mask").offsetLeft);
+
+
+	var pcnt = Math.floor( amount * 100 / max );
+	var p90 = 100 - _pbar_warn;
+	var pcol = pcnt - p90;
+	if (pcol < _pbar_warn) {
+		if (pcol < 0) pcol = 0;
+		var e = element_id("submitBurner");
+		if (e && e.disabled) {
+			debug('enable_button');
+			var a = e.getAttributeNode('disabled') || null;
+			if (a) e.removeAttributeNode(a);
+		}
+	} else if (pcol > _pbar_warn) {
+		debug('disable button');
+		pcol = _pbar_warn;
+		var e = element_id("submitBurner");
+		if (! e.disabled) e.disabled = true;
+	}
+	var col_g = Math.floor( ( _pbar_warn - pcol ) * 255 / _pbar_warn );
+	var col = '#ff' + dec2hex( col_g ) + '00';
+
+	//debug('pcol: '+pcol+' g:'+col_g+' _pbar_warn:'+ _pbar_warn + ' color: '+col);
+	element_id("gradient").style.backgroundColor = col;
+
+	var size = parseInt( _pbar_width * amount / max );
+
+	curWidth = _pbar_width - size;
+	curLeft = size ;
+
+	//debug('size: '+size+' curWidth '+curWidth+' curLeft: '+curLeft);
+
+	element_id("progressIndicator").innerHTML = pcnt + '%';
+	//element_id("progressIndicator").innerHTML = amount;
+
+	if (curLeft > _pbar_width) {
+		element_id("mask").style.display = "none";
+		return;
+	} else {
+		element_id("mask").style.display = "";
+	}
+
+	//if(parseInt(element_id("mask").offsetWidth)>10)
+	element_id("mask").style.width = curWidth + "px";
+	element_id("mask").style.left = curLeft + "px";
+
+}
+
 if (!self.body) self.body = new Object();
 self.onload = self.document.onload = self.body.onload = function() {
+	pbar_reset();
 	sumiraj();
 }
 
@@ -476,13 +592,20 @@ self.onload = self.document.onload = self.body.onload = function() {
 
 Size:
 <input type="text" name="totalsize" size="7" readonly>
+
+<div id="mContainer">
+	<div id="gradient"></div>
+	<div id="mask"></div>
+	<div id="progressIndicator">&nbsp;</div>
+</div>
+
 <br/>
 Note:
 <br/>
 <textarea name="note" cols="10" rows="5">
 </textarea>
 <br/>
-<input type="submit" value="Burn selected" name="submitBurner">
+<input type="submit" id="submitBurner" value="Burn selected" name="submitBurner">
 
 </div>
 <div id="debug" style="float: right; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;">
@@ -525,7 +648,7 @@ EOF3
 			'<tr' . $color[$i %2 ] . '>
 			<td class="fview">';
 		# FIXME
-		#$backup->{'fs_size'} = int($backup->{'size'} * 1024);
+		$backup->{'fs_size'} = int($backup->{'size'} * 1024);
 		if (($backup->{'fs_size'} || 0) > 0) {
 			$retHTML .= '
 			<input type="checkbox" name="fcb' .
-- 
2.20.1