working on custom prompt table. see #12

customprompts/mzta-custom-prompts.css

@@ -1,6 +1,6 @@
 @media (prefers-color-scheme: dark) {
     body {
-        background-color: rgb(35, 34, 43);
+        background-color: #1C1B22;
         color: rgb(251, 251, 254);
     }
     
@@ -8,5 +8,40 @@
     a:visited { color: #409EFF; }  
     a:hover { color: #66B1FF; }   
     a:active { color: #66B1FF; }
-    
+
+    table {
+        background-color: #1C1B22;
+    }
+
+    table th {
+        background-color: #23222B;
+        border: 1px solid rgb(251, 251, 254);
+        color: rgb(194, 194, 194);
+        padding: 8px;
+        text-align: left;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid #ccc;
+}
+
+table tr {
+    border-bottom: 1px solid #ccc;
+}
+
+table th {
+    padding: 8px;
+    text-align: left;
+}
+
+table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+table td.properties{
+    white-space: nowrap;
 }

customprompts/mzta-custom-prompts.html

@@ -10,7 +10,21 @@
         <h1>Manage Prompts</h1>
         <p>Manage your custom prompts.</p>
     </div>
-    <script src="mzta-list.js"></script>
+    <div id="all_prompts">
+        <table>
+            <thead>
+              <tr>
+                <th class="sort" data-sort="id">ID</th>
+                <th class="sort" data-sort="name">Name</th>
+                <th class="sort" data-sort="text">Text</th>
+                <th>Properties</th>
+              </tr>
+            </thead>
+            <tbody class="list">
+            </tbody>
+          </table>
+    </div>
+    <script src="list.js"></script>
     <script src="mzta-custom-prompts.js" type="module"></script>
     <script src="../js/mzta-i18n.js"></script>
 </body>

customprompts/mzta-custom-prompts.js

@@ -16,3 +16,58 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { defaultPrompts } from "../js/mzta-prompts.js";
+
+document.addEventListener('DOMContentLoaded', async () => {
+    let options = {
+        valueNames: [ 'id', 'name', 'text', 'type', 'action', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'is_default', attr: 'is_default_val'}, { name: 'enabled', attr: 'enabled_val'} ],
+        item: `<tr>
+            <td class="id"></td>
+            <td class="name"></td>
+            <td class="text"></td>
+            <td class="properties">
+                <input type="checkbox" class="need_selected"> Need Select
+                <br>
+                <input type="checkbox" class="need_signature"> Need Signature
+                <br>
+                <input type="checkbox" class="need_custom_text"> Need Custom Text
+                <br>
+                <span class="is_default">Is Default</span>
+                <br>
+                <span class="enabled">Enabled</span>
+            </td>
+        </tr>`
+    };
+
+    let values = defaultPrompts; // test in browser
+    //let values = await getPrompts();  // production
+
+    console.log('>>>>>>>>>>>>>>>> values: ' + JSON.stringify(values));
+
+    let promptsList = new List('all_prompts', options, values);
+
+    checkSelectedBoxes();
+
+    //i18n.updateDocument();    // production
+}, { once: true });
+  
+
+function checkSelectedBoxes() {
+    // Get all elements with the class 'need_selected' that are checkboxes
+    const checkboxes = [
+        ...document.querySelectorAll('.need_selected[type="checkbox"]'),
+        ...document.querySelectorAll('.need_signature[type="checkbox"]'),
+        ...document.querySelectorAll('.need_custom_text[type="checkbox"]'),
+    ];
+
+    // Iterate through the checkboxes
+    checkboxes.forEach(checkbox => {
+        // Check if the 'checked' attribute is "0"
+        if (checkbox.getAttribute('checked_val') === "0") {
+            // Uncheck the checkbox
+            checkbox.checked = false;
+        } else {
+            checkbox.checked = true;
+        }
+    });
+}