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

   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 = false;
  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     var textInputPrompt = "Enter data";
  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 html = "<tr><td style='" + nameStyle + "'" + attributeString + ">"
  64                 + getNameHtml(parameter) + "</td><td style='" + style + "'>";
  65         if (editable === undefined) {
  66             if (UtilityService.hasContents(parameter.value)) {
  67                 html += parameter.value;
  68             }
  69         } else {
  70             html += getValueHtml(parameter);
  71         }
  72         html += "</td></tr>";
  73         return html;
  74     };
  75
  76     var updateParameter = function(parameter, element, editable) {
  77         $(element).parent().parent().children("td").first().html(
  78                 getNameHtml(parameter));
  79         if (editable === undefined) {
  80             $(element).html(parameter.value);
  81         } else {
  82             $(element).parent().html(getValueHtml(parameter));
  83         }
  84     };
  85
  86     var getNameHtml = function(parameter) {
  87         if (parameter.isVisible === false) {
  88             return "";
  89         }
  90         var name = "";
  91         if (UtilityService.hasContents(parameter.name)) {
  92             name = parameter.name;
  93         } else {
  94             name = parameter.id;
  95         }
  96         var requiredLabel = "";
  97         if (parameter.isRequired) {
  98             requiredLabel = "<img src='app/vid/images/asterisk.png' style='"
  99                     + requiredLabelStyle + "'></img>";
 100         }
 101         return name + ":" + requiredLabel;
 102     };
 103
 104     var getValueHtml = function(parameter) {
 105         var attributeString = " parameter-id='" + parameter.id + "'";
 106         var additionalStyle = "";
 107         if (parameter.isEnabled === false) {
 108             attributeString += " disabled='disabled'";
 109         }
 110         if (parameter.isRequired) {
 111             attributeString += " is-required='true'";
 112         }
 113         if (UtilityService.hasContents(parameter.description)) {
 114             attributeString += " title=' " + parameter.description + " '";
 115         }
 116         if (parameter.isVisible === false) {
 117             additionalStyle = "visibility: hidden;";
 118         }
 119         var name = "";
 120         if (UtilityService.hasContents(parameter.name)) {
 121             name = parameter.name;
 122         } else {
 123             name = parameter.id;
 124         }
 125         attributeString += " parameter-name='" + name + "'";
 126
 127         switch (parameter.type) {
 128         case PARAMETER.BOOLEAN:
 129             if (parameter.value) {
 130                 attributeString += " checked='checked'";
 131             }
 132             return "<input type='checkbox'" + attributeString + " style='"
 133                     + checkboxInputStyle + additionalStyle + "'></input>";
 134             break;
 135         case PARAMETER.SELECT:
 136             if (UtilityService.hasContents(parameter.prompt)) {
 137                 attributeString += " prompt='" + parameter.prompt + "'";
 138             }
 139             return "<select" + attributeString + " style='" + selectStyle
 140                     + additionalStyle + "'>" + getOptionListHtml(parameter)
 141                     + "</select>";
 142             break;
 143         case PARAMETER.STRING:
 144         default:
 145             var value = "";
 146             if (UtilityService.hasContents(parameter.value)) {
 147                 value = " value='" + parameter.value + "'";
 148             }
 149             if (UtilityService.hasContents(parameter.prompt)) {
 150                 attributeString += " placeholder='" + parameter.prompt + "'";
 151             } else if (textInputPrompt !== "") {
 152                 attributeString += " placeholder='" + textInputPrompt + "'";
 153             }
 154             return "<input type='text'" + attributeString + " style='"
 155                     + textInputStyle + additionalStyle + "'" + value
 156                     + "></input>";
 157         }
 158     };
 159
 160     var getOptionListHtml = function(parameter) {
 161
 162         var html = "";
 163
 164         if (!angular.isArray(parameter.optionList)
 165                 || parameter.optionList.length === 0) {
 166             return "";
 167         }
 168
 169         if (UtilityService.hasContents(parameter.prompt)) {
 170             if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1)) {
 171                 html += "<option value=''>" + parameter.prompt + "</option>";
 172             }
 173         }
 174
 175         for (var i = 0; i < parameter.optionList.length; i++) {
 176             var option = parameter.optionList[i];
 177             var name = option.name;
 178             var value = "";
 179             if (option.id === undefined) {
 180                 value = option.name;
 181             } else {
 182                 if (name === undefined) {
 183                     name = option.id;
 184                 }
 185                 value = option.id;
 186             }
 187             html += "<option value='" + value + "'>" + name + "</option>";
 188         }
 189         return html;
 190     };
 191
 192     var getParameter = function(element, expectedId) {
 193         var id = $(element).attr("parameter-id");
 194         if (expectedId !== undefined && expectedId !== id) {
 195             return undefined;
 196         }
 197         var parameter = {
 198             id : id
 199         };
 200         if ($(element).prop("type") === "checkbox") {
 201             parameter.value = $(element).prop("checked");
 202         } else {
 203             if ($(element).prop("type") === "text") {
 204                 $(element).val($(element).val().trim());
 205             }
 206             parameter.value = $(element).val();
 207         }
 208         if ($(element).prop("selectedIndex") === undefined) {
 209             parameter.selectedIndex = -1;
 210         } else {
 211             parameter.selectedIndex = $(element).prop("selectedIndex");
 212             if (UtilityService.hasContents($(element).attr("prompt"))) {
 213                 parameter.selectedIndex--;
 214             }
 215         }
 216         return parameter;
 217     };
 218
 219     var getRequiredField = function(element) {
 220         if ($(element).prop("type") === "text") {
 221             $(element).val($(element).val().trim());
 222         }
 223         if ($(element).val() === "" || $(element).val() === null) {
 224             return '"' + $(element).attr("parameter-name") + '"';
 225         } else {
 226             return "";
 227         }
 228     };
 229
 230     var callback = function(element, scope) {
 231         scope.callback({
 232             id : $(element).attr("parameter-id")
 233         });
 234     };
 235
 236     return {
 237         restrict : "EA",
 238         replace : true,
 239         template : "<div><table style='" + tableStyle + "'></table></div>",
 240         scope : {
 241             control : "=",
 242             callback : "&"
 243         },
 244         link : function(scope, element, attrs) {
 245
 246             var control = scope.control || {};
 247
 248             control.setList = function(parameterList) {
 249                 var html = "";
 250                 for (var i = 0; i < parameterList.length; i++) {
 251                     html += getParameterHtml(parameterList[i], attrs.editable);
 252                 }
 253                 element.html(html);
 254                 element.find("input, select").bind("change", function() {
 255                     callback(this, scope);
 256                 });
 257             }
 258
 259             control.updateList = function(parameterList) {
 260                 element.find("input, select").each(
 261                         function() {
 262                             for (var i = 0; i < parameterList.length; i++) {
 263                                 if (parameterList[i].id === $(this).attr(
 264                                         "parameter-id")) {
 265                                     updateParameter(parameterList[i], this,
 266                                             attrs.editable);
 267                                 }
 268                             }
 269                         });
 270             }
 271
 272             control.getList = function(expectedId) {
 273                 var parameterList = new Array();
 274                 element.find("input, select").each(function() {
 275                     var parameter = getParameter(this, expectedId);
 276                     if (parameter !== undefined) {
 277                         parameterList.push(parameter);
 278                     }
 279                 });
 280                 return parameterList;
 281             }
 282
 283             control.getRequiredFields = function() {
 284                 var requiredFields = "";
 285                 var count = 0;
 286                 element.find("input, select").each(function() {
 287                     if ($(this).attr("is-required") === "true") {
 288                         var requiredField = getRequiredField(this);
 289                         if (requiredField !== "") {
 290                             if (++count == 1) {
 291                                 requiredFields = requiredField;
 292                             }
 293                         }
 294                     }
 295                 });
 296                 if (--count <= 0) {
 297                     return requiredFields;
 298                 } else if (count == 1) {
 299                     return requiredFields + " and 1 other field";
 300                 } else {
 301                     return requiredFields + " and " + count + " other fields";
 302                 }
 303             }
 304         }
 305     }
 306 }
 307
 308 app.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService",
 309         parameterBlockDirective ]);