[feature] improve frontend
use my own prompt instead of the default one
This commit is contained in:
parent
8c75a9d12b
commit
af9113fab9
@ -9,16 +9,25 @@
|
||||
<body>
|
||||
<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">
|
||||
<button class="send-button" onclick="clear_message()">Clear</button>
|
||||
<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 class="bottom-box">
|
||||
<span class="note">Press Ctrl + Enter to send </span>
|
||||
<button class="send-button" onclick="send()">Send</button>
|
||||
</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="./asset/jquery.js"></script>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user