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) {
-
+
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 `
-
+
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();
}
});