From 970ba0bd7720a036816f31c3bb3b13d12df24962 Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <nj@puter.com>
Date: Sat, 2 Aug 2025 15:39:57 -0700
Subject: [PATCH] enable checkboxes for workers table

---
 src/dev-center/css/style.css    | 51 ++++++++++++++----------
 src/dev-center/js/apps.js       | 69 +++++++++++++--------------------
 src/dev-center/js/dev-center.js |  5 +++
 src/dev-center/js/workers.js    | 38 ++++++++++++++++++
 4 files changed, 102 insertions(+), 61 deletions(-)

diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css
index 73f461c90..eac0e6fc1 100644
--- a/src/dev-center/css/style.css
+++ b/src/dev-center/css/style.css
@@ -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 {
diff --git a/src/dev-center/js/apps.js b/src/dev-center/js/apps.js
index 3c86d521a..4da813110 100644
--- a/src/dev-center/js/apps.js
+++ b/src/dev-center/js/apps.js
@@ -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) {
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index bec57515a..56f14d378 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -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>
                 `);
diff --git a/src/dev-center/js/workers.js b/src/dev-center/js/workers.js
index 2ad8b9a4d..47d23f40a 100644
--- a/src/dev-center/js/workers.js
+++ b/src/dev-center/js/workers.js
@@ -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;
\ No newline at end of file