Skip to content

Commit

Permalink
Issue #9: get ip addresses automatically
Browse files Browse the repository at this point in the history 
more code for ip registration ui
  • Loading branch information
@geirkairam
geirkairam committed Oct 25, 2015
1 parent a33e3c8 commit adeccde
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 93 deletions.
11 changes: 3 additions & 8 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h1>
</div>

<form novalidate name="wizardForm"
class="form-horizontal wizard-categories">
class="form-horizontal wizard-categories" ng-submit="processForm()">

<!-- basic router setup -->
<div class="wizard-category">
Expand Down Expand Up @@ -776,15 +776,10 @@ <h3 class="panel-title" translate translate-values="{name: name}">
<span class="text-danger" ng-show="wizardForm.$submitted && wizardForm.$invalid">
{{ 'configIncorrect' | translate }}
</span>
<button type="button" class="btn btn-default" ng-click="downloadConfig()">
<i class="fa fa-download"></i> {{ 'download' | translate }}
</button>
<button type="submit" class="btn btn-primary" data-ng-click="submit()" data-ng-class="{disabled: wizardForm.$invalid}">
<button type="submit" class="btn btn-primary" data-ng-class="{disabled: wizardForm.$invalid}">
<i class="fa fa-check"></i>
{{ 'save' | translate }}
{{ 'processData.start' | translate }}
</button>
<!-- TODO intercept submit and open dialog if there are no errors in form -->
<button type="button" class="btn" ng-click="open()">open</button>
</div>
</div>
</form>
Expand Down
82 changes: 38 additions & 44 deletions src/js/controllers/dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,74 +2,53 @@

module.exports = function(app) {
app.controller('DialogController',
function($scope, $modalInstance, state, wizard, $interval, $http) {

console.log(state);

function($scope, $modalInstance, state, wizard, $interval, $http, $translate, downloadFile, $filter) {
$scope.state = state;
$scope.wizard = wizard;
$scope.state.registerips = {
max: 4,
progress: 0
progress: {
reserved: 'notStarted',
keyEntered: 'notStarted',
confirmed: 'notStarted',
configWritten: 'notStarted'
},
steps: 0,
};
$scope.state.generatevpn = {
max: 4,
progress: 0
};

$scope.getObjectKeys = function(scopeObject) {
return Object.keys(scopeObject);
}

$scope.reserveIPs = function() {
//call register ips
//TODO call register ips
$http.get('/nls/locale-de.json').then(function(response) {
//success callback
//TODO handle error in response
//render confirmation code field
$scope.state.registerips.reserved = true;
$scope.state.registerips.message = {
type:'info',
value: 'success.reserveip'
}
$scope.state.registerips.progress++;
$scope.state.registerips.progress.reserved = 'success';
$scope.state.registerips.steps++;
}, function(response){
//error callback
console.log(response);
$scope.state.registerips.message = {
type:'error',
value: 'error.reserveip'
}
$scope.state.registerips.progress.reserved = 'error';
});

//just some testcode
/*$interval(function() {
if ($scope.state.registerips.progress <
$scope.state.registerips.max) {
$scope.state.registerips.progress++;
}
},3500,$scope.state.registerips.max);*/
};

//check confirmation code
$scope.confirmIPs = function() {
$scope.state.registerips.progress++;
$scope.state.registerips.steps++;
$scope.state.registerips.progress.keyEntered = 'success'
$http.get('gibs/nich.html').then(
function(response) {
//succuess callback

//TODO check for error in response

$scope.state.registerips.progress++;

$scope.state.registerips.message = {
type:'success',
value: 'success.reserveip'
}
//write ips to wizard config
$scope.state.registerips.steps++;
$scope.state.registerips.progress.confirmed = 'success'
//TODO write ips to wizard config
}, function(response) {
//error callback
console.log(response);
$scope.state.registerips.message = {
type:'error',
value: 'error.confirmip'
}
$scope.state.registerips.progress.confirmed = 'error'
}
);
}
Expand All @@ -96,18 +75,33 @@ module.exports = function(app) {
// show download cert and key tar file button or but everything in the "Download Config"?
};

$scope.downloadConfig = function() {
downloadFile(
'config.json',
$filter('json')($scope.wizard),
'application/json',
true
);
};

//return wizard and state back to parent controller
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
$modalInstance.close({
"wizard": $scope.wizard,
"state": $scope.state
});
};

$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};

//show ip registration processing
if ($scope.state.ip.register) {
$scope.reserveIPs();
}

//show vpn files generation process
if ($scope.wizard.internet.share &&
$scope.state.internet.vpn03.generate) {
$scope.generateVPN03CertAndKey();
Expand Down
42 changes: 20 additions & 22 deletions src/js/controllers/wizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,31 +288,29 @@ module.exports = function(app) {
};
};

$scope.downloadConfig = function() {
downloadFile(
'config.json',
$filter('json')($scope.wizard),
'application/json',
true
);
};

$scope.pow = Math.pow;

//TODO open dialog on submit if there are no errors
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: '/view/partials/dialog/dialog.html',
controller: 'DialogController',
resolve: {
state: function() {
return $scope.state;
},
wizard: function() {
return $scope.wizard;
$scope.processForm = function() {
if(!$scope.wizardForm.$invalid) {
var modalInstance = $uibModal.open({
templateUrl: '/view/partials/dialog/dialog.html',
controller: 'DialogController',
resolve: {
state: function() {
return $scope.state;
},
wizard: function() {
return $scope.wizard;
}
}
}
});
});

//handle wizard and state from dialog
modalInstance.result.then(function(returnData) {
console.log(returnData.wizard);
console.log(returnData.state);
});
}
};
}
]);
Expand Down
21 changes: 19 additions & 2 deletions src/nls/locale-en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,23 @@
}
},
"configIncorrect": "The data you entered is invalid. Please correct them before saving.",
"save": "Save & Restart",
"download": "Download configuration"
"processData": {
"start": "Process data",
"finished": "Your data was process successfully. Click the reboot button to become a Freifunka.",
"headline": "Process Data",
"registerIPs": {
"headline": "Register IPs",
"reserved": "Reserve IPs",
"keyEntered": "Enter confirmation key",
"confirmed": "Confirm IPs",
"configWritten": "Write IPs to configuration",
"confirmKey": {
"label": "Confirmation Key",
"submit": "Enter"
}
},
"reboot": "Save & Reboot",
"cancel": "Cancel",
"download": "Download configuration"
}
}
51 changes: 34 additions & 17 deletions src/view/partials/dialog/dialog.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,41 @@
<div class="modal-header">
<h3 class="modal-title">Proessing Data</h3>
<h3 class="modal-title" translate>processData.headline</h3>
</div>
<div class="modal-body">
<div class="modal-body" translate-namespace="processData">
<div class="container-fluid">
<div class="row" data-ng-show="state.ip.register">
<div class="row" data-ng-hide="state.ip.register || (wizard.internet.share && state.internet.vpn03.generate)">
<div class="col-md-12">
<h4>Register IPs</h4>
<uib-progressbar max="state.registerips.max" value="state.registerips.progress">
<i class="fa fa-fw fa-info-circle"></i><span translate>.finished</span>
</div>
</div>
<div class="row" data-ng-show="state.ip.register" translate-namespace="processData.registerIPs">
<div class="col-md-12">
<h4 translate>.headline</h4>
<uib-progressbar max="getObjectKeys(state.registerips.progress).length" value="state.registerips.steps">
<span style="color:white; white-space:nowrap;">
{{state.registerips.progress}} / {{state.registerips.max}}
{{state.registerips.steps}} / {{getObjectKeys(state.registerips.progress).length}}
</span>
</uib-progressbar>
<div class="alert"
data-ng-collapse="!state.registerips.message">
<span class="fa fa-circle fa-info" aria-hidden="true"></span>
<span class="sr-only">Message:</span>
<span translate>{{state.registerips.message.value}}</span>
<div class="form-group">
<div data-ng-repeat="progress in getObjectKeys(state.registerips.progress)">
<i class="fa" data-ng-class="{
'fa-spinner': state.registerips.progress[progress] == 'notStarted',
'fa-check text-success': state.registerips.progress[progress] == 'success',
'fa-warning text-warning' : state.registerips.progress[progress] == 'error'
}"></i> <span>{{ 'processData.registerIPs.'+progress | translate }}</span>
</div>
</div>
<div data-ng-show="state.registerips.reserved">
<input type="text">
<button type="button" class="btn" data-ng-click="confirmIPs()">Confirm IPs</button>
<div class="form-group" data-ng-show="state.registerips.progress.reserved == 'success' && state.registerips.progress.keyEntered == 'notStarted'">
<label for="confirmKey" class="col-md-3 control-label" translate>
.confirmKey.label
</label>
<div class="col-md-7">
<input type="text" class="form-control" name="confirmKey" id="confirmKey">
</div>
<!-- TODO do not allow empty values-->
<div class="col-md-1">
<button type="button" class="btn" data-ng-click="confirmIPs()" translate>.confirmKey.submit</button>
</div>
</div>
</div>
</div>
Expand All @@ -42,7 +58,8 @@ <h4>Generate VPN Certificate and Key </h4>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
<div class="modal-footer" translate-namespace="processData">
<button class="btn btn-default" type="button" ng-click="downloadConfig()" translate><i class="fa fa-download"></i>.download</button>
<button class="btn btn-primary" type="button" ng-click="ok()" translate>.reboot</button>
<button class="btn btn-warning" type="button" ng-click="cancel()" translate>.cancel</button>
</div>

0 comments on commit adeccde

Please sign in to comment.