Updating the web app template

In this section, we are going to update the web app template to have a toggle button, quite similar to what we had in Chapter 2, IoTFW.js - I, and Chapter 3, IoTFW.js - II. Using the toggle button, we are going to turn on/off the relay manually. In the later sections, we are going to automate them.

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

Get Practical Internet of Things with JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.