<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>Echarts Demo</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.css}" rel="stylesheet"/>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 100px;
            overflow: auto;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
        .send-msg {
            color: #888
        }
    </style>
</head>
<body>
<h1>Netty-socketio Demo Chat</h1>
<br/>
<div id="console" class="well"></div>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width:860px; height:470px;"></div>

<form class="well form-inline" onsubmit="return false;">
    <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
    <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
    <button type="button" onClick="sendSavePic()" class="btn">Save Picture</button>
</form>

<script th:src="@{/static/js/jquery-1.10.1.min.js}"></script>
<script th:src="@{/static/js/socket.io.js}"></script>
<script th:src="@{/static/js/moment.min.js}"></script>
<script th:src="@{/static/js/echarts.common.min.js}" charset="utf-8"></script>

<script>
    var socket;
    var myChart;

    function sendDisconnect() {
        socket.disconnect();
    }

    function output(message) {
        var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
        var element = $("<div>" + currentTime + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function sendSavePic() {
        socket.emit('savePic', myChart.getDataURL(), function (result) {
            output('<span class="connect-msg">' + result + '</span>');
        });
    }

    function initPage() {
        console.log('this is index.html log...');

        var userName = 'user' + Math.floor((Math.random() * 1000) + 1);
        socket = io.connect('http://localhost:9076');

        console.log('socket = ' + socket);

        socket.on('connect', function () {
            console.log('connect successful');
            output('<span class="connect-msg">Client has connected to the server!</span>');
        });

        socket.on('ping', function () {
            console.log('ping successful');
            output('<span class="connect-msg">Client Ping msg to the server!</span>');
        });

        socket.on('pong', function () {
            console.log('pong successful');
            output('<span class="connect-msg">Client Pong msg from the server!</span>');
        });

        socket.on('disconnect', function () {
            console.log('disconnect successful');
            output('<span class="disconnect-msg">The client has disconnected!</span>');
        });

        socket.on('notify', function (jsonBody) {
            console.log('get notify message from server...');
            var msg = JSON.parse(jsonBody);
            output('<span class="connect-msg">接收到notify消息, 去给我保存图片</span>');
            var option = msg.option;
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(JSON.parse(option));
            // 渲染完成之后再给服务器发送保存图片消息
            sendSavePic();
        });

        /**************************************分割线***********************************/
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main'));
        console.log('index initPage finished!')
    }

    $(function () {
        initPage();
    });

</script>

</body>

</html>
