apps/roadm/src/main/resources/app/view/roadmFlow/roadmFlow.js

// js for roadm flow table view
(function () {
    'use strict';

    var SET_ATT_REQ = "roadmSetAttenuationRequest";
    var SET_ATT_RESP = "roadmSetAttenuationResponse";
    var DELETE_FLOW_REQ = "roadmDeleteFlowRequest";
    var CREATE_FLOW_REQ = "roadmCreateFlowRequest";
    var CREATE_FLOW_RESP = "roadmCreateFlowResponse";
    var SHOW_ITEMS_REQ = "roadmShowFlowItemsRequest";
    var SHOW_ITEMS_RESP = "roadmShowFlowItemsResponse";

    // injected references
    var $log, $scope, $location, fs, tbs, wss, ns;

    // used to map id to a request call function
    var flowCbTable = {};

    function setAttenuation(flow, targetVal, cb) {
        flowCbTable[flow.id] = cb;
        wss.sendEvent(SET_ATT_REQ,
            {
                devId: $scope.devId,
                flowId: flow.id,
                attenuation: targetVal
            });
    }

    function queryShowItems() {
        wss.sendEvent(SHOW_ITEMS_REQ,
            {
                devId: $scope.devId,
            });
    }
    
    function showItemsCb(data) {
        $scope.showChannel = data.showChannel;
        $scope.showAttenuation = data.showAttenuation;
        $scope.$apply();
    }

    function attenuationCb(data) {
        flowCbTable[data.flowId](data.valid, data.message);
    }

    // check if value is an integer
    function isInteger(val) {
        var INTEGER_REGEXP = /^\-?\d+$/;
        if (INTEGER_REGEXP.test(val)) {
            return true;
        }
        return false;
    }

    angular.module('ovRoadmFlow', [])
    .controller('OvRoadmFlowCtrl',
        ['$log', '$scope', '$location',
            'FnService', 'TableBuilderService', 'WebSocketService', 'NavService',

        function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _wss_, _ns_) {
            var params;
            $log = _$log_;
            $scope = _$scope_;
            $location = _$location_;
            fs = _fs_;
            tbs = _tbs_;
            wss = _wss_;
            ns = _ns_;

            $scope.addFlowTip = 'Create a flow';
            $scope.deviceTip = 'Show device table';
            $scope.flowTip = 'Show flow view for this device';
            $scope.portTip = 'Show port view for this device';

            $scope.showFlowForm = false;

            var handlers = {};
            handlers[SET_ATT_RESP] = attenuationCb;
            handlers[SHOW_ITEMS_RESP] = showItemsCb;
            wss.bindHandlers(handlers);

            params = $location.search();
            if (params.hasOwnProperty('devId')) {
                $scope.devId = params['devId'];
            }

            tbs.buildTable({
                scope: $scope,
                tag: 'roadmFlow',
                query: params
            });

            $scope.displayFlowForm = function () {
                $scope.showFlowForm = true;
            }

            $scope.hideFlowForm = function () {
                $scope.showFlowForm = false;
            }

            $scope.queryShowItems = queryShowItems;

            $scope.setAttenuation = setAttenuation;

            $scope.deleteFlow = function ($event, row) {
                wss.sendEvent(DELETE_FLOW_REQ,
                    {
                        devId: $scope.devId,
                        id: row.id
                    });
            }

            $scope.createFlow = function(flow) {
                wss.sendEvent(CREATE_FLOW_REQ,
                    {
                        devId: $scope.devId,
                        flow: flow
                    });
            }

            $scope.fakeCurrentPower = function(flow) {
                if (!isNaN(flow.currentPower)) {
                    var val = parseInt(flow.attenuation);
                    return val + (val % 5 - 2);
                } else {
                    return flow.currentPower;
                }
            }

            $scope.nav = function (path) {
                if ($scope.devId) {
                    ns.navTo(path, { devId: $scope.devId });
                }
            };

            $scope.$on('$destroy', function () {
                wss.unbindHandlers(handlers);
            });

            $log.log('OvRoadmFlowCtrl has been created');
        }])

    .directive('roadmAtt', ['WebSocketService', function() {

        var retTemplate =
            '<span class="attenuation" ng-show="!editMode" ng-click="enableEdit()">{{currItem.attenuation}}</span>' +
            '<form ng-show="editMode" name="form" novalidate>' +
                '<input type="number" name="formVal" ng-model="formVal">' +
                '<button type="submit" class="submit" ng-click="send()">Set</button>' +
                '<button type="button" class="cancel" ng-click="cancel()">Cancel</button>' +
                '<span class="input-error" ng-show="showError">{{errorMessage}}</span>' +
            '</form>';

        return {
            restrict: 'A',
            scope: {
                currItem: '=roadmAtt',
                roadmSetAtt: '&'
            },
            template: retTemplate,
            link: function ($scope, $element) {
                $scope.editMode = false;
                $scope.showError = false;
                $scope.errorMessage = "Invalid attenuation"
            },
            controller: function($scope, $timeout) {
                $scope.enableEdit = function() {
                    // connection must support attenuation to be editable
                    if ($scope.currItem.hasAttenuation === 'true' && $scope.editMode === false) {
                        // Ensure that the entry being edited remains the same even
                        // if the table entries are shifted around.
                        $scope.targetItem = $scope.currItem;
                        // Ensure the value seen in the field remains the same
                        $scope.formVal = parseInt($scope.currItem.attenuation);
                        $scope.editMode = true;
                        $timeout(function () {
                            $scope.$apply()
                        });
                    }
                };
                $scope.send = function() {
                    // check input is an integer
                    if (!isInteger($scope.formVal)) {
                        $scope.sendCb(false, "Attenuation must be an integer");
                        return;
                    }
                    $scope.roadmSetAtt({flow: $scope.targetItem, targetVal: $scope.formVal, cb: $scope.sendCb});
                };
                // Callback for server-side validation. Displays the error message
                // if the input is invalid.
                $scope.sendCb = function(valid, message) {
                    if (valid) {
                        // check if it's still pointing to the same item
                        // reordering the entries may change the binding
                        if ($scope.currItem.id === $scope.targetItem.id) {
                            // update the ui to display the new attenuation value
                            $scope.currItem.attenuation = $scope.formVal;
                        }
                        $scope.cancel();
                    } else {
                        $scope.errorMessage = message;
                        $scope.showError = true;
                    }
                    $timeout(function () {
                        $scope.$apply()
                    });
                }
                $scope.cancel = function() {
                    $scope.editMode = false;
                    $scope.showError = false;
                }
            }
        };
    }])

    .controller('FlowFormController', function($timeout) {
        var notIntegerError = "Must be an integer.";

        this.clearErrors = function() {
            this.priorityError = false;
            this.timeoutError = false;
            this.isPermanentError = false;
            this.inPortError = false;
            this.outPortError = false;
            this.spacingError = false;
            this.multiplierError = false;
            this.attenuationError = false;
            this.connectionError = false;
            this.channelError = false;
        }
        this.clearErrors();

        this.spacings = [
            {index: 0, freq: "100 GHz"},
            {index: 1, freq: "50 GHz"},
            {index: 2, freq: "25 GHz"},
            {index: 3, freq: "12.5 GHz"}
        ];

        this.flow = {};
        //this.flow.priority = 88;
        this.flow.permanent = true;
        this.flow.timeout = 0;
        //this.flow.inPort = 2;
        //this.flow.outPort = 2;
        this.flow.spacing = this.spacings[1];
        //this.flow.multiplier = 0;
        this.flow.channelFrequency = "";
        this.flow.attenuation = 0;

        var parent = this;

        function createFlowCb(data) {
            if (!data.inPort.valid) {
                parent.inPortMessage = data.inPort.message;
                parent.inPortError = true;
            }
            if (!data.outPort.valid) {
                parent.outPortMessage = data.outPort.message;
                parent.outPortError = true;
            }
            if (!data.connection.valid) {
                parent.connectionMessage = data.connection.message;
                parent.connectionError = true;
            }
            if (!data.spacing.valid) {
                parent.spacingMessage = data.spacing.message;
                parent.spacingError = true;
            }
            if ($scope.includeChannel)
            {
                if (!data.multiplier.valid) {
                    parent.multiplierMessage = data.multiplier.message;
                    parent.multiplierError = true;
                }
                if (!data.channelAvailable.valid) {
                    parent.channelMessage = data.channelAvailable.message;
                    parent.channelError = true;
                }
            }
            if ($scope.includeAttenuation && !data.attenuation.valid) {
                parent.attenuationMessage = data.attenuation.message;
                parent.attenuationError = true;
            }
            $timeout(function () {
                $scope.$apply()
            });
        }

        var handlers = {}
        handlers[CREATE_FLOW_RESP] = createFlowCb;
        wss.bindHandlers(handlers);
        this.createFlow = function(connection) {
            this.clearErrors();

            var error = false;
            if (!isInteger(connection.priority)) {
                this.priorityMessage = notIntegerError;
                this.priorityError = true;
                error = true;
            }
            if (!connection.permanent && !isInteger(connection.timeout)) {
                this.timeoutMessage = notIntegerError;
                this.timeoutError = true;
                error = true;
            }
            if (!isInteger(connection.inPort)) {
                this.inPortMessage = notIntegerError;
                this.inPortError = true;
                error = true;
            }
            if (!isInteger(connection.outPort)) {
                this.outPortMessage = notIntegerError;
                this.outPortError = true;
                error = true;
            }
            if ($scope.includeChannel && !isInteger(connection.multiplier)) {
                this.multiplierMessage = notIntegerError;
                this.multiplierError = true;
                error = true;
            }
            if ($scope.includeAttenuation && !isInteger(connection.attenuation)) {
                this.attenuationMessage = notIntegerError;
                this.attenuationError = true;
                error = true;
            }

            if (!error) {
                wss.sendEvent(CREATE_FLOW_REQ,
                    {
                        devId: $scope.devId,
                        formData: connection
                    });
                $log.log('Request to create connection has been sent');
            }
        }

        $scope.$on('$destroy', function () {
            wss.unbindHandlers(handlers);
        });
    });

}());