stat windows now complete draggable resizable

html/admin/css/layout.css

@@ -1,3 +1,7 @@
+#requestChoices label {
+  width: 100% !important; 
+} 
+
 .statDisabled {
   color: #C0C0C0;  
 }
@@ -45,14 +49,14 @@
   text-transform: none;
 }
 
-.resizable {
+.resizable, .draggable {
+  position:fixed !important; 
   box-shadow: 5px 5px 5px #888;
 }
 
 .placeholderBox {
   margin-top: 10px;   
   font-size: 0.8em; 
-  width: 98%;
   height: 150px; 
 }
 
@@ -96,8 +100,7 @@
   text-align: left; 
   width: 500px; 
   background-color: #F3F1EE;
-
+  border: solid 1px #525252; 
-
 }
 
 .statsBoxes {
@@ -113,7 +116,7 @@
   padding-top: 2px; 
   margin-left: -5px;  
   margin-right: -5px;  
-  height: 20px; 
+  height: 22px; 
   background-color: #525252; 
 }
 
@@ -131,16 +134,17 @@
   box-shadow: inset 0 0 1px 1px #f6f6f6;
 }
 
-#statisticRadioDiv {
+.radioFormat {
-  height:28px !important; 
+  height:26px !important;
+  margin-top: -2px; 
 }
 
-#statisticRadioDiv .ui-state-active {
+.radioFormat .ui-state-active {
   background-color: #9EAF5A !important;
   font-weight: normal;
 }
 
-#statisticRadioDiv .ui-state-default {
+.radioFormat .ui-state-default {
   color: #555555;
   font-weight: normal;
 }

html/admin/index.html

@@ -401,18 +401,9 @@
  
       <div id="statusView" style="display: none">
       
-        <div id="statisticRadioDiv">
+        <div id="statisticRadioDiv" class="radioFormat">
-          <form action="#" id="statsRadio" style="float: left; font-size:0.8em;">
-            <input type="radio" id="radio1" name="statsRadio" value="minutes" checked/>
-            <label for="radio1" class="cb-enable selected">Minutes</label>
-            <input type="radio" id="radio2" name="statsRadio" value="hours"/>
-            <label for="radio2" class="cb-disable">Hours</label>
-            <input type="radio" id="radio3" name="statsRadio" value="days"/>
-            <label for="radio3" class="cb-disable">Days</label>
-          </form>
-
           <div class="ItemActionButtons">
-            <div id="divSaveButton" class="buttonset" style="float: left; font-size:0.6em; margin-left: 10px; ">
+            <div id="divSaveButton" class="buttonset" style="float: left; font-size:0.6em; ">
               <input id="btnAddNewStat" class="button" value="Add..." onclick="ItemActionButtons.onSaveExtraClick.apply(this)" type="button"></input>
               <ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions">
                 <li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.ShowConnectionsStats.apply(this)"id="addconnectionsLiBtn">Connections</li>
@@ -424,24 +415,75 @@
         </div>
         
         <ul id="sortable">
-
+          <li id="connectionsLi" class="resizable draggable">
-          <li id="connectionsLi" class="resizable">
             <div id="connectionsDiv" class="statsBoxes">
               <div class="greydiv">
                 <a class="statsHeader">Connections</a>
-                <a class="statsClose">X</a>
+               
+                <button id="connectionsClose" class="statsClose" style="float:right; padding-right: 0 ">
+                  <img src="/_admin/html/media/icons/whitedelete_icon16.png" width="16" height="16">
+                </button>
+                <button id="connectionsSettings" class="statsSettings" style="float:right;">
+                  <img src="/_admin/html/media/icons/settings_icon16.png" width="16" height="16">
+                </button>
+                <button id="connectionsChart" class="statsCharts" style="float:right;">
+                  <img src="/_admin/html/media/icons/whitechart_icon16.png" width="16" height="16">
+                </button>
               </div>
               <div id="placeholderConnection" class="placeholderBox"></div>
+              <div id="placeholderConnectionSettings" class="placeholderBox" style="display:none;">
+
+              <div id="connectionsGranularityDiv" class="radioFormat" style="width:100%;">
+                <form action="#" id="connectionsGranularity" class="radioFormat" style="float: left; font-size:0.8em;">
+                  <input type="radio" id="connectionsMinutes" name="connectionsGranularity" value="minutes" checked/>
+                  <label for="connectionsMinutes" class="cb-enable selected">Minutes</label>
+                  <input type="radio" id="connectionsHours" name="connectionsGranularity" value="hours"/>
+                  <label for="connectionsHours" class="cb-disable">Hours</label>
+                  <input type="radio" id="connectionsDays" name="connectionsGranularity" value="days"/>
+                  <label for="connectionsDays" class="cb-disable">Days</label>
+                </form>
+              </div>
+
+              </div>
             </div>
           </li>
         
-          <li id="requestsLi" class="resizable">
+          <li id="requestsLi" class="resizable draggable" style="left:540">
             <div id="requestsDiv" class="statsBoxes">
               <div class="greydiv">
                 <a class="statsHeader">Requests</a>
-                <a class="statsClose">X</a>
+                <button id="requestsClose" class="statsClose" style="float:right; padding-right: 0; ">
+                  <img src="/_admin/html/media/icons/whitedelete_icon16.png" width="16" height="16">
+                </button>
+                <button id="requestsSettings" class="statsSettings" style="float:right;">
+                  <img src="/_admin/html/media/icons/settings_icon16.png" width="16" height="16">
+                </button>
+                <button id="requestsChart" class="statsCharts" style="float:right;">
+                  <img src="/_admin/html/media/icons/whitechart_icon16.png" width="16" height="16">
+                </button>
               </div>
               <div id="placeholderBytesSent" class="placeholderBox"></div>
+              <div id="placeholderBytesSentSettings" class="placeholderBox" style="display:none;">
+                <div id="requestsGranularityDiv" class="radioFormat">
+                  <form action="#" id="requestsGranularity" class="radioFormat" style="float: left; font-size:0.8em;">
+                    <input type="radio" id="requestsMinutes" name="requestsGranularity" value="minutes" checked/>
+                    <label for="requestsMinutes" class="cb-enable selected">Minutes</label>
+                    <input type="radio" id="requestsHours" name="requestsGranularity" value="hours"/>
+                    <label for="requestsHours" class="cb-disable">Hours</label>
+                    <input type="radio" id="requestsDays" name="requestsGranularity" value="days"/>
+                    <label for="requestsDays" class="cb-disable">Days</label>
+                  </form>
+                    <br>
+                  <p id="requestChoices" >
+                    <br>
+                    <input id="idsent" type="checkbox" checked="checked" name="bytessent">
+                    <label for="idsent">Bytes sent</label>
+                    <br>
+                    <input id="idreceived" type="checkbox" checked="checked" name="bytesreceived">
+                    <label for="idreceived">Bytes received</label>                   
+                  </p>
+                </div>
+              </div>
             </div>
           </li>
 

html/admin/js/master.js

@@ -92,10 +92,36 @@ $("#documents_last").live('click', function () {
   createLastPagination("#documentsTable"); 
 });
 
+///////////////////////////////////////////////////////////////////////////////
+//statistics live click buttons close 
+///////////////////////////////////////////////////////////////////////////////
 
 $(".statsClose").live('click', function () {
   var id = $(this).closest("li").attr("id"); 
-  $("#"+id).hide();  
+  $("#"+id).fadeOut();  
+});
+
+///////////////////////////////////////////////////////////////////////////////
+// show statistic settings 
+///////////////////////////////////////////////////////////////////////////////
+
+$(".statsSettings").live('click', function () {
+  var chartID = $(this).parent().next("div");
+  var settingsID = $(this).parent().next("div").next("div");
+  $(chartID).hide(); 
+  $(settingsID).fadeIn(); 
+});
+
+///////////////////////////////////////////////////////////////////////////////
+// show statistics charts
+///////////////////////////////////////////////////////////////////////////////
+
+$(".statsCharts").live('click', function () {
+  var chartID = $(this).parent().next("div");
+  var settingsID = $(this).parent().next("div").next("div");
+  updateGraphs(false); 
+  $(settingsID).hide(); 
+  $(chartID).fadeIn(); 
 });
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -579,17 +605,49 @@ var logTable = $('#logTableID').dataTable({
 ///////////////////////////////////////////////////////////////////////////////
 
     else if (location.hash == "#status") {
+      var connectionsPos = localStorage.getItem("#connectionsLi");
+      var requestsPos = localStorage.getItem("#requestsLi");
+      var parsedConPos = JSON.parse(connectionsPos); 
+      var parsedReqPos = JSON.parse(requestsPos); 
+      if ( parsedConPos != null && parsedReqPos != null ) {
+        $('#connectionsLi').css('top', parsedConPos[0]);
+        $('#connectionsLi').css('left', parsedConPos[1]);
+        $('#connectionsLi').css('width', parsedConPos[2]);
+        $('#requestsLi').css('top', parsedReqPos[0]);
+        $('#requestsLi').css('left', parsedReqPos[1]);
+        $('#requestsLi').css('width', parsedReqPos[2]);
+      }
+
       hideAllSubDivs(); 
       $('#collectionsView').hide();
       $('#statusView').show();
       createnav ("Statistics"); 
-      $( "#sortable" ).sortable();
+      $( ".resizable" ).resizable({
-      $( "#sortable" ).disableSelection();
+        handles: 'e, w',
-      $( ".resizable" ).resizable({handles: 'e'}); 
+        stop: function (event, ui) {
+          var connectionspos = $("#connectionsLi").position();  
+          var conwidth = $("#connectionsLi").width();  
+          var requestspos = $("#requestsLi").position(); 
+          var reqwidth = $("#requestsLi").width(); 
+          localStorage.setItem("#connectionsLi", JSON.stringify([connectionspos.top, connectionspos.left, conwidth]));
+          localStorage.setItem("#requestsLi", JSON.stringify([requestspos.top, requestspos.left, reqwidth]));
+        } 
+      }); 
+      $( ".draggable" ).draggable({
+        containment: "#centerView",  
+        stop: function (event, ui) {
+          var connectionspos = $("#connectionsLi").position();  
+          var conwidth = $("#connectionsLi").width();  
+          var requestspos = $("#requestsLi").position(); 
+          var reqwidth = $("#requestsLi").width(); 
+          localStorage.setItem("#connectionsLi", JSON.stringify([connectionspos.top, connectionspos.left, conwidth]));
+          localStorage.setItem("#requestsLi", JSON.stringify([requestspos.top, requestspos.left, reqwidth]));
+        }
+      }); 
       //TODO
       $( "#statisticRadioDiv" ).buttonset();
-      var name = $('input[name=statsRadio]:checked', '#statsRadio').val();
+      $( "#connectionsGranularityDiv" ).buttonset();
-      drawStatistics(name); 
+      $( "#requestsGranularityDiv" ).buttonset();
       updateGraphs(); 
     }
 
@@ -2450,26 +2508,34 @@ function validate(evt) {
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/// live click statistic radio buttons 
+/// live click connections radio buttons 
 ///////////////////////////////////////////////////////////////////////////////
-
+$('#connectionsMinutes').live('click', function () {
-$('#radio1').live('click', function () {
+  drawConnections("minutes");  
-  drawStatistics("minutes");  
 });
-
+$('#connectionsHours').live('click', function () {
-$('#radio2').live('click', function () {
+  drawConnections("hours");  
-  drawStatistics("hours");  
 });
-
+$('#connectionsDays').live('click', function () {
-$('#radio3').live('click', function () {
+  drawConnections("days");  
-  drawStatistics("days");  
+});
+///////////////////////////////////////////////////////////////////////////////
+/// live click requests radio buttons 
+///////////////////////////////////////////////////////////////////////////////
+$('#requestsMinutes').live('click', function () {
+  drawRequests("minutes");  
+});
+$('#requestsHours').live('click', function () {
+  drawRequests("hours");  
+});
+$('#requestsDays').live('click', function () {
+  drawRequests("days");  
 });
-
 ///////////////////////////////////////////////////////////////////////////////
 /// draw hours statistics 
 ///////////////////////////////////////////////////////////////////////////////
 
-function drawStatistics (granularity) {
+function drawConnections (granularity) {
 
 ///////////////////////////////////////////////////////////////////////////////
 /// draw connections (granularity) 
@@ -2568,11 +2634,13 @@ function drawStatistics (granularity) {
     error: function(data) {
     }
   });
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 /// draw requests (granularity) 
 ///////////////////////////////////////////////////////////////////////////////
 
+function drawRequests (granularity) {
   var arraySent = [];
   var arrayReceived = [];
   $.ajax({
@@ -2619,8 +2687,21 @@ function drawStatistics (granularity) {
           }
         };
 
-        $.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}, {label: "Bytes received", data:  arrayReceived}], options);
+        var sent = $('input:checkbox[name=bytessent]:checked').val(); 
+        var received = $('input:checkbox[name=bytesreceived]:checked').val(); 
 
+        if ( sent == "on" && received == "on" ) {
+          $.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}, {label: "Bytes received", data:  arrayReceived}], options);
+        }
+        else if ( sent == "on" && received == undefined ) {
+          $.plot($("#placeholderBytesSent"), [{ label: "Bytes sent", data: arraySent}], options);
+        }   
+        else if ( sent == undefined && received == "on" ) {
+          $.plot($("#placeholderBytesSent"), [{ label: "Bytes received", data: arrayReceived}], options);
+        }
+        else if ( sent == undefined && received == undefined ) {
+          $.plot($("#placeholderBytesSent"), [], options);
+        }
 
         $("#placeholderBytesSent").qtip({
           prerender: true,
@@ -2676,14 +2757,18 @@ function drawStatistics (granularity) {
   });
 }
 
-function updateGraphs() {
+function updateGraphs(timeout) {
-  var name = $('input[name=statsRadio]:checked', '#statsRadio').val();
+  var connections = $('input[name=connectionsGranularity]:checked', '#connectionsGranularity').val();
-  drawStatistics(name); 
+  var requests = $('input[name=requestsGranularity]:checked', '#requestsGranularity').val();
-  setTimeout(updateGraphs, 60000);
+  drawConnections(connections); 
+  drawRequests(requests); 
+  if (timeout == true) {
+    setTimeout(updateGraphs, 60000);
+  }
+  else {
+  }
 }
 
-
-
 $(document).delegate('#btnAddNewStat', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) });
 $(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; });
 $(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; });
@@ -2735,10 +2820,10 @@ var ItemActionButtons = {
     $('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop);
   },
   ShowConnectionsStats: function () {
-    $("#connectionsLi").show();  
+    $("#connectionsLi").fadeIn();  
   },
   ShowRequestsStats: function () { 
-    $("#requestsLi").show();  
+    $("#requestsLi").fadeIn();  
   }
 }