
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Combitrip API - Places: Basic Example</title>
    <style>
        .ac-container {
            padding: 10px 10px 10px 20px;
            background: rgba(255, 255, 255, 0.5);
            position: absolute;
            z-index: 1000;
            left: 50px;
            top: 15px;
            width: 300px;
            border-radius: 6px;
        }

        .ac-container input {
            display: block;
            width: 100%;
            padding: 5px 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .ac-container label {
            position: absolute;
            left: 5px;
            line-height: 28px;
        }

        #ac-origin {
            margin-bottom: 5px;
        }

    </style>
</head>
<body>

<div>
    <label>Apikey: </label>
    <input type="text" id="apikey" style="width:250px;" value="32a61ca69e22441db052df11ab8ba02b"/>
</div>

<br/>
<div>
    <label>Session Token : </label>
    <input type="text" id="stoken" style="width:280px;"/>
    <button type="button" id="refresh-token">Refresh Token</button>
    <span id="lifetime"></span>
</div>

<br/>

<div>
    <label>Query: </label>
    <input type="text" id="query"/>
    <button type="button" id="do-request">Request</button>
</div>

<br/>

<div id="output-container" style="display: none">
    <label>Output: </label>
    <pre id="output" style="padding:10px;background: #f1f1f1;max-width: 600px;border-radius: 6px;max-height: 400px;overflow: auto;"></pre>
</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script>

    var intervalId;

    function genToken() {
        return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = parseFloat('0.' + Math.random().toString().replace('0.', '') + new Date().getTime()) * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    function startTimer(duration, $span) {
        var timer = duration, minutes, seconds;

        var _display = function(){
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $span.html(minutes + ":" + seconds);

            if (--timer < 0) {
                $span.html('00:00');
                clearInterval(intervalId);
            }
        }

        intervalId = setInterval(function () {
            _display();
        }, 1000);

        _display();
    }

    function refreshToken() {
        var token = genToken();
        $("#stoken").val(token);
        clearInterval(intervalId);
        $("#lifetime").html('');
    }

    $(function () {

        $("#do-request").click(function () {
            var apikey = $("#apikey").val(), stoken = $("#stoken").val(), query = $("#query").val();

            if (!stoken.length) {
                refreshToken();
                stoken = $("#stoken").val();
            }

            if (!query.length) {
                alert("The query is empty!");
                return;
            }

            $.ajax({
                url: "https://www.combitrip.org/api/public/geocomplete",
                data: {
                    key: apikey,
                    sToken: stoken,
                    q: query
                },
                success: function (response) {
                    var $lifetime = $("#lifetime");
                    startTimer((3 * 60), $lifetime);
                    $("#output-container").show();
                    $("#output").html(JSON.stringify(response, null, 2));
                }
            });

        });

        $("#refresh-token").click(function () {
            refreshToken();
        });

    });

</script>

</body>