Port forwarding now adds rows in real time.

res/app/control-panes/advanced/port-forwarding/port-forwarding-controller.js

@@ -1,21 +1,54 @@
+var _ = require('lodash')
+
 module.exports = function PortForwardingCtrl($scope, ngTableParams) {
 
   $scope.portSets = [
     {
-      targetHost: '',
-      targetPort: '',
-      devicePort: ''
+      targetHost: 'local',
+      targetPort: '23',
+      devicePort: '444'
+    },
+    {
+      targetHost: '111',
+      targetPort: '222',
+      devicePort: '333'
     }
   ]
 
+  function portFieldsAreEmpty(ports) {
+    return (_.isEmpty(ports.targetHost) && _.isEmpty(ports.targetPort) && _.isEmpty(ports.devicePort))
+  }
+
+  // Adds a new row whenever necessary
+  $scope.$watch('portSets', function (newValue, oldValue) {
+    // Remove all empty sets from the middle
+    _.remove(newValue, function (ports, index) {
+      // Skip last and remove empty fields
+      return !!(newValue.length !== index + 1 && portFieldsAreEmpty(ports))
+    })
+
+    var last = _.last(newValue)
+    if (!portFieldsAreEmpty(last)) {
+      var empty = {
+        targetLocal: null,
+        targetHost: null,
+        targetPort: null,
+        devicePort: null,
+      }
+      $scope.portSets.push(empty)
+    }
+  }, true)
+
   $scope.portsTable = new ngTableParams({
+    page: 1,
+    count: 5
   }, {
     counts: [],
     total: 1,
     getData: function ($defer, params) {
-      var data = $scope.portSets
 
-      $defer.resolve(data);
+
+      $defer.resolve($scope.portSets);
     }
   })
 }

res/app/control-panes/advanced/port-forwarding/port-forwarding.jade

@@ -1,16 +1,32 @@
 .widget-container.fluid-height.stf-port-forwarding(ng-controller='PortForwardingCtrl')
   .heading
-    i.fa.fa-random
-    span(translate) Port forwarding
+    span(ng-click='isCollapsed = !isCollapsed')
+      i.fa.fa-random
+      span(translate).pointer Port forwarding
 
     button(ng-click='forwarding = !forwarding', ng-class="{active: forwarding}").btn.btn-primary.btn-xs.pull-right
       i.fa(ng-class="{'fa-arrow-circle-right': !forwarding, 'fa-times-circle': forwarding}")
       span(ng-show='forwarding', translate) Unforward Ports
       span(ng-hide='forwarding', translate) Forward Ports
-  .widget-content.padded
+  .widget-content.padded(collapse='isCollapsed')
+
+    table(ng-table='portsTable').table.table-striped
+      tr(ng-repeat='ports in $data')
+        td(data-title='"Local"').check
+          label
+            input(type='checkbox', ng-model='ports.targetLocal')
+            span
+
+        td(data-title='"Host"')
+          input.form-control(type='text', ng-model='ports.targetHost', placeholder='{{"Hostname"|translate}}', ng-disabled='ports.targetLocal')
+        td
+          input.form-control(type='number', min='0', ng-model='ports.targetPort', ng-change='targetPortChanged(result)', placeholder='{{"Port"|translate}}')
+
+        td(data-title='"Device"')
+          input.form-control(type='number', min='0', ng-model='ports.devicePort', placeholder='{{"Port"|translate}}')
 
 
-    table(ng-table='portsTable').table
+    //table(ng-table='portsTable').table
       thead
         tr
           th