2 * ============LICENSE_START=======================================================
\r
4 * ================================================================================
\r
5 * Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
\r
6 * Modifications Copyright (C) 2019 IBM.
\r
7 * ================================================================================
\r
8 * Licensed under the Apache License, Version 2.0 (the "License");
\r
9 * you may not use this file except in compliance with the License.
\r
10 * You may obtain a copy of the License at
\r
12 * http://www.apache.org/licenses/LICENSE-2.0
\r
14 * Unless required by applicable law or agreed to in writing, software
\r
15 * distributed under the License is distributed on an "AS IS" BASIS,
\r
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
\r
17 * See the License for the specific language governing permissions and
\r
18 * limitations under the License.
\r
19 * ============LICENSE_END=========================================================
\r
24 var parameterBlockDirective = function($log, PARAMETER, UtilityService, $compile) {
\r
26 * If "IS_SINGLE_OPTION_AUTO_SELECTED" is set to "true" ...
\r
28 * IF these 3 conditions all exist:
\r
30 * 1) The parameter type is PARAMETER.SELECT
\r
32 * 2) AND the "prompt" attribute is set to a string.
\r
34 * 3) AND the optionList" only contains a single entry
\r
36 * THEN the "prompt" will not be displayed as an initial select option.
\r
39 var IS_SINGLE_OPTION_AUTO_SELECTED = true;
\r
42 * Optionally remove "nameStyle" and "valueStyle" "width" entries to set
\r
45 var tableStyle = "width: auto; margin: 0 auto; border-collapse: collapse; border: none;";
\r
46 var nameStyle = "width: 220px; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 5px; border: none;";
\r
47 var valueStyle = "width: 400px; text-align: left; vertical-align: middle; padding: 3px 5px; border: none;";
\r
48 var checkboxValueStyle = "width: 400px; text-align: center; vertical-align: middle; padding: 3px 5px; border: none;"
\r
49 var textInputStyle = "height: 25px; padding: 2px 5px;";
\r
50 var checkboxInputStyle = "height: 18px; width: 18px; padding: 2px 5px;";
\r
51 var selectStyle = "height: 25px; padding: 2px; text-align: center;";
\r
52 var requiredLabelStyle = "width: 25px; padding: 5px 10px 10px 5px;";
\r
55 var getParameterHtml = function(parameter, editable) {
\r
56 var style = valueStyle;
\r
57 var attributeString = "";
\r
58 if (parameter.type === PARAMETER.BOOLEAN) {
\r
59 style = checkboxValueStyle;
\r
61 if (UtilityService.hasContents(parameter.description)) {
\r
62 attributeString += " title=' " + parameter.description + " '";
\r
65 if(parameter.type == 'file' && !parameter.isVisiblity){
\r
66 rowstyle = ' style="display:none;"';
\r
68 var html = "<tr"+rowstyle+"><td style='" + nameStyle + "'" + attributeString + ">"
\r
69 + getNameHtml(parameter) + "</td>";
\r
70 if (editable === undefined) {
\r
71 if (UtilityService.hasContents(parameter.value)) {
\r
72 html += "<td data-tests-id='" + getParameterName(parameter) + "' style='" + style + "'>" + parameter.value;
\r
74 html += "<td data-tests-id='" + getParameterName(parameter) + "' style='" + style + "'>";
\r
77 html += "<td style='" + style + "'>" + getValueHtml(parameter);
\r
79 html += "</td></tr>";
\r
83 var updateParameter = function(parameter, element, editable) {
\r
84 $(element).parent().parent().children("td").first().html(
\r
85 getNameHtml(parameter));
\r
86 if (editable === undefined) {
\r
87 $(element).html(parameter.value);
\r
89 $(element).parent().html(getValueHtml(parameter));
\r
93 var getNameHtml = function(parameter) {
\r
94 if (parameter.isVisible === false) {
\r
97 var name = getParameterName(parameter);
\r
99 var requiredLabel = "";
\r
100 if (parameter.isRequired) {
\r
101 requiredLabel = "<img src='app/vid/images/asterisk.png' style='"
\r
102 + requiredLabelStyle + "'></img>";
\r
104 return name + ":" + requiredLabel;
\r
107 var getParameterName = function(parameter) {
\r
109 if (UtilityService.hasContents(parameter.name)) {
\r
110 name = parameter.name;
\r
112 name = parameter.id;
\r
117 var getValueHtml = function(parameter) {
\r
119 var textInputPrompt = "Enter data";
\r
120 var attributeString = " data-tests-id='" + parameter.id +"' parameter-id='" + parameter.id + "'";
\r
121 var additionalStyle = "";
\r
122 if (parameter.isEnabled === false) {
\r
123 attributeString += " disabled='disabled'";
\r
125 if (parameter.isRequired) {
\r
126 attributeString += " is-required='true'";
\r
128 if (UtilityService.hasContents(parameter.description)) {
\r
129 attributeString += " title=' " + parameter.description + " '";
\r
131 if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {
\r
132 attributeString += " readonly";
\r
134 if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {
\r
135 attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";
\r
137 else if (UtilityService.hasContents(parameter.maxLength)) {
\r
138 attributeString += " maxlength='" + parameter.maxLength + "'";
\r
140 else if (UtilityService.hasContents(parameter.minLength)) {
\r
141 attributeString += " pattern='.{" + parameter.minLength + ",}'"
\r
143 if (parameter.isVisible === false) {
\r
144 additionalStyle = " visibility: hidden;";
\r
148 if (UtilityService.hasContents(parameter.name)) {
\r
149 name = parameter.name;
\r
151 name = parameter.id;
\r
153 attributeString += " parameter-name='" + name + "'";
\r
155 if ( parameter.type === PARAMETER.MAP ) {
\r
156 textInputPrompt = "{<key1>: <value1>,\.\.\.,<keyN>: <valueN>}";
\r
159 if ( parameter.type === PARAMETER.LIST ) {
\r
160 textInputPrompt = "[<value1>,\.\.\.,<valueN>]";
\r
163 switch (parameter.type) {
\r
164 case PARAMETER.BOOLEAN:
\r
165 if (parameter.value) {
\r
166 return "<select" + attributeString + " style='" + selectStyle
\r
167 + additionalStyle + "'>" + "<option value=true>true</option>"
\r
168 + "<option value=false>false</option>"
\r
171 return "<select" + attributeString + " style='" + selectStyle
\r
172 + additionalStyle + "'>" + "<option value=false>false</option>"
\r
173 + "<option value=true>true</option>"
\r
177 case PARAMETER.CHECKBOX:
\r
178 if (parameter.value) {
\r
179 return "<input type='checkbox' "+attributeString+ " checked='checked' style='"+checkboxInputStyle+"'"
\r
180 + " value='true'/>";
\r
182 return "<input type='checkbox' "+attributeString+ "' style='"+checkboxInputStyle+"'"
\r
183 + " value='false'/>";
\r
186 case PARAMETER.FILE:
\r
187 return "<input type='file' "+attributeString+ " id='"+parameter.id+"' value='"+parameter.value+"'/>";
\r
189 case PARAMETER.NUMBER:
\r
190 var value=parameter.value;
\r
191 var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";
\r
193 if ( UtilityService.hasContents(parameter.min) ) {
\r
194 parameterSpec += " min='" + parameter.min + "'";
\r
196 if ( UtilityService.hasContents(parameter.max) ) {
\r
197 parameterSpec += " max='" + parameter.max + "'";
\r
199 if (UtilityService.hasContents(value)) {
\r
200 parameterSpec += " value='" + value + "'";
\r
202 parameterSpec += ">";
\r
204 /*if(!isNaN(value) && value.toString().index('.') != -1){
\r
206 return "<input type='text'" + attributeString + " style='"
\r
207 + textInputStyle + additionalStyle + "' only-integers" + value
\r
211 return "<input type='text'" + attributeString + " style='"
\r
212 + textInputStyle + additionalStyle + "' only-float" + value
\r
215 return (parameterSpec);
\r
217 case PARAMETER.SELECT:
\r
218 if (UtilityService.hasContents(parameter.prompt)) {
\r
219 attributeString += " prompt='" + parameter.prompt + "'";
\r
221 return "<select" + attributeString + " style='" + selectStyle
\r
222 + additionalStyle + "'>" + getOptionListHtml(parameter)
\r
225 case PARAMETER.MULTI_SELECT:
\r
226 return '<multiselect id="' + parameter.id + '"' + attributeString + ' ng-model="multiselectModel.' + parameter.id + '" options="getOptionsList(\'' + parameter.id + '\')" display-prop="name" id-prop="id"></multiselect>';
\r
228 case PARAMETER.STRING:
\r
231 if (UtilityService.hasContents(parameter.value)) {
\r
232 value = " value='" + parameter.value + "'";
\r
234 if (UtilityService.hasContents(parameter.prompt)) {
\r
235 attributeString += " placeholder='" + parameter.prompt + "'";
\r
236 } else if (textInputPrompt !== "") {
\r
237 attributeString += " placeholder='" + textInputPrompt + "'";
\r
239 var finalString = "<input type='text'" + attributeString + " style='"
\r
240 + textInputStyle + additionalStyle + "'" + value
\r
242 return finalString;
\r
247 var getBooleanListHtml = function(parameter){
\r
252 var getOptionListHtml = function(parameter) {
\r
256 if (!angular.isArray(parameter.optionList)
\r
257 || parameter.optionList.length === 0) {
\r
261 if (UtilityService.hasContents(parameter.prompt)) {
\r
262 html += "<option value=''>" + parameter.prompt + "</option>";
\r
265 for (var i = 0; i < parameter.optionList.length; i++) {
\r
266 var option = parameter.optionList[i];
\r
267 var name = option.name;
\r
269 if (option.id === undefined) {
\r
270 value = option.name;
\r
272 if (name === undefined) {
\r
277 html += getOptionHtml(option.isPermitted, option.isDataLoading, value, name, parameter);
\r
282 function getOptionHtml(isPermitted, isDefault, value, name, parameter) {
\r
284 if (isDefault === undefined || isDefault === false ) {
\r
286 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + name + "</option>";
\r
288 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + name + "</option>";
\r
293 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + "' selected>" + name + "</option>";
\r
295 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + "' selected>" + name + "</option>";
\r
301 var getParameter = function(element, expectedId) {
\r
302 var id = $(element).attr("parameter-id");
\r
303 if (!id || (expectedId !== undefined && expectedId !== id)) {
\r
309 if ($(element).prop("type") === "checkbox") {
\r
310 parameter.value = $(element).prop("checked");
\r
311 }else if ($(element).prop("type") === "file") {
\r
312 parameter.value = $('#'+id).attr("value");
\r
315 if ($(element).prop("type") === "text") {
\r
316 $(element).val($(element).val().trim());
\r
318 parameter.value = $(element).val();
\r
320 if ($(element).prop("selectedIndex") === undefined) {
\r
321 parameter.selectedIndex = -1;
\r
323 parameter.selectedIndex = $(element).prop("selectedIndex");
\r
324 if (UtilityService.hasContents($(element).attr("prompt"))) {
\r
325 parameter.selectedIndex--;
\r
331 var getRequiredField = function(element) {
\r
332 if($(element).is("multiselect")) {
\r
333 if(!$(element).find(".active").text().trim()) {
\r
334 return '"' + $(element).attr("parameter-name") + '"';
\r
338 if ($(element).prop("type") === "text") {
\r
339 $(element).val($(element).val().trim());
\r
341 if ($(element).val() === "" || $(element).val() === null) {
\r
342 return '"' + $(element).attr("parameter-name") + '"';
\r
348 var callback = function(element, scope) {
\r
350 id : $(element).attr("parameter-id")
\r
357 template : "<div><table style='" + tableStyle + "'></table></div>",
\r
362 link : function(scope, element, attrs) {
\r
364 var control = scope.control || {};
\r
365 scope.multiselectModel = {};
\r
367 scope.getOptionsList = function (parameterId) {
\r
368 return _.find(scope.parameterList, {'id': parameterId})["optionList"];
\r
370 control.setList = function(parameterList) {
\r
371 scope.parameterList = parameterList;
\r
372 scope.multiselectModel = {};
\r
374 for (var i = 0; i < parameterList.length; i++) {
\r
375 html += getParameterHtml(parameterList[i], attrs.editable);
\r
377 element.replaceWith($compile(element.html(html))(scope));
\r
379 element.find("input, select").unbind("change.namespace1");
\r
380 element.find("input, select").bind("change.namespace1", function() {
\r
381 callback(this, scope);
\r
385 control.updateList = function(parameterList) {
\r
386 element.find("input, select").each(
\r
388 for (var i = 0; i < parameterList.length; i++) {
\r
389 if (parameterList[i].id === $(this).attr(
\r
391 updateParameter(parameterList[i], this,
\r
396 element.find("input, select").unbind("change.namespace2");
\r
397 element.find("input, select").bind("change.namespace2", function() {
\r
398 callback(this, scope);
\r
402 control.getList = function(expectedId) {
\r
403 var parameterList = new Array();
\r
404 element.find("input, select").each(function() {
\r
405 var parameter = getParameter(this, expectedId);
\r
406 if (parameter !== undefined) {
\r
407 parameterList.push(parameter);
\r
410 angular.forEach(scope.multiselectModel, function(value, key) {
\r
411 parameterList.push({id: key, value: value});
\r
413 return parameterList;
\r
416 control.getRequiredFields = function() {
\r
417 var requiredFields = "";
\r
419 element.find("input, select, multiselect").each(function() {
\r
420 if ($(this).attr("is-required") === "true") {
\r
421 var requiredField = getRequiredField(this);
\r
422 if (requiredField !== "") {
\r
423 if (++count == 1) {
\r
424 requiredFields = requiredField;
\r
429 if (--count <= 0) {
\r
430 return requiredFields;
\r
431 } else if (count == 1) {
\r
432 return requiredFields + " and 1 other field";
\r
434 return requiredFields + " and " + count + " other fields";
\r
441 appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService", "$compile",
\r
442 parameterBlockDirective ]);
\r
445 appDS2.directive('onlyIntegers', function () {
\r
448 link: function (scope, elm, attrs, ctrl) {
\r
449 elm.on('keydown', function (event) {
\r
450 if(event.shiftKey){event.preventDefault(); return false;}
\r
451 //console.log(event.which);
\r
452 if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
\r
453 // backspace, enter, escape, arrows
\r
455 } else if (event.which >= 49 && event.which <= 57) {
\r
458 } else if (event.which >= 96 && event.which <= 105) {
\r
462 // else if ([110, 190].indexOf(event.which) > -1) {
\r
463 // // dot and numpad dot
\r
467 event.preventDefault();
\r
475 appDS2.directive('onlyFloat', function () {
\r
478 link: function (scope, elm, attrs, ctrl) {
\r
479 elm.on('keydown', function (event) {
\r
480 if ([110, 190].indexOf(event.which) > -1) {
\r
481 // dot and numpad dot
\r
482 event.preventDefault();
\r