doh/index.htm at master · JLospinoso/doh · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bottleship Web Client</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.11.23/css/jquery.terminal.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.11.23/js/jquery.terminal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    <style>
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin-bottom: 60px;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
        }
        .text-center {
            text-align: center;
        }
		.full {
			background: url('bg.jpg') no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			background-size: cover;
			-o-background-size: cover;
		}
		.jumbotron {
		   background: rgb(236, 238, 239); /* This is for ie8 and below */
		   background: rgba(236, 238, 239, 0.75);
		}
    </style>

    <script>
    $(document).ready(function() {
        let socket;
        const setUp = function(url) {
            socket = new WebSocket(url);
            socket.onopen = function(event) {
                const alert = $("#connection-status");
                alert.text("You are connected to " + event.target.url);
                alert.removeClass("alert-danger");
                alert.addClass("alert-success");
            };
            socket.onclose = function(event) {
                const alert = $("#connection-status");
                alert.text("You are disconnected from " + event.target.url);
                alert.removeClass("alert-success");
                alert.addClass("alert-danger");
                printToTerminal(`Disconnected: ${event.reason}`)
            };
            socket.onmessage = function(event) {
                printToTerminal(`${event.origin}: ${event.data}`);
            };
        };
        let url = "ws://localhost:8000";
        let printToTerminal = function(msg) { };
        const send = function(msg) {
            socket.send(msg);
        };

        $('#terminal').terminal(function(command, term) {
            if (command !== '') {
                send(command)
            }
            printToTerminal = function(x) {
                term.echo(x);
            };
			$('html, body').animate({scrollTop: $(document).height()}, 'slow');
        }, {
            greetings: 'Bottleship WebClient',
            name: 'bottleship_terminal',
            prompt: '# '
        });
        const urlText = $("#urltext");
        urlText.val(url);
        urlText.change(function() {
            setUp($("#urltext").val());
        });
        setUp(url);
        $("#refresh").on('click', function(event) {
            setUp($("#urltext").val());
        });
        $("#disconnect").on('click', function(event) {
            socket.close();
        });
    });
    </script>
</head>
<body class="full">
<div class="container">
    <div class="jumbotron">
        <h1 class="display-3 text-center">Bottleship Web Client</h1>
        <p class="lead text-center">Use this web client to explore the Bottleship API.</p>
    </div>
    <div class="container">
        <div class="col-sm-4"></div>
        <div class="row col-sm-4 text-center">
            <div class="row">
                <input id="urltext" type="text">
            </div>
            <div class="row">
                <button id="refresh" type="button" class="btn btn-primary">Refresh</button>
                <button id="disconnect" type="button" class="btn btn-warning">Disconnect</button>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-1"></div>
        <div id="terminal" class="col-sm-10"></div>
        <div class="col-sm-1"></div>
    </div>
</div>
<footer class="footer">
    <div id="connection-status" class="alert" role="alert"></div>
</footer>
</body>
</html>