github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 14:20:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #934 from ria147/ria147/update-dev-center

Browse Source 
Enable Save button in Dev Center only when settings change and add a Reset button
This commit is contained in:
Nariman Jelveh 2024-11-29 07:27:10 -08:00 committed by GitHub
commit 1cfb3f5a75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 163 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dev-center/css/style.css
View File

@ -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);
}

163
src/dev-center/js/dev-center.js
View File

@ -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) {
<input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
<label for="edit-app-icon">Icon</label>
<div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}>
<div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''} ${app.icon ? 'data-base64="' + html_encode(app.icon) + '"' : ''} >
<div id="change-app-icon">Change App Icon</div>
</div>
<span id="edit-app-icon-delete" style="${app.icon ? 'display:block;' : ''}">Remove icon</span>
@ -613,12 +614,139 @@ function generate_edit_app_section(app) {
<hr style="margin-top: 40px;">
<button type="button" class="edit-app-save-btn button button-primary">Save</button>
<button type="button" class="edit-app-reset-btn button button-secondary">Reset</button>
</form>
</div>
`
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 `
<label for="edit-app-social-image">Social Graph Image (1200×630 strongly recommended)</label>
<div id="edit-app-social-image" class="social-image-preview" ${app.metadata?.social_image ? `style="background-image:url(${html_encode(app.metadata.social_image)})" data-url="${html_encode(app.metadata.social_image)}"` : ''}>
<div id="edit-app-social-image" class="social-image-preview" ${app.metadata?.social_image ? `style="background-image:url(${html_encode(app.metadata.social_image)})" data-url="${html_encode(app.metadata.social_image)}" data-base64="${html_encode(app.metadata.social_image)}"` : ''}>
<div id="change-social-image">Change Social Image</div>
</div>
<span id="edit-app-social-image-delete" style="${app.metadata?.social_image ? 'display:block;' : ''}">Remove social image</span>
@ -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();
}
});