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) {\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.STRING:\r
 225             default:\r
 226                 var value = "";\r
 227                 if (UtilityService.hasContents(parameter.value)) {\r
 228                     value = " value='" + parameter.value + "'";\r
 229                 }\r
 230                 if (UtilityService.hasContents(parameter.prompt)) {\r
 231                     attributeString += " placeholder='" + parameter.prompt + "'";\r
 232                 } else if (textInputPrompt !== "") {\r
 233                     attributeString += " placeholder='" + textInputPrompt + "'";\r
 234                 }\r
 235                 var finalString = "<input type='text'" + attributeString + " style='"\r
 236                     + textInputStyle + additionalStyle + "'" + value\r
 237                     + ">";\r
 238                 return finalString;\r
 239         }\r
 240     };\r
 241 \r
 242 \r
 243     var getBooleanListHtml = function(parameter){\r
 244         var html = "";\r
 245 \r
 246     };\r
 247 \r
 248     var getOptionListHtml = function(parameter) {\r
 249 \r
 250         var html = "";\r
 251 \r
 252         if (!angular.isArray(parameter.optionList)\r
 253             || parameter.optionList.length === 0) {\r
 254             return "";\r
 255         }\r
 256 \r
 257         if (UtilityService.hasContents(parameter.prompt)) {\r
 258             if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1) || !(parameter.isSingleOptionAutoSelected && parameter.optionList.length === 1)) {\r
 259                 html += "<option value=''>" + parameter.prompt + "</option>";\r
 260             }\r
 261         }\r
 262 \r
 263         for (var i = 0; i < parameter.optionList.length; i++) {\r
 264             var option = parameter.optionList[i];\r
 265             var name = option.name;\r
 266             var value = "";\r
 267             if (option.id === undefined) {\r
 268                 value = option.name;\r
 269             } else {\r
 270                 if (name === undefined) {\r
 271                     name = option.id;\r
 272                 }\r
 273                 value = option.id;\r
 274             }\r
 275             html += getOptionHtml(option.isPermitted, option.isDataLoading, value, name, parameter);\r
 276         }\r
 277         return html;\r
 278     };\r
 279 \r
 280     function getOptionHtml(isPermitted, isDefault, value, name, parameter) {\r
 281         var html = "";\r
 282         if (isDefault === undefined || isDefault === false )  {\r
 283             if(isPermitted)\r
 284                 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + name + "</option>";\r
 285             else {\r
 286                 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + name + "</option>";\r
 287             }\r
 288         }\r
 289         else {\r
 290             if(isPermitted)\r
 291                 html = "<option class='" + parameter.id + "Option' value='" + value + "'>" + "' selected>"  + name + "</option>";\r
 292             else {\r
 293                 html = "<option class='" + parameter.id + "Option' value='" + value + "' disabled>" + "' selected>"  + name + "</option>";\r
 294             }\r
 295         }\r
 296         return html;\r
 297     }\r
 298 \r
 299     var getParameter = function(element, expectedId) {\r
 300         var id = $(element).attr("parameter-id");\r
 301         if (expectedId !== undefined && expectedId !== id) {\r
 302             return undefined;\r
 303         }\r
 304         var parameter = {\r
 305             id : id\r
 306         };\r
 307         if ($(element).prop("type") === "checkbox") {\r
 308             parameter.value = $(element).prop("checked");\r
 309         }else if ($(element).prop("type") === "file") {\r
 310             parameter.value = $('#'+id).attr("value");\r
 311 \r
 312         } else {\r
 313             if ($(element).prop("type") === "text") {\r
 314                 $(element).val($(element).val().trim());\r
 315             }\r
 316             parameter.value = $(element).val();\r
 317         }\r
 318         if ($(element).prop("selectedIndex") === undefined) {\r
 319             parameter.selectedIndex = -1;\r
 320         } else {\r
 321             parameter.selectedIndex = $(element).prop("selectedIndex");\r
 322             if (UtilityService.hasContents($(element).attr("prompt"))) {\r
 323                 parameter.selectedIndex--;\r
 324             }\r
 325         }\r
 326         return parameter;\r
 327     };\r
 328 \r
 329     var getRequiredField = function(element) {\r
 330         if ($(element).prop("type") === "text") {\r
 331             $(element).val($(element).val().trim());\r
 332         }\r
 333         if ($(element).val() === "" || $(element).val() === null) {\r
 334             return '"' + $(element).attr("parameter-name") + '"';\r
 335         } else {\r
 336             return "";\r
 337         }\r
 338     };\r
 339 \r
 340     var callback = function(element, scope) {\r
 341         scope.callback({\r
 342             id : $(element).attr("parameter-id")\r
 343         });\r
 344     };\r
 345 \r
 346     return {\r
 347         restrict : "EA",\r
 348         replace  : true,\r
 349         template : "<div><table style='" + tableStyle + "'></table></div>",\r
 350         scope : {\r
 351             control : "=",\r
 352             callback : "&"\r
 353         },\r
 354         link : function(scope, element, attrs) {\r
 355 \r
 356             var control = scope.control || {};\r
 357 \r
 358             control.setList = function(parameterList) {\r
 359                 var html = "";\r
 360                 for (var i = 0; i < parameterList.length; i++) {\r
 361                     html += getParameterHtml(parameterList[i], attrs.editable);\r
 362                 }\r
 363                 element.html(html);\r
 364                 element.find("input, select").bind("change", function() {\r
 365                     callback(this, scope);\r
 366                 });\r
 367             }\r
 368 \r
 369             control.updateList = function(parameterList) {\r
 370                 element.find("input, select").each(\r
 371                     function() {\r
 372                         for (var i = 0; i < parameterList.length; i++) {\r
 373                             if (parameterList[i].id === $(this).attr(\r
 374                                     "parameter-id")) {\r
 375                                 updateParameter(parameterList[i], this,\r
 376                                     attrs.editable);\r
 377                             }\r
 378                         }\r
 379                     });\r
 380                 element.find("input, select").bind("change", function() {\r
 381                     callback(this, scope);\r
 382                 });\r
 383             }\r
 384 \r
 385             control.getList = function(expectedId) {\r
 386                 var parameterList = new Array();\r
 387                 element.find("input, select").each(function() {\r
 388                     var parameter = getParameter(this, expectedId);\r
 389                     if (parameter !== undefined) {\r
 390                         parameterList.push(parameter);\r
 391                     }\r
 392                 });\r
 393                 return parameterList;\r
 394             }\r
 395 \r
 396             control.getRequiredFields = function() {\r
 397                 var requiredFields = "";\r
 398                 var count = 0;\r
 399                 element.find("input, select").each(function() {\r
 400                     if ($(this).attr("is-required") === "true") {\r
 401                         var requiredField = getRequiredField(this);\r
 402                         if (requiredField !== "") {\r
 403                             if (++count == 1) {\r
 404                                 requiredFields = requiredField;\r
 405                             }\r
 406                         }\r
 407                     }\r
 408                 });\r
 409                 if (--count <= 0) {\r
 410                     return requiredFields;\r
 411                 } else if (count == 1) {\r
 412                     return requiredFields + " and 1 other field";\r
 413                 } else {\r
 414                     return requiredFields + " and " + count + " other fields";\r
 415                 }\r
 416             }\r
 417         }\r
 418     }\r
 419 }\r
 420 \r
 421 appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService",\r
 422     parameterBlockDirective ]);\r
 423 \r
 424 \r
 425 appDS2.directive('onlyIntegers', function () {\r
 426     return  {\r
 427         restrict: 'A',\r
 428         link: function (scope, elm, attrs, ctrl) {\r
 429             elm.on('keydown', function (event) {\r
 430                 if(event.shiftKey){event.preventDefault(); return false;}\r
 431                 //console.log(event.which);\r
 432                 if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {\r
 433                     // backspace, enter, escape, arrows\r
 434                     return true;\r
 435                 } else if (event.which >= 49 && event.which <= 57) {\r
 436                     // numbers\r
 437                     return true;\r
 438                 } else if (event.which >= 96 && event.which <= 105) {\r
 439                     // numpad number\r
 440                     return true;\r
 441                 }\r
 442                 // else if ([110, 190].indexOf(event.which) > -1) {\r
 443                 //     // dot and numpad dot\r
 444                 //     return true;\r
 445                 // }\r
 446                 else {\r
 447                     event.preventDefault();\r
 448                     return false;\r
 449                 }\r
 450             });\r
 451         }\r
 452     }\r
 453 });\r
 454 \r
 455 appDS2.directive('onlyFloat', function () {\r
 456     return  {\r
 457         restrict: 'A',\r
 458         link: function (scope, elm, attrs, ctrl) {\r
 459             elm.on('keydown', function (event) {\r
 460                 if ([110, 190].indexOf(event.which) > -1) {\r
 461                     // dot and numpad dot\r
 462                     event.preventDefault();\r
 463                     return true;\r
 464                 }\r
 465                 else{\r
 466                     return false;\r
 467                 }\r
 468             });\r
 469         }\r
 470     }\r
 471 });\r