<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>환경설정</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/preference.css">
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/common.js"></script>
</head>
<body class="container">
    <div class="wrap">
        <div class="top-bar">환경설정</div>
        <div class="body-wrap">
            <div class="title">상태정보 갱신 주기 설정</div>
            <div class="container-1">
                <label>상태정보 갱신주기 : </label><input type="number" id="state_cycle_sec"> 초
            </div>
            <div class="container-2">
                <div class="title">제공정보 설정</div>
                <div class="table-box">
                    <table>
                        <colgroup>
                            <col width="2%">
                            <col width="17%">
                            <col width="30%">
                            <col width="17%">
                            <col width="17%">
                            <col width="17%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th></th>
                                <th>지역 ID</th>
                                <th>지역교통정보센터</th>
                                <th>소통정보</th>
                                <th>돌발정보</th>
                                <th>통제정보</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr onclick="rowClick(this)">
                                <td><input checked type="checkbox"onchange="checkEvent(this)"></td>
                                <td>L01</td>
                                <td>서울교통정보센터</td>
                                <td><input id="L01_traffic" type="checkbox"></td>
                                <td><input id="L01_occur" type="checkbox"></td>
                                <td><input id="L01_control" type="checkbox"></td>
                            </tr>
                            <tr onclick="rowClick(this)">
                                <td><input checked type="checkbox"onchange="checkEvent(this)"></td>
                                <td>L02</td>
                                <td>인천교통정보센터</td>
                                <td><input id="L02_traffic" type="checkbox"></td>
                                <td><input id="L02_occur" type="checkbox"></td>
                                <td><input id="L02_control" type="checkbox"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="btn-box">
                    <div class="btn save-btn"><img src="/static/image/check-lg.svg" width="15" height="15" alt="확인 이미지">확인</div>
                    <div class="btn cancel-btn"><img src="/static/image/x-lg.svg" width="15" height="15" alt="취소 이미지">취소</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    /**
     * TODO Have Row Click After Event ??
     * Table Row Click
     * @param el this
     */
    function rowClick(el) {
        if ($('tr.on')[0] === el) return;
        $('tbody tr td:nth-child(1) input[type="checkbox"]:checked').prop('checked', false);
        $(el).children().eq(0).find('input[type="checkbox"]').prop('checked', true).trigger('change');
        columns.forEach((column, idx)=>{
            let text = $(el).children().eq((Number(idx) + 2)).text();
            if (numberColumn.includes(column)) {
                if (isNaN(Number(text))) {
                    text = '';
                }
            }
            $('#ip_' + column).val(text);
        })
    }
</script>