From 7fceb804a754abce503e877b8253698c33d6b1ff Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 3 Aug 2025 00:25:06 -0700 Subject: [PATCH] better interaction when deleting websites etc --- src/dev-center/css/style.css | 13 ++++---- src/dev-center/index.html | 14 ++++---- src/dev-center/js/apps.js | 39 ++++++++-------------- src/dev-center/js/websites.js | 3 +- src/dev-center/js/workers.js | 61 ++++++++++++----------------------- 5 files changed, 49 insertions(+), 81 deletions(-) diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css index 616dfeaef..e08df526d 100644 --- a/src/dev-center/css/style.css +++ b/src/dev-center/css/style.css @@ -452,7 +452,7 @@ label { left: 0; z-index: 1000; display: block; - padding: 30px 16px 0; + padding: 40px 16px 0; overflow-x: hidden; overflow-y: auto; background-color: rgb(249, 249, 249); @@ -480,15 +480,16 @@ label { right: 0; top: 0; padding: 10px; - background-size: 15px; + background-size: 25px; background-repeat: no-repeat; background-position: center; cursor: pointer; - background-image: url("data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2024%2024%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3%2023-3-3%208-8-8-8%203-3%2011%2011zm10%200-3-3%208-8-8-8%203-3%2011%2011z%22%2F%3E%3C%2Fsvg%3E"); - opacity: 0.3; + background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.2928932%2C12%20L12.1464466%2C8.85355339%20C11.9511845%2C8.65829124%2011.9511845%2C8.34170876%2012.1464466%2C8.14644661%20C12.3417088%2C7.95118446%2012.6582912%2C7.95118446%2012.8535534%2C8.14644661%20L16.8535534%2C12.1464466%20C17.0488155%2C12.3417088%2017.0488155%2C12.6582912%2016.8535534%2C12.8535534%20L12.8535534%2C16.8535534%20C12.6582912%2C17.0488155%2012.3417088%2C17.0488155%2012.1464466%2C16.8535534%20C11.9511845%2C16.6582912%2011.9511845%2C16.3417088%2012.1464466%2C16.1464466%20L15.2928932%2C13%20L4.5%2C13%20C4.22385763%2C13%204%2C12.7761424%204%2C12.5%20C4%2C12.2238576%204.22385763%2C12%204.5%2C12%20L15.2928932%2C12%20Z%20M19%2C5.5%20C19%2C5.22385763%2019.2238576%2C5%2019.5%2C5%20C19.7761424%2C5%2020%2C5.22385763%2020%2C5.5%20L20%2C19.5%20C20%2C19.7761424%2019.7761424%2C20%2019.5%2C20%20C19.2238576%2C20%2019%2C19.7761424%2019%2C19.5%20L19%2C5.5%20Z%22%2F%3E%3C%2Fsvg%3E"); + opacity: 0.6; + margin-top: 5px; } .open .sidebar-toggle{ - background-image: url("data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2024%2024%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m21%201%203%203-8%208%208%208-3%203-11-11zm-10%200%203%203-8%208%208%208-3%203-11-11z%22%2F%3E%3C%2Fsvg%3E"); + background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Uploaded%20to%3A%20SVG%20Repo%2C%20www.svgrepo.com%2C%20Generator%3A%20SVG%20Repo%20Mixer%20Tools%20--%3E%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.70710678%2C12%20L19.5%2C12%20C19.7761424%2C12%2020%2C12.2238576%2020%2C12.5%20C20%2C12.7761424%2019.7761424%2C13%2019.5%2C13%20L8.70710678%2C13%20L11.8535534%2C16.1464466%20C12.0488155%2C16.3417088%2012.0488155%2C16.6582912%2011.8535534%2C16.8535534%20C11.6582912%2C17.0488155%2011.3417088%2C17.0488155%2011.1464466%2C16.8535534%20L7.14644661%2C12.8535534%20C6.95118446%2C12.6582912%206.95118446%2C12.3417088%207.14644661%2C12.1464466%20L11.1464466%2C8.14644661%20C11.3417088%2C7.95118446%2011.6582912%2C7.95118446%2011.8535534%2C8.14644661%20C12.0488155%2C8.34170876%2012.0488155%2C8.65829124%2011.8535534%2C8.85355339%20L8.70710678%2C12%20L8.70710678%2C12%20Z%20M4%2C5.5%20C4%2C5.22385763%204.22385763%2C5%204.5%2C5%20C4.77614237%2C5%205%2C5.22385763%205%2C5.5%20L5%2C19.5%20C5%2C19.7761424%204.77614237%2C20%204.5%2C20%20C4.22385763%2C20%204%2C19.7761424%204%2C19.5%20L4%2C5.5%20Z%22%2F%3E%3C%2Fsvg%3E"); } .sidebar-toggle:hover{ opacity: 1; @@ -507,7 +508,7 @@ label { display: block; padding: 10px 20px; cursor: pointer; - margin-bottom: 15px; + margin-bottom: 10px; } .sidebar-nav>li:hover { diff --git a/src/dev-center/index.html b/src/dev-center/index.html index 86bd84b27..0014e9b63 100644 --- a/src/dev-center/index.html +++ b/src/dev-center/index.html @@ -92,10 +92,10 @@ @@ -178,7 +178,7 @@ @@ -187,7 +187,7 @@ @@ -196,7 +196,7 @@ diff --git a/src/dev-center/js/apps.js b/src/dev-center/js/apps.js index 68ab0ca40..7bc003bac 100644 --- a/src/dev-center/js/apps.js +++ b/src/dev-center/js/apps.js @@ -2205,9 +2205,6 @@ $(document).on('click', '.delete-apps-btn', async function (e) { }); if (resp === 'delete') { - // disable delete button - // $('.delete-apps-btn').addClass('disabled'); - // show 'deleting' modal puter.ui.showSpinner(); @@ -2704,26 +2701,20 @@ async function attempt_delete_app(app_name, app_title, app_uid) { ); if (alert_resp === 'delete') { - let init_ts = Date.now(); - puter.ui.showSpinner(); - puter.apps.delete(app_name).then(async (app) => { - setTimeout(() => { - puter.ui.hideSpinner(); - $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.app-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-apps-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#app-list').show(); - } - count_apps(); - }); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); + $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function name(params) { + $(this).remove(); + if ($(`.app-card`).length === 0) { + $('section:not(.sidebar)').hide(); + $('#no-apps-notice').show(); + } else { + $('section:not(.sidebar)').hide(); + $('#app-list').show(); + } + count_apps(); + }); + // delete app + puter.apps.delete(app_name).then(async (app) => { // get app directory puter.fs.stat({ path: `/${auth_username}/AppData/${dev_center_uid}/${app_uid}`, @@ -2738,16 +2729,12 @@ async function attempt_delete_app(app_name, app_title, app_uid) { ) }) }).catch(async (err) => { - setTimeout(() => { puter.ui.hideSpinner(); puter.ui.alert(err?.message, [ { label: 'Ok', }, ]); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); }) } diff --git a/src/dev-center/js/websites.js b/src/dev-center/js/websites.js index c7f0d052b..b8e509882 100644 --- a/src/dev-center/js/websites.js +++ b/src/dev-center/js/websites.js @@ -42,6 +42,7 @@ $(document).on('click', '.create-a-website-btn', async function (e) { if (name) { await create_website(name); + refresh_websites_list(); } }) @@ -86,7 +87,7 @@ $(document).on('change', '.select-all-websites', function (e) { $('.refresh-website-list').on('click', function (e) { puter.ui.showSpinner(); - refresh_website_list(); + refresh_websites_list(); puter.ui.hideSpinner(); }) diff --git a/src/dev-center/js/workers.js b/src/dev-center/js/workers.js index bd244dc1a..2e89d06a9 100644 --- a/src/dev-center/js/workers.js +++ b/src/dev-center/js/workers.js @@ -344,17 +344,6 @@ async function attempt_delete_worker(worker_name) { // get worker const worker_data = await puter.workers.get(worker_name); - if(worker_data.metadata?.locked){ - puter.ui.alert(`${worker_data.name} is locked and cannot be deleted.`, [ - { - label: 'Ok', - }, - ], { - type: 'warning', - }); - return; - } - // confirm delete const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete ${html_encode(worker_data.name)}?`, [ @@ -370,37 +359,27 @@ async function attempt_delete_worker(worker_name) { ); if (alert_resp === 'delete') { - let init_ts = Date.now(); - puter.ui.showSpinner(); - puter.workers.delete(worker_name).then(async (worker) => { - setTimeout(() => { - puter.ui.hideSpinner(); - $(`.worker-card[data-name="${worker_name}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.worker-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-workers-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#worker-list').show(); - } - count_workers(); - }); + // remove worker card and update worker count + $(`.worker-card[data-name="${worker_name}"]`).fadeOut(200, function name(params) { + $(this).remove(); + if ($(`.worker-card`).length === 0) { + $('section:not(.sidebar)').hide(); + $('#no-workers-notice').show(); + } else { + $('section:not(.sidebar)').hide(); + $('#worker-list').show(); + } + count_workers(); + }); + + // delete worker + puter.workers.delete(worker_name).then().catch(async (err) => { + puter.ui.alert(err?.message, [ + { + label: 'Ok', }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); - }).catch(async (err) => { - setTimeout(() => { - puter.ui.hideSpinner(); - puter.ui.alert(err?.message, [ - { - label: 'Ok', - }, - ]); - }, - // make sure the modal was shown for at least 2 seconds - (Date.now() - init_ts) > 2000 ? 1 : 2000 - (Date.now() - init_ts)); - }) + ]); + }) } }