dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
							<!DOCTYPE html>
<html class="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>配置终端</title>
</head>
<style>
    #qrcode {
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }

    .grid-hero {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .section {
        color: #fff;
    }

    .bg-grey {
        padding: 1rem;
    }

    .modal-container {
        width: 80%;
    }

    .input-section {
        overflow: hidden;
    }

    html {
        /*可以选其中一种背景色*/
        background-blend-mode: multiply;
        background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
        height: 100%;
    }

    body {
        background: transparent !important;
        height: 100%;
        position: relative;

    }

    body .btn.btn-primary {
        height: 4rem;
        background: rgba(16, 142, 233, 0.92);
        border-color: rgba(16, 142, 233, 96);
    }

    body .btn.btn-primary:hover, body .btn.btn-primary:active {
        background: rgba(16, 142, 233, 0.96);
        border-color: rgba(16, 142, 233, 1);
    }

    body .form-input {
        border-color: rgba(16, 142, 233, .1);
        height: 4rem;
    }

    body .form-input:focus {
        border-color: rgba(16, 142, 233, 1);
    }

    #connect {
        margin-top: 20px;
        padding: 0 40px;
    }

    .toast-msg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        padding: 10px 15px;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, .9);
        border-radius: 3px;
    }

    .toast-msg .toast-text {
        font-size: 14px
    }

</style>

<body>
<section class="section bg-grey">
    <section class="grid-hero container grid-480">
        <header class="text-center">
            <div id="qrcode" style="display: inline-block"></div>
            <p id="imei">IMEI</p>
        </header>

    </section>
</section>

<section class="section input-section">
    <section class="container grid-480">
        <header class="text-left mb-10"><h5 class="top-tips" style="margin-top: 0">配置终端接入一个无线网络</h5></header>
        <form class="main-form">
            <div class="form-group">
                <label class="form-label">让我连接到</label>
                <div class="input-group">
                    <input type="text" id="ssid" class="form-input" placeholder="无线网络名">
                    <button type="button" id="scanap" class="btn btn-primary input-group-btn">附近网络</button>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="input-pwd">网络密码</label>
                <input id="pwd" class="form-input" type="text" id="input-pwd" placeholder="无线网络密码（无密码请留空）">
            </div>

            <div class="form-group text-center ">
                <button type="button" id="connect" class="btn btn-primary ">连接网络</button>
            </div>

        </form>
    </section>
</section>

<div id="selectwifi" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">选择一个无线网络</div>
        </div>
        <div id="aplist" class="modal-body"></div>
    </div>
</div>

<script id="item-ap" type="text/html">
    <div class="chip hand text-ellipsis">
        <svg width="30px" height="20px" class="chip-icon">
            <path d="M15,20 L0.86,5.86 A20,20 0 0,1 29.14,5.86" fill="#d0d0d0"/>
            <path d="M15,20 L{0},{1} A{2},{2} 0 0,1 {3},{1}" fill="#666"/>
        </svg>
        <span class="chip-content">{4}</span>
    </div>
</script>

<link href="spectre.min.css" rel="stylesheet"/>
<script src="zepto.min.js"></script>
<script src="qrcode.min.js"></script>
<!--<script src="vconsole.min.js"></script>-->

<script>
    // new VConsole();

    function toast(e) {
        var t = ($("body").append('<div class=""></div>'), $(".toast")),
            n = '<div class="toast-msg"><div class="toast-text">' + e + "</div></div>";
        $("body").append(n), setTimeout(function () {
            t.remove(), $(".toast-msg").remove()
        }, 3000)
    }

    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/\{(\d+)\}/g
            , function (m, i) {
                return args[i];
            });
    }


    $(function () {
        $.get('../devInfo', function (resJson) {
            if (resJson.imei) {
                var imei = resJson.imei || "没有编号";
                $('#imei').text(imei);

                var qrcode = new QRCode("qrcode", {
                    text: imei,
                    width: 128,
                    height: 128,
                    colorDark: "#108EE9",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            }

        },'json');

        $('#connect').click(function () {
            var ssid = $('#ssid').val()
            if (!ssid) {
                toast('请选择要连接的网络！');
                return
            }

            $('#connect').addClass('loading').prop('disabled', true);

            $.get('../config?ssid={0}&pwd={1}'.format(ssid, $('#pwd').val())
                , function (resJson) {
                    var status = resJson.result || resJson.status
                    var tips
                    if (status) {
                        tips = '已经连接网络'
                        toast(tips)
                        $('.top-tips').text(tips).css('text-align', 'center')
                        $('.main-form').hide()
                    } else {
                        toast('连接失败，请确保输入正确')
                    }
                    $('#connect').removeClass('loading').prop('disabled', false);
                }, 'json');
        });

        $('#scanap').click(function () {
            $('#scanap').addClass('loading').prop('disabled', true);

            $.get('../scanap', function (resJson) {
                $('#scanap').removeClass('loading').prop('disabled', false);

                //resJson = JSON.parse(resJson);

                var template = $('#item-ap').html();
                var cos45, sin45 = cos45 = 0.70710678118655;
                var html = '';
                for (var i = 0; i < resJson.length; i++) {
                    var r = 0.3333 * parseInt(resJson[i]["rssi"]) + 33.3333;
                    r = r > 20 ? 20 : (r < 0 ? 0 : r)

                    html += template.format(
                        15 - r * cos45
                        , 20 - r * sin45
                        , r
                        , 15 + r * cos45
                        , resJson[i]["ssid"]
                    );
                }

                $('#aplist').html(html)
                $('#selectwifi').addClass('active');

                $(".modal-overlay").click(function () {
                    $('#selectwifi').removeClass('active');
                });
                $("#aplist div").click(function () {
                    $('#selectwifi').removeClass('active');

                    var ssid = $(this).children('.chip-content').html()
                    $('#ssid').val(ssid);
                });
            },'json');
        });
    })
</script>
</body>
</html>