reghao
/
oss


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>

<body>
<div class="layui-form timo-compile">
    <form th:action="@{/api/app/config/app}">
        <div class="timo-detail-title">基础配置</div>
        <table class="layui-table timo-detail-table">
            <tbody>
            <tr>
                <th>
                    <label class="layui-form-label required">应用 ID<i id="id_tips" class="fa fa-question-circle"></i></label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <label>
                                <input class="layui-input" type="text" name="appId" placeholder="请输入应用 ID" required>
                            </label>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label required">应用名</label>
                </th>
                <td >
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="appName" placeholder="请输入应用名" required>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label class="layui-form-label required">应用类型</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="appType">
                                <option th:each="item : ${appTypes}" th:value="${item.key}">[[${item.value}]]</option>
                            </select>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label required">所属环境</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="env">
                                <option th:each="item : ${environments}" th:value="${item.key}">[[${item.value}]]</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label class="layui-form-label required">应用仓库</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="appRepo"  placeholder="请输入应用仓库" required>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label required">仓库分支</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="repoBranch"  placeholder="请输入仓库分支" required>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label class="layui-form-label">应用路径<i id="path_tips" class="fa fa-question-circle"></i></label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="appRootPath"  placeholder="多模块项目必须填写" required>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label">监听端口<i id="port_tips" class="fa fa-question-circle"></i></label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="bindPorts" placeholder="没有监听端口则不填">
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="timo-detail-title">构建配置</div>
        <table class="layui-table timo-detail-table">
            <tbody>
            <tr>
                <th>
                    <label class="layui-form-label required">仓库认证</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="repoAuthConfig">
                                <option th:each="item : ${repoAuths}" th:value="${item.key}" th:selected="${app?.repoAuthConfig?.name} eq ${item.key}">[[${item.value}]]</option>
                            </select>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label required">编译工具</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="compilerConfig">
                                <option th:each="item : ${compilers}" th:value="${item.key}" th:selected="${app?.compilerConfig?.name} eq ${item.key}">[[${item.value}]]</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label class="layui-form-label required">打包工具</label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="packerConfig">
                                <option th:each="item : ${packers}" th:value="${item.key}" th:selected="${app?.packerConfig?.name} eq ${item.key}">[[${item.value}]]</option>
                            </select>
                        </div>
                    </div>
                </td>
                <th>
                    <label class="layui-form-label">Dockerfile<i id="dockerfile_tips" class="fa fa-question-circle"></i></label>
                </th>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <textarea class="layui-textarea" name="dockerfile" placeholder="打包类型是 docker 时必须填写" th:text="${app?.dockerfile}"></textarea>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>

<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $("#id_tips").hover(function () {
            var tips = layer.tips('应用 ID 由用户自己定义, 且保证全局唯一<br />', '#id_tips',{
                tips: [1, '#555555']
            });
            sleep(1000);
            layer.close(tips);
        })

        $("#path_tips").hover(function () {
            var tips = layer.tips('多模块项目必须设置当前模块在项目中的相对路径<br/>', '#path_tips',{
                tips: [1, '#555555']
            });
            sleep(1000);
            layer.close(tips);
        })

        $("#port_tips").hover(function () {
            var tips = layer.tips('应用监听的端口, 多个端口使用英文 , 分隔, 没有端口则不需要填写<br />', '#port_tips',{
                tips: [1, '#555555']
            });
            sleep(1000);
            layer.close(tips);
        })

        $("#dockerfile_tips").hover(function () {
            var tips = layer.tips('采用 docker 打包的应用必须填写 dockerfile 的内容<br />', '#dockerfile_tips',{
                tips: [1, '#555555']
            });
            sleep(1000);
            layer.close(tips);
        })
    })
</script>
</body>
</html>