remove the connection manager GUI for a cleaner less confusing look
This commit is contained in:
MCHost
@@ -169,6 +169,130 @@ const exportConnectionDialog = async (id) => {
|
||||
/**
|
||||
* Opens a dialog popup to manage stored connection information.
|
||||
*/
|
||||
// const connectionManagerDialog = () => {
|
||||
// const popup = new PopupBuilder();
|
||||
// const el = document.createElement('div');
|
||||
// el.id = 'connectionManager';
|
||||
// el.classList = 'col gap-15';
|
||||
// const connectionValues = getSortedConnectionsArray();
|
||||
// for (const connection of connectionValues) {
|
||||
// const entry = document.createElement('div');
|
||||
// entry.classList = 'entry row gap-10 align-center';
|
||||
// entry.innerHTML = /*html*/`
|
||||
// <div class="icon flex-no-shrink">cloud</div>
|
||||
// <div class="row flex-wrap align-center flex-grow">
|
||||
// <div class="col gap-5 flex-grow">
|
||||
// <div class="label">${connection.name}</div>
|
||||
// <small>
|
||||
// ${connection.username}@${connection.host}:${connection.port}
|
||||
// <br>${connection.path}
|
||||
// </small>
|
||||
// </div>
|
||||
// <div class="row gap-10">
|
||||
// <button class="menu btn iconOnly small secondary" title="Connection options">
|
||||
// <div class="icon">more_vert</div>
|
||||
// </button>
|
||||
// <button class="connect btn iconOnly small" title="Connect">
|
||||
// <div class="icon">arrow_forward</div>
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// `;
|
||||
// $('.btn.menu', entry).addEventListener('click', () => {
|
||||
// new ContextMenuBuilder()
|
||||
// .addItem(option => option
|
||||
// .setLabel('Edit...')
|
||||
// .setIcon('edit')
|
||||
// .setClickHandler(async() => {
|
||||
// popup.hide();
|
||||
// await editConnectionDialog(connection.id);
|
||||
// connectionManagerDialog();
|
||||
// }))
|
||||
// .addItem(option => option
|
||||
// .setLabel('Export...')
|
||||
// .setIcon('download')
|
||||
// .setClickHandler(async() => {
|
||||
// exportConnectionDialog(connection.id);
|
||||
// }))
|
||||
// .addSeparator()
|
||||
// .addItem(option => option
|
||||
// .setLabel('Delete')
|
||||
// .setIcon('delete')
|
||||
// .setIsDanger(true)
|
||||
// .setClickHandler(async() => {
|
||||
// delete connections[connection.id];
|
||||
// saveConnections();
|
||||
// entry.remove();
|
||||
// }))
|
||||
// .showAtCursor();
|
||||
// });
|
||||
// $('.btn.connect', entry).addEventListener('click', () => {
|
||||
// popup.hide();
|
||||
// setActiveConnection(connection.id);
|
||||
// });
|
||||
// el.appendChild(entry);
|
||||
// }
|
||||
// const elButtons = document.createElement('div');
|
||||
// elButtons.classList = 'row gap-10 flex-wrap';
|
||||
// const btnAdd = document.createElement('button');
|
||||
// btnAdd.classList = 'btn success small';
|
||||
// btnAdd.innerHTML = /*html*/`
|
||||
// <div class="icon">add</div>
|
||||
// New connection...
|
||||
// `;
|
||||
// btnAdd.addEventListener('click', async() => {
|
||||
// popup.hide();
|
||||
// await addNewConnectionDialog();
|
||||
// connectionManagerDialog();
|
||||
// });
|
||||
// elButtons.appendChild(btnAdd);
|
||||
// const btnImport = document.createElement('button');
|
||||
// btnImport.classList = 'btn secondary small';
|
||||
// btnImport.innerHTML = /*html*/`
|
||||
// <div class="icon">cloud_upload</div>
|
||||
// Import...
|
||||
// `;
|
||||
// btnImport.addEventListener('click', async() => {
|
||||
// const input = document.createElement('input');
|
||||
// input.type = 'file';
|
||||
// input.accept = '.json';
|
||||
// input.addEventListener('change', async() => {
|
||||
// const file = input.files[0];
|
||||
// if (!file) return;
|
||||
// popup.hide();
|
||||
// const reader = new FileReader();
|
||||
// reader.addEventListener('load', async() => {
|
||||
// try {
|
||||
// const data = JSON.parse(reader.result);
|
||||
// const id = Date.now();
|
||||
// connections[id] = data;
|
||||
// saveConnections();
|
||||
// if (!data.key && !data.password) {
|
||||
// return editConnectionDialog(id);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
// connectionManagerDialog();
|
||||
// });
|
||||
// reader.readAsText(file);
|
||||
// });
|
||||
// input.click();
|
||||
// });
|
||||
// elButtons.appendChild(btnImport);
|
||||
// el.appendChild(elButtons);
|
||||
// popup
|
||||
// .setTitle('Connections')
|
||||
// .addBody(el)
|
||||
// .addAction(action => action
|
||||
// .setIsPrimary(true)
|
||||
// .setLabel('Done')
|
||||
// .setClickHandler(() => {
|
||||
// saveConnections();
|
||||
// }));
|
||||
// popup.show();
|
||||
// }
|
||||
|
||||
const connectionManagerDialog = () => {
|
||||
const popup = new PopupBuilder();
|
||||
const el = document.createElement('div');
|
||||
@@ -189,98 +313,18 @@ const connectionManagerDialog = () => {
|
||||
</small>
|
||||
</div>
|
||||
<div class="row gap-10">
|
||||
<button class="menu btn iconOnly small secondary" title="Connection options">
|
||||
<div class="icon">more_vert</div>
|
||||
</button>
|
||||
<button class="connect btn iconOnly small" title="Connect">
|
||||
<div class="icon">arrow_forward</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('.btn.menu', entry).addEventListener('click', () => {
|
||||
new ContextMenuBuilder()
|
||||
.addItem(option => option
|
||||
.setLabel('Edit...')
|
||||
.setIcon('edit')
|
||||
.setClickHandler(async() => {
|
||||
popup.hide();
|
||||
await editConnectionDialog(connection.id);
|
||||
connectionManagerDialog();
|
||||
}))
|
||||
.addItem(option => option
|
||||
.setLabel('Export...')
|
||||
.setIcon('download')
|
||||
.setClickHandler(async() => {
|
||||
exportConnectionDialog(connection.id);
|
||||
}))
|
||||
.addSeparator()
|
||||
.addItem(option => option
|
||||
.setLabel('Delete')
|
||||
.setIcon('delete')
|
||||
.setIsDanger(true)
|
||||
.setClickHandler(async() => {
|
||||
delete connections[connection.id];
|
||||
saveConnections();
|
||||
entry.remove();
|
||||
}))
|
||||
.showAtCursor();
|
||||
});
|
||||
$('.btn.connect', entry).addEventListener('click', () => {
|
||||
popup.hide();
|
||||
setActiveConnection(connection.id);
|
||||
});
|
||||
el.appendChild(entry);
|
||||
}
|
||||
const elButtons = document.createElement('div');
|
||||
elButtons.classList = 'row gap-10 flex-wrap';
|
||||
const btnAdd = document.createElement('button');
|
||||
btnAdd.classList = 'btn success small';
|
||||
btnAdd.innerHTML = /*html*/`
|
||||
<div class="icon">add</div>
|
||||
New connection...
|
||||
`;
|
||||
btnAdd.addEventListener('click', async() => {
|
||||
popup.hide();
|
||||
await addNewConnectionDialog();
|
||||
connectionManagerDialog();
|
||||
});
|
||||
elButtons.appendChild(btnAdd);
|
||||
const btnImport = document.createElement('button');
|
||||
btnImport.classList = 'btn secondary small';
|
||||
btnImport.innerHTML = /*html*/`
|
||||
<div class="icon">cloud_upload</div>
|
||||
Import...
|
||||
`;
|
||||
btnImport.addEventListener('click', async() => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.addEventListener('change', async() => {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
popup.hide();
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', async() => {
|
||||
try {
|
||||
const data = JSON.parse(reader.result);
|
||||
const id = Date.now();
|
||||
connections[id] = data;
|
||||
saveConnections();
|
||||
if (!data.key && !data.password) {
|
||||
return editConnectionDialog(id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
connectionManagerDialog();
|
||||
});
|
||||
reader.readAsText(file);
|
||||
});
|
||||
input.click();
|
||||
});
|
||||
elButtons.appendChild(btnImport);
|
||||
el.appendChild(elButtons);
|
||||
popup
|
||||
.setTitle('Connections')
|
||||
.addBody(el)
|
||||
@@ -293,6 +337,7 @@ const connectionManagerDialog = () => {
|
||||
popup.show();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Opens a dialog to edit an existing connection by its ID.
|
||||
* @param {number} id The connection ID
|
||||
@@ -1938,20 +1983,20 @@ btnConnections.addEventListener('click', () => {
|
||||
setActiveConnection(connection.id);
|
||||
}));
|
||||
};
|
||||
menu.addSeparator();
|
||||
menu.addItem(option => option
|
||||
.setLabel('Manage connections...')
|
||||
.setIcon('smb_share')
|
||||
.setClickHandler(connectionManagerDialog));
|
||||
menu.addItem(option => option
|
||||
.setLabel('New connection...')
|
||||
.setIcon('library_add')
|
||||
.setClickHandler(addNewConnectionDialog));
|
||||
menu.addSeparator().addItem(item => item
|
||||
// menu.addSeparator();
|
||||
// menu.addItem(option => option
|
||||
// .setLabel('Manage connections...')
|
||||
// .setIcon('smb_share')
|
||||
// .setClickHandler(connectionManagerDialog));
|
||||
// menu.addItem(option => option
|
||||
// .setLabel('New connection...')
|
||||
// .setIcon('library_add')
|
||||
// .setClickHandler(addNewConnectionDialog));
|
||||
menu.addItem(item => item
|
||||
.setIcon('code')
|
||||
.setLabel('SFTP Browser GitHub')
|
||||
.setLabel('SFTP Browser Git')
|
||||
.setClickHandler(() => {
|
||||
window.open('https://github.com/CyberGen49/sftp-browser');
|
||||
window.open('https://git.ssh.surf/hypermc/sftp-browser');
|
||||
}));
|
||||
const rect = btnConnections.getBoundingClientRect();
|
||||
menu.showAtCoords(rect.left, rect.bottom-5);
|
||||
|
||||
Reference in New Issue
Block a user