lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-21 04:36:18 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

enable checkboxes for workers table

Browse Source
This commit is contained in:
Nariman Jelveh
2025-08-03 18:24:01 -07:00
parent fab062b0fe
commit 970ba0bd77
4 changed files with 102 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dev-center/css/style.css
+31 -20
View File
@@ -1230,6 +1230,17 @@ dialog{
display: inline-block;
background-color: #e3f2fd;
color: #1976d2;
background-color: #f3f4f6;
color: #374151;
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin: 1px 0 0 0;
max-width: fit-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-select {
@@ -1254,28 +1265,28 @@ dialog{
width: 18px; margin-right: 5px; margin-bottom: -4px;
}
.category-badge {
display: inline-block;
background-color: #f2f2f2;
color: #555;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
margin-left: 8px;
border-radius: 6px;
vertical-align: middle;
display: inline-block;
background-color: #f2f2f2;
color: #555;
font-size: 12px;
font-weight: 500;
padding: 2px 6px;
margin-left: 8px;
border-radius: 6px;
vertical-align: middle;
}
.app-category {
display: inline-block;
background-color: #f3f4f6;
color: #374151;
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-top: 2px;
max-height: 18px;
line-height: 1.2;
white-space: nowrap;
display: inline-block;
background-color: #f3f4f6;
color: #374151;
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
margin-top: 2px;
max-height: 18px;
line-height: 1.2;
white-space: nowrap;
}
.app-row-toolbar span {
src/dev-center/js/apps.js
+28 -41
View File
@@ -273,7 +273,7 @@ $(document).on('click', '.deploy-btn', function (e) {
deploy(currently_editing_app, dropped_items);
})
$(document).on('click', '.edit-app, .got-to-edit-app', function (e) {
$(document).on('click', '.edit-app, .go-to-edit-app', function (e) {
const cur_app_name = $(this).attr('data-app-name')
edit_app_section(cur_app_name);
})
@@ -1460,21 +1460,22 @@ $(document).on('click', '#edit-app-icon', async function (e) {
*/
function generate_app_card(app) {
let h = ``;
h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}" style="height: 86px;">`;
// check box
h += `<td style="height: 60px; width: 20px; display: flex ; align-items: center;">`;
h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
h += `</div>`;
h += `</td>`;
// App info (title, category, toolbar)
h += `<td style="height: 72px; width: 450px;">`;
h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}" style="height: 86px;">`;
// check box
h += `<td style="height: 60px; width: 20px; display: flex ; align-items: center;">`;
h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
h += `</div>`;
h += `</td>`;
// App info (title, category, toolbar)
h += `<td style="height: 72px; width: 450px;">`;
// Wrapper for icon + content side by side
h += `<div style="display: flex; flex-direction: row; align-items: center; height: 86px; overflow: hidden;">`;
// Wrapper for icon + content side by side
h += `<div style="display: flex; flex-direction: row; align-items: center; height: 86px; overflow: hidden;">`;
// Icon
h += `<div class="got-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="
h += `<div class="go-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="
background-position: center;
background-repeat: no-repeat;
background-size: 92%;
@@ -1493,10 +1494,10 @@ h += `<div style="display: flex; flex-direction: row; align-items: center; heigh
h += `<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: visible;">`;
// Info block with fixed layout
h += `<div style="display: flex; flex-direction: column; justify-content: center; padding-left: 10px; flex-grow: 1; overflow: hidden; gap: 1px; height: 100%;">`;
h += `<div style="display: flex; flex-direction: column; justify-content: center; padding-left: 10px; flex-grow: 1; overflow: hidden; gap: 1px; height: 100%;">`;
// Title
h += `<h3 class="got-to-edit-app app-card-title" style="
// Title
h += `<h3 class="go-to-edit-app app-card-title" style="
margin: 0;
font-size: 16px;
line-height: 20px;
@@ -1512,19 +1513,7 @@ h += `<div style="display: flex; flex-direction: column; justify-content: center
if (app.metadata?.category) {
const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
if (category) {
h += `<span class="app-category" style="
background-color: #f3f4f6;
color: #374151;
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin: 1px 0 0 0;
max-width: fit-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">${html_encode(category.label)}</span>`;
h += `<span class="app-category" >${html_encode(category.label)}</span>`;
}
}
@@ -1543,18 +1532,17 @@ h += `</div>`;
// Toolbar
h += `<div class="app-toolbar-container" style="height: 16px; overflow: visible;">`;
h += `<div class="app-row-toolbar disable-user-select">`; // remove inline styles
h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}">Open</span>`;
h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`;
h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
h += `</div>`;
h += `</div>`;
// Toolbar
h += `<div class="app-toolbar-container" style="height: 16px; overflow: visible;">`;
h += `<div class="app-row-toolbar disable-user-select">`; // remove inline styles
h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}">Open</span>`;
h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`;
h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
h += `</div>`;
h += `</div>`;
h += `</div>`; // end info column
h += `</div>`; // end row
h += `</div>`; // end row
h += `</td>`;
@@ -2305,7 +2293,6 @@ $(document).on('change', '.app-checkbox', function (e) {
$('.delete-apps-btn').removeClass('disabled');
else
$('.delete-apps-btn').addClass('disabled');
})
$(document).on('click', '.delete-apps-btn', async function (e) {
src/dev-center/js/dev-center.js
+5
View File
@@ -123,9 +123,14 @@ $(document).on('click', '.tab-btn', async function (e) {
// append row to worker-list-table
$('#worker-list-table > tbody').append(`
<tr>
<td style="height: 60px; width: 20px; display: flex ; align-items: center;">
<input type="checkbox" class="worker-checkbox" data-worker-name="${name}" style="width: 20px; height: 20px;">
</td>
<td>${name}</td>
<td>${worker.deployed_at}</td>
<td>
<button class="button button-default">Edit</button>
<button class="button button-danger">Delete</button>
</td>
</tr>
`);
src/dev-center/js/workers.js
+38
View File
@@ -58,6 +58,44 @@ return new Response(\`Page \${params.page} not found\`, {status: 404});
}
$(document).on('change', '.worker-checkbox', function (e) {
// determine if select-all checkbox should be checked, indeterminate, or unchecked
if ($('.worker-checkbox:checked').length === $('.worker-checkbox').length) {
$('.select-all-workers').prop('indeterminate', false);
$('.select-all-workers').prop('checked', true);
} else if ($('.worker-checkbox:checked').length > 0) {
$('.select-all-workers').prop('indeterminate', true);
$('.select-all-workers').prop('checked', false);
}
else {
$('.select-all-workers').prop('indeterminate', false);
$('.select-all-workers').prop('checked', false);
}
// activate row
if ($(this).is(':checked'))
$(this).closest('tr').addClass('active');
else
$(this).closest('tr').removeClass('active');
// enable delete button if at least one checkbox is checked
if ($('.worker-checkbox:checked').length > 0)
$('.delete-workers-btn').removeClass('disabled');
else
$('.delete-workers-btn').addClass('disabled');
})
$(document).on('change', '.select-all-workers', function (e) {
if ($(this).is(':checked')) {
$('.worker-checkbox').prop('checked', true);
$('.worker-card').addClass('active');
$('.delete-workers-btn').removeClass('disabled');
} else {
$('.worker-checkbox').prop('checked', false);
$('.worker-card').removeClass('active');
$('.delete-workers-btn').addClass('disabled');
}
})
export default init_workers;