From af9113fab9a18e8e1c5901078bab9fbb47151483 Mon Sep 17 00:00:00 2001 From: szdytom Date: Thu, 25 Mar 2021 16:49:18 +0800 Subject: [PATCH] [feature] improve frontend use my own prompt instead of the default one --- public/index.html | 13 ++++++-- public/script.js | 76 ++++++++++++++++++++++------------------------- public/style.css | 54 ++++++++++++++++++++++++++++++--- 3 files changed, 96 insertions(+), 47 deletions(-) diff --git a/public/index.html b/public/index.html index 52ae3d3..841fb48 100644 --- a/public/index.html +++ b/public/index.html @@ -9,16 +9,25 @@
- +

Enable auto scroll

-

Version: WS_1.2

+

Version: WS_2.0

Press Ctrl + Enter to send
+ diff --git a/public/script.js b/public/script.js index 8635f3f..b1d38aa 100644 --- a/public/script.js +++ b/public/script.js @@ -2,7 +2,9 @@ let username; let is_reconnection = false; let last_command = null; const server = `ws://${location.host}`; -const ws = init(); +let ws; + +init().then(x => ws = x).catch(err => console.log(err)); function clear_message() { $('#message').empty(); @@ -16,34 +18,6 @@ function format_time(time) { return `${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`; } -if (String.prototype.replaceAll === undefined) { - String.prototype.replaceAll = function(before, after) { - let res = ''; - let matched = 0; - for (let i = 0; i < this.length; i += 1) { - if (this[i] === before[matched]) { - matched += 1; - if (matched === before.length) { - res += after; - matched = 0; - } - } else { - for (let j = i - matched; j <= i; j += 1) { - res += this[j]; - } - matched = 0; - - } - } - - for (let i = this.length - matched; i < this.length; ++i) { - res += this[i]; - } - - return res; - }; -} - function write_message(data) { const message = data.msg; @@ -75,12 +49,15 @@ function write_message(data) { scroll_to_bottom(); } -function init() { +async function init() { + $('#prompt-data').on('keyup', (e) => { + if (e.key === 'Enter') { $('#comfirm-prompt').click(); } + }); + clear_message(); - login_name(); + await login_name(); const ws = new io(server); - console.log('ws: ', ws); ws.on('connect', () => { if (is_reconnection) { @@ -132,18 +109,36 @@ function init() { }); }); + $('#send').focus(); + return ws; } -function open_prompt(content, tilte) { - return window.prompt(content); +function open_prompt(tilte) { + $('#prompt-box-title-text').text(tilte); + $('#prompt-data').val(''); + $('#prompt-box').show('fast', () => { $('#prompt-data').focus(); }); + + let resolve_callback; + let res = new Promise((resolve) => { + resolve_callback = resolve; + }); + + $('#comfirm-prompt').one('click', () => { + if (resolve_callback) { + $('#prompt-box').hide('fast'); + resolve_callback($('#prompt-data').val()); + } + }); + + return res; } -function login_name() { - username = open_prompt('[Login] Input your name'); +async function login_name() { + username = await open_prompt('[Login] Input your name'); } -function send() { +async function send() { let data = $('#send').val(); if (data === '') { return; @@ -163,7 +158,7 @@ function send() { if (data.startsWith('/su')) { // a administrator login command. // now ask for passcode - const code = open_prompt('Please input the passcode'); + const code = await open_prompt('Please input the passcode'); data = `/su ${code}`; } @@ -186,10 +181,9 @@ function scroll_to_bottom() { } } - -document.addEventListener('keydown', function(key_event) { +document.addEventListener('keydown', async function(key_event) { if (key_event.code === 'Enter' && key_event.ctrlKey) { key_event.preventDefault(); - send(); + await send(); } }); diff --git a/public/style.css b/public/style.css index 1a28117..f2c7c79 100644 --- a/public/style.css +++ b/public/style.css @@ -8,14 +8,14 @@ textarea { border: none; } -input { +input[type=checkbox] { background-color: #fcd363; } -button { +button, input[type=button] { border: none; padding: 10px; - border-radius: 5px; + border-radius: 2px; background-color: #5bb2ec; color: #fff; } @@ -100,4 +100,50 @@ pre { .msg-from-cb { color: #000000; -} \ No newline at end of file +} + +#prompt-box { + width: 300px; + height: 120px; + position: absolute; + top: calc(50% - 180px); + left: calc(45% - 150px); +} + +#prompt-box-title { + width: 100%; + height: 30px; + background-color: #606266; + display: block; + border-radius: 0px; + color: white; +} + +#prompt-box-title-text { + margin-left: 10px; +} + +#prompt-box-content { + height: 90px; + display: block; + background-color: #C0C4CC; + padding-top: 10px; +} + +#prompt-data { + width: calc(100% - 20px); + margin: 0 auto; + border-radius: 2px; + border: 1px solid #606266; + display: block; + font-size: large; +} + +#comfirm-prompt { + float: right; + margin-right: 10px; + display: block; + margin-top: 25px; + padding-top: 5px; + padding-bottom: 5px; +}