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