tighter layout with grouping

NanoTools · Mar 17, 2018 · 84cb939 · 84cb939
1 parent e8696d6
commit 84cb939
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 153 deletions.
diff --git a/README.md b/README.md
@@ -4,26 +4,13 @@ Nano Node Monitor is a server-side PHP-based monitor for a Nano node. It connect
 
 Here is what it looks like on a desktop computer ...
 
-![phpNodeXRaiImage](https://i.imgur.com/yZtAtTN.png)
+![phpNodeXRaiImage](https://i.imgur.com/1k5BCfc.png)
 
 
 ... and on a mobile device: 
 
-![phpNodeXRaiImage](https://i.imgur.com/GZONaxe.jpg)
-
-Currently, the following information is displayed:
-* Node version
-* Current block number
-* Number of unchecked blocks
-* Number of peers
-* System load
-* System uptime
-* Memory usage
-* Node address
-* Balances
-* Voting weight
-* Representative
-* Market data from coinmarketcap.com 
+![phpNodeXRaiImage](https://i.imgur.com/PTSwL69.jpg)
+
 
 ## First Installation
 

diff --git a/api.php b/api.php
@@ -40,23 +40,25 @@
 
 // -- Get node account balance from nano_node
 $rpcNodeAccountBalance = getAccountBalance($ch, $nanoNodeAccount);
-$data->accBalanceMnano = rawToMnano($rpcNodeAccountBalance->{'balance'}, 4);
+$data->accBalanceMnano = rawToMnano($rpcNodeAccountBalance->{'balance'}, $nanoNumDecimalPlaces);
 $data->accBalanceRaw = (int) $rpcNodeAccountBalance->{'balance'};
-$data->accPendingMnano = rawToMnano($rpcNodeAccountBalance->{'pending'}, 4);
+$data->accPendingMnano = rawToMnano($rpcNodeAccountBalance->{'pending'}, $nanoNumDecimalPlaces);
 $data->accPendingRaw = (int) $rpcNodeAccountBalance->{'pending'};
 
 // -- Get representative info for current node from nano_node
 $rpcNodeRepInfo = getRepresentativeInfo($ch, $nanoNodeAccount);
-$data->votingWeight = rawToMnano($rpcNodeRepInfo->{'weight'}, 4);
+$data->votingWeight = rawToMnano($rpcNodeRepInfo->{'weight'}, $nanoNumDecimalPlaces);
 $data->repAccount = $rpcNodeRepInfo->{'representative'} ?: '';
 
 // -- System uptime & memory info --
 $data->systemLoad = getSystemLoadAvg();
 $systemUptime = getSystemUptime();
-$systemUptimeStr = $systemUptime['days'].' days, '.$systemUptime['hours'].' hours, '.$systemUptime['mins'].' minutes';
+$systemUptimeStr = $systemUptime['days'].' days, '.$systemUptime['hours'].' hrs, '.$systemUptime['mins'].' mins';
 $data->systemUptime = $systemUptimeStr;
 $data->usedMem = getSystemUsedMem();
 $data->totalMem = getSystemTotalMem();
+$data->uname = getUname();
+$data->nanoNodeName = $nanoNodeName;
 
 // close curl handle
 curl_close($ch);

diff --git a/contribute.php b/contribute.php
@@ -14,10 +14,11 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<script src="static/js/jquery-3.3.1.min.js"></script>
+
 
   <head>
     <meta charset="utf-8">
+    <script src="static/js/jquery-3.3.1.min.js"></script>
 
     <title>Nano Node Monitor - <?php echo $nanoNodeName; ?></title>
 
@@ -98,9 +99,6 @@
 
       </script>
 
-
-      </p>
-
      <!--- add the footer -->
      <?php include 'modules/footer.php'; ?>
 

diff --git a/index.php b/index.php
@@ -35,15 +35,19 @@
 
       <div class="page-header mb-3" id="banner">
         <div class="row">
-          <div class="col-lg-8 col-md-7 col-sm-6">
+          <div class="col-lg-8 col-md-6 col-sm-6">
             <a href="https://nano.org" target="_blank">
               <img src="static/img/logo-white.svg" width="220" alt="Nano Logo"/>
             </a>
+           <p></p>
             <p class="lead">Nano Node Monitor</p>
 
+            <p><?php print getVersionInformation(); ?><br>
+            Contributors: <a href="https://github.com/dbachm123">dbachm123</a>, <a href="https://github.com/BitDesert">BitDesert</a>, <a href="https://github.com/NiFNi">NiFNi</a></p>
+
             <p><?php echo $welcomeMsg; ?></p>
           </div>
-          <div class="col-lg-4 col-md-5 col-sm-6">
+          <div class="col-lg-4 col-md-6 col-sm-6">
             <div class="coinmarketcap-currency-widget" 
             data-currencyid="1567" 
             data-base="<?php echo $cmcBaseCurrency; ?>" 
@@ -54,7 +58,6 @@
             data-volume="<?php echo bool2string($cmcVolume); ?>" 
             data-stats="<?php echo $cmcBaseCurrency; ?>" 
             data-statsticker="<?php echo bool2string($cmcStatsticker); ?>"></div>
-
           </div>
         </div>
       </div>

diff --git a/modules/config.sample.php b/modules/config.sample.php
@@ -42,3 +42,6 @@
 
 // donation account for maintaining this node
 // $nanoDonationAccount = 'xrb_1f56swb9qtpy3yoxiscq9799nerek153w43yjc9atoaeg3e91cc9zfr89ehj';
+
+// number of decimal places to display Nano balances, i.e. 
+// $nanoNumDecimalPlaces = 2;
diff --git a/modules/defaults.php b/modules/defaults.php
@@ -39,4 +39,7 @@
 $nanoNodeAccount = 'xrb_1f56swb9qtpy3yoxiscq9799nerek153w43yjc9atoaeg3e91cc9zfr89ehj'; 
 
 // donation account for maintaining this node
-$nanoDonationAccount = 'xrb_1f56swb9qtpy3yoxiscq9799nerek153w43yjc9atoaeg3e91cc9zfr89ehj';
+$nanoDonationAccount = 'xrb_1f56swb9qtpy3yoxiscq9799nerek153w43yjc9atoaeg3e91cc9zfr89ehj';
+
+// number of decimal places to display Nano balances, i.e. 
+$nanoNumDecimalPlaces = 2;
diff --git a/modules/footer.php b/modules/footer.php
@@ -1,10 +1,2 @@
- <footer id="footer">
-  <div class="row">
-    <div class="col-lg-12">
-
-    <p><?php print getVersionInformation(); ?></p>
-
-      <p>Contributors: <a href="https://github.com/dbachm123">dbachm123</a>, <a href="https://github.com/BitDesert">BitDesert</a>, <a href="https://github.com/NiFNi">NiFNi</a></p>
-    </div>
-  </div>
+ <footer id="footer">  
 </footer>
diff --git a/modules/functions.php b/modules/functions.php
@@ -114,7 +114,7 @@ function getLatestReleaseVersion()
         return $versionString[0];
     }
   }
-  
+
   return "";
 }
 
@@ -130,11 +130,18 @@ function getVersionInformation()
 
   if ( version_compare($currentVersion, $latestVersion) < 0 )
   {
-    $versionInfo .= ". A new version " . $latestVersion;
-    $versionInfo .= " is available for update at ";
+    $versionInfo .= "<br>A new version " . $latestVersion;
+    $versionInfo .= " is available at ";
     $versionInfo .= "<a href=\"" . PROJECT_URL . "\" target=\"_blank\">GitHub.</a>";
   }
 
   return $versionInfo;
 
+}
+
+// info about operating system
+
+function getUname()
+{
+  return php_uname();
 }
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -160,3 +160,15 @@ input[type=number] { /* Nano orange */
     box-sizing: border-box;
     border-radius: 4px;
 } 
+
+.list-group-item:hover {
+    background: #3e444c;
+}
+
+.truncate {  
+  display: block;
+  width: 135px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/templates/index.hbs b/templates/index.hbs
@@ -1,118 +1,73 @@
-<h2>Node Info</h2>
-
-<div class="row">
-
-
-    <div class="col-lg-3">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Version</div>
-        <div class="card-body">
-            <h4 class="card-title">{{version}}</h4>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-3">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Current Block</div>
-        <div class="card-body">
-            <h4 class="card-title">{{currentBlock}}</h4>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-3">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Number of Unchecked Blocks</div>
-        <div class="card-body">
-            <h4 class="card-title">{{uncheckedBlocks}}</h4>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-3">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Number of Peers</div>
-        <div class="card-body">
-            <h4 class="card-title">{{numPeers}}</h4>
-        </div>
-        </div>
-    </div>
-
-</div>
-
-<h2>Node Account Info</h2>
-
 <div class="row">
 
-    <div class="col-lg-8">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Address</div>
-        <div class="card-body">
-            <a href="https://www.nanode.co/account/{{nanoNodeAccount}}" target="_blank">{{nanoNodeAccount}}</a>
-        </div>
-        </div>
-    </div>  
-
-    <div class="col-lg-4">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Balance</div>
-        <div class="card-body">
-            <h4 class="card-title">{{accBalanceMnano}} Nano</h4>
-            <h6 class="card-subtitle mb-2 text-muted">{{accPendingMnano}} Nano pending</h6>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-8">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Representative</div>
-        <div class="card-body">
-            <a href="https://www.nanode.co/account/{{repAccount}}" target="_blank">{{repAccount}}</a>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-4">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Voting Weight</div>
-        <div class="card-body">
-            <h4 class="card-title">{{votingWeight}} Nano</h4>
-        </div>
-        </div>
-    </div>
-
-</div>
-
-<h2>System Info</h2>
-
-<div class="row">
-
-    <div class="col-lg-4">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">System Uptime</div>
-        <div class="card-body">
-            <h4 class="card-title">{{systemUptime}}</h4>
-        </div>
-        </div>
-    </div>
-
-    <div class="col-lg-4">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">System Load</div>
-        <div class="card-body">
-            <h4 class="card-title">{{systemLoad}}</h4>
-        </div>
-        </div>
-    </div>
+<div class="col-lg-4">
+ <h2>Node Info</h2>
+ <ul class="list-group">
+  <li class="list-group-item active">
+     Version
+     <span class="float-right">{{version}}</span>
+  </li>
+  <li class="list-group-item active">
+     Current Block
+     <span class="float-right">{{currentBlock}}</span>
+  </li>
+  <li class="list-group-item active">
+    Unchecked Blocks
+    <span class="float-right">{{uncheckedBlocks}}</span>
+  </li>
+  <li class="list-group-item active">
+    Peers
+    <span class="float-right">{{numPeers}}</span>
+  </li>
+ </ul>
+</div>  
+
+
+<div class="col-lg-4">
+ <h2>Node Account Info</h2>    
+ <ul class="list-group">
+  <li class="list-group-item active">
+     Address
+     <span class="float-right"><a href="https://www.nanode.co/account/{{nanoNodeAccount}}" target="_blank" class="truncate">{{nanoNodeAccount}}</a></span>
+  </li> 
+  <li class="list-group-item active">
+     Balance
+     <span class="float-right">{{accBalanceMnano}} Nano</span>
+  </li>
+  <li class="list-group-item active">
+    Representative
+    <span class="float-right"><a href="https://www.nanode.co/account/{{repAccount}}" target="_blank" class="truncate">{{repAccount}}</a></span>
+  </li>
+  <li class="list-group-item active">
+    Voting Weight
+    <span class="float-right">{{votingWeight}} Nano</span>
+  </li>
+ </ul>
+</div> 
+
+
+
+<div class="col-lg-4">
+ <h2>System Info</h2>    
+ <ul class="list-group">
+  <li class="list-group-item active">
+     Hostname
+     <span class="float-right">{{nanoNodeName}}</span>
+  </li> 
+  <li class="list-group-item active">
+     Uptime
+     <span class="float-right">{{systemUptime}}</span>
+  </li> 
+  <li class="list-group-item active">
+     Load
+     <span class="float-right">{{systemLoad}}</span>
+  </li>
+  <li class="list-group-item active">
+    Memory Usage
+    <span class="float-right">{{usedMem}} / {{totalMem}} MB</span>
+  </li>  
+ </ul>
+</div>  
 
-    <div class="col-lg-4">
-        <div class="card text-white bg-primary mb-3">
-        <div class="card-header">Memory Usage</div>
-        <div class="card-body">
-            <h4 class="card-title">{{usedMem}} / {{totalMem}} MB</h4>
-        </div>
-        </div>
-    </div>
 
 </div>