textarea for scripts

PR: https://github.com/eclipse/smarthome/pull/1330

Signed-off-by: Aoun Bukhari <bukhari@itemis.de>

extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/components.css

@@ -669,4 +669,16 @@ md-progress-circular.md-default-theme .md-inner .md-left .md-half-circle
 
 .cursor-pointer {
 	cursor: pointer;
+}
+
+md-input-container textarea.md-input.scriptArea, md-input-container textarea.md-input.ng-invalid.ng-dirty,
+	md-input-container.md-input-focused .md-input {
+	max-width: 550px;
+	max-height: 250px;
+	overflow: scroll;
+	border: 1px solid #ccc;
+	padding-left: 5px;
+	font-family: monospace;
+	font-size: 12px;
+	line-height: 1.2;
 }

extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.rules.js

@@ -242,10 +242,36 @@ angular.module('PaperUI.controllers.rules', []).controller('RulesPageController'
                 touch.target.dispatchEvent(simulatedEvent);
                 event.preventDefault();
             };
-            elem[0].addEventListener("touchstart", touchHandler, true)
+            elem[0].addEventListener("touchstart", touchHandler, true);
             elem[0].addEventListener("touchmove", touchHandler, true);
             elem[0].addEventListener("touchend", touchHandler, true);
             elem[0].addEventListener("touchcancel", touchHandler, true);
         }
     };
+}).directive('scriptarea', function() {
+    return {
+        restrict : 'A',
+        require : '^ngModel',
+        link : function(scope, elem, attrs) {
+            elem.ready(function() {
+                setTimeout(function() {
+                    elem[0].style.cssText = 'height:auto;';
+                    elem[0].style.cssText = 'height:' + elem[0].scrollHeight + 'px';
+                }, 500);
+            });
+
+            var resizeHandler = function(event) {
+                elem[0].style.cssText = 'height:auto;';
+                if (elem[0].value.length < 1) {
+                    elem[0].style.cssText = 'height:35px';
+                } else {
+                    elem[0].style.cssText = 'height:' + elem[0].scrollHeight + 'px';
+                }
+            };
+            elem[0].addEventListener("keydown", resizeHandler, true);
+            elem[0].addEventListener("input", resizeHandler, true);
+            elem[0].addEventListener("cut", resizeHandler);
+
+        }
+    }
 });

extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/services.js

@@ -114,6 +114,10 @@ angular.module('PaperUI.services', [ 'PaperUI.constants' ]).config(function($htt
                     parameter.element = 'select';
                     itemsList = itemsList === undefined ? itemService.getAll() : itemsList;
                     parameter.options = itemsList;
+                } else if (parameter.context && parameter.context.toUpperCase() === 'SCRIPT') {
+                    parameter.element = 'textarea';
+                    parameter.inputType = 'text';
+                    parameter.label = parameter.label && parameter.label.length > 0 ? parameter.label : 'Script';
                 } else if (parameter.type.toUpperCase() === 'TEXT') {
                     if (parameter.options && parameter.options.length > 0) {
                         parameter.element = 'select';

extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/include.config.html

@@ -4,13 +4,54 @@
 			<fieldset ng-class="{borderhidden: parameters.length==1}" ng-repeat="group in parameters track by $index">
 				<legend ng-if="parameters.length>1">{{group.groupLabel}}</legend>
 				<div ng-repeat="parameter in group.parameters track by $index">
-					<div class="parameter col-sm-6 col-xs-12" ng-switch="parameter.element">
+					<div ng-switch="parameter.element">
-						<div ng-switch-when="input">
+						<div class="parameter col-sm-6 col-xs-12">
-							<div ng-if="parameter.type=='INTEGER'">
+							<div ng-switch-when="input">
-								<label class="config-textInput" for="{{parameter.name}}">{{parameter.label}}</label><md-input-container>  <input ng-init="focus=false" name="{{parameter.name}}" type="number" min="{{parameter.min}}" max="{{parameter.max}}" ng-model="configuration[parameter.name]" ng-required="parameter.required" type="{{parameter.inputType}}" ng-focus="focus=true" ng-blur="focus=false">
+								<div ng-if="parameter.type=='INTEGER'">
+									<label class="config-textInput" for="{{parameter.name}}">{{parameter.label}}</label>
+									<md-input-container> <input ng-init="focus=false" name="{{parameter.name}}" type="number" min="{{parameter.min}}" max="{{parameter.max}}" ng-model="configuration[parameter.name]" ng-required="parameter.required" type="{{parameter.inputType}}" ng-focus="focus=true" ng-blur="focus=false">
+									<div ng-messages="form.configForm.{{parameter.name}}.$error" ng-show="focus">
+										<div ng-message="min">Minimum allowed number is {{parameter.min}}</div>
+										<div ng-message="max">Maximum allowed number is {{parameter.max}}</div>
+										<div ng-message="required">Field is required</div>
+									</div>
+									<span ng-messages="" ng-show="!focus">
+										<p class="hint">
+											<small>{{parameter.description}}</small>
+										</p>
+									</span> </md-input-container>
+								</div>
+								<div ng-if="parameter.type=='TEXT'">
+									<label class="config-textInput" for="{{parameter.name}}">{{parameter.label}}</label>
+									<md-input-container md-no-float> <input ng-init="focus=false" name="{{parameter.name}}" ng-minlength="parameter.min" ng-maxlength="parameter.max" ng-model="configuration[parameter.name]" ng-required="parameter.required" type="{{parameter.inputType}}" ng-focus="focus=true" ng-blur="focus=false">
+									<div ng-messages="form.configForm.{{parameter.name}}.$error" ng-show="focus">
+										<div ng-message="minlength">Minimum length is {{parameter.min}}</div>
+										<div ng-message="maxlength">Maximum length is {{parameter.max}}</div>
+										<div ng-message="required">Field is required</div>
+									</div>
+									<span ng-messages="" ng-show="!focus">
+										<p class="hint">
+											<small>{{parameter.description}}</small>
+										</p>
+									</span> <span ng-messages="" ng-show="focus">
+										<p class="hint">
+											<small>&nbsp;</small>
+										</p>
+									</span> </md-input-container>
+								</div>
+							</div>
+							<div ng-switch-when="switch">
+								<md-switch ng-model="configuration[parameter.name]" aria-label="parameter.label">{{parameter.label}}</md-switch>
+								<p class="hint">
+									<small>{{parameter.description}}</small>
+								</p>
+							</div>
+							<div ng-switch-when="select">
+								<md-input-container> <label>{{parameter.label}}</label> <md-select class="config-select" isrequired="parameter.required" ng-init="focus=false" name="{{parameter.name}}" ng-model="configuration[parameter.name]" placeholder="Select a value" ng-focus="focus=true" ng-blur="focus=false" ng-required="parameter.required"> <md-option ng-value="option.value?option.value:option.name" ng-repeat="option in parameter.options"> <span style="display: inline-block;" ng-if="parameter.context=='item'">
+									{{ option.label?option.label:option.name }}
+									<span class="md-caption" style="color: grey;">({{ option.name?option.name:'' }}) </span>
+								</span> <span ng-if="!parameter.context">{{option.label}}</span> </md-option> </md-select>
 								<div ng-messages="form.configForm.{{parameter.name}}.$error" ng-show="focus">
-									<div ng-message="min">Minimum allowed number is {{parameter.min}}</div>
-									<div ng-message="max">Maximum allowed number is {{parameter.max}}</div>
 									<div ng-message="required">Field is required</div>
 								</div>
 								<span ng-messages="" ng-show="!focus">
@@ -19,38 +60,13 @@
 									</p>
 								</span> </md-input-container>
 							</div>
-							<div ng-if="parameter.type=='TEXT'">
-								<label class="config-textInput" for="{{parameter.name}}">{{parameter.label}}</label><md-input-container md-no-float><input ng-init="focus=false" name="{{parameter.name}}" ng-minlength="parameter.min" ng-maxlength="parameter.max" ng-model="configuration[parameter.name]" ng-required="parameter.required" type="{{parameter.inputType}}" ng-focus="focus=true" ng-blur="focus=false">
-								<div ng-messages="form.configForm.{{parameter.name}}.$error" ng-show="focus">
-									<div ng-message="minlength">Minimum length is {{parameter.min}}</div>
-									<div ng-message="maxlength">Maximum length is {{parameter.max}}</div>
-									<div ng-message="required">Field is required</div>
-								</div>
-								<span ng-messages="" ng-show="!focus">
-									<p class="hint">
-										<small>{{parameter.description}}</small>
-									</p>
-								</span> </md-input-container>
-								<span ng-messages="" ng-show="focus">
-									<p class="hint">
-										<small>&nbsp;</small>
-									</p>
-								</span>
-								</md-input-container>
-							</div>
 						</div>
-						<div ng-switch-when="switch">
+						<div class="parameter col-sm-12 col-xs-12" ng-switch-when="textarea">
-							<md-switch ng-model="configuration[parameter.name]" aria-label="parameter.label">{{parameter.label}}</md-switch>
+							<label class="config-textInput" for="{{parameter.name}}">{{parameter.label}}</label>
-							<p class="hint">
+							<md-input-container md-no-float> <textarea scriptarea rows="1" wrap="off" class="scriptArea" ng-init="focus=false" name="{{parameter.name}}" ng-model="configuration[parameter.name]" ng-required="parameter.required" ng-focus="focus=true" ng-blur="focus=false"></textarea>
-								<small>{{parameter.description}}</small>
-							</p>
-						</div>
-						<div ng-switch-when="select">
-							<md-input-container> <label>{{parameter.label}}</label> <md-select class="config-select" isrequired="parameter.required" ng-init="focus=false" name="{{parameter.name}}" ng-model="configuration[parameter.name]" placeholder="Select a value" ng-focus="focus=true" ng-blur="focus=false" ng-required="parameter.required"> <md-option ng-value="option.value?option.value:option.name" ng-repeat="option in parameter.options"> <span style="display: inline-block;" ng-if="parameter.context=='item'">
-								{{ option.label?option.label:option.name }}
-								<span class="md-caption" style="color: grey;">({{ option.name?option.name:'' }}) </span>
-							</span> <span ng-if="!parameter.context">{{option.label}}</span> </md-option> </md-select>
 							<div ng-messages="form.configForm.{{parameter.name}}.$error" ng-show="focus">
+								<div ng-message="minlength">Minimum length is {{parameter.min}}</div>
+								<div ng-message="maxlength">Maximum length is {{parameter.max}}</div>
 								<div ng-message="required">Field is required</div>
 							</div>
 							<span ng-messages="" ng-show="!focus">
@@ -58,8 +74,14 @@
 									<small>{{parameter.description}}</small>
 								</p>
 							</span> </md-input-container>
+							<span ng-messages="" ng-show="focus">
+								<p class="hint">
+									<small>&nbsp;</small>
+								</p>
+							</span>
 						</div>
 					</div>
+
 					<div ng-if="$odd" class="clearfix"></div>
 				</div>
 			</fieldset>