szTom/wschat-ng
1
1
Fork 0
Code Issues Pull Requests Releases 1 Activity

[feature] improve frontend

Browse Source 
use my own prompt instead of the default one
This commit is contained in:
方而静 2021-03-25 16:49:18 +08:00
parent 8c75a9d12b
commit af9113fab9
No known key found for this signature in database
GPG Key ID: C4F2853BC3103681
3 changed files with 96 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/index.html
View File

@ -9,16 +9,25 @@
<body> <body>
<div id="message"></div> <div id="message"></div>
<textarea id="send" placeholder="Say something" spellcheck="false"></textarea> <textarea id="send" placeholder="Say something or run a command..." spellcheck="false"></textarea>
<div class="top-box"> <div class="top-box">
<button class="send-button" onclick="clear_message()">Clear</button> <button class="send-button" onclick="clear_message()">Clear</button>
<p><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p> <p><input id="scroll-option" type="checkbox" checked /> Enable auto scroll</p>
<p>Version: WS_1.2</p> <p>Version: WS_2.0</p>
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
<span class="note">Press Ctrl + Enter to send </span> <span class="note">Press Ctrl + Enter to send </span>
<button class="send-button" onclick="send()">Send</button> <button class="send-button" onclick="send()">Send</button>
</div> </div>
<div id="prompt-box" hidden>
<div id="prompt-box-title">
<soan id="prompt-box-title-text"></soan>
</div>
<div id="prompt-box-content">
<input type="text" id="prompt-data" />
<input type="button" value="OK" id="comfirm-prompt" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.0.0/dist/socket.io.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.0.0/dist/socket.io.min.js"></script>
<script src="./asset/jquery.js"></script> <script src="./asset/jquery.js"></script>

76
public/script.js
View File

@ -2,7 +2,9 @@ let username;
let is_reconnection = false; let is_reconnection = false;
let last_command = null; let last_command = null;
const server = `ws://${location.host}`; const server = `ws://${location.host}`;
const ws = init(); let ws;
init().then(x => ws = x).catch(err => console.log(err));
function clear_message() { function clear_message() {
$('#message').empty(); $('#message').empty();
@ -16,34 +18,6 @@ function format_time(time) {
return `${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`; 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) { function write_message(data) {
const message = data.msg; const message = data.msg;
@ -75,12 +49,15 @@ function write_message(data) {
scroll_to_bottom(); scroll_to_bottom();
} }
function init() { async function init() {
$('#prompt-data').on('keyup', (e) => {
if (e.key === 'Enter') { $('#comfirm-prompt').click(); }
});
clear_message(); clear_message();
login_name(); await login_name();
const ws = new io(server); const ws = new io(server);
console.log('ws: ', ws);
ws.on('connect', () => { ws.on('connect', () => {
if (is_reconnection) { if (is_reconnection) {
@ -132,18 +109,36 @@ function init() {
}); });
}); });
$('#send').focus();
return ws; return ws;
} }
function open_prompt(content, tilte) { function open_prompt(tilte) {
return window.prompt(content); $('#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() { async function login_name() {
username = open_prompt('[Login] Input your name'); username = await open_prompt('[Login] Input your name');
} }
function send() { async function send() {
let data = $('#send').val(); let data = $('#send').val();
if (data === '') { if (data === '') {
return; return;
@ -163,7 +158,7 @@ function send() {
if (data.startsWith('/su')) { if (data.startsWith('/su')) {
// a administrator login command. // a administrator login command.
// now ask for passcode // now ask for passcode
const code = open_prompt('Please input the passcode'); const code = await open_prompt('Please input the passcode');
data = `/su ${code}`; data = `/su ${code}`;
} }
@ -186,10 +181,9 @@ function scroll_to_bottom() {
} }
} }
document.addEventListener('keydown', async function(key_event) {
document.addEventListener('keydown', function(key_event) {
if (key_event.code === 'Enter' && key_event.ctrlKey) { if (key_event.code === 'Enter' && key_event.ctrlKey) {
key_event.preventDefault(); key_event.preventDefault();
send(); await send();
} }
}); });

54
public/style.css
View File

@ -8,14 +8,14 @@ textarea {
border: none; border: none;
} }
input { input[type=checkbox] {
background-color: #fcd363; background-color: #fcd363;
} }
button { button, input[type=button] {
border: none; border: none;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 2px;
background-color: #5bb2ec; background-color: #5bb2ec;
color: #fff; color: #fff;
} }
@ -100,4 +100,50 @@ pre {
.msg-from-cb { .msg-from-cb {
color: #000000; color: #000000;
} }
#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;
}