diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css index a6bd686a..a5f23f6c 100644 --- a/src/dev-center/css/style.css +++ b/src/dev-center/css/style.css @@ -951,6 +951,12 @@ ol li:before { margin-top: 20px; margin-bottom: 20px; } +.edit-app-reset-btn{ + float: right; + margin-top: 20px; + margin-bottom: 20px; + margin-right: 10px; +} input:read-only { background-color: rgb(242 242 242); } diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js index 4babab01..8aa2f445 100644 --- a/src/dev-center/js/dev-center.js +++ b/src/dev-center/js/dev-center.js @@ -29,6 +29,7 @@ let activeTab = 'apps'; let currently_editing_app; let dropped_items; let search_query; +let originalValues = {}; const APP_CATEGORIES = [ { id: 'games', label: 'Games' }, @@ -536,7 +537,7 @@ function generate_edit_app_section(app) { -
+
Change App Icon
Remove icon @@ -613,12 +614,139 @@ function generate_edit_app_section(app) {
+
` return h; } +/* This function keeps track of the original values of the app before it is edited*/ +function trackOriginalValues(){ + originalValues = { + title: $('#edit-app-title').val(), + name: $('#edit-app-name').val(), + indexURL: $('#edit-app-index-url').val(), + description: $('#edit-app-description').val(), + icon: $('#edit-app-icon').attr('data-base64'), + fileAssociations: $('#edit-app-filetype-associations').val(), + category: $('#edit-app-category').val(), + socialImage: $('#edit-app-social-image').attr('data-base64'), + windowSettings: { + width: $('#edit-app-window-width').val(), + height: $('#edit-app-window-height').val(), + top: $('#edit-app-window-top').val(), + left: $('#edit-app-window-left').val() + }, + checkboxes: { + maximizeOnStart: $('#edit-app-maximize-on-start').is(':checked'), + background: $('#edit-app-background').is(':checked'), + resizableWindow: $('#edit-app-window-resizable').is(':checked'), + hideTitleBar: $('#edit-app-hide-titlebar').is(':checked'), + locked: $('#edit-app-locked').is(':checked'), + credentialless: $('#edit-app-credentialless').is(':checked'), + fullPageOnLanding: $('#edit-app-fullpage-on-landing').is(':checked') + } + }; +} + +/* This function compares for all fields and checks if anything has changed from before editting*/ +function hasChanges() { + // is icon changed + if($('#edit-app-icon').attr('data-base64') !== originalValues.icon){ + return true; + } + + // if social image is changed + if($('#edit-app-social-image').attr('data-base64') !== originalValues.socialImage){ + return true; + } + + // if any of the fields have changed + return( + $('#edit-app-title').val() !== originalValues.title || + $('#edit-app-name').val() !== originalValues.name || + $('#edit-app-index-url').val() !== originalValues.indexURL || + $('#edit-app-description').val() !== originalValues.description || + $('#edit-app-icon').attr('data-base64') !== originalValues.icon || + $('#edit-app-filetype-associations').val() !== originalValues.fileAssociations || + $('#edit-app-category').val() !== originalValues.category || + $('#edit-app-social-image').attr('data-base64') !== originalValues.socialImage || + $('#edit-app-window-width').val() !== originalValues.windowSettings.width || + $('#edit-app-window-height').val() !== originalValues.windowSettings.height || + $('#edit-app-window-top').val() !== originalValues.windowSettings.top || + $('#edit-app-window-left').val() !== originalValues.windowSettings.left || + $('#edit-app-maximize-on-start').is(':checked') !== originalValues.checkboxes.maximizeOnStart || + $('#edit-app-background').is(':checked') !== originalValues.checkboxes.background || + $('#edit-app-window-resizable').is(':checked') !== originalValues.checkboxes.resizableWindow || + $('#edit-app-hide-titlebar').is(':checked') !== originalValues.checkboxes.hideTitleBar || + $('#edit-app-locked').is(':checked') !== originalValues.checkboxes.locked || + $('#edit-app-credentialless').is(':checked') !== originalValues.checkboxes.credentialless || + $('#edit-app-fullpage-on-landing').is(':checked') !== originalValues.checkboxes.fullPageOnLanding + ); +} + +/* This function enables or disables the save button if there are any changes made */ +function toggleSaveButton() { + if (hasChanges()) { + $('.edit-app-save-btn').prop('disabled', false); + } else { + $('.edit-app-save-btn').prop('disabled', true); + } +} + +/* This function enables or disables the reset button if there are any changes made */ +function toggleResetButton() { + if (hasChanges()) { + $('.edit-app-reset-btn').prop('disabled', false); + } else { + $('.edit-app-reset-btn').prop('disabled', true); + } +} + +/* This function revers the changes made back to the original values of the edit form */ +function resetToOriginalValues() { + $('#edit-app-title').val(originalValues.title); + $('#edit-app-name').val(originalValues.name); + $('#edit-app-index-url').val(originalValues.indexURL); + $('#edit-app-description').val(originalValues.description); + $('#edit-app-filetype-associations').val(originalValues.fileAssociations); + $('#edit-app-category').val(originalValues.category); + $('#edit-app-window-width').val(originalValues.windowSettings.width); + $('#edit-app-window-height').val(originalValues.windowSettings.height); + $('#edit-app-window-top').val(originalValues.windowSettings.top); + $('#edit-app-window-left').val(originalValues.windowSettings.left); + $('#edit-app-maximize-on-start').prop('checked', originalValues.checkboxes.maximizeOnStart); + $('#edit-app-background').prop('checked', originalValues.checkboxes.background); + $('#edit-app-window-resizable').prop('checked', originalValues.checkboxes.resizableWindow); + $('#edit-app-hide-titlebar').prop('checked', originalValues.checkboxes.hideTitleBar); + $('#edit-app-locked').prop('checked', originalValues.checkboxes.locked); + $('#edit-app-credentialless').prop('checked', originalValues.checkboxes.credentialless); + $('#edit-app-fullpage-on-landing').prop('checked', originalValues.checkboxes.fullPageOnLanding); + + if (originalValues.icon) { + $('#edit-app-icon').css('background-image', `url(${originalValues.icon})`); + $('#edit-app-icon').attr('data-url', originalValues.icon); + $('#edit-app-icon').attr('data-base64', originalValues.icon); + $('#edit-app-icon-delete').show(); + } else { + $('#edit-app-icon').css('background-image', ''); + $('#edit-app-icon').removeAttr('data-url'); + $('#edit-app-icon').removeAttr('data-base64'); + $('#edit-app-icon-delete').hide(); + } + + if (originalValues.socialImage) { + $('#edit-app-social-image').css('background-image', `url(${originalValues.socialImage})`); + $('#edit-app-social-image').attr('data-url', originalValues.socialImage); + $('#edit-app-social-image').attr('data-base64', originalValues.socialImage); + } else { + $('#edit-app-social-image').css('background-image', ''); + $('#edit-app-social-image').removeAttr('data-url'); + $('#edit-app-social-image').removeAttr('data-base64'); + } +} + async function edit_app_section(cur_app_name) { $('section:not(.sidebar)').hide(); $('.tab-btn').removeClass('active'); @@ -628,8 +756,10 @@ async function edit_app_section(cur_app_name) { currently_editing_app = cur_app; // generate edit app section - let edit_app_section_html = generate_edit_app_section(cur_app); - $('#edit-app').html(edit_app_section_html); + $('#edit-app').html(generate_edit_app_section(cur_app)); + trackOriginalValues(); // Track initial field values + toggleSaveButton(); // Ensure Save button is initially disabled + toggleResetButton(); // Ensure Reset button is initially disabled $('#edit-app').show(); // -------------------------------------------------------- @@ -1024,11 +1154,12 @@ $(document).on('click', '.edit-app-save-btn', async function (e) { filetypeAssociations: filetype_associations, }).then(async (app) => { currently_editing_app = app; + trackOriginalValues(); // Update original values after save + toggleSaveButton(); //Disable Save Button after succesful save + toggleResetButton(); //DIsable Reset Button after succesful save $('#edit-app-error').hide(); $('#edit-app-success').show(); document.body.scrollTop = document.documentElement.scrollTop = 0; - // Re-enable submit button - $('.edit-app-save-btn').prop('disabled', false); // Update open-app-btn $(`.open-app-btn[data-app-uid="${uid}"]`).attr('data-app-name', app.name); $(`.open-app[data-uid="${uid}"]`).attr('data-app-name', app.name); @@ -1054,6 +1185,17 @@ $(document).on('click', '.edit-app-save-btn', async function (e) { }) }) +$(document).on('input change', '#edit-app input, #edit-app textarea, #edit-app select', () => { + toggleSaveButton(); + toggleResetButton(); +}); + +$(document).on('click', '.edit-app-reset-btn', function () { + resetToOriginalValues(); + toggleSaveButton(); // Disable Save button since values are reverted to original + toggleResetButton(); //Disable Reset button since values are reverted to original +}); + $(document).on('click', '.open-app-btn', async function (e) { puter.ui.launchApp($(this).attr('data-app-name')) }) @@ -1205,6 +1347,9 @@ $(document).on('click', '#edit-app-icon-delete', async function (e) { $('#edit-app-icon').removeAttr('data-url'); $('#edit-app-icon').removeAttr('data-base64'); $('#edit-app-icon-delete').hide(); + + toggleSaveButton(); + toggleResetButton(); }) $(document).on('click', '#edit-app-icon', async function (e) { @@ -1231,6 +1376,9 @@ $(document).on('click', '#edit-app-icon', async function (e) { $('#edit-app-icon').css('background-image', `url(${image})`); $('#edit-app-icon').attr('data-base64', image); $('#edit-app-icon-delete').show(); + + toggleSaveButton(); + toggleResetButton(); } }) @@ -2345,7 +2493,7 @@ async function initializeAssetsDirectory() { function generateSocialImageSection(app) { return ` -
+
Change Social Image
Remove social image @@ -2376,6 +2524,9 @@ $(document).on('click', '#edit-app-social-image', async function(e) { $('#edit-app-social-image').css('background-image', `url(${image})`); $('#edit-app-social-image').attr('data-base64', image); $('#edit-app-social-image-delete').show(); + + toggleSaveButton(); + toggleResetButton(); } });