add delete function from servers storarage and other

This commit is contained in:
fullgream 2025-02-09 16:40:24 +03:00
parent e7000c9abf
commit 1b0ad61236
2 changed files with 35 additions and 9 deletions

View File

@ -23,7 +23,7 @@ document.body.innerHTML = `<nav id="navbar-main" class="navbar navbar-connect-da
<div class="vr" style="margin-right:5px"></div>
<div class="d-flex" style="margin-right:10px" id="navbar-user-menu">
<button id="toggle-theme" class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="far fa-eye"></i> Light theme</button>
<button id="toggle-theme" class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-sun"></i></button>
</div>
</nav>
<div id="server.area">

View File

@ -96,6 +96,7 @@ fl.bindLoad("/connect", () => {
const portSelected = +(address.value.match(/:[0-9]{1,5}$/).at(0).slice(1,));
address.value = address.value.slice(0, -1 * (":"+portSelected).length);
port.value = portSelected;
document.getElementById("custom-conn-port").focus();
}
if (!port.value) {
@ -141,6 +142,7 @@ fl.bindLoad("/connect", () => {
const servers = localServers.concat(JSON.parse(xhr.response).result.map(x => { x.fromLocal = false; return x }));
const serversByItemID = new Object();
const serversByAddress = new Object();
const items = [];
const itemIDs = [];
const mp = servers.map(async serverItem => {
@ -155,15 +157,19 @@ fl.bindLoad("/connect", () => {
data.tls = serverItem.tls;
itemIDs.push({
...data,
itemID: `con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`
itemID: `con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`,
deleteID: `remove-con:${serverItem.address}:${serverItem.port}`,
address: `${serverItem.address}:${serverItem.port}`,
});
serversByItemID[`con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`] = { data, serverItem };
serversByAddress[`${serverItem.address}:${serverItem.port}`] = { data, serverItem };
resolve(items.push(`<tr${!data.tls ? ' style="background-color: #7F6003"' : ""}>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${data.name}</td>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${serverItem.address}:${serverItem.port}</td>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${!data.tls ? '<font color="red"><i class="fas fa-exclamation-triangle"></i></font>' : '<font color="green"><i class="fas fa-lock"></i></font>'}</td>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${ping}</td>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}><button class="btn btn-secondary" id="con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}">${tr("/connect", "connect-to-server-btn") ?? "Connect"}</button></td>
<td${!data.tls ? ' style="background-color: #7F6003"' : ""}><button class="btn btn-outline-danger" id="remove-con:${serverItem.address}:${serverItem.port}"${!serverItem.fromLocal ? ' disabled' : ''}><i class="fas fa-trash"></i></button></td>
</tr>`));
};
socket.send(JSON.stringify({
@ -172,12 +178,18 @@ fl.bindLoad("/connect", () => {
};
socket.onerror = (err) => {
console.error(err);
itemIDs.push({
deleteID: `remove-con:${serverItem.address}:${serverItem.port}`,
address: `${serverItem.address}:${serverItem.port}`,
});
serversByAddress[`${serverItem.address}:${serverItem.port}`] = { serverItem };
resolve(items.push(`<tr>
<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
<td style="background-color: #7F0000">${serverItem.address}:${serverItem.port}</td>
<td style="background-color: #7F0000"><font color="red"><i class="fas fa-exclamation-triangle"></i></font></td>
<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
<td style="background-color: #7F0000"><button class="btn btn-danger" disabled>${tr("/connect", "offline-server") ?? "Offline"}</button></td>
<td style="background-color: #7F0000"><button class="btn btn-outline-danger" id="remove-con:${serverItem.address}:${serverItem.port}"${!serverItem.fromLocal ? ' disabled' : ''}><i class="fas fa-trash"></i></button></td>
</tr>`));
};
});
@ -185,7 +197,7 @@ fl.bindLoad("/connect", () => {
});
await Promise.all(mp);
items.push(`<tr><td colspan="5"><center><button class="btn btn-primary" id="conn-to-custom">${tr("/connect", "add-custon-server") ?? "Connect to custom server"}</button></center></td></tr>`);
items.push(`<tr><td colspan="6"><center><button class="btn btn-primary" id="conn-to-custom">${tr("/connect", "add-custon-server") ?? "Connect to custom server"}</button></center></td></tr>`);
document.getElementById("loading-servers").innerHTML = `<table class="table table-dark">
<thead>
<th scope="col">${tr("/connect", "server-name-tbl") ?? "Name"}</th>
@ -193,6 +205,7 @@ fl.bindLoad("/connect", () => {
<th scope="col">${tr("/connect", "server-encryption") ?? "Encrypted"}</th>
<th scope="col">${tr("/connect", "server-ping") ?? "Ping"}</th>
<th scope="col">${tr("/connect", "server-action") ?? "Action"}</th>
<th scope="col"></th>
</thead>
<tbody>
${items.join("\n")}
@ -200,11 +213,24 @@ fl.bindLoad("/connect", () => {
</table>`;
itemIDs.forEach(btn => {
document.getElementById(btn.itemID).onclick = () => {
checkContentWarning(() => {
const serverInfo = serversByItemID[btn.itemID].serverItem;
window.open(`/connect-area?server=${serverInfo.address}:${serverInfo.port}&encrypted=${serverInfo.tls ? "true" : "false"}`);
});
//console.log("btn:", btn);
if (btn.itemID)
document.getElementById(btn.itemID).onclick = () => {
checkContentWarning(() => {
const serverInfo = serversByItemID[btn.itemID].serverItem;
window.open(`/connect-area?server=${serverInfo.address}:${serverInfo.port}&encrypted=${serverInfo.tls ? "true" : "false"}`);
});
};
document.getElementById(btn.deleteID).onclick = () => {
const serverInfo = serversByAddress[btn.address].serverItem;
console.log("serverInfo:", serverInfo);
const savedServers = (JSON.parse(localStorage.getItem("savedServers") ?? "null") ?? [])
.filter(server => {
return !(server.address === serverInfo.address && server.port === serverInfo.port)
});
localStorage.setItem("savedServers", JSON.stringify(savedServers));
connectServers();
};
});