LEAN Raspberry Remote client-side snippets

addDeviceFormController.js

raspberryRemoteApp.controller('addDeviceFormController', function ($scope, $http, $location) {
    $scope.master = {};
    $scope.addFormStatus = '';

    $scope.update = function (device) {
        console.log(device);
        
        $http.post('http://localhost:1337/api/devices', device)
            .success(function () {
            $scope.device = angular.copy($scope.master);
            $location.path('/devices');
        })
            .error(function () {
            $scope.addFormStatus = 'Something went wrong!';
        });
    };

    $scope.reset = function () {
        $scope.device = angular.copy($scope.master);
        $scope.addFormStatus = '';
    };
    
    $scope.reset();
})

admin.html

<div class="jumbotron text-center">
    <h1>Admin Page</h1>

    <div ng-controller="addDeviceFormController">
        <div class="container">
            <form name="addDeviceForm" class="form-horizontal">
                <div class="form-group">
                    <label for="inputName" class="control-label col-xs-2">Name</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" id="inputName" placeholder="Name of the device" ng-model="device.name" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputIpAddress" class="control-label col-xs-2">IP address</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" id="inputIpAddress" placeholder="Ip address of the device" ng-model="device.ipAddress" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputRemotePort" class="control-label col-xs-2">Remote port</label>
                    <div class="col-xs-10">
                        <input type="number" class="form-control" id="inputRemotePort" placeholder="Remote port of the device" ng-model="device.remotePort" required />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <input type="button" ng-click="reset()" class="btn btn-lg btn-default" value="Reset" />
                        <input type="submit" ng-click="update(device)" class="btn btn-lg btn-default btn-primary" value="Save" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <p><b>{{ addFormStatus }}</b></p>
                    </div>
                </div>
            </form>            
        </div>
    </div>
</div>

devices.html

<div class="jumbotron text-center">
    <h1>Devices Page</h1>

    <div ng-controller="devicesListController">
        <div class="container">
            <table class="table table-striped table-hover table-responsive">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Device Name</th>
                        <th>IP address</th>
                        <th>Remote port</th>
                        <th>State</th>
                        <th>Last status</th>
                        <th>~</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="device in devices">
                        <td>{{device.id}}</td>
                        <td>{{device.name}}</td>
                        <td>{{device.ipAddress}}</td>
                        <td>{{device.remotePort}}</td>
                        <td>
                            <input type="checkbox" ng-model="device.state" bs-switch ng-change="toggle(device)" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-success" disabled ng-show="device.success">Success</button>
                            <button type="button" class="btn btn-danger" disabled ng-show="device.error">Error</button>
                        </td>
                        <td>
                            <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(device)" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>{{ switchStatus }}</p>
        </div>
    </div>

</div>

devicesListController.js

raspberryRemoteApp.controller('devicesListController', function ($scope, $http) {
    
    $scope.removeRow = function (device) {
        $http.delete('http://localhost:1337/api/devices/' + device.id, device).
            success(function (data) {
            console.log(data);
            $scope.devices = data;
        });
    };
    
    $scope.toggle = function (device) {        
        $scope.switchStatus = '';
        $http.put('http://localhost:1337/api/devices/' + device.id + '/' + device.state, null)
            .success(function (data) {
            $scope.devices = data;
         })
            .error(function (data) {
            $scope.devices = data;
            $scope.switchStatus = 'Something went wrong!';
        });
    };

    $http.get('http://localhost:1337/api/devices').
        success(
        function (data) {
            $scope.devices = data;
        })

});

index.html

<html ng-app="raspberryRemoteApp">
  <head>
    ...
  </head>
  <body ng-controller="mainController">

    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Raspberry Remote</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#devices"><i class="fa fa-shield"></i> Devices</a></li>
                    <li><a href="#admin"><i class="fa fa-comment"></i> Admin</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>
</body>
</html>

routing.js

var raspberryRemoteApp = angular.module('raspberryRemoteApp', ['ngRoute', 'frapontillo.bootstrap-switch']);

// Configure our routes
raspberryRemoteApp.config(function ($routeProvider) {
    $routeProvider

            // route for the home page
            .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })

            // route for the devices page
            .when('/devices', {
        templateUrl : 'pages/devices.html',
        controller  : 'devicesListController'
    })

            // route for the admin page
            .when('/admin', {
        templateUrl : 'pages/admin.html',
        controller  : 'addDeviceFormController'
    });
});