diff --git a/index.css b/index.css index c3bb6eb..ae562e5 100644 --- a/index.css +++ b/index.css @@ -32,13 +32,13 @@ html, body { width: 100%; height: calc(100% - 155px); overflow: auto; - position: relative; +/*position: relative;*/ } .log #btn_clear_log { position: absolute; - top: 10px; - right: 10px; + top: 175px; + right: 35px; z-index: 1; } @@ -60,6 +60,7 @@ html, body { padding: 5px; font-size: 16px; line-height: 20px; + word-break: break-all; } .log .entry .publisher .timestamp { diff --git a/index.html b/index.html index f4b2b02..f6ff8e3 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,15 @@ - + + + - + + + @@ -60,7 +64,7 @@
- +
@@ -68,7 +72,15 @@ - +
Message Text
+ + + + + + + +
@@ -80,4 +92,4 @@ - \ No newline at end of file + diff --git a/index.js b/index.js index 5cd31fa..5f3056a 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,17 @@ $(document).ready(function() { + + function storageSet(key, obj) { + window.localStorage.setItem(key, JSON.stringify(obj)); + } + function storageGet(key) { + var obj = window.localStorage.getItem(key); + return obj ? JSON.parse(obj) : null; + } + + var send_commands = []; + var command_index = 0; + $("#btn_send_next").prop('disabled', true); + var ReadyState = { CONNECTING: 0, OPEN: 1, @@ -280,19 +293,95 @@ $(document).ready(function() { var updateCloseText = function() { $("#close_status_text").text(closeCodeToString($("#close_status").val())); - } + }; $("#btn_connect").on('click', function(event) { event.preventDefault(); connect($("#endpoint").val(), $("#protocols").val()); }); + $("#btn_url_save").on('click', function(event) { + storageSet("connection", { + ws_url: $("#endpoint").val(), + ws_protocols: $("#protocols").val(), + ws_reconnect: $("#reconnect")[0].checked + }); + }); + + $("#btn_url_restore").on('click', function(event) { + var res = storageGet("connection"); + if (res) { + $("#endpoint").val(res.ws_url); + $("#protocols").val(res.ws_protocols); + $("#reconnect")[0].checked = res.ws_reconnect; + } + }); + + function histUpdate() { + $("#btn_send_next").prop('disabled', !send_commands[command_index-1]); + $("#btn_send_prev").prop('disabled', !send_commands[command_index+1]); + $("#btn_send_index").val(command_index+""); + } + $("#btn_send").on('click', function(event) { event.preventDefault(); - sendText($("#message_text").val()); + send_commands = send_commands || []; + var msg = $("#message_text").val(); + if (msg != send_commands[command_index]) { + if (command_index == 0) { + send_commands.splice(0, send_commands.length - 9, msg); + } + else { + send_commands[command_index] = msg; + } + } + histUpdate(); + + sendText(msg); scrollLogToBottom(); }); + $("#btn_send_prev").on('click', function(event) { + command_index = send_commands[command_index+1] ? command_index+1 : command_index; + if (send_commands[command_index]) { + $("#message_text").val(send_commands[command_index]); + } + histUpdate(); + }); + + $("#btn_send_next").on('click', function(event) { + command_index = send_commands[command_index-1] ? command_index-1 : command_index; + if (send_commands[command_index]) { + $("#message_text").val(send_commands[command_index]); + } + histUpdate(); + }); + + $("#btn_send_save").on('click', function(event) { + storageSet("message", { + message_text: $("#message_text").val(), + message_hist: send_commands, + }); + }); + + $("#btn_send_restore").on('click', function(event) { + var res = storageGet("message"); + if (res) { + $("#message_text").val(res.message_text); + send_commands = res.message_hist || []; + } + }); + + $("#btn_send_format").on('click', function(event) { + var fmt; + try { + fmt = JSON.parse($("#message_text").val()); + } catch(e) {} + if (fmt) { + $("#message_text").val(JSON.stringify(fmt, null, 2)); + } + }); + $("#btn_close").on('click', function(event) { event.preventDefault(); close($("#close_status").val(), $("#close_reason").val()); diff --git a/manifest.json b/manifest.json index 9ef2844..b5ed429 100644 --- a/manifest.json +++ b/manifest.json @@ -16,4 +16,4 @@ "background":{ "scripts": [ "background.js" ] } -} \ No newline at end of file +}