falcon-ui/app/html/process/processFormInputsAndOutputsStepTpl.html

<!--
/**
 * 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.
 */
-->
<form name="processForm" novalidate>
  <div class="col-sm-24">
    <div ng-if="process.inputs.length === 0">
      <label class="mt15">INPUTS</label>
    </div>

    <div ng-repeat="input in process.inputs">
      <div><label class="mt15">INPUT</label></div>

      <div class="col-xs-24 detailsBox processCluster">

          <div class="row">
            <div class="col-xs-24">
              <label class="light">Name<mandatory-field></mandatory-field></label>
              <input type="text" class="form-control"
                     ng-class="{firstInput: $index === 0}"
                     validation-message="{{validations.messages.name}}"
                     ng-model="input.name"
                     ng-required="true"
                     ng-maxlength="39"
                     ng-pattern="validations.patterns.inputName"/>
            </div>
          </div>

        <div class="row">
          <div class="col-xs-24">
            <label class="light">Feed<mandatory-field></mandatory-field></label>

            <select ng-model="input.feed" ng-required="true" class="col-sm-24 form-control padding0"
                    validation-message="{{validations.messages.feed}}">
              <option value="" disabled selected style='display:none;'>-Select feed-</option>
              <option ng-repeat="feedItem in feedsList">{{feedItem.name}}</option>
            </select>
          </div>
        </div>

          <div><label class="mt15">INSTANCE</label></div>

          <div class="row">
            <div class="col-xs-12">
              <label class="light">Start<mandatory-field></mandatory-field></label>

              <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
                     ng-model="input.start"
                     ng-required="true"
                     ng-maxlength="39"/>

            </div>
            <div class="col-xs-12">
              <label class="light">End<mandatory-field></mandatory-field></label>

              <input type="text" class="form-control {{invalidEndDate}}" validation-message="{{validations.messages.value}}"
                     ng-model="input.end"
                     ng-required="true"
                     ng-maxlength="100"
                     on-blur="validateStartEndDate"/>
              <label ng-show="invalidEndDate" class="custom-danger nameValidationMessage">End should be equal or greater than Start</label>
            </div>

          </div>
          <div class="col-xs-24 mt10">
              <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeInput($index)">
                <span class="entypo minus"></span> delete
              </button>
          </div>
      </div>
    </div>

    <button type="button" class="btn btn-default btn-xs mt10 mb10 addInputButton" ng-click="addInput()">
      <span class="entypo plus"></span> add input
    </button>

    <div ng-if="process.outputs.length === 0">
      <label class="mt15">OUTPUTS</label>
    </div>
    <div ng-repeat="output in process.outputs">
      <div><label class="mt15">OUTPUT</label></div>

      <div class="col-xs-24 detailsBox processCluster">
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Name<mandatory-field></mandatory-field></label>
            <input type="text"
                   ng-class="{firstOutput: $index === 0}"
                   class="form-control"
                   validation-message="{{validations.messages.name}}"
                   ng-model="output.name"
                   ng-required="true"
                   ng-maxlength="39"
                   ng-pattern="validations.patterns.id"/>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Feed<mandatory-field></mandatory-field></label>
            <select ng-model="output.feed" ng-required="true" class="col-sm-24 form-control padding0"
                    validation-message="{{validations.messages.feed}}" >
              <option value="" disabled selected style='display:none;'>-Select feed-</option>
              <option ng-repeat="feedItem in feedsList">{{feedItem.name}}</option>
            </select>
          </div>
        </div>

        <div><label class="mt15">INSTANCE</label></div>
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Instance<mandatory-field></mandatory-field></label>

            <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
                   ng-model="output.outputInstance"
                   ng-required="true"
                   ng-maxlength="39"/>
          </div>
        </div>
        <div class="row mt10">
          <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeOutput($index)">
            <span class="entypo minus"></span> delete
          </button>
        </div>

      </div>
    </div>

    <button type="button" class="btn btn-default btn-xs mb10 mt10" ng-click="addOutput()">
      <span class="entypo plus"></span> add output
    </button>
  </div>
  <div class="col-xs-24 pb15px mt35">
    <button class="btn prevBtn" type="button"
       ng-click="goBack()"
       ng-disabled="buttonSpinners.backShow">
    PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
    </button>
    <div class="pull-right">
        <a class="btn cnclBtn" ui-sref="main">
            CANCEL
        </a>
        <button class="btn nextBtn"
           ng-disabled="invalidEndDate || buttonSpinners.show"
           ng-click="goNext(processForm.$invalid)" scroll-to-error>
        NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
        </button>
    </div>
  </div>
</form>