Enhances configuration page

Adds Notification angular module
Adds Requestify for ExpressJS to make posting ezpz
Now can post data to gocryptoCore
GoCrypto can now receive data on settings save
This commit is contained in:
Scott
2016-08-08 14:52:25 +10:00
parent 16982e36ae
commit e85876e273
9 changed files with 152 additions and 46 deletions

View File

@@ -14,6 +14,15 @@ func getAllSettings(w http.ResponseWriter, r *http.Request) {
}
}
func saveAllSettings(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json; charset=UTF-8")
w.WriteHeader(http.StatusOK)
if err := json.NewEncoder(w).Encode(true); err != nil {
panic(err)
}
}
var configRoutes = Routes{
Route{
"GetAllSettings",
@@ -21,4 +30,11 @@ var configRoutes = Routes{
"/config/all",
getAllSettings,
},
Route{
"SaveAllSettings",
"POST",
"/config/all/save",
saveAllSettings,
},
}

View File

@@ -3,12 +3,23 @@
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ui-notification',
'myApp.home',
'myApp.about',
'myApp.settings',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
config(['$locationProvider', '$routeProvider' ,'NotificationProvider', function($locationProvider, $routeProvider, NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 60,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 20,
positionX: 'right',
positionY: 'top'
});
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/'});

View File

@@ -11,12 +11,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="/bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.css">
<link rel="stylesheet" href="/app.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="/bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
@@ -52,6 +54,7 @@
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/app.js"></script>
<script src="/views/settings/settings.js"></script>

View File

@@ -9,7 +9,7 @@ angular.module('myApp.home', ['ngRoute'])
});
}])
.controller('HomeController', function ($scope, $http) {
.controller('HomeController', function ($scope, $http, Notification) {
$scope.getDashboardData = function() {
$http({
method: 'GET',
@@ -17,6 +17,7 @@ angular.module('myApp.home', ['ngRoute'])
}).
success(function (data, status, headers, config) {
$scope.exchanges = data.data;
Notification.info("Retrieved latest data");
}).
error(function (data, status, headers, config) {
console.log('error');

View File

@@ -1,51 +1,60 @@
<h2>Settings</h2>
<div class="col-md-12">
<h4>Exchange config</h4>
<div ng-repeat="exchange in config.Exchanges">
<div class="row">
<h3>{{exchange.Name}}</h3>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">Enabled:</label>
</div>
<div class="col-md-10">
<input type="checkbox" class="input-form" ng-model="exchange.Enabled"/>
</div>
</div>
<div ng-show="exchange.Enabled">
<div class="col-md-10 container " >
<h4>Exchange config</h4>
<div ng-repeat="exchange in config.Exchanges">
<div class="row">
<div class="col-md-2">
<label class="input-form">API Key:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.APIKey"/>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">API Secret:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.APISecret"/>
</div>
<h3>{{exchange.Name}}</h3>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">Client ID:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.ClientID"/>
<label class="input-form">Enabled:</label>
</div>
<div class="col-md-10">
<input type="checkbox" class="input-form" ng-model="exchange.Enabled"/>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">Available Currencies:</label>
<div ng-show="exchange.Enabled">
<div class="row">
<div class="col-md-2">
<label class="input-form">API Key:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.APIKey"/>
</div>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-2">
<label class="input-form">API Secret:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.APISecret"/>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">Client ID:</label>
</div>
<div class="col-md-10">
<input type="text" class="input-form" ng-model="exchange.ClientID"/>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="input-form">Currencies to check:</label>
</div>
<div class="col-md-10">
<div class="col-md-2" ng-repeat="availableCurrency in exchange.AvailablePairsSplit">
<div class="col-md-8">{{availableCurrency}}</div>
<div class="col-md-4"><input type="checkbox" class="input-form" ng-click="toggleCurrencyToEnabledCurrencies(availableCurrency, exchange)" ng-checked="exchange.EnabledPairsSplit.indexOf(availableCurrency) > -1"/></div>
</div>
</div>
</div>
<button class="btn btn-success btn-lg" ng-click="saveAllSettings()">Save</button>
</div>
</div>
</div>
<div class="col-md-2">
<button class="btn btn-success btn-lg" style="float:right;position:fixed;top:120px;right:60px;" ng-click="saveAllSettings()">Save</button>
</div>
</div>

View File

@@ -1,7 +1,6 @@
'use strict';
angular.module('myApp.settings', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/settings', {
templateUrl: '/views/settings/settings.html',
@@ -9,14 +8,19 @@ angular.module('myApp.settings', ['ngRoute'])
});
}])
.controller('SettingsController', function ($scope, $http) {
.controller('SettingsController', function ($scope, $http, Notification) {
$scope.getconfigData = function() {
$http({
method: 'GET',
url: '/config/all'
}).
success(function (data, status, headers, config) {
for(var i=0; i<data.Exchanges.length;i++) {
data.Exchanges[i].AvailablePairsSplit = data.Exchanges[i].AvailablePairs.split(",");
data.Exchanges[i].EnabledPairsSplit = data.Exchanges[i].EnabledPairs.split(",");
}
$scope.config = data;
Notification.info('Settings loaded');
}).
error(function (data, status, headers, config) {
console.log('error');
@@ -25,4 +29,42 @@ angular.module('myApp.settings', ['ngRoute'])
$scope.getconfigData();
$scope.toggleCurrencyToEnabledCurrencies = function(currency, exchange) {
for(var i=0; i<$scope.config.Exchanges.length;i++) {
if($scope.config.Exchanges[i].Name == exchange.Name) {
if(exchange.EnabledPairsSplit.indexOf(currency) > -1) {
$scope.config.Exchanges[i].EnabledPairsSplit.splice(exchange.EnabledPairsSplit.indexOf(currency),1);
$scope.config.Exchanges[i].EnabledPairs = $scope.config.Exchanges[i].EnabledPairs.replace(","+ currency,"");
} else {
$scope.config.Exchanges[i].EnabledPairsSplit.push(currency);
$scope.config.Exchanges[i].EnabledPairs = $scope.config.Exchanges[i].EnabledPairs + "," + currency;
}
}
}
}
$scope.saveAllSettings = function() {
$scope.postObject = jQuery.extend(true, {}, $scope.config);
//Purge any unnecessary post data
delete $scope.postObject.Webserver;
for(var i=0; i<$scope.postObject.Exchanges.length;i++) {
delete $scope.postObject.Exchanges[i].AvailablePairsSplit;
delete $scope.postObject.Exchanges[i].AvailablePairs;
delete $scope.postObject.Exchanges[i].BaseCurrencies;
delete $scope.postObject.Exchanges[i].EnabledPairsSplit;
}
//Send to be saved
$http({
method: 'POST',
url: '/config/all/save',
data: $scope.postObject
}).
success(function (data) {
Notification.success('Saved settings');
}).
error(function (data) {
Notification.error('Save failed');
});
}
});

View File

@@ -10,6 +10,7 @@
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0"
"html5-boilerplate": "^5.3.0",
"angular-ui-notification":"latest"
}
}

View File

@@ -15,7 +15,9 @@
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"protractor": "^3.2.2",
"express" : "latest"
"express" : "latest",
"requestify":"latest",
"body-parser":"latest"
},
"scripts": {
"postinstall": "bower install",

View File

@@ -1,9 +1,14 @@
var express = require('express')
, app = express();
var requestify = require('requestify');
var bodyParser = require('body-parser')
var request = require('request');
var path = __dirname + '/app/';
app.use("/bower_components", express.static(path + '/bower_components'));
app.use( bodyParser.json() );
app.get("/",function(req,res){
res.sendFile(path + "index.html");
@@ -29,6 +34,22 @@ app.get('/config/all', function (req, res) {
////////////////////////////////////////////////////////
// Posts
///////////////////////////////////////////////////////
app.post('/config/all/save', function(req, res) {
requestify.post('http://localhost:9050/config/all/save', {
data: req.body
})
.then(function(response) {
console.log(response);
res.send(response);
});
});
app.listen(80, function(){
console.log('CORS-enabled web server listening on port 80');
console.log('GoCyptoTrader website running! Enter http://localhost/ into browser');
});