<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="timo-table-wrap">
            <table class="layui-table timo-table">
                <thead>
                <tr>
                    <th class="sortable" data-field="machineIpv4">机器地址</th>
                    <th class="sortable" data-field="machineStatus">机器状态</th>
                    <th class="sortable" data-field="commitId">当前版本</th>
                    <th class="sortable" data-field="packagePath">包路径</th>
                    <th class="sortable" data-field="deployBy">部署用户</th>
                    <th class="sortable" data-field="deployTime">部署时间</th>
                    <th class="sortable" data-field="deployResult">部署结果</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${list}">
                    <td th:text="${item.machineIpv4}">机器地址</td>
                    <td class="machine-status" th:text="${item.machineStatus}">机器状态</td>
                    <td th:text="${item?.commitId}">当前版本</td>
                    <td th:text="${item?.packagePath}">包路径</td>
                    <td th:text="${item?.deployBy}">部署用户</td>
                    <td th:text="${item?.deployTime}">部署时间</td>
                    <td class="deploy-result" th:text="${item?.deployResult}">部署结果</td>
                    <td>
                        <a class="ajax-post"
                           th:href="@{'/api/app/bd/deploy/'+${buildLogId}+'/'+${item.machineId}}">部署</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</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">
    $(".deploy-result").each(function () {
        var text = $(this).text().trim()
        if (text === '尚未部署') {
            $(this).css("color", "#4169e1")
        } else if (text === '正在部署') {
            $(this).css("color", "#e3cf57")
        } else if (text === '部署成功') {
            $(this).css("color", "#009688")
        } else if (text === '部署失败') {
            $(this).css("color", "#ff0000")
        }
    })

    $(".machine-status").each(function () {
        var text = $(this).text().trim()
        if (text === 'Online') {
            $(this).css("color", "#009688")
        } else {
            $(this).css("color", "#ff0000")
        }
    })
</script>
</body>
</html>