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> ...
