note 7: Widget customization

I added a new view to the DB, for monthly electricity consumption statistics. To display this data on the daemon.energy main page, simply add a new widget to the page.

step1: widget base code

We choose the basic widget we want to use, browsing the Gentelella demo, and evaluating the look and feel available.

I chose the 'Stripped table' table on the Tables|Tables page. Using More Tools|Developer Tools (in Chrome) find the code that corresponds to the chosen widget. This code is copied into the index.php page, at the right place.

  <div class="widget widget-nopad">
    <div class="widget-header">
 <!-- update the title -->
      <h2>Stripped table <small>Stripped table subtitle</small></h2>
<!—-  deleted: the widget is  fixed  
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Settings 1</a>
            <a class="dropdown-item" href="#">Settings 2</a>
            </div>
         </li>
       <li><a class="close-link"><i class="fa fa-close"></i></a></li>
      </ul>
—->
      <div class="clearfix"></div>
    </div>
    <div class="x_content">
      <table class="table table-striped">
        <thead>
          <tr>
<!— columns headers, customized as numbers and values, fixed
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
—>
          </tr>
        </thead>
<!— dynamic part, built at startup from DB data
        <tbody>
          <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          </tr>
          <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          </tr>
          <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          </tr>
        </tbody>
—>
      </table>
    </div>
  </div>

Test if your page is working as expected, then modify the code as indicated in the comments.

step 2: startup php code

The PHP code to read the data from the DB and fill the $MonthBody variable with the body code is located at the beginning of the page (head):

  <?php
// make $MonthBody
    $query3  = "SELECT * FROM `storico`.`month power` ORDER BY `timestamp`;";
    // connection stuff in interface.php
    $db = new mysqli($servername, $username, $password, "storico");
    if ($db->connect_errno) {
        die('Error connecting database: '. $db->connect_error);
        }
    $result = $db->query($query3);
// loop to build the HTML table body
    $MonthBody ='<tbody>';
    while($row = $result->fetch_array()) {
      $MonthBody .= '<tr>';
      for($i=1; $i<6; $i++) {
          if($i ==1)
            $MonthBody .= '<th scope="row">'.$row[$i].'</th>';
          else
            $MonthBody .= '<td>'.$row[$i].'</td>';
           }
      $MonthBody .= '</tr>';
    }
    $MonthBody .='</tbody>';
    $db->close();
?>

step 3: HTML custom code

This is the final HTML code, inserted on the index.php page:

      <div class="widget widget-nopad">
        <div class="widget-header">
          <i class='icon-signal'></i>  <!-- added -->
          <h3>Energy/month</h3>        <!-- updated -->
        </div><!-- /widget-header -->
        <div class="widget-content">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>&nbsp;</th>        <!-- updated -->
                <th>Total [kWh]</th>
                <th>Grid [kWh]</th>
                <th>PV [kWh]</th>
                <th><a>green [%]</a></th>
              </tr>
            </thead>
            <?php echo $MonthBody; ?> <!-- added -->
          </table>
        </div>
        <!-- /widget-content -->
      </div>
      <!-- /widget -->