From 3982f4f67314ec37fd9b22ae54049958af777c1b Mon Sep 17 00:00:00 2001 From: jimmydot Date: Sun, 7 May 2017 14:58:24 -0400 Subject: [VID-6] Initial rebase push Change-Id: I9077be9663754d9b22f77c6a7b3109b361b39346 Signed-off-by: jimmydot --- .../vid/scripts/directives/extensionsDirective.js | 79 ++++ .../scripts/directives/parameterBlockDirective.js | 420 +++++++++++++++++++++ .../vid/scripts/directives/popupWindowDirective.js | 88 +++++ .../vid/scripts/directives/progressBarDirective.js | 173 +++++++++ 4 files changed, 760 insertions(+) create mode 100755 vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js create mode 100755 vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js create mode 100755 vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js create mode 100755 vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js (limited to 'vid-app-common/src/main/webapp/app/vid/scripts/directives') diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js new file mode 100755 index 00000000..b5497b3d --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js @@ -0,0 +1,79 @@ +/*- + * ============LICENSE_START======================================================= + * VID + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +"use strict"; + +/* + * Defines "extensions" to standard Angular directives. Provides attributes that + * can be included in HTML tags. + * + * SYNTAX: ngx-enabled="true | false" + * + * Enables / disables an element. Currently only supports button elements that + * include the "button" element. This extension was added since the similar + * standard Angular "ng-disabled" attribute does not handle buttons that use the + * ECOMP styling. + * + * SYNTAX: ngx-visible="true | false" + * + * Sets an element to visible / hidden. Different from ng-show / ng-hide as + * follows: + * + * ng-show=false or ng-hide=true - Element is completely hidden. + * + * ngx-visible=false - Element is not displayed. However, a blank area is + * displayed where the element would display if ngx-visible is set to true. + */ + +appDS2.directive('ngxEnabled', function() { + return { + restrict : "A", + link : function(scope, element, attrs) { + attrs.$observe("ngxEnabled", function(value) { + if (attrs.attButton === "") { + if (value === "true") { + element.attr("btn-type", "primary").removeClass( + "button--inactive").addClass("button--primary") + .prop('disabled', false); + } else { + element.attr("btn-type", "disabled").removeClass( + "button--primary").addClass("button--inactive") + .prop('disabled', true); + } + } + }); + } + } +}); + +appDS2.directive('ngxVisible', function() { + return { + restrict : "A", + link : function(scope, element, attrs) { + attrs.$observe("ngxVisible", function(value) { + if (value === "true") { + element.css("visibility", "visible"); + } else { + element.css("visibility", "hidden"); + } + }); + } + } +}); diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js new file mode 100755 index 00000000..811a51ec --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js @@ -0,0 +1,420 @@ +/*- + * ============LICENSE_START======================================================= + * VID + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +"use strict"; + +var parameterBlockDirective = function($log, PARAMETER, UtilityService) { + /* + * If "IS_SINGLE_OPTION_AUTO_SELECTED" is set to "true" ... + * + * IF these 3 conditions all exist: + * + * 1) The parameter type is PARAMETER.SELECT + * + * 2) AND the "prompt" attribute is set to a string. + * + * 3) AND the optionList" only contains a single entry + * + * THEN the "prompt" will not be displayed as an initial select option. + */ + + var IS_SINGLE_OPTION_AUTO_SELECTED = true; + + /* + * Optionally remove "nameStyle" and "valueStyle" "width" entries to set + * dynamic sizing. + */ + var tableStyle = "width: auto; margin: 0 auto; border-collapse: collapse; border: none;"; + var nameStyle = "width: 220px; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 5px; border: none;"; + var valueStyle = "width: 400px; text-align: left; vertical-align: middle; padding: 3px 5px; border: none;"; + var checkboxValueStyle = "width: 400px; text-align: center; vertical-align: middle; padding: 3px 5px; border: none;" + var textInputStyle = "height: 25px; padding: 2px 5px;"; + var checkboxInputStyle = "height: 18px; width: 18px; padding: 2px 5px;"; + var selectStyle = "height: 25px; padding: 2px; text-align: center;"; + var requiredLabelStyle = "width: 25px; padding: 5px 10px 10px 5px;"; + var textInputPrompt = "Enter data"; + + var getParameterHtml = function(parameter, editable) { + var style = valueStyle; + var attributeString = ""; + if (parameter.type === PARAMETER.BOOLEAN) { + style = checkboxValueStyle; + } + if (UtilityService.hasContents(parameter.description)) { + attributeString += " title=' " + parameter.description + " '"; + } + var html = "" + + getNameHtml(parameter) + ""; + if (editable === undefined) { + if (UtilityService.hasContents(parameter.value)) { + html += parameter.value; + } + } else { + html += getValueHtml(parameter); + } + html += ""; + return html; + }; + + var updateParameter = function(parameter, element, editable) { + $(element).parent().parent().children("td").first().html( + getNameHtml(parameter)); + if (editable === undefined) { + $(element).html(parameter.value); + } else { + $(element).parent().html(getValueHtml(parameter)); + } + }; + + var getNameHtml = function(parameter) { + if (parameter.isVisible === false) { + return ""; + } + var name = ""; + if (UtilityService.hasContents(parameter.name)) { + name = parameter.name; + } else { + name = parameter.id; + } + var requiredLabel = ""; + if (parameter.isRequired) { + requiredLabel = ""; + } + return name + ":" + requiredLabel; + }; + + var getValueHtml = function(parameter) { + var attributeString = " parameter-id='" + parameter.id + "'"; + var additionalStyle = ""; + if (parameter.isEnabled === false) { + attributeString += " disabled='disabled'"; + } + if (parameter.isRequired) { + attributeString += " is-required='true'"; + } + if (UtilityService.hasContents(parameter.description)) { + attributeString += " title=' " + parameter.description + " '"; + } + if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) { + attributeString += " readonly"; + } + if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) { + attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required"; + } + else if (UtilityService.hasContents(parameter.maxLength)) { + attributeString += " maxlength='" + parameter.maxLength + "'"; + } + else if (UtilityService.hasContents(parameter.minLength)) { + attributeString += " pattern='.{" + parameter.minLength + ",}'" + } + if (parameter.isVisible === false) { + additionalStyle = " visibility: hidden;"; + } + + var name = ""; + if (UtilityService.hasContents(parameter.name)) { + name = parameter.name; + } else { + name = parameter.id; + } + attributeString += " parameter-name='" + name + "'"; + + switch (parameter.type) { + case PARAMETER.BOOLEAN: + if (parameter.value) { + return "" + "" + + ""; + + ""; + }else{ + return "" + "" + + "" + + ""; + } + break; + case PARAMETER.NUMBER: + var value=parameter.value; + var parameterSpec = ""; + } else { + //integer + return ""; + }*/ + return (parameterSpec); + break; + case PARAMETER.SELECT: + if (UtilityService.hasContents(parameter.prompt)) { + attributeString += " prompt='" + parameter.prompt + "'"; + } + return "" + getOptionListHtml(parameter) + + ""; + break; + case PARAMETER.STRING: + default: + var value = ""; + if (UtilityService.hasContents(parameter.value)) { + value = " value='" + parameter.value + "'"; + } + if (UtilityService.hasContents(parameter.prompt)) { + attributeString += " placeholder='" + parameter.prompt + "'"; + } else if (textInputPrompt !== "") { + attributeString += " placeholder='" + textInputPrompt + "'"; + } + var finalString = ""; + return finalString; + } + }; + + + var getBooleanListHtml = function(parameter){ + var html = ""; + + }; + + var getOptionListHtml = function(parameter) { + + var html = ""; + + if (!angular.isArray(parameter.optionList) + || parameter.optionList.length === 0) { + return ""; + } + + if (UtilityService.hasContents(parameter.prompt)) { + if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1)) { + html += ""; + } + } + + for (var i = 0; i < parameter.optionList.length; i++) { + var option = parameter.optionList[i]; + var name = option.name; + var value = ""; + if (option.id === undefined) { + value = option.name; + } else { + if (name === undefined) { + name = option.id; + } + value = option.id; + } + if (option.isDefault === undefined || option.isDefault === false ) { + html += ""; + } + else { + html += ""; + } + } + return html; + }; + + var getParameter = function(element, expectedId) { + var id = $(element).attr("parameter-id"); + if (expectedId !== undefined && expectedId !== id) { + return undefined; + } + var parameter = { + id : id + }; + if ($(element).prop("type") === "checkbox") { + parameter.value = $(element).prop("checked"); + } else { + if ($(element).prop("type") === "text") { + $(element).val($(element).val().trim()); + } + parameter.value = $(element).val(); + } + if ($(element).prop("selectedIndex") === undefined) { + parameter.selectedIndex = -1; + } else { + parameter.selectedIndex = $(element).prop("selectedIndex"); + if (UtilityService.hasContents($(element).attr("prompt"))) { + parameter.selectedIndex--; + } + } + return parameter; + }; + + var getRequiredField = function(element) { + if ($(element).prop("type") === "text") { + $(element).val($(element).val().trim()); + } + if ($(element).val() === "" || $(element).val() === null) { + return '"' + $(element).attr("parameter-name") + '"'; + } else { + return ""; + } + }; + + var callback = function(element, scope) { + scope.callback({ + id : $(element).attr("parameter-id") + }); + }; + + return { + restrict : "EA", + replace : true, + template : "
", + scope : { + control : "=", + callback : "&" + }, + link : function(scope, element, attrs) { + + var control = scope.control || {}; + + control.setList = function(parameterList) { + var html = ""; + for (var i = 0; i < parameterList.length; i++) { + html += getParameterHtml(parameterList[i], attrs.editable); + } + element.html(html); + element.find("input, select").bind("change", function() { + callback(this, scope); + }); + } + + control.updateList = function(parameterList) { + element.find("input, select").each( + function() { + for (var i = 0; i < parameterList.length; i++) { + if (parameterList[i].id === $(this).attr( + "parameter-id")) { + updateParameter(parameterList[i], this, + attrs.editable); + } + } + }); + element.find("input, select").bind("change", function() { + callback(this, scope); + }); + } + + control.getList = function(expectedId) { + var parameterList = new Array(); + element.find("input, select").each(function() { + var parameter = getParameter(this, expectedId); + if (parameter !== undefined) { + parameterList.push(parameter); + } + }); + return parameterList; + } + + control.getRequiredFields = function() { + var requiredFields = ""; + var count = 0; + element.find("input, select").each(function() { + if ($(this).attr("is-required") === "true") { + var requiredField = getRequiredField(this); + if (requiredField !== "") { + if (++count == 1) { + requiredFields = requiredField; + } + } + } + }); + if (--count <= 0) { + return requiredFields; + } else if (count == 1) { + return requiredFields + " and 1 other field"; + } else { + return requiredFields + " and " + count + " other fields"; + } + } + } + } +} + +appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService", + parameterBlockDirective ]); + + +appDS2.directive('onlyIntegers', function () { + return { + restrict: 'A', + link: function (scope, elm, attrs, ctrl) { + elm.on('keydown', function (event) { + if(event.shiftKey){event.preventDefault(); return false;} + //console.log(event.which); + if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) { + // backspace, enter, escape, arrows + return true; + } else if (event.which >= 49 && event.which <= 57) { + // numbers + return true; + } else if (event.which >= 96 && event.which <= 105) { + // numpad number + return true; + } + // else if ([110, 190].indexOf(event.which) > -1) { + // // dot and numpad dot + // return true; + // } + else { + event.preventDefault(); + return false; + } + }); + } + } +}); + +appDS2.directive('onlyFloat', function () { + return { + restrict: 'A', + link: function (scope, elm, attrs, ctrl) { + elm.on('keydown', function (event) { + if ([110, 190].indexOf(event.which) > -1) { + // dot and numpad dot + event.preventDefault(); + return true; + } + else{ + return false; + } + }); + } + } +}); diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js new file mode 100755 index 00000000..76034d54 --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js @@ -0,0 +1,88 @@ +/*- + * ============LICENSE_START======================================================= + * VID + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +"use strict"; + +var popupWindowDirective = function($log, $window) { + + function getZIndex(element) { + var maxZIndex = 0; + $(window.document).find("*").each(function() { + var zIndex = parseInt($(this).css("z-index")); + if (zIndex > maxZIndex) { + maxZIndex = zIndex; + } + }); + + return maxZIndex; + } + + var scrollPosition = { + x : 0, + y : 0 + }; + + var link = function(scope, element, attrs, controller, transcludeFn) { + + var zIndex = getZIndex(element.parent()) + 1; + + element.css("z-index", zIndex + 1); + + var backgroundStyle = "display: none; position: fixed; z-index:" + + zIndex + ";" + "top: 0; left: 0; width: 100%; height: 100%;" + + "background-color: #000000; opacity: 0.5"; + + var className = attrs["class"]; + var classString = ""; + if (className !== undefined && className !== null && className !== "") { + element.children().children().children().children().addClass( + className); + element.removeClass(className); + } + + element.before("
"); + + attrs.$observe("ngxShow", function(value) { + if (value === "true") { + scrollPosition = { + x : $window.pageXOffset, + y : $window.pageYOffset + } + $window.scrollTo(0, 0); + element.css("display", "table"); + element.prev().css("display", "block"); + } else if (value === "false") { + element.css("display", "none"); + element.prev().css("display", "none"); + $window.scrollTo(scrollPosition.x, scrollPosition.y); + } + }); + } + + return { + restrict : "EA", + transclude : true, + replace : true, + link : link, + template : '
' + }; +} + +appDS2.directive("popupWindow", [ "$log", "$window", popupWindowDirective ]); diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js new file mode 100755 index 00000000..ed71436b --- /dev/null +++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js @@ -0,0 +1,173 @@ +/*- + * ============LICENSE_START======================================================= + * VID + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +"use strict"; + +/* + * "progressBarDirective.js" provides a progress bar directive. + * + * SYNTAX: + * + *
+ * + * "percentProgress" is the numeric percent progress to be displayed (0 to 100) + * expressed as a number only (i.e. no trailing "%"). An "scoped" Angular value + * can be used (e.g. "{{percentProgress}}"). + * + * Two additional attributes can also be included: + * + * increases-only="true | false" + * + * Normally, the progress bar always updates the display with whatever value is + * set. Alternatively, if "increases-only" is set to "true", the display will + * only be updated if "percentProgress" is >= the previous value. + * + * control="control" + * + * Provides a method ... $scope.control.reset()" ... that a controller can call + * to reset the progress to it's initial zero state. This would only expected to + * be needed if A) increases-only is set to true and B) there is a need to reset + * the controller to 0. If increases-only is set to false or not present, an + * alternative method of resetting the progress is to just tset percentProgress + * to 0. + * + * CAVEATS: + * + * 1) The extended attribute "ngx-show" should be used instead of "ng-show" if + * the control needs to be conditionally visible. Example: + * ngx-show="{{isProgressVisible}}" + * + * 2) $scope.control.reset() should be conditionally called as follows IF it is + * called immediately after HTML is rendered. This is due to a timing-related + * behavior. + * + * 3) The progress bar displays values of "0" and "100" if precentProgress is, + * respectively, less than 0 or greater than 100. + * + * CUSTOM STYLING: + * + * The ECOMP portal styling uses the class named "progress". The class + * attributes can be overridden in CSS. This example was tested: + * + * .progress { margin: 0px 10px; height: 40px } + * + * Additional styling can be applied to the progress-bar element. Example: + * + * div[progress-bar=""] { padding-top: 10px; } + * + * if (angular.isFunction($scope.control.reset)) { $scope.control.reset(); } + * + * DEPENDENCIES: + * + * This code assumes dependency files provided by the ECOMP Portal framework are + * included. For example, ".../app/fusion/external/ebz/sandbox/styles/base.css" + * is one required dependency. There may also be others. + */ + +var progressBarDirective = function() { + + var style = "font-weight: bold;"; + /* + * The 3 "aria-*" properties were added as per an Internet reference + * example. These appear to have no impact on current behavior but are + * retained for future reference. + */ + var properties = "class='progress-bar' role='progressbar' " + + "aria-valuenow='' aria-valuemin='0' aria-valuemax='100'"; + var previousValue = 0; + + var updateProgress = function(element, attrs, valueAsString) { + if (valueAsString === undefined || valueAsString === null + || valueAsString === "") { + valueAsString = "0"; + } + var valueAsInteger = parseInt(valueAsString); + if (valueAsInteger > 100) { + valueAsInteger = 100; + valueAsString = "100"; + } + if (attrs.increasesOnly === "true") { + if (valueAsInteger >= previousValue) { + previousValue = valueAsInteger; + } else { + return; + } + } + element.css("width", valueAsString + "%"); + if (valueAsInteger >= 100) { + element.removeClass("progress-bar-info").addClass( + "progress-bar-success"); + } else { + element.removeClass("progress-bar-success").addClass( + "progress-bar-info"); + } + if (valueAsInteger >= 5) { + element.html(valueAsString + " %"); + } else { + /* + * Hide text since color combination is barely visible when progress + * portion is narrow. + */ + element.html(""); + } + } + + return { + restrict : "EA", + transclude : true, + replace : true, + template : "
", + scope : { + control : "=", + progressBar : "@" + }, + link : function(scope, element, attrs) { + + /* + * It should be possible to alternatively add this wrapper in the + * template instead of using "element.wrap". Some techniques were + * attempted but were unsuccessful. + */ + element.wrap("