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

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