Add pod UI: Add multi-edit form

ui/css/cloudstack3.css

@@ -7022,6 +7022,42 @@ label.error {
   max-width: 91px;
 }
 
+/*** Add multiple pod ranges form*/
+.multi-wizard.zone-wizard .add-pod .info-desc {
+  margin-bottom: 26px;
+}
+
+.multi-wizard.zone-wizard .pod-edit {
+}
+
+.multi-wizard.zone-wizard .pod-edit span.message {
+  display: none;
+  text-decoration: underline;
+}
+
+.multi-wizard.zone-wizard .pod-edit .form-container {
+  height: 36px;
+}
+
+.multi-wizard.zone-wizard .pod-edit .form-container form {
+}
+
+.multi-wizard.zone-wizard .pod-edit .form-container form {
+}
+
+.multi-wizard.zone-wizard .pod-edit .form-container .form-item .name label {
+  width: 51px;
+}
+
+.multi-wizard.zone-wizard .pod-edit .form-container .form-item .name {
+  width: 58px;
+}
+
+.multi-wizard.zone-wizard .pod-edit .multi-edit .data-body {
+  height: 209px;
+  overflow: auto;
+}
+
 /*** Select container fields*/
 .multi-wizard.zone-wizard .select-container .field {
   width: 100%;

ui/index.jsp

@@ -659,8 +659,7 @@ under the License.
             <div ui-custom="publicTrafficIPRange"></div>
           </div>
           <!-- Step 3.3: Add pod -->
-          <div class="add-pod" zone-wizard-form="pod"
-               zone-wizard-step-id="addPod">
+          <div class="add-pod" zone-wizard-step-id="addPod">
             <ul class="subnav">
               <li class="conditional netscaler physical-network"><fmt:message key="label.netScaler"/></li>
               <li class="public-network"><fmt:message key="label.public.traffic"/></li>
@@ -671,9 +670,7 @@ under the License.
             <div class="info-desc">
               <fmt:message key="message.add.pod.during.zone.creation"/>
             </div>
-            <div class="content input-area">
-              <div class="select-container"></div>
-            </div>
+            <div ui-custom="podIPRange"></div>
           </div>
           <!-- Step 3.4: Configure guest traffic -->
           <div class="setup-guest-traffic"
@@ -1659,6 +1656,7 @@ under the License.
     <script type="text/javascript" src="scripts/events.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/regions.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/regions.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/ui-custom/podEdit.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/ipRules.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/ui-custom/securityRules.js?t=<%=now%>"></script>

ui/scripts/ui-custom/podEdit.js

@@ -0,0 +1,66 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+(function(cloudStack, $) {
+  cloudStack.uiCustom.podEdit = function(args) {
+    var $podEdit = $('<div></div>').addClass('pod-edit');
+    var multiEditData = [];
+    var totalIndex = 0;
+    var form = cloudStack.dialog.createForm({
+      noDialog: true,
+      desc: '',
+      form: {
+        desc: '',
+        fields: args.form.fields
+      }
+    });
+    var $multi = $('<div></div>').multiEdit($.extend(true, {}, args.multiEdit, {
+      context: args.context,
+      noSelect: true,
+      add: {
+        label: 'label.add',
+        action: function(args) {
+          multiEditData.push($.extend(args.data, {
+            index: totalIndex
+          }));
+
+          totalIndex++;
+          args.response.success();
+        }
+      },
+      actions: {
+        destroy: {
+          label: 'label.remove.rule',
+          action: function(args) {
+            multiEditData = $.grep(multiEditData, function(item) {
+              return item.index != args.context.multiRule[0].index;
+            });
+            args.response.success();
+          }
+        }
+      },
+      dataProvider: function(args) {
+        args.response.success({
+          data: multiEditData
+        });
+      }
+    }));
+
+    $podEdit.append(form.$formContainer, $multi);
+
+    return $podEdit;
+  };
+}(window.cloudStack, window.jQuery));

ui/scripts/zoneWizard.js

@@ -121,6 +121,31 @@
     },
 
     customUI: {
+      podIPRange: function(args) {
+        return cloudStack.uiCustom.podEdit({
+          form: {
+            fields: {
+              name: {
+                label: 'label.name',
+                validation: { required: true },
+                desc: 'message.tooltip.pod.name'
+              }
+            }
+          },
+          multiEdit: {
+            noSelect: true,
+            fields: {
+              'gateway': { edit: true, label: 'label.gateway' },
+              'netmask': { edit: true, label: 'label.netmask' },
+              'vlanid': { edit: true, label: 'label.vlan', isOptional: true },
+              'startip': { edit: true, label: 'label.start.IP' },
+              'endip': { edit: true, label: 'label.end.IP' },
+              'add-rule': { label: 'label.add', addButton: true }
+            }
+          }
+        });
+      },
+
       publicTrafficIPRange: function(args) {
         var multiEditData = [];
         var totalIndex = 0;