project_form.hbs 16.1 KB
<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li>项目信息</li>
            </ul>
            <h4>项目信息</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="panel panel-default">
    <div class="panel-heading">
        <p>请配置项目信息.</p>
    </div>
    <form id="project-form" action="/projects/save" method="POST" data-pjax>
        <input type="hidden" name="_id" value="{{project._id}}">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="lg-title mb10">基本信息</h5>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Cloud</label>
                        <div class="radio">
                            <label style="width: 30%"><input type="radio" {{#equals project.cloud 'aws'}}checked=""{{/equals}} value="aws"
                                                         name="cloud"> AWS</label>
                            <label style="width: 30%"><input type="radio" {{#equals project.cloud 'qcloud'}}checked=""{{/equals}} value="qcloud"
                                          name="cloud"> QCloud</label>
                        </div>
                    </div>
                    <!-- form-group -->
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label">Name(不能修改,须和gitlab中的名称一致)</label>
                        <input type="text" name="name" value="{{project.name}}" class="form-control"
                               placeholder="项目名称, 须和gitlab中的名称一致">
                    </div>
                    <!-- form-group -->
                </div>
                <!-- col-sm-6 -->
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        <input type="text" name="subname" value="{{project.subname}}" class="form-control"
                               placeholder="项目名称,ex: 前端wap版">
                    </div>
                    <!-- form-group -->
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="control-label">项目类型</label>
                        <div class="radio">
                            <label style="width: 30%"><input type="radio" {{#equals project.type 'node'}}checked=""{{/equals}} value="node"
                                                         name="type"> NODE</label>
                            <label style="width: 30%"><input type="radio" {{#equals project.type 'php'}}checked=""{{/equals}} value="php"
                                          name="type"> PHP</label>
                        </div>
                    </div>
                    <!-- form-group -->
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Repository Url</label>
                        <input type="text" name="gitlab" value="{{project.gitlab}}" class="form-control"
                               placeholder="Gitlab 地址">
                    </div>
                    <!-- form-group -->
                </div>
                <!-- col-sm-6 -->
            </div>
            <hr />
            <!-- row -->
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="lg-title mb10">脚本配置</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="text-align: right;padding-top: 7px;">构建脚本:</label>
                        <div class="col-lg-10">
                            <input type="text" name="scripts[build]" value="{{project.scripts.build}}"
                                   class="form-control" placeholder="ex: gulp build && npm install">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="text-align: right;padding-top: 7px;">启动脚本:</label>
                        <div class="col-lg-10">
                            <input type="text" name="scripts[start]" value="{{project.scripts.start}}"
                                   class="form-control" placeholder="ex: pm2 startOrReload process.json">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="lg-title mb10">其他选项</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-lg-2 control-label" style="text-align: right;padding-top: 7px;">忽略文件:</label>
                        <div class="col-lg-10">
                            <input type="text" name="ignore" value="{{project.ignore}}"
                                   class="form-control" placeholder="多个文件夹用;分割">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="lg-title mb10">环境配置</h5>
                    <ul class="nav nav-tabs nav-primary">
                        <li class="active"><a href="#production4" data-toggle="tab"><strong>线上环境</strong></a></li>
                        <li><a href="#preview4" data-toggle="tab"><strong>灰度环境</strong></a></li>
                        <li><a href="#test4" data-toggle="tab"><strong>测试环境</strong></a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tab-content-primary mb30">
                        <div class="tab-pane active" id="production4">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">目标服务器</label>
                                        <div class="col-sm-12">
                                            {{#each servers.production}}
                                                <div class="checkbox inline-block mr10"><label><input type="checkbox"
                                                                                                      name="deploy[production][target]"
                                                                                                      value="{{host}}"
                                                                                                      {{#if checked}}checked=""{{/if}}> {{host}}
                                                </label></div>
                                            {{/each}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">对应Git分支</label>
                                        <input type="text" value="{{project.deploy.production.branchName}}"
                                               name="deploy[production][branchName]" placeholder="master"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">远程工作目录</label>
                                        <input type="text" value="{{project.deploy.production.workingDir}}"
                                               name="deploy[production][testUrl]"
                                               placeholder="ex: http://{host}:8080/test" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div><!-- tab-pane -->
                        <div class="tab-pane" id="preview4">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">目标服务器</label>
                                        <div class="col-sm-12">
                                            {{#each servers.preview}}
                                                <div class="checkbox inline-block mr10">
                                                    <label>
                                                        <input type="checkbox"
                                                               name="deploy[preview][target][{{@index}}]"
                                                               value="{{host}}"
                                                               {{#if checked}}checked=""{{/if}}> {{host}}
                                                    </label>
                                                </div>
                                            {{/each}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">对应Git分支</label>
                                        <input type="text" value="{{project.deploy.preview.branchName}}"
                                               name="deploy[preview][branchName]" value="" placeholder="master"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">远程工作目录</label>
                                        <input type="text" value="{{project.deploy.preview.workingDir}}"
                                               name="deploy[preview][testUrl]" placeholder="ex: http://{host}:8080/test"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div><!-- tab-pane -->
                        <div class="tab-pane" id="test4">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">目标服务器</label>
                                        <div class="col-sm-12">
                                            {{#each servers.test}}
                                                <div class="checkbox inline-block mr10">
                                                    <label>
                                                        <input type="checkbox"
                                                               name="deploy[test][target][{{@index}}]"
                                                               value="{{host}}"
                                                               {{#if checked}}checked=""{{/if}}> {{host}}
                                                    </label>
                                                </div>
                                            {{/each}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">对应Git分支</label>
                                        <input type="text" value="{{project.deploy.test.branchName}}"
                                               name="deploy[test][branchName]" value="" placeholder="master"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">远程工作目录</label>
                                        <input type="text" value="{{project.deploy.test.workingDir}}"
                                               name="deploy[test][testUrl]" placeholder="ex: http://{host}:8080/test"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div><!-- tab-pane -->
                    </div><!-- tab-content -->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h5 class="lg-title mb10">监控配置</h5>
                    <ul class="nav nav-tabs nav-primary">
                        <li class="active"><a href="#influx-info" data-toggle="tab"><strong>InfluxDB</strong></a></li>
                    </ul>
                    <div class="tab-content tab-content-primary mb30">
                        <div class="tab-pane active" id="influx-info">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="control-label">Influxdb Measurement</label>
                                        <input type="text" name="monitor[influx][name]" value="{{project.monitor.influx.name}}"
                                               class="form-control" placeholder="请输入项目日志配置的measurement">
                                    </div>
                                </div>
                            </div>
                        </div><!-- tab-pane -->
                    </div>
                </div>
            </div>
            <!-- row -->
        </div>
        <!-- panel-body -->
        <div class="panel-footer">
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-default ml20 go-back">取消</button>
        </div>
    </form>
    <!-- panel-footer -->
</div>

<script>
    $(document).on('ready pjax:success', function() {
        $('#project-form').ajaxForm(function() {
            location.href = '/projects';
        });
        $('.go-back').click(function() {
            window.history.go(-1);
        });
    });

</script>