diff --git a/res/app/control-panes/advanced/port-forwarding/port-forwarding-controller.js b/res/app/control-panes/advanced/port-forwarding/port-forwarding-controller.js index 087d0131..bd8b1303 100644 --- a/res/app/control-panes/advanced/port-forwarding/port-forwarding-controller.js +++ b/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); } }) } diff --git a/res/app/control-panes/advanced/port-forwarding/port-forwarding.jade b/res/app/control-panes/advanced/port-forwarding/port-forwarding.jade index 189697c4..50af860b 100644 --- a/res/app/control-panes/advanced/port-forwarding/port-forwarding.jade +++ b/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