Add further datakey settings: tooltip, text color, min-max range, margins, mandatory

ui/src/app/widget/lib/multiple-input-widget.js

@@ -56,6 +56,7 @@ function MultipleInputWidgetController($q, $scope, attributeService, toast, type
     vm.datasources = null;
 
     vm.cellStyle = cellStyle;
+    vm.textColor = textColor;
     vm.discardAll = discardAll;
     vm.inputChanged = inputChanged;
     vm.postData = postData;
@@ -82,7 +83,7 @@ function MultipleInputWidgetController($q, $scope, attributeService, toast, type
         return {};
     }
 
-    function cellStyle(key) {
+    function cellStyle(key, rowIndex, firstKey, lastKey) {
         var style = {};
         if (key) {
             var styleInfo = vm.stylesInfo[key.label];
@@ -97,6 +98,33 @@ function MultipleInputWidgetController($q, $scope, attributeService, toast, type
                 style = defaultStyle();
             }
         }
+        if (vm.settings.rowMargin) {
+            if (angular.isUndefined(style.marginTop) && rowIndex != 0) {
+                style.marginTop = (vm.settings.rowMargin / 2) + 'px';
+            }
+            if (angular.isUndefined(style.marginBottom)) {
+                style.marginBottom = (vm.settings.rowMargin / 2) + 'px';
+            }
+        }
+        if (vm.settings.columnMargin) {
+            if (angular.isUndefined(style.marginLeft) && !firstKey) {
+                style.marginLeft = (vm.settings.columnMargin / 2) + 'px';
+            }
+            if (angular.isUndefined(style.marginRight) && !lastKey) {
+                style.marginRight = (vm.settings.columnMargin / 2) + 'px';
+            }
+        }
+        return style;
+    }
+
+    function textColor(key) {
+        var style = {};
+        if (key) {
+            var styleInfo = vm.stylesInfo[key.label];
+            if (styleInfo.color) {
+                style = { color: styleInfo.color };
+            }
+        }
         return style;
     }
 
@@ -232,7 +260,8 @@ function MultipleInputWidgetController($q, $scope, attributeService, toast, type
 
                         vm.stylesInfo[dataKey.label] = {
                             useCellStyleFunction: useCellStyleFunction,
-                            cellStyleFunction: cellStyleFunction
+                            cellStyleFunction: cellStyleFunction,
+                            color: keySettings.color
                         };
 
                         row.data.push(dataKey);

ui/src/app/widget/lib/multiple-input-widget.scss

@@ -46,10 +46,3 @@ md-toast {
     font-size: 14px !important;
   }
 }
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}

ui/src/app/widget/lib/multiple-input-widget.tpl.html

@@ -15,22 +15,34 @@
     limitations under the License.
 
 -->
-<form class="tb-multiple-input" name="multipleInputForm" ng-submit="vm.postData($event)">
+<form class="tb-multiple-input" name="multipleInputForm" ng-submit="vm.postData($event)" novalidate>
     <div style="padding: 0 8px; margin: auto 0;">
-        <div ng-show="vm.entityDetected" layout="row" flex ng-repeat="row in vm.rows track by $index">
-            <div layout="column" flex ng-repeat="key in row.data track by $index">
-                <md-input-container class="md-icon-float" ng-style="vm.cellStyle(key)">
-                    <label>{{key.label}}</label>
-                    <md-icon class="material-icons" ng-if="key.settings.icon">
+        <div ng-show="vm.entityDetected" layout="row" flex ng-repeat="row in vm.rows" ng-init="rowIndex=$index">
+            <div layout="column" flex ng-repeat="key in row.data track by $index" ng-init="keyIndex=$index">
+                <md-tooltip class="tb-tooltip-multiline" ng-if="key.settings.tooltipMessage && key.settings.tooltipMessage.length" md-direction="left">
+                    <span ng-bind-html="key.settings.tooltipMessage"></span>
+                </md-tooltip>
+                <md-input-container class="md-block" ng-style="vm.cellStyle(key, rowIndex, $first, $last)">
+                    <label ng-style="vm.textColor(key)">{{key.label}}</label>
+                    <md-icon ng-style="vm.textColor(key)" class="material-icons" ng-if="key.settings.icon">
                         {{key.settings.icon}}
                     </md-icon>
-                    <input name="key.name"
+                    <input name="value{{rowIndex}}{{keyIndex}}"
+                           ng-style="vm.textColor(key)"
                            ng-disabled="key.settings.readOnly"
                            ng-model="key.currentValue"
+                           min="{{key.settings.min}}"
+                           max="{{key.settings.max}}"
+                           ng-required="key.settings.required"
                            type="{{key.settings.inputType}}"
                            step="{{key.settings.step}}"
                            md-select-on-focus
                            ng-change="vm.inputChanged()">
+                    <div ng-messages="multipleInputForm['value' + rowIndex + keyIndex].$error">
+                        <div ng-message="min">Value must be greater than {{key.settings.min}}</div>
+                        <div ng-message="max">Value must be lower than {{key.settings.max}}</div>
+                        <div ng-message="required">This field is required</div>
+                    </div>
                 </md-input-container>
             </div>
         </div>
@@ -44,12 +56,12 @@
             Timeseries parameter cannot be used in this widget
         </div>
     </div>
-    <div class="footer md-padding" layout="row" layout-align="end center" ng-show="vm.entityDetected && vm.dataKeyDetected">
+    <div class="md-padding" layout="row" layout-align="end center" ng-show="vm.entityDetected && vm.dataKeyDetected">
         <md-button class="md-primary" ng-click="vm.discardAll()" style="max-height: 50px;margin-right:20px;" ng-disabled="!vm.hasAnyChange">
-            {{ 'action.discard-changes' | translate }}
+            {{ 'action.undo' | translate }}
         </md-button>
         <md-button class="md-raised md-primary" type="submit" value="Submit" style="max-height: 50px;margin-right:20px;"
-                   ng-disabled="!vm.hasAnyChange" ng-click="vm.isFocused = false">
+                   ng-disabled="!vm.hasAnyChange || multipleInputForm.$invalid" ng-click="vm.isFocused = false">
             {{ 'action.save' | translate }}
         </md-button>
     </div>