From 5ccdd627ee3b4cf492ab72c42f798c10009b77e9 Mon Sep 17 00:00:00 2001 From: jelveh Date: Tue, 5 Aug 2025 08:49:30 -0700 Subject: [PATCH] Add functionality to remove app, website, and worker cards with dedicated functions; streamline deletion process and improve UI updates for empty states. --- src/dev-center/index.html | 1 + src/dev-center/js/apps.js | 62 ++++++++++++------------ src/dev-center/js/dev-center.js | 3 -- src/dev-center/js/images.js | 7 +++ src/dev-center/js/websites.js | 61 +++++++++++++---------- src/dev-center/js/workers.js | 86 +++++++++++++-------------------- 6 files changed, 108 insertions(+), 112 deletions(-) create mode 100644 src/dev-center/js/images.js diff --git a/src/dev-center/index.html b/src/dev-center/index.html index a5118890..9f1baffc 100644 --- a/src/dev-center/index.html +++ b/src/dev-center/index.html @@ -340,6 +340,7 @@ + diff --git a/src/dev-center/js/apps.js b/src/dev-center/js/apps.js index eb0821c5..278d8821 100644 --- a/src/dev-center/js/apps.js +++ b/src/dev-center/js/apps.js @@ -25,15 +25,6 @@ const APP_CATEGORIES = [ { id: 'lifestyle', label: 'Lifestyle' }, ]; -const deploying_spinner = ``; -const loading_spinner = ``; -const drop_area_placeholder = `

Drop your app folder and files here to deploy.

HTML, JS, CSS, ...

`; -const index_missing_error = `Please upload an 'index.html' file or if you're uploading a directory, make sure it contains an 'index.html' file at its root.`; -const lock_svg = ` `; -const lock_svg_tippy = ` `; - -const copy_svg = ` `; - async function init_apps() { setTimeout(async function () { puter.ui.onLaunchedWithItems(async function (items) { @@ -2220,6 +2211,35 @@ $(document).on('click', '.app-checkbox', function (e) { window.last_clicked_app_checkbox_index = $('.app-checkbox').index(this); }) +function remove_app_card(app_uid, callback = null) { + $(`.app-card[data-uid="${app_uid}"]`).fadeOut(200, function() { + $(this).remove(); + if ($(`.app-card`).length === 0) { + $('section:not(.sidebar)').hide(); + $('#no-apps-notice').show(); + } else { + $('section:not(.sidebar)').hide(); + $('#app-list').show(); + } + + // update select-all-apps checkbox's state + if($('.app-checkbox:checked').length === 0){ + $('.select-all-apps').prop('indeterminate', false); + $('.select-all-apps').prop('checked', false); + } + else if($('.app-checkbox:checked').length === $('.app-card').length){ + $('.select-all-apps').prop('indeterminate', false); + $('.select-all-apps').prop('checked', true); + } + else{ + $('.select-all-apps').prop('indeterminate', true); + } + + count_apps(); + if (callback) callback(); + }); +} + $(document).on('click', '.delete-apps-btn', async function (e) { // show confirmation alert let resp = await puter.ui.alert(`Are you sure you want to delete the selected apps?`, [ @@ -2289,17 +2309,7 @@ $(document).on('click', '.delete-apps-btn', async function (e) { await puter.apps.delete(app_name) // remove app card - $(`.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(); - }); + remove_app_card(app_uid); try{ // get app directory @@ -2721,17 +2731,7 @@ async function attempt_delete_app(app_name, app_title, app_uid) { ); if (alert_resp === 'delete') { - $(`.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(); - }); + remove_app_card(app_uid); // delete app puter.apps.delete(app_name).then(async (app) => { diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js index 37a61c8f..9f5784da 100644 --- a/src/dev-center/js/dev-center.js +++ b/src/dev-center/js/dev-center.js @@ -79,9 +79,6 @@ $(document).ready(async function () { // initialize assets directory await initializeAssetsDirectory(); - // create default worker file - await createDefaultWorkerFile(); - puter.ui.showSpinner(); init_apps(); diff --git a/src/dev-center/js/images.js b/src/dev-center/js/images.js new file mode 100644 index 00000000..c027dddd --- /dev/null +++ b/src/dev-center/js/images.js @@ -0,0 +1,7 @@ +window.deploying_spinner = ``; +window.loading_spinner = ``; +window.drop_area_placeholder = `

Drop your app folder and files here to deploy.

HTML, JS, CSS, ...

`; +window.index_missing_error = `Please upload an 'index.html' file or if you're uploading a directory, make sure it contains an 'index.html' file at its root.`; +window.lock_svg = ` `; +window.lock_svg_tippy = ` `; +window.copy_svg = ` `; \ No newline at end of file diff --git a/src/dev-center/js/websites.js b/src/dev-center/js/websites.js index d83708fd..fd4ae9a0 100644 --- a/src/dev-center/js/websites.js +++ b/src/dev-center/js/websites.js @@ -4,7 +4,7 @@ window.websites = []; let search_query; window.create_website = async (name, directoryPath = null) => { - let website + let website; // Use provided directory path or default to the default website file const websiteDir = directoryPath || window.default_website_file; @@ -42,7 +42,6 @@ window.refresh_websites_list = async (show_loading = false) => { count_websites(); } - async function init_websites() { puter.hosting.list().then((websites) => { window.websites = websites; @@ -288,6 +287,35 @@ $(document).on('click', '.search-clear-websites', function (e) { $('.search-websites').removeClass('has-value'); }) +function remove_website_card(website_name, callback = null) { + $(`.website-card[data-name="${website_name}"]`).fadeOut(200, function() { + $(this).remove(); + if ($(`.website-card`).length === 0) { + $('section:not(.sidebar)').hide(); + $('#no-websites-notice').show(); + } else { + $('section:not(.sidebar)').hide(); + $('#website-list').show(); + } + + // update select-all-websites checkbox's state + if($('.website-checkbox:checked').length === 0){ + $('.select-all-websites').prop('indeterminate', false); + $('.select-all-websites').prop('checked', false); + } + else if($('.website-checkbox:checked').length === $('.website-card').length){ + $('.select-all-websites').prop('indeterminate', false); + $('.select-all-websites').prop('checked', true); + } + else{ + $('.select-all-websites').prop('indeterminate', true); + } + + count_websites(); + if (callback) callback(); + }); +} + $(document).on('click', '.delete-websites-btn', async function (e) { // show confirmation alert let resp = await puter.ui.alert(`Are you sure you want to delete the selected websites?`, [ @@ -320,17 +348,7 @@ $(document).on('click', '.delete-websites-btn', async function (e) { await puter.hosting.delete(website_name) // remove website card - $(`.website-card[data-name="${website_name}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.website-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-websites-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#website-list').show(); - } - count_websites(); - }); + remove_website_card(website_name); try{ count_websites(); @@ -370,14 +388,14 @@ $(document).on('click', '.options-icon-website', function (e) { label: 'Delete', type: 'danger', action: () => { - attempt_delete_website($(this).attr('data-website-name')); + attempt_website_deletion($(this).attr('data-website-name')); }, }, ], }); }) -async function attempt_delete_website(website_name) { +async function attempt_website_deletion(website_name) { // confirm delete const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete ${html_encode(website_name)}.puter.site?`, [ @@ -394,17 +412,7 @@ async function attempt_delete_website(website_name) { if (alert_resp === 'delete') { // remove website card and update website count - $(`.website-card[data-name="${website_name}"]`).fadeOut(200, function name(params) { - $(this).remove(); - if ($(`.website-card`).length === 0) { - $('section:not(.sidebar)').hide(); - $('#no-websites-notice').show(); - } else { - $('section:not(.sidebar)').hide(); - $('#website-list').show(); - } - count_websites(); - }); + remove_website_card(website_name); // delete website puter.hosting.delete(website_name); @@ -489,4 +497,5 @@ $(document).on('click', '.root-dir-name', function (e) { }); } }) + export default init_websites; \ No newline at end of file diff --git a/src/dev-center/js/workers.js b/src/dev-center/js/workers.js index e1a8a1bd..9e32354f 100644 --- a/src/dev-center/js/workers.js +++ b/src/dev-center/js/workers.js @@ -7,7 +7,7 @@ window.create_worker = async (name, filePath = null) => { let worker; // Use provided file path or default to the default worker file - const workerFile = filePath || window.default_worker_file; + const workerFile = filePath; try { worker = await puter.workers.create(name, workerFile); @@ -89,33 +89,6 @@ $(document).on('click', '.create-a-worker-btn', async function (e) { } }) -window.createDefaultWorkerFile = async () => { - window.default_worker_file = `/${auth_username}/AppData/${dev_center_uid}/default_worker_file.js`; - let existingFile; - try { - // Check if default_worker_file exists - existingFile = await puter.fs.read(default_worker_file); - } catch (err) { - console.error('Error creating default worker file:', err); - } - - if (!existingFile) { - // Create default_worker_file - await puter.fs.write(default_worker_file, `// This is an example application for Puter Workers - -router.get('/', ({request}) => { -return 'Hello World'; // returns a string -}); -router.get('/api/hello', ({request}) => { -return {'msg': 'hello'}; // returns a JSON object -}); -router.get('/*page', ({request, params}) => { -return new Response(\`Page \${params.page} not found\`, {status: 404}); -});`); - } - -} - $(document).on('click', '.worker-checkbox', function (e) { // was shift key pressed? if (e.originalEvent && e.originalEvent.shiftKey) { @@ -323,6 +296,35 @@ $(document).on('click', '.search-clear-workers', function (e) { $('.search-workers').removeClass('has-value'); }) +function remove_worker_card(worker_name, callback = null) { + $(`.worker-card[data-name="${worker_name}"]`).fadeOut(200, function() { + $(this).remove(); + if ($(`.worker-card`).length === 0) { + $('section:not(.sidebar)').hide(); + $('#no-workers-notice').show(); + } else { + $('section:not(.sidebar)').hide(); + $('#worker-list').show(); + } + + // update select-all-workers checkbox's state + if($('.worker-checkbox:checked').length === 0){ + $('.select-all-workers').prop('indeterminate', false); + $('.select-all-workers').prop('checked', false); + } + else if($('.worker-checkbox:checked').length === $('.worker-card').length){ + $('.select-all-workers').prop('indeterminate', false); + $('.select-all-workers').prop('checked', true); + } + else{ + $('.select-all-workers').prop('indeterminate', true); + } + + count_workers(); + if (callback) callback(); + }); +} + $(document).on('click', '.delete-workers-btn', async function (e) { // show confirmation alert let resp = await puter.ui.alert(`Are you sure you want to delete the selected workers?`, [ @@ -355,17 +357,7 @@ $(document).on('click', '.delete-workers-btn', async function (e) { await puter.workers.delete(worker_name) // remove worker card - $(`.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(worker_name); try{ count_workers(); @@ -398,14 +390,14 @@ $(document).on('click', '.options-icon-worker', function (e) { label: 'Delete', type: 'danger', action: () => { - attempt_delete_worker($(this).attr('data-worker-name')); + attempt_worker_deletion($(this).attr('data-worker-name')); }, }, ], }); }) -async function attempt_delete_worker(worker_name) { +async function attempt_worker_deletion(worker_name) { // confirm delete const alert_resp = await puter.ui.alert(`Are you sure you want to premanently delete ${html_encode(worker_name)}?`, [ @@ -422,17 +414,7 @@ async function attempt_delete_worker(worker_name) { if (alert_resp === 'delete') { // 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(); - }); + remove_worker_card(worker_name); // delete worker puter.workers.delete(worker_name).then().catch(async (err) => {