Issue #9 get IP adresses automatically

add initial ui
freifunk-berlin · Oct 16, 2015 · 744a76c · 744a76c
1 parent 3f07c66
commit 744a76c
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 4 deletions.
diff --git a/bower.json b/bower.json
@@ -12,7 +12,7 @@
   "license": "MIT",
   "dependencies": {
     "angular": "~1.4.6",
-    "angular-bootstrap": "~0.13.4",
+    "angular-bootstrap": "~0.14.1",
     "angular-leaflet-directive": "~0.8.8",
     "angular-translate": "~2.8.0",
     "angular-jsonrpc-client": "~0.0.2",

diff --git a/gulpfile.js b/gulpfile.js
@@ -3,7 +3,9 @@ var gulp = require('gulp');
 var buildDir = './gh-pages/';
 
 gulp.task('build', function() {
-  gulp.src('src/index.*').pipe(gulp.dest(buildDir));
+  gulp.src([
+    'src/**',
+  ]).pipe(gulp.dest(buildDir));
 });
 
 gulp.task('build:vendor', function() {

diff --git a/src/index.html b/src/index.html
@@ -23,6 +23,8 @@
     <!-- wizard assets -->
     <link rel="stylesheet" href="index.css">
     <script src="index.js"></script>
+    <script src="partials/dialog/dialog.js"></script>
+
   </head>
   <body data-ng-controller="WizardCtrl">
 
@@ -694,6 +696,8 @@ <h3 class="panel-title">
             <i class="fa fa-check"></i>
               {{ 'save' | 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>

diff --git a/src/index.js b/src/index.js
@@ -6,9 +6,9 @@ var wizard = angular.module('WizardApp', [
 
 wizard.controller('WizardCtrl', [
   '$scope', 'leafletData', '$http', '$filter', 'downloadFile', '$translate',
-  'jsonrpc',
+  'jsonrpc', '$uibModal',
   function($scope, leafletData, $http, $filter, downloadFile, $translate,
-           jsonrpc) {
+           jsonrpc, $uibModal) {
 
     $scope.changeLang = function() {
       $translate.use($scope.selectedLanguage);
@@ -282,6 +282,22 @@ wizard.controller('WizardCtrl', [
       );
     };
 
+    //TODO open dialog on submit if there are no errors
+    $scope.open = function() {
+      var modalInstance = $uibModal.open({
+        templateUrl: 'partials/dialog/dialog.html',
+        controller: 'DialogController',
+        resolve: {
+          state: function () {
+            return $scope.state;
+          },
+          wizard: function() {
+            return $scope.wizard;
+          }
+        }
+      });
+    }
+
     $scope.pow = Math.pow;
 
   }

diff --git a/src/partials/dialog/dialog.html b/src/partials/dialog/dialog.html
@@ -0,0 +1,31 @@
+<div class="modal-header">
+  <h3 class="modal-title">Proessing Data</h3>
+</div>
+<div class="modal-body">
+  <div class="container-fluid">
+    <div class="row" data-ng-show="state.ip.register">
+      <div class="col-md-12">
+        <h4>Register IPs</h4>
+        <uib-progressbar max="state.registerips.max" value="state.registerips.progress">
+          <span style="color:white; white-space:nowrap;">
+            {{state.registerips.progress}} / {{state.registerips.max}}
+          </span>
+        </uib-progressbar>
+      </div>
+    </div>
+    <div class="row" data-ng-show="{{wizard.internet.share && state.internet.vpn03.generate}}">
+      <div class="col-md-12">
+        <h4>Generate VPN Certificate and Key </h4>
+        <uib-progressbar max="state.generatevpn.max" value="state.generatevpn.progress">
+          <span style="color:white; white-space:nowrap;">
+            {{state.generatevpn.progress}} / {{state.generatevpn.max}}
+          </span>
+        </uib-progressbar>
+      </div>
+    </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>
diff --git a/src/partials/dialog/dialog.js b/src/partials/dialog/dialog.js
@@ -0,0 +1,66 @@
+angular.module('WizardApp').controller('DialogController', function ($scope, $modalInstance, state, wizard, $interval) {
+
+  console.log(state);
+
+  $scope.state = state;
+  $scope.wizard = wizard;
+  $scope.state.registerips = {
+    max: 4,
+    progress: 0
+  };
+  $scope.state.generatevpn = {
+    max: 4,
+    progress: 0
+  };
+
+  $scope.registerIPs = function() {
+    //call register ips
+    //render confirmation code field
+    //check confirmation code
+    //write ips to wizard config
+
+    //just some testcode
+    $interval(function() {
+      if ($scope.state.registerips.progress < $scope.state.registerips.max) {
+        $scope.state.registerips.progress++;
+      }
+    },1500,$scope.state.registerips.max);
+  };
+
+  $scope.generateVPN03CertAndKey = function() {
+    /*
+     * since this is not handled on the client we need a service on the router
+     * that perfomrs the following tasks and reports a status
+     *
+     * ask vpn server to generate cert and key
+     * download file
+     * untar file and copy cert and key to correct location
+     * write file location to config file
+     */
+
+    //just some testcode
+    $interval(function() {
+      if ($scope.state.generatevpn.progress < $scope.state.generatevpn.max) {
+        $scope.state.generatevpn.progress++;
+      }
+    },1200,$scope.state.registerips.max);
+
+   // show download cert and key tar file button or but everything in the "Download Config"?
+  };
+
+  $scope.ok = function () {
+    $modalInstance.close($scope.selected.item);
+  };
+
+  $scope.cancel = function () {
+    $modalInstance.dismiss('cancel');
+  };
+
+  if ($scope.state.ip.register) {
+    $scope.registerIPs();
+  }
+
+  if ($scope.wizard.internet.share && $scope.state.internet.vpn03.generate) {
+    $scope.generateVPN03CertAndKey();
+  }
+});