Styling issues of the GSO service page

Issue-ID:GSO-232

Change-Id: Ifed0421d4670e7d4c37025422fd5133e1d4d0b86
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
index 275141d..3611a6e 100644 (file)
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/DataService.js
@@ -361,13 +361,13 @@ function generateParamComponent(nodeType, identify, param, strReadOnly) {
     var id = getParamId(identify,param);
     var component = '';
     if (param.type === 'string') {
-        component = '<div class="mT15 form-group" style="margin-left:0px;">'
-                + '<label class="col-sm-5 control-label">'
+        component = '<div class="mT15 form-group row-content" style="margin-left:0px;">'
+                + '<label class="col-sm-6 control-label labelstyle">'
                 + '<span>' + name + '</span>' + generateRequiredLabel(param)
                 + '</label>' 
-                + '<div class="col-sm-5"><input type="text" id="' + id 
+                + '<div class="col-sm-6"><input type="text" id="' + id
                 + '" name="parameter description" class="form-control" placeholder="'
-                + name + '" value="' + param.defaultValue;
+                + '"value="' + param.defaultValue;
         if(strReadOnly){
             component = component + '" readonly="' + strReadOnly + '"/>'+ '</div></div>';
         }else{
@@ -375,12 +375,12 @@ function generateParamComponent(nodeType, identify, param, strReadOnly) {
         }
                 
     } else if (param.type === 'enum') {
-        component = '<div class="form-group" style="margin-left:0px;margin-bottom:5px;">'
-                + '<label class="col-sm-5 control-label">'
+        component = '<div class="form-group row-content" style="margin-left:0px;margin-bottom:5px;">'
+                + '<label class="col-sm-6 control-label labelstyle">'
                 + '<span>' + name + '</span>'
                 + '<span class="required">*</span>'
                 + '</label>'
-                + '<div class="col-sm-5">'
+                + '<div class="col-sm-6">'
                 + '<select class="form-control" style ="padding-top: 0px;padding-bottom: 0px;"'
                 + ' id="' + id + '" name="' + param.name + '" value="' + param.defaultValue 
                 + '">'

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index b03824e..d42d28c 100644 (file)
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -164,7 +164,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);\r
             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
             $('#lcTableAction').html($compile(addhtml)($scope));\r
-            $('#lcTableAction').append($compile(deletehtml)($scope));\r
+            //$('#lcTableAction').append($compile(deletehtml)($scope));\r
 \r
             $scope.checkboxes = { 'checked': false, items: {} };\r
 \r
@@ -197,10 +197,12 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var number = $(modelTemplate).filter('#numeric').html();\r
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();\r
 \r
-            var dataText = {"ErrMsg" :     {"textboxErr" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"Service Name"}};\r
+            var dataText = {"ErrMsg" :     {"errmsg" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"", "errtag":"lcnameErr", "errfunc":"validatename", "required":true}};\r
+    \r
             $('#myModal .serviceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));\r
 \r
-            var serviceDescriptionText = {"ErrMsg" :     {"textboxErr" : "Description is required.", "modalVar":"lifecycleData.description", "placeholder":"Descritpion"}};\r
+            var serviceDescriptionText = {"ErrMsg" :     {"errmsg" : "Description is required.", "modalVar":"lifecycleData.description", "placeholder":"", "errtag":"lctemplateErr", "errfunc":"validatetemplate", "required":true}};\r
+\r
             $('#myModal .serviceDescription').html($compile(Mustache.to_html(text, serviceDescriptionText.ErrMsg))($scope));\r
 \r
             //var creatorText = {"ErrMsg" :     {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};\r
@@ -221,15 +223,21 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                    // var templatesInfo = translateToTemplatesInfo(tmplatesResponse);\r
                   //  document.getElementById("svcTempl").innerHTML = templatesInfo;\r
                     $scope.optionsValue = tmplatesResponse;\r
-                    //$scope.someOptions = [{serviceTemplateId:"1",templateName:"1.1"}, {serviceTemplateId:"2",templateName:"1.2"}];\r
-                    // $scope.someOptions = [{"serviceTemplateId": '1', "templateName": "1.1"},{"serviceTemplateId": '2', "templateName": "1.2"}]\r
-                    // console.log(":: " + JSON.stringify($scope.optionsValue));\r
+                    var dropSimple_data = {\r
+                        "errmsg" : "Template version is required.",\r
+                        "modalVar" : "lifecycleData.optSelect",\r
+                        "labelField" : "templateName",\r
+                        "optionsValue" : JSON.stringify(tmplatesResponse),\r
+                        "errtag":"lcdropdownErr",\r
+                        "errfunc":"validatedropdown",\r
+                        "required":true\r
+                    }\r
+                   $('#myModal #plainDropDown').html($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));\r
                 }, function (reason) {\r
                     $scope.error = "Error ! " + reason;\r
                 });\r
-\r
-\r
-\r
+               \r
+               \r
             //$('#myModal .creator').html($compile(Mustache.to_html(text, creatorText.ErrMsg))($scope));\r
 \r
             var modelSubmit_data = {"title":"Submit", "clickAction":"saveData(lifecycleData.id)"};\r
@@ -239,6 +247,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             var modelDelete_data = {"title":"Close", "clickAction":"closeModal()"};\r
             var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);\r
             $('#myModal #footerBtns').append($compile(modelDelete_html)($scope));\r
+           \r
         }\r
 \r
 \r
@@ -279,6 +288,31 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             $state.go('home.lcTabs.detailInfo', {'id': id});\r
 \r
         }\r
+       \r
+       $scope.validatename = function (value){\r
+                if($scope.lifecycleData.serviceName) {\r
+                    $scope.lcnameErr = false;\r
+                }\r
+                else\r
+                    $scope.lcnameErr = true;\r
+            }\r
+\r
+\r
+\r
+            $scope.validatetemplate = function (value){\r
+                if($scope.lifecycleData.description) {\r
+                    $scope.lctemplateErr = false;\r
+                }\r
+                else\r
+                    $scope.lctemplateErr = true;\r
+            }\r
+            $scope.validatedropdown = function (value){\r
+                if($scope.lifecycleData.optSelect) {\r
+                    $scope.lcdropdownErr = false;\r
+                }\r
+                else\r
+                    $scope.lcdropdownErr = true;\r
+            }\r
 \r
         $scope.templateParam = function() {\r
             \r
@@ -313,6 +347,7 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
         $scope.closeModal = function() {\r
             console.log("Closing Modal...");\r
             $('#myModal').modal('hide');\r
+            $state.reload();\r
         }\r
 \r
         $scope.editData = function(id) {\r
@@ -564,10 +599,21 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
     })\r
 \r
 \r
-var modelTemplate;\r
+var modelTemplate = "";\r
 function loadTemplate() {\r
-    $.get('template.html', function(template) {\r
-        modelTemplate = template;\r
+\r
+    $.get('templateContainer.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+    $.get('templateWidget.html', function (template) {\r
+        //console.log("Template is : "+template);\r
+        modelTemplate += template;\r
+    });\r
+    $.get('templateNotification.html', function (template) {\r
+        modelTemplate += template;\r
+    });\r
+    $.get('templateFunctional.html', function (template) {\r
+        modelTemplate += template;\r
     });\r
 }\r
 \r