Last active
June 12, 2016 08:43
-
-
Save coding4funrocks/0aef573ef5806aacb7e31acb80d17f18 to your computer and use it in GitHub Desktop.
LEAN Raspberry Remote client-side snippets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}) | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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