From 04d261044cb80a143fe2b8b316f585f9038cff7e Mon Sep 17 00:00:00 2001 From: Simo Kinnunen Date: Tue, 14 Oct 2014 14:15:23 +0900 Subject: [PATCH] Start implementing new port forwarding UI. --- .../port-forwarding-controller.js | 143 +++--------------- .../port-forwarding/port-forwarding.jade | 32 ++-- 2 files changed, 39 insertions(+), 136 deletions(-) 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 63be9db8..654e7a4d 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,127 +1,34 @@ -var _ = require('lodash') - -module.exports = function PortForwardingCtrl($scope, ngTableParams, - SettingsService, gettext) { - - $scope.forwarding = false - -// SettingsService.bind($scope, { -// key: 'forwarding', -// storeName: 'PortForwarding.forwarding' -// }) - -// SettingsService.bind($scope, { -// key: 'portSets', -// storeName: 'PortForwarding.portSets' -// }) - - - function getPortSets() { - return $scope.portSets.slice(0, -1) // Last item is empty - } - - function forwardPorts() { - _.forEach(getPortSets(), function (portSet) { - $scope.control.createForward(portSet).then(function (result) { - console.log(result) - if (result.error === 'fail_forward') { - alert(gettext('Error: Forwarding ports failed.')) - } - }).catch(function (err) { - console.error(err) - }) - }) - } - - function unforwardPorts() { - _.forEach(getPortSets(), function (portSet) { - $scope.control.removeForward(portSet).then(function (result) { - console.log(result) - if (result.error) { - alert(result.error) - } - }).catch(function (err) { - console.error(err) - }) - }) - } - - $scope.$watch('forwarding', function (newValue, oldValue) { - if (newValue !== oldValue) { - if (newValue) { - forwardPorts() - } else { - if (typeof oldValue !== 'undefined') { - unforwardPorts() - } - } - } else { - // It's the first time, probably not forwarding - $scope.forwarding = false - } - }) - - - function portFieldsAreEmpty(ports) { - return (_.isEmpty(ports.targetHost) && _.isEmpty(ports.targetPort) && - _.isEmpty(ports.devicePort)) - } - - $scope.portSets = [ +module.exports = function PortForwardingCtrl( + $scope +, SettingsService +) { + $scope.reversePortForwards = [ { - targetHost: 'localhost', - targetPort: 8080, - devicePort: 8080 + targetHost: 'localhost' + , targetPort: 8080 + , devicePort: 8080 + , enabled: false } ] -// SettingsService.getItem('PortForwarding.portSets').then(function (result) { -// if (result) { -// $scope.portSets = result -// } else { -// console.log('here') -// } -// console.log(result) -// }) + SettingsService.bind($scope, { + target: 'reversePortForwards' + , source: 'reversePortForwards' + }) - function createEmptyField() { - if (!$scope.portSets) { - $scope.portSets = [] - } - var empty = { - targetHost: null, - targetPort: null, - devicePort: null - } - - $scope.portSets.push(empty) + $scope.enableForward = function(forward) { + forward.processing = true + return $scope.control.createForward(forward) + .finally(function() { + forward.processing = false + }) } - // Adds a new row whenever necessary - $scope.$watch('portSets', function (newValue) { - if (newValue) { - // 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)) + $scope.disableForward = function(forward) { + forward.processing = true + return $scope.control.removeForward(forward) + .finally(function() { + forward.processing = false }) - - var last = _.last(newValue) - if (!portFieldsAreEmpty(last)) { - createEmptyField() - } - } - //SettingsService.setItem('PortForwarding.portSets', angular.copy($scope.portSets)) - }, true) - - $scope.portsTable = new ngTableParams({ - page: 1, - count: 5 - }, { - counts: [], - total: 1, - getData: function ($defer) { - $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 53231a49..d6faa890 100644 --- a/res/app/control-panes/advanced/port-forwarding/port-forwarding.jade +++ b/res/app/control-panes/advanced/port-forwarding/port-forwarding.jade @@ -4,30 +4,26 @@ i.fa.fa-random span(translate).pointer Port forwarding - button(ng-click='forwarding = !forwarding', ng-class="{active: forwarding}").btn.btn-primary-outline.btn-xs.pull-right - i.fa(ng-class="{'fa-arrow-circle-right': !forwarding, 'fa-times-circle': forwarding}") - span(ng-show='forwarding', translate) Unforward - span(ng-hide='forwarding', translate) Forward .widget-content.padded(collapse='isCollapsed') - table(ng-table='portsTable').table.table-striped + table thead tr - th(width='28%') + th(colspan='2') span(translate) Device - .button-spacer - i.fa.fa-arrow-right.fa-fw - th(width='44%') + th(colspan='3') span(translate) Host - th(width='28%') tbody - tr(ng-repeat='ports in $data') - //td(data-title='"Local" | translate').check - label - input(type='checkbox', ng-model='ports.targetLocal') - span + tr(ng-repeat='forward in reversePortForwards track by forward.devicePort') td - input.form-control(type='number', min='0', ng-model='ports.devicePort', placeholder='{{"Port"|translate}}') + div.input-group + span.input-group-addon + input(type='checkbox', ng-model='forward.enabled') + input.form-control(type='number', min='0', ng-model='forward.devicePort', ng-model-options="{ updateOn: 'blur' }", placeholder='{{"Port"|translate}}') td - input.form-control(type='text', ng-model='ports.targetHost', placeholder='{{"Hostname"|translate}}', ng-disabled='ports.targetLocal') + i.fa.fa-arrow-right.fa-fw td - input.form-control(type='number', min='0', ng-model='ports.targetPort', ng-change='targetPortChanged(result)', placeholder='{{"Port"|translate}}') + input.form-control(type='text', ng-model='forward.targetHost', ng-model-options="{ updateOn: 'blur' }", placeholder='{{"Hostname"|translate}}') + td + span : + td + input.form-control(type='number', min='0', ng-model='forward.targetPort', ng-model-options="{ updateOn: 'blur' }", placeholder='{{"Port"|translate}}')