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

diff --git a/lib/BackupPC/SearchLib.pm b/lib/BackupPC/SearchLib.pm
index 15813f4..5e42fff 100644 (file)
--- 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' .