<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <th:block th:include="/include/highchart.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/admin-main.css}">

</head>
<body id="body">
<th:block th:include="/include/admin-header.html"></th:block>
<div class="mainWrap">
    <div class="main">
        <div class="top">
            <div>
                <div class="sub-title" th:onclick="movePath('/phits/notice-list')">공지사항</div>
                <div th:class="${notice == null || notice.size() == 0 ? 'empty-content' : 'content'}">
                    <div th:class="notice" th:onclick="moveNoticeView([[${item.getBoardNo()}]], true)" class="notice-list" th:each="item, i:${notice}">
                        <div th:title="${item.getBSubject()}" th:text="${item.getBSubject()}"></div>
                        <span th:text="${item.getRegDate()}"></span>
                    </div>
                    <div th:if="${notice == null || notice.size() == 0}">
                        데이터 없음
                    </div>
                </div>
            </div>
            <div>
                <div class="sub-title" th:onclick="movePath('/phits/popup-list')">팝업공지</div>
                <div th:class="${popup == null || popup.size() == 0 ? 'empty-content' : 'content'}">
                    <div th:class="popup" th:onclick="movePath([['/phits/popup-view/'+${item.getPopupid()}]])" class="notice-list" th:each="item, i:${popup}">
                        <div th:title="${item.getTitle()}" th:text="${item.getTitle()}"></div>
                        <span th:text="${item.getPostFrom() + '~' + item.getPostTo()}"></span>
                    </div>
                    <div class="empty-content" th:if="${popup == null || popup.size() == 0}">
                        데이터 없음
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="sub-title">접속자 통계</div>
            <div id="chart"></div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>

</body>

<script th:inline="javascript">

    function getConnStatistics() {
        const fromDate = dateFormatter(new Date(new Date().setDate(new Date().getDate() - 7)));
        const toDate = dateFormatter(new Date());
        const param = {
            fromDate : fromDate,
            toDate : toDate,
        }
        getDataAsync("/api/common/conn-statistics", "POST", param, null, (jsonData)=>{
            if (jsonData && jsonData.length > 0) {
                drawChart(jsonData);
            }
        }, null);
    }

    getConnStatistics();
    setInterval(getConnStatistics, 5 * 60 * 1000);

    function drawChart(jsonData) {
        let categories = [];
        let data = [];
        jsonData.forEach((obj)=>{
            categories.push(obj.conn_dt);
            data.push(obj.conn_cnt);
        })
        Highcharts.chart('chart', {
            chart: {
                type: 'column'
            },
            title: {
                text: '',
            },
            xAxis: {
                categories: categories,
                crosshair: true,
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                tickInterval: 5,
            },
            tooltip: {
                valueSuffix: ' 명'
            },
            legend: {
                layout: 'vertical',
                align: 'center',
                verticalAlign: 'top',
                floating: false,
                visible : false,
                borderWidth: 0,
                shadow: false,
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [
                {
                    name: '일별접속자수',
                    data: data
                },
            ],
            exporting: {
                enabled: false,
            },
            credits: {
                enabled: false
            },
        });
    }

</script>

</html>