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;
+}