<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>

<div class="form-group">
    <label for="serviceName" class="col-sm-2 control-label"><span style="color: red;">*</span>服务名称</label>
    <div class="col-sm-7">
        <input type="text" onblur="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
               placeholder="只能输入英文！" id="serviceName" name="serviceName" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="publishName" class="col-sm-2 control-label"><span style="color: red;">*</span>发布名称</label>
    <div class="col-sm-7">
        <input type="text" onblur="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
               placeholder="只能输入英文！"  id="publishName" name="publishName" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="replicas" class="col-sm-2 control-label"><span style="color: red;">*</span>实例数量</label>
    <div class="col-sm-7">
        <input type="text" id="replicas" name="replicas" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="turbineCluster" class="col-sm-2 control-label"><span style="color: red;">*</span>监控集群</label>
    <div class="col-sm-7">
        <input type="text" id="turbineCluster" name="turbineCluster" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="contextPath" class="col-sm-2 control-label"><span style="color: red;">*</span>服务路径</label>
    <div class="col-sm-7">
        <input type="text" id="contextPath" name="contextPath" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="serviceAuth" class="col-sm-2 control-label">服务权限</label>
    <div class="col-md-7 col-sm-7">
        <select id="serviceAuth" name="serviceAuth" class="form-control">
            <option value=0>对内</option>
            <option value=1 selected>对外</option>
        </select>
    </div>
    <span class="field-validation-valid help-block"></span>
</div>

<div class="form-group">
    <label for="cpuLimit" class="col-sm-2 control-label"><span style="color: red;">*</span>CPU限制</label>
    <div class="col-md-7 col-sm-7">
        <div class="input-group">
            <input type="text" id="cpuLimit" name="cpuLimit" class="form-control"/>
            <div class="input-group-btn">
                <select style="width: 100px" class="form-control">
                    <option value="兆赫兹">兆赫兹</option>
                    <option value="核" selected>核</option>
                </select>
            </div>
        </div>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="memLimit" class="col-sm-2 control-label"><span style="color: red;">*</span>内存限制</label>
    <div class="col-md-7 col-sm-7">
        <div class="input-group">
            <input type="text" id="memLimit" name="memLimit" class="form-control"/>
            <div class="input-group-btn">
                <select style="width: 100px" class="form-control">
                    <option value="Mi">Mi</option>
                    <option value="Gi" selected>Gi</option>
                </select>
            </div>
        </div>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="containerPort" class="col-sm-2 control-label"><span style="color: red;">*</span>容器端口</label>
    <div class="col-sm-7">
        <input type="text" id="containerPort" name="containerPort" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="hostPort" class="col-sm-2 control-label"><span style="color: red;">*</span>宿主机端口</label>
    <div class="col-sm-7">
        <input type="text" id="hostPort" name="hostPort" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="servicePort" class="col-sm-2 control-label"><span style="color: red;">*</span>服务端口</label>
    <div class="col-sm-7">
        <input type="text" id="servicePort" name="servicePort" class="form-control"/>
        <span class="field-validation-valid help-block"></span>
    </div>
</div>

<div class="form-group">
    <label for="loadBalance" class="col-sm-2 control-label">负载均衡</label>
    <div class="col-sm-7">
        <div class="checkbox">
            <label><input id="loadBalance" name="loadBalance" type="checkbox" value="1">启用负载均衡</label>
        </div>
    </div>
</div>

<div class="form-group">
    <table id="serviceInput" name="serviceInput" style="width: 70%;margin-left:10%"
           class="table table-hover  table-condensed table-bordered " align="center">
        <thead>
        <tr>
            <th>卷名称</th>
            <th>挂载路径</th>
            <th>宿主机路径</th>
            <th width="20%">操作</th>
        </tr>
        </thead>
    </table>
    <button id="btnServiceAdd" type="button" class="btn btn-sm btn-primary btn-position" style="margin-right:20%">
        <i class="fa fa-plus"></i>添加
    </button>
</div>

<script type="text/javascript">
    var s = 0;
    $("#btnServiceAdd").click(function () {
        var tables = $('#serviceInput');
        var addtr = $("<tr>" +
            "<td><input type='text' id='volume_name_"+s+"' name='volumes["+s+"].name' style='width: 100%'/></td>" +
            "<td><input type='text' id='volume_mountPath_"+s+"' name='volumes["+s+"].mountPath' style='width: 100%'/></td>" +
            "<td><input type='text' id='volume_hostPath_"+s+"' name='volumes["+s+"].hostPath' style='width: 100%'/></td>" +
            "<td><a onclick='deleteTrRow(this);'>&nbsp;删除</a></td>" +
            "</tr>");
        addtr.appendTo(tables);
        s++;
    });

    function deleteTrRow(tr) {
        //多一个parent就代表向前一个标签,
        //本删除范围为<td><tr>两个标签,即向前两个parent
        //如果多一个parent就会删除整个table
        $(tr).parent().parent().remove();
    }
</script>




