Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LEAN Raspberry Remote client-side snippets
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();
})
<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>
<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>
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;
})
});
<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>
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'
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment