diff --git a/web/assets/index.js b/web/assets/index.js index 4399cb9..ee4750f 100644 --- a/web/assets/index.js +++ b/web/assets/index.js @@ -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*/` +//
cloud
+//
+//
+//
${connection.name}
+// +// ${connection.username}@${connection.host}:${connection.port} +//
${connection.path} +//
+//
+//
+// +// +//
+//
+// `; +// $('.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*/` +//
add
+// 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*/` +//
cloud_upload
+// 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 = () => {
-
`; - $('.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*/` -
add
- 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*/` -
cloud_upload
- 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);