vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js

   1 /*-\r
   2  * ============LICENSE_START=======================================================\r
   3  * VID\r
   4  * ================================================================================\r
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.\r
   6  * ================================================================================\r
   7  * Licensed under the Apache License, Version 2.0 (the "License");\r
   8  * you may not use this file except in compliance with the License.\r
   9  * You may obtain a copy of the License at\r
  10  * \r
  11  *      http://www.apache.org/licenses/LICENSE-2.0\r
  12  * \r
  13  * Unless required by applicable law or agreed to in writing, software\r
  14  * distributed under the License is distributed on an "AS IS" BASIS,\r
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  16  * See the License for the specific language governing permissions and\r
  17  * limitations under the License.\r
  18  * ============LICENSE_END=========================================================\r
  19  */\r
  20 \r
  21 "use strict";\r
  22 \r
  23 var parameterBlockDirective = function($log, PARAMETER, UtilityService, $compile) {\r
  24     /*\r
  25      * If "IS_SINGLE_OPTION_AUTO_SELECTED" is set to "true" ...\r
  26      * \r
  27      * IF these 3 conditions all exist:\r
  28      * \r
  29      * 1) The parameter type is PARAMETER.SELECT\r
  30      * \r
  31      * 2) AND the "prompt" attribute is set to a string.\r
  32      *\r
  33      * 3) AND the optionList" only contains a single entry\r
  34      * \r
  35      * THEN the "prompt" will not be displayed as an initial select option.\r
  36      */\r
  37 \r
  38     var IS_SINGLE_OPTION_AUTO_SELECTED = true;\r
  39 \r
  40     /*\r
  41      * Optionally remove "nameStyle" and "valueStyle" "width" entries to set\r
  42      * dynamic sizing.\r
  43      */\r
  44     var tableStyle = "width: auto; margin: 0 auto; border-collapse: collapse; border: none;";\r
  45     var nameStyle = "width: 220px; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 5px; border: none;";\r
  46     var valueStyle = "width: 400px; text-align: left; vertical-align: middle; padding: 3px 5px; border: none;";\r
  47     var checkboxValueStyle = "width: 400px; text-align: center; vertical-align: middle; padding: 3px 5px; border: none;"\r
  48     var textInputStyle = "height: 25px; padding: 2px 5px;";\r
  49     var checkboxInputStyle = "height: 18px; width: 18px; padding: 2px 5px;";\r
  50     var selectStyle = "height: 25px; padding: 2px; text-align: center;";\r
  51     var requiredLabelStyle = "width: 25px; padding: 5px 10px 10px 5px;";\r
  52 \r
  53 \r
  54     var getParameterHtml = function(parameter, editable) {\r
  55         var style = valueStyle;\r
  56         var attributeString = "";\r
  57         if (parameter.type === PARAMETER.BOOLEAN) {\r
  58             style = checkboxValueStyle;\r
  59         }\r
  60         if (UtilityService.hasContents(parameter.description)) {\r
  61             attributeString += " title=' " + parameter.description + " '";\r
  62         }\r
  63         var rowstyle='';\r
  64         if(parameter.type == 'file' && !parameter.isVisiblity){\r
  65             rowstyle = ' style="display:none;"';\r
  66         }\r
  67         var html = "<tr"+rowstyle+"><td style='" + nameStyle + "'" + attributeString + ">"\r
  68             + getNameHtml(parameter) + "</td>";\r
  69         if (editable === undefined) {\r
  70             if (UtilityService.hasContents(parameter.value)) {\r
  71                 html += "<td data-tests-id='" +  getParameterName(parameter) + "' style='" + style + "'>" + parameter.value;\r
  72             } else {\r
  73                 html += "<td data-tests-id='" +  getParameterName(parameter) + "' style='" + style + "'>";\r
  74             }\r
  75         } else {\r
  76             html += "<td style='" + style + "'>" + getValueHtml(parameter);\r
  77         }\r
  78         html += "</td></tr>";\r
  79         return html;\r
  80     };\r
  81 \r
  82     var updateParameter = function(parameter, element, editable) {\r
  83         $(element).parent().parent().children("td").first().html(\r
  84             getNameHtml(parameter));\r
  85         if (editable === undefined) {\r
  86             $(element).html(parameter.value);\r
  87         } else {\r
  88             $(element).parent().html(getValueHtml(parameter));\r
  89         }\r
  90     };\r
  91 \r
  92     var getNameHtml = function(parameter) {\r
  93         if (parameter.isVisible === false) {\r
  94             return "";\r
  95         }\r
  96         var name = getParameterName(parameter);\r
  97 \r
  98         var requiredLabel = "";\r
  99         if (parameter.isRequired) {\r
 100             requiredLabel = "<img src='app/vid/images/asterisk.png' style='"\r
 101                 + requiredLabelStyle + "'></img>";\r
 102         }\r
 103         return name + ":" + requiredLabel;\r
 104     };\r
 105 \r
 106     var getParameterName = function(parameter) {\r
 107         var name = "";\r
 108         if (UtilityService.hasContents(parameter.name)) {\r
 109             name = parameter.name;\r
 110         } else {\r
 111             name = parameter.id;\r
 112         }\r
 113         return name;\r
 114     }\r
 115 \r
 116     var getValueHtml = function(parameter) {\r
 117 \r
 118         var textInputPrompt = "Enter data";\r
 119         var attributeString = " data-tests-id='" + parameter.id +"' parameter-id='" + parameter.id + "'";\r
 120         var additionalStyle = "";\r
 121         if (parameter.isEnabled === false) {\r
 122             attributeString += " disabled='disabled'";\r
 123         }\r
 124         if (parameter.isRequired) {\r
 125             attributeString += " is-required='true'";\r
 126         }\r
 127         if (UtilityService.hasContents(parameter.description)) {\r
 128             attributeString += " title=' " + parameter.description + " '";\r
 129         }\r
 130         if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {\r
 131             attributeString += " readonly";\r
 132         }\r
 133         if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {\r
 134             attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";\r
 135         }\r
 136         else if (UtilityService.hasContents(parameter.maxLength)) {\r
 137             attributeString += " maxlength='" + parameter.maxLength + "'";\r
 138         }\r
 139         else if (UtilityService.hasContents(parameter.minLength)) {\r
 140             attributeString += " pattern='.{" + parameter.minLength + ",}'"\r
 141         }\r
 142         if (parameter.isVisible === false) {\r
 143             additionalStyle = " visibility: hidden;";\r
 144         }\r
 145 \r
 146         var name = "";\r
 147         if (UtilityService.hasContents(parameter.name)) {\r
 148             name = parameter.name;\r
 149         } else {\r
 150             name = parameter.id;\r
 151         }\r
 152         attributeString += " parameter-name='" + name + "'";\r
 153 \r
 154         if ( parameter.type === PARAMETER.MAP ) {\r
 155             textInputPrompt = "{<key1>: <value1>,\.\.\.,<keyN>: <valueN>}";\r
 156         }\r
 157 \r
 158         if ( parameter.type === PARAMETER.LIST ) {\r
 159             textInputPrompt = "[<value1>,\.\.\.,<valueN>]";\r
 160         }\r
 161 \r
 162         switch (parameter.type) {\r
 163             case PARAMETER.BOOLEAN:\r
 164                 if (parameter.value) {\r
 165                     return "<select" + attributeString + " style='" + selectStyle\r
 166                         + additionalStyle + "'>" + "<option value=true>true</option>"\r
 167                         + "<option value=false>false</option>";\r
 168                     + "</select>";\r
 169                 }else{\r
 170                     return "<select" + attributeString + " style='" + selectStyle\r
 171                         + additionalStyle + "'>" + "<option value=false>false</option>"\r
 172                         + "<option value=true>true</option>"\r
 173                         + "</select>";\r
 174                 }\r
 175                 break;\r
 176             case PARAMETER.CHECKBOX:\r
 177                 if (parameter.value) {\r
 178                     return "<input type='checkbox' "+attributeString+ " checked='checked' style='"+checkboxInputStyle+"'"\r
 179                         + " value='true'/>";\r
 180                 }else{\r
 181                     return "<input type='checkbox' "+attributeString+ "' style='"+checkboxInputStyle+"'"\r
 182                         + " value='false'/>";\r
 183                 }\r
 184                 break;\r
 185             case PARAMETER.FILE:\r
 186                 return "<input type='file' "+attributeString+ " id='"+parameter.id+"' value='"+parameter.value+"'/>";\r
 187                 break;\r
 188             case PARAMETER.NUMBER:\r
 189                 var value=parameter.value;\r
 190                 var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";\r
 191 \r
 192                 if ( UtilityService.hasContents(parameter.min) ) {\r
 193                     parameterSpec += " min='" + parameter.min + "'";\r
 194                 }\r
 195                 if ( UtilityService.hasContents(parameter.max) ) {\r
 196                     parameterSpec += " max='" + parameter.max + "'";\r
 197                 }\r
 198                 if (UtilityService.hasContents(value)) {\r
 199                     parameterSpec += " value='" + value + "'";\r
 200                 }\r
 201                 parameterSpec += ">";\r
 202 \r
 203                 /*if(!isNaN(value) && value.toString().index('.') != -1){\r
 204                  //float\r
 205                  return "<input type='text'" + attributeString + " style='"\r
 206                  + textInputStyle + additionalStyle + "' only-integers" + value\r
 207                  + "></input>";\r
 208                  } else {\r
 209                  //integer\r
 210                  return "<input type='text'" + attributeString + " style='"\r
 211                  + textInputStyle + additionalStyle + "'  only-float" + value\r
 212                  + "></input>";\r
 213                  }*/\r
 214                 return (parameterSpec);\r
 215                 break;\r
 216             case PARAMETER.SELECT:\r
 217                 if (UtilityService.hasContents(parameter.prompt)) {\r
 218                     attributeString += " prompt='" + parameter.prompt + "'";\r
 219                 }\r
 220                 return "<select" + attributeString + " style='" + selectStyle\r
 221                     + additionalStyle + "'>" + getOptionListHtml(parameter)\r
 222                     + "</select>";\r
 223                 break;\r
 224             case PARAMETER.MULTI_SELECT:\r
 225                 return '<multiselect id="' + parameter.id + '"' + attributeString + ' ng-model="multiselectModel.' + parameter.id + '" options="getOptionsList(\'' + parameter.id + '\')" display-prop="name" id-prop="id"></multiselect>';\r
 226                 break;\r
 227             case PARAMETER.STRING:\r
 228             default:\r
 229                 var value = "";\r
 230                 if (UtilityService.hasContents(parameter.value)) {\r
 231                     value = " value='" + parameter.value + "'";\r
 232                 }\r
 233                 if (UtilityService.hasContents(parameter.prompt)) {\r
 234                     attributeString += " placeholder='" + parameter.prompt + "'";\r
 235                 } else if (textInputPrompt !== "") {\r
 236                     attributeString += " placeholder='" + textInputPrompt + "'";\r
 237                 }\r
 238                 var finalString = "<input type='text'" + attributeString + " style='"\r
 239                     + textInputStyle + additionalStyle + "'" + value\r
 240                     + ">";\r
 241                 return finalString;\r
 242         }\r
 243     };\r
 244 \r
 245 \r
 246     var getBooleanListHtml = function(parameter){\r
 247         var html = "";\r
 248 \r
 249     };\r
 250 \r
 251     var getOptionListHtml = function(parameter) {\r
 252 \r
 253         var html = "";\r
 254 \r
 255         if (!angular.isArray(parameter.optionList)\r
 256             || parameter.optionList.length === 0) {\r
 257             return "";\r
 258         }\r
 259 \r
 260         if (UtilityService.hasContents(parameter.prompt)) {\r
 261                 html += "<option value=''>" + parameter.prompt + "</option>";\r
 262         }\r
 263 \r
 264         for (var i = 0; i < parameter.optionList.length; i++) {\r
 265             var option = parameter.optionList[i];\r
 266             var name = option.name;\r
 267             var value = "";\r
 268             if (option.id === undefined) {\r
 269                 value = option.name;\r
 270             } else {\r
 271                 if (name === undefined) {\r
 272                     name = option.id;\r
 273                 }\r
 274                 value = option.id;\r
 275             }\r
 276             html += getOptionHtml(option.isPermitted, option.isDataLoading, value, name, parameter);\r
 277         }\r
 278         return html;\r
 279     };\r
 280 \r
 281     function getOptionHtml(isPermitted, isDefault, value, name, parameter) {\r
 282         var html = "";\r
 283         if (isDefault === undefined || isDefault === false )  {\r
 284             if(isPermitted)\r
 285                 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + name + "</option>";\r
 286             else {\r
 287                 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + name + "</option>";\r
 288             }\r
 289         }\r
 290         else {\r
 291             if(isPermitted)\r
 292                 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + "' selected>"  + name + "</option>";\r
 293             else {\r
 294                 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + "' selected>"  + name + "</option>";\r
 295             }\r
 296         }\r
 297         return html;\r
 298     }\r
 299 \r
 300     var getParameter = function(element, expectedId) {\r
 301         var id = $(element).attr("parameter-id");\r
 302         if (!id || (expectedId !== undefined && expectedId !== id)) {\r
 303             return undefined;\r
 304         }\r
 305         var parameter = {\r
 306             id : id\r
 307         };\r
 308         if ($(element).prop("type") === "checkbox") {\r
 309             parameter.value = $(element).prop("checked");\r
 310         }else if ($(element).prop("type") === "file") {\r
 311             parameter.value = $('#'+id).attr("value");\r
 312 \r
 313         } else {\r
 314             if ($(element).prop("type") === "text") {\r
 315                 $(element).val($(element).val().trim());\r
 316             }\r
 317             parameter.value = $(element).val();\r
 318         }\r
 319         if ($(element).prop("selectedIndex") === undefined) {\r
 320             parameter.selectedIndex = -1;\r
 321         } else {\r
 322             parameter.selectedIndex = $(element).prop("selectedIndex");\r
 323             if (UtilityService.hasContents($(element).attr("prompt"))) {\r
 324                 parameter.selectedIndex--;\r
 325             }\r
 326         }\r
 327         return parameter;\r
 328     };\r
 329 \r
 330     var getRequiredField = function(element) {\r
 331         if($(element).is("multiselect")) {\r
 332             if(!$(element).find(".active").text().trim()) {\r
 333                 return '"' + $(element).attr("parameter-name") + '"';\r
 334             }\r
 335         }\r
 336         else {\r
 337             if ($(element).prop("type") === "text") {\r
 338                 $(element).val($(element).val().trim());\r
 339             }\r
 340             if ($(element).val() === "" || $(element).val() === null) {\r
 341                 return '"' + $(element).attr("parameter-name") + '"';\r
 342             }\r
 343         }\r
 344         return "";\r
 345     };\r
 346 \r
 347     var callback = function(element, scope) {\r
 348         scope.callback({\r
 349             id : $(element).attr("parameter-id")\r
 350         });\r
 351     };\r
 352 \r
 353     return {\r
 354         restrict : "EA",\r
 355         replace  : true,\r
 356         template : "<div><table style='" + tableStyle + "'></table></div>",\r
 357         scope : {\r
 358             control : "=",\r
 359             callback : "&"\r
 360         },\r
 361         link : function(scope, element, attrs) {\r
 362 \r
 363             var control = scope.control || {};\r
 364             scope.multiselectModel = {};\r
 365 \r
 366             scope.getOptionsList = function (parameterId) {\r
 367                 return _.find(scope.parameterList, {'id': parameterId})["optionList"];\r
 368             };\r
 369             control.setList = function(parameterList) {\r
 370                 scope.parameterList = parameterList;\r
 371                 scope.multiselectModel = {};\r
 372                 var html = "";\r
 373                 for (var i = 0; i < parameterList.length; i++) {\r
 374                     html += getParameterHtml(parameterList[i], attrs.editable);\r
 375                 }\r
 376                 element.replaceWith($compile(element.html(html))(scope));\r
 377 \r
 378                 element.find("input, select").bind("change", function() {\r
 379                     callback(this, scope);\r
 380                 });\r
 381             }\r
 382 \r
 383             control.updateList = function(parameterList) {\r
 384                 element.find("input, select").each(\r
 385                     function() {\r
 386                         for (var i = 0; i < parameterList.length; i++) {\r
 387                             if (parameterList[i].id === $(this).attr(\r
 388                                     "parameter-id")) {\r
 389                                 updateParameter(parameterList[i], this,\r
 390                                     attrs.editable);\r
 391                             }\r
 392                         }\r
 393                     });\r
 394                 element.find("input, select").bind("change", function() {\r
 395                     callback(this, scope);\r
 396                 });\r
 397             }\r
 398 \r
 399             control.getList = function(expectedId) {\r
 400                 var parameterList = new Array();\r
 401                 element.find("input, select").each(function() {\r
 402                     var parameter = getParameter(this, expectedId);\r
 403                     if (parameter !== undefined) {\r
 404                         parameterList.push(parameter);\r
 405                     }\r
 406                 });\r
 407                 angular.forEach(scope.multiselectModel, function(value, key) {\r
 408                     parameterList.push({id: key, value: value});\r
 409                 });\r
 410                 return parameterList;\r
 411             }\r
 412 \r
 413             control.getRequiredFields = function() {\r
 414                 var requiredFields = "";\r
 415                 var count = 0;\r
 416                 element.find("input, select, multiselect").each(function() {\r
 417                     if ($(this).attr("is-required") === "true") {\r
 418                         var requiredField = getRequiredField(this);\r
 419                         if (requiredField !== "") {\r
 420                             if (++count == 1) {\r
 421                                 requiredFields = requiredField;\r
 422                             }\r
 423                         }\r
 424                     }\r
 425                 });\r
 426                 if (--count <= 0) {\r
 427                     return requiredFields;\r
 428                 } else if (count == 1) {\r
 429                     return requiredFields + " and 1 other field";\r
 430                 } else {\r
 431                     return requiredFields + " and " + count + " other fields";\r
 432                 }\r
 433             }\r
 434         }\r
 435     }\r
 436 }\r
 437 \r
 438 appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService", "$compile",\r
 439     parameterBlockDirective ]);\r
 440 \r
 441 \r
 442 appDS2.directive('onlyIntegers', function () {\r
 443     return  {\r
 444         restrict: 'A',\r
 445         link: function (scope, elm, attrs, ctrl) {\r
 446             elm.on('keydown', function (event) {\r
 447                 if(event.shiftKey){event.preventDefault(); return false;}\r
 448                 //console.log(event.which);\r
 449                 if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {\r
 450                     // backspace, enter, escape, arrows\r
 451                     return true;\r
 452                 } else if (event.which >= 49 && event.which <= 57) {\r
 453                     // numbers\r
 454                     return true;\r
 455                 } else if (event.which >= 96 && event.which <= 105) {\r
 456                     // numpad number\r
 457                     return true;\r
 458                 }\r
 459                 // else if ([110, 190].indexOf(event.which) > -1) {\r
 460                 //     // dot and numpad dot\r
 461                 //     return true;\r
 462                 // }\r
 463                 else {\r
 464                     event.preventDefault();\r
 465                     return false;\r
 466                 }\r
 467             });\r
 468         }\r
 469     }\r
 470 });\r
 471 \r
 472 appDS2.directive('onlyFloat', function () {\r
 473     return  {\r
 474         restrict: 'A',\r
 475         link: function (scope, elm, attrs, ctrl) {\r
 476             elm.on('keydown', function (event) {\r
 477                 if ([110, 190].indexOf(event.which) > -1) {\r
 478                     // dot and numpad dot\r
 479                     event.preventDefault();\r
 480                     return true;\r
 481                 }\r
 482                 else{\r
 483                     return false;\r
 484                 }\r
 485             });\r
 486         }\r
 487     }\r
 488 });\r