Practical Internet of Things with JavaScript

Updating the web app

Now that we are done with the API engine, we will update the template in the web app to display the three axis data. Open web-app/src/app/device/device.component.html and update it as follows:

<div class="container">  <br>  <div *ngIf="!device">    <h3 class="text-center">Loading!</h3>  </div>  <div class="row" *ngIf="lastRecord">    <div class="col-md-12">      <div class="panel panel-info">        <div class="panel-heading">          <h3 class="panel-title">                        {{device.name}}                    </h3>          <span class="pull-right btn-click">                        <i class="fa fa-chevron-circle-up"></i>                    </span>        </div>        <div class="clearfix"></div>        <div class="table-responsive">          <table class="table table-striped">            <tr *ngIf="lastRecord">              <td>X-Axis</td> <td>{{lastRecord.data.acclVals.x}} {{lastRecord.data.acclVals.units}}</td> ...