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><td style='" + style + "'>";\r
  69         if (editable === undefined) {\r
  70             if (UtilityService.hasContents(parameter.value)) {\r
  71                 html += parameter.value;\r
  72             }\r
  73         } else {\r
  74             html += getValueHtml(parameter);\r
  75         }\r
  76         html += "</td></tr>";\r
  77         return html;\r
  78     };\r
  79 \r
  80     var updateParameter = function(parameter, element, editable) {\r
  81         $(element).parent().parent().children("td").first().html(\r
  82                 getNameHtml(parameter));\r
  83         if (editable === undefined) {\r
  84             $(element).html(parameter.value);\r
  85         } else {\r
  86             $(element).parent().html(getValueHtml(parameter));\r
  87         }\r
  88     };\r
  89 \r
  90     var getNameHtml = function(parameter) {\r
  91         if (parameter.isVisible === false) {\r
  92             return "";\r
  93         }\r
  94         var name = "";\r
  95         if (UtilityService.hasContents(parameter.name)) {\r
  96             name = parameter.name;\r
  97         } else {\r
  98             name = parameter.id;\r
  99         }\r
 100         var requiredLabel = "";\r
 101         if (parameter.isRequired) {\r
 102             requiredLabel = "<img src='app/vid/images/asterisk.png' style='"\r
 103                     + requiredLabelStyle + "'></img>";\r
 104         }\r
 105         return name + ":" + requiredLabel;\r
 106     };\r
 107 \r
 108     var getValueHtml = function(parameter) {\r
 109         \r
 110     var textInputPrompt = "Enter data";\r
 111         var attributeString = " parameter-id='" + parameter.id + "'";\r
 112         var additionalStyle = "";\r
 113         if (parameter.isEnabled === false) {\r
 114             attributeString += " disabled='disabled'";\r
 115         }\r
 116         if (parameter.isRequired) {\r
 117                 attributeString += " is-required='true'";\r
 118         }\r
 119         if (UtilityService.hasContents(parameter.description)) {\r
 120             attributeString += " title=' " + parameter.description + " '";\r
 121         }\r
 122         if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {\r
 123                 attributeString += " readonly";\r
 124         }\r
 125         if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {\r
 126                 attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";\r
 127         }\r
 128         else if (UtilityService.hasContents(parameter.maxLength)) {\r
 129                 attributeString += " maxlength='" + parameter.maxLength + "'";\r
 130         }\r
 131         else if (UtilityService.hasContents(parameter.minLength)) {\r
 132                 attributeString += " pattern='.{" + parameter.minLength + ",}'"\r
 133         }\r
 134         if (parameter.isVisible === false) {\r
 135             additionalStyle = " visibility: hidden;";\r
 136         }\r
 137         \r
 138         var name = "";\r
 139         if (UtilityService.hasContents(parameter.name)) {\r
 140             name = parameter.name;\r
 141         } else {\r
 142             name = parameter.id;\r
 143         }\r
 144         attributeString += " parameter-name='" + name + "'";\r
 145         \r
 146         if ( parameter.type === PARAMETER.MAP ) {\r
 147                 textInputPrompt = "{<key1>: <value1>,\.\.\.,<keyN>: <valueN>}";\r
 148         }\r
 149         \r
 150         if ( parameter.type === PARAMETER.LIST ) {\r
 151                 textInputPrompt = "[<value1>,\.\.\.,<valueN>]";\r
 152         }\r
 153 \r
 154         switch (parameter.type) {\r
 155         case PARAMETER.BOOLEAN:\r
 156                 if (parameter.value) {\r
 157                         return "<select" + attributeString + " style='" + selectStyle\r
 158                         + additionalStyle + "'>" + "<option value=true>true</option>"\r
 159                         + "<option value=false>false</option>";\r
 160                         + "</select>";\r
 161                 }else{\r
 162                         return "<select" + attributeString + " style='" + selectStyle\r
 163                         + additionalStyle + "'>" + "<option value=false>false</option>"\r
 164                         + "<option value=true>true</option>"\r
 165                         + "</select>";\r
 166                 }\r
 167             break;\r
 168         case PARAMETER.CHECKBOX:\r
 169                 if (parameter.value) {\r
 170                         return "<input type='checkbox' "+attributeString+ " checked='checked' style='"+checkboxInputStyle+"'" \r
 171                         + " value='true'/>";\r
 172                 }else{\r
 173                         return "<input type='checkbox' "+attributeString+ "' style='"+checkboxInputStyle+"'" \r
 174                         + " value='false'/>";\r
 175                 }\r
 176             break;\r
 177         case PARAMETER.FILE:\r
 178                         return "<input type='file' "+attributeString+ " id='"+parameter.id+"' value='"+parameter.value+"'/>";\r
 179             break;\r
 180         case PARAMETER.NUMBER:\r
 181                 var value=parameter.value;\r
 182                 var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";\r
 183                 \r
 184                 if ( UtilityService.hasContents(parameter.min) ) {\r
 185                         parameterSpec += " min='" + parameter.min + "'";\r
 186                 }\r
 187                 if ( UtilityService.hasContents(parameter.max) ) {\r
 188                         parameterSpec += " max='" + parameter.max + "'";\r
 189                 }\r
 190                 if (UtilityService.hasContents(value)) {\r
 191                 parameterSpec += " value='" + value + "'";\r
 192                 }\r
 193                 parameterSpec += ">";\r
 194                 \r
 195                 /*if(!isNaN(value) && value.toString().index('.') != -1){\r
 196                         //float\r
 197                          return "<input type='text'" + attributeString + " style='"\r
 198                             + textInputStyle + additionalStyle + "' only-integers" + value\r
 199                             + "></input>";\r
 200                 } else {\r
 201                         //integer\r
 202                          return "<input type='text'" + attributeString + " style='"\r
 203                             + textInputStyle + additionalStyle + "'  only-float" + value\r
 204                             + "></input>";\r
 205                 }*/\r
 206                 return (parameterSpec);\r
 207             break;\r
 208         case PARAMETER.SELECT:\r
 209             if (UtilityService.hasContents(parameter.prompt)) {\r
 210                 attributeString += " prompt='" + parameter.prompt + "'";\r
 211             }\r
 212             return "<select" + attributeString + " style='" + selectStyle\r
 213                     + additionalStyle + "'>" + getOptionListHtml(parameter)\r
 214                     + "</select>";\r
 215             break;\r
 216         case PARAMETER.STRING:\r
 217         default:\r
 218             var value = "";\r
 219             if (UtilityService.hasContents(parameter.value)) {\r
 220                 value = " value='" + parameter.value + "'";\r
 221             }\r
 222             if (UtilityService.hasContents(parameter.prompt)) {\r
 223                 attributeString += " placeholder='" + parameter.prompt + "'";\r
 224             } else if (textInputPrompt !== "") {\r
 225                 attributeString += " placeholder='" + textInputPrompt + "'";\r
 226             }\r
 227             var finalString = "<input type='text'" + attributeString + " style='"\r
 228             + textInputStyle + additionalStyle + "'" + value\r
 229             + ">";\r
 230             return finalString;\r
 231         }\r
 232     };\r
 233     \r
 234     \r
 235     var getBooleanListHtml = function(parameter){\r
 236         var html = "";\r
 237         \r
 238     };\r
 239 \r
 240     var getOptionListHtml = function(parameter) {\r
 241 \r
 242         var html = "";\r
 243 \r
 244         if (!angular.isArray(parameter.optionList)\r
 245                 || parameter.optionList.length === 0) {\r
 246             return "";\r
 247         }\r
 248 \r
 249         if (UtilityService.hasContents(parameter.prompt)) {\r
 250             if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1)) {\r
 251                 html += "<option value=''>" + parameter.prompt + "</option>";\r
 252             }\r
 253         }\r
 254 \r
 255         for (var i = 0; i < parameter.optionList.length; i++) {\r
 256             var option = parameter.optionList[i];\r
 257             var name = option.name;\r
 258             var value = "";\r
 259             if (option.id === undefined) {\r
 260                 value = option.name;\r
 261             } else {\r
 262                 if (name === undefined) {\r
 263                     name = option.id;\r
 264                 }\r
 265                 value = option.id;\r
 266             }\r
 267             if (option.isDefault === undefined || option.isDefault === false )  {\r
 268                 html += "<option value='" + value + "'>" + name + "</option>";\r
 269             }\r
 270             else {\r
 271                 html += "<option value='" + value + "' selected>" + name + "</option>";\r
 272             }\r
 273         }\r
 274         return html;\r
 275     };\r
 276 \r
 277     var getParameter = function(element, expectedId) {\r
 278         var id = $(element).attr("parameter-id");\r
 279         if (expectedId !== undefined && expectedId !== id) {\r
 280             return undefined;\r
 281         }\r
 282         var parameter = {\r
 283             id : id\r
 284         };\r
 285         if ($(element).prop("type") === "checkbox") {\r
 286             parameter.value = $(element).prop("checked");\r
 287         }else if ($(element).prop("type") === "file") {\r
 288             parameter.value = $('#'+id).attr("value");\r
 289 \r
 290         } else {\r
 291             if ($(element).prop("type") === "text") {\r
 292                 $(element).val($(element).val().trim());\r
 293             }\r
 294             parameter.value = $(element).val();\r
 295         }\r
 296         if ($(element).prop("selectedIndex") === undefined) {\r
 297             parameter.selectedIndex = -1;\r
 298         } else {\r
 299             parameter.selectedIndex = $(element).prop("selectedIndex");\r
 300             if (UtilityService.hasContents($(element).attr("prompt"))) {\r
 301                 parameter.selectedIndex--;\r
 302             }\r
 303         }\r
 304         return parameter;\r
 305     };\r
 306 \r
 307     var getRequiredField = function(element) {\r
 308         if ($(element).prop("type") === "text") {\r
 309             $(element).val($(element).val().trim());\r
 310         }\r
 311         if ($(element).val() === "" || $(element).val() === null) {\r
 312             return '"' + $(element).attr("parameter-name") + '"';\r
 313         } else {\r
 314             return "";\r
 315         }\r
 316     };\r
 317 \r
 318     var callback = function(element, scope) {\r
 319         scope.callback({\r
 320             id : $(element).attr("parameter-id")\r
 321         });\r
 322     };\r
 323 \r
 324     return {\r
 325         restrict : "EA",\r
 326         replace  : true,\r
 327         template : "<div><table style='" + tableStyle + "'></table></div>",\r
 328         scope : {\r
 329             control : "=",\r
 330             callback : "&"\r
 331         },\r
 332         link : function(scope, element, attrs) {\r
 333                 \r
 334             var control = scope.control || {};\r
 335 \r
 336             control.setList = function(parameterList) {\r
 337                 var html = "";\r
 338                 for (var i = 0; i < parameterList.length; i++) {\r
 339                     html += getParameterHtml(parameterList[i], attrs.editable);\r
 340                 }\r
 341                 element.html(html);\r
 342                 element.find("input, select").bind("change", function() {\r
 343                     callback(this, scope);\r
 344                 });\r
 345             }\r
 346 \r
 347             control.updateList = function(parameterList) {\r
 348                 element.find("input, select").each(\r
 349                         function() {\r
 350                             for (var i = 0; i < parameterList.length; i++) {\r
 351                                 if (parameterList[i].id === $(this).attr(\r
 352                                         "parameter-id")) {\r
 353                                     updateParameter(parameterList[i], this,\r
 354                                             attrs.editable);\r
 355                                 }\r
 356                             }\r
 357                         });\r
 358                 element.find("input, select").bind("change", function() {\r
 359                     callback(this, scope);\r
 360                 });\r
 361             }\r
 362 \r
 363             control.getList = function(expectedId) {\r
 364                 var parameterList = new Array();\r
 365                 element.find("input, select").each(function() {\r
 366                     var parameter = getParameter(this, expectedId);\r
 367                     if (parameter !== undefined) {\r
 368                         parameterList.push(parameter);\r
 369                     }\r
 370                 });\r
 371                 return parameterList;\r
 372             }\r
 373 \r
 374             control.getRequiredFields = function() {\r
 375                 var requiredFields = "";\r
 376                 var count = 0;\r
 377                 element.find("input, select").each(function() {\r
 378                         if ($(this).attr("is-required") === "true") {\r
 379                         var requiredField = getRequiredField(this);\r
 380                         if (requiredField !== "") {\r
 381                             if (++count == 1) {\r
 382                                 requiredFields = requiredField;\r
 383                             }\r
 384                         }\r
 385                         }\r
 386                 });\r
 387                 if (--count <= 0) {\r
 388                     return requiredFields;\r
 389                 } else if (count == 1) {\r
 390                     return requiredFields + " and 1 other field";\r
 391                 } else {\r
 392                     return requiredFields + " and " + count + " other fields";\r
 393                 }\r
 394             }\r
 395     }\r
 396     }\r
 397 }\r
 398 \r
 399 appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService",\r
 400         parameterBlockDirective ]);\r
 401 \r
 402 \r
 403 appDS2.directive('onlyIntegers', function () {\r
 404     return  {\r
 405         restrict: 'A',\r
 406         link: function (scope, elm, attrs, ctrl) {\r
 407             elm.on('keydown', function (event) {\r
 408                 if(event.shiftKey){event.preventDefault(); return false;}\r
 409                 //console.log(event.which);\r
 410                 if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {\r
 411                     // backspace, enter, escape, arrows\r
 412                     return true;\r
 413                 } else if (event.which >= 49 && event.which <= 57) {\r
 414                     // numbers\r
 415                     return true;\r
 416                 } else if (event.which >= 96 && event.which <= 105) {\r
 417                     // numpad number\r
 418                     return true;\r
 419                 } \r
 420                 // else if ([110, 190].indexOf(event.which) > -1) {\r
 421                 //     // dot and numpad dot\r
 422                 //     return true;\r
 423                 // }\r
 424                 else {\r
 425                     event.preventDefault();\r
 426                     return false;\r
 427                 }\r
 428             });\r
 429         }\r
 430     }\r
 431 });\r
 432 \r
 433 appDS2.directive('onlyFloat', function () {\r
 434     return  {\r
 435         restrict: 'A',\r
 436         link: function (scope, elm, attrs, ctrl) {\r
 437             elm.on('keydown', function (event) {\r
 438               if ([110, 190].indexOf(event.which) > -1) {\r
 439                     // dot and numpad dot\r
 440                     event.preventDefault();\r
 441                     return true;\r
 442                 }\r
 443                 else{\r
 444                   return false;\r
 445                 }\r
 446             });\r
 447         }\r
 448     }\r
 449 });\r