Adding bulk alarm adding - Copy and paste from Excel on all tables

index.html

@@ -238,7 +238,7 @@
         <button class="tab-btn" data-tab="warnings" id="warnings-tab-btn">Warnings</button>
         <button class="tab-btn" data-tab="counters" id="counters-tab-btn">Counters</button>
         <button class="tab-btn" data-tab="setpoints" id="setpoints-tab-btn">Setpoints</button>
-        <button class="tab-btn" data-tab="realtime-variables" id="realtime-tab-btn">Real Time Variables</button>
+        <button class="tab-btn" data-tab="realtime" id="realtime-tab-btn">Real Time Variables</button>
     </nav>
     
     <form id="machine-form">
@@ -406,13 +406,15 @@
             <fieldset>
                 <legend>Alarms Exposed by the Machine</legend>
                 <p>Define all alarms for the machine. If the message is empty, the alarm will not be generated.</p>
+                <p>You can copy and paste alarms from an Excel spreadsheet directly into the table below. (missing lines will be generated automatically)</p>
                 <table class="dynamic-table">
                     <thead>
                         <tr><th class="col-id">ID</th><th class="col-name">Name</th><th>Message</th><th class="col-actions">Actions</th></tr>
                     </thead>
                     <tbody id="alarms-table-body"></tbody>
                 </table>
-                <button type="button" class="add-row-btn" id="add-alarm-btn">Add Alarm</button>
+                <input type="number" id="bulk-alarm-count" min="1" placeholder="Number of alarms to add" style="width: 180px;">
+                <button type="button" id="add-multiple-alarms-btn" class="add-row-btn" style="width:auto;">Add Alarms</button>
             </fieldset>
             <button type="button" class="next-tab-btn">Next</button>
         </div>
@@ -421,13 +423,15 @@
             <fieldset>
                 <legend>Warnings Exposed by the Machine</legend>
                 <p>Define all warnings for the machine. If the message is empty, the warning will not be generated.</p>
+                <p>You can copy and paste alarms from an Excel spreadsheet directly into the table below. (missing lines will be generated automatically)</p>
                 <table class="dynamic-table">
                     <thead>
                         <tr><th class="col-id">ID</th><th class="col-name">Name</th><th>Message</th><th class="col-actions">Actions</th></tr>
                     </thead>
                     <tbody id="warnings-table-body"></tbody>
                 </table>
-                <button type="button" class="add-row-btn" id="add-warning-btn">Add Warning</button>
+                <input type="number" id="bulk-warning-count" min="1" placeholder="Number of warnings to add">
+                <button type="button" id="add-multiple-warnings-btn" class="add-row-btn">Add Warnings</button>
             </fieldset>
             <button type="button" class="next-tab-btn">Next</button>
         </div>
@@ -447,6 +451,7 @@
                 <p>
                     You can add more counters as needed. Additional defective unit counter should be provided per type of defect (bad open flap, underfill, not printed, bad pump orientation, ...etc.) and station (head 1, nozzleX,....etc.).
                 </p>
+                <p>You can copy and paste alarms from an Excel spreadsheet directly into the table below. (missing lines will be generated automatically)</p>
                 <table class="dynamic-table">
                     <thead>
                         <tr><th class="col-id">ID</th><th class="col-name">Name</th><th>Type</th><th class="col-description">Description</th><th class="col-actions">Actions</th></tr>
@@ -485,6 +490,7 @@
             <fieldset>
                 <legend>Setpoints</legend>
                 <p>Define all setpoints for the machine. If the description is empty, the setpoint will not be generated.</p>
+                <p>You can copy and paste alarms from an Excel spreadsheet directly into the table below. (missing lines will be generated automatically)</p>
                 <table class="dynamic-table">
                     <thead>
                         <tr><th class="col-id">ID</th><th class="col-name">Name</th><th>Description</th><th class="col-actions">Actions</th></tr>
@@ -500,6 +506,7 @@
             <fieldset>
                 <legend>Real Time Variables</legend>
                 <p>Define all real time variables for the machine. If the description is empty, the variable will not be generated.</p>
+                <p>You can copy and paste alarms from an Excel spreadsheet directly into the table below. (missing lines will be generated automatically)</p>
                 <table class="dynamic-table">
                     <thead>
                         <tr><th class="col-id">ID</th><th class="col-name">Name</th><th>Description</th><th class="col-actions">Actions</th></tr>

renderer.js

@@ -1,7 +1,6 @@
 // renderer.js
 
 document.addEventListener('DOMContentLoaded', () => {
-
   console.log('DOM fully loaded. renderer.js is now running.');
 
   // --- 0. INITIALIZE FORM DEFAULTS ---
@@ -10,11 +9,9 @@ document.addEventListener('DOMContentLoaded', () => {
     publicationDateInput.value = new Date().toISOString().split('T')[0];
   }
 
-
   // --- 1. TAB SWITCHING LOGIC ---
   const tabButtons = document.querySelectorAll('.tab-btn');
   const tabContents = document.querySelectorAll('.tab-content');
-
   tabButtons.forEach(button => {
     button.addEventListener('click', () => {
       tabButtons.forEach(btn => btn.classList.remove('active'));
@@ -23,87 +20,178 @@ document.addEventListener('DOMContentLoaded', () => {
       document.getElementById(button.dataset.tab + '-tab').classList.add('active');
     });
   });
-  // Set the initial active tab content
   document.getElementById('machine-tab').classList.add('active');
 
-  // --- 2. DYNAMIC ALARM ROW LOGIC ---
+  // --- 2. GENERIC DYNAMIC TABLE LOGIC ---
-  const addAlarmBtn = document.getElementById('add-alarm-btn');
+  function setupDynamicTable({
-  const alarmsTableBody = document.getElementById('alarms-table-body');
+    tableBodyId,
-  const alarmTemplate = document.getElementById('alarm-row-template');
+    templateId,
+    bulkInputId,
+    bulkBtnId,
+    fields,      // Array of field names in order (e.g. ['alarm_id', 'alarm_name', 'alarm_message'])
+    prefix,      // e.g. 'ALARM'
+    nameFormat,  // e.g. (id, paddedId) => `ALARM_${paddedId}`
+  }) {
+    const tableBody = document.getElementById(tableBodyId);
+    const rowTemplate = document.getElementById(templateId);
+    const bulkInput = bulkInputId ? document.getElementById(bulkInputId) : null;
+    const bulkBtn = bulkBtnId ? document.getElementById(bulkBtnId) : null;
 
-  addAlarmBtn.addEventListener('click', () => {
+    // Add initial row
-    const currentIdInputs = alarmsTableBody.querySelectorAll('[name="alarm_id"]');
+    addRow(tableBody, rowTemplate, 1, fields, prefix, nameFormat);
-    let maxId = 0;
+
-    currentIdInputs.forEach(input => {
+    // Bulk add
-      const currentId = parseInt(input.value, 10);
+    if (bulkBtn && bulkInput) {
-      if (!isNaN(currentId) && currentId > maxId) {
+      bulkBtn.addEventListener('click', () => {
-        maxId = currentId;
+        let count = parseInt(bulkInput.value, 10);
+        if (isNaN(count) || count < 1) count = 1;
+        const currentIdInputs = tableBody.querySelectorAll(`[name="${fields[0]}"]`);
+        let maxId = 0;
+        currentIdInputs.forEach(input => {
+          const currentId = parseInt(input.value, 10);
+          if (!isNaN(currentId) && currentId > maxId) maxId = currentId;
+        });
+        for (let i = 1; i <= count; i++) {
+          addRow(tableBody, rowTemplate, maxId + i, fields, prefix, nameFormat);
+        }
+      });
+    }
+
+    // Paste from Excel
+    tableBody.addEventListener('paste', (event) => {
+      const targetCell = event.target.closest('td');
+      const targetRow = event.target.closest('tr');
+      const allRows = Array.from(tableBody.querySelectorAll('tr'));
+      let startRowIdx = allRows.indexOf(targetRow);
+      if (startRowIdx === -1) startRowIdx = allRows.length;
+
+      // Find the cell index in the row
+      let startCellIdx = 0;
+      if (targetCell && targetRow) {
+        const cells = Array.from(targetRow.children);
+        startCellIdx = cells.indexOf(targetCell);
+        if (startCellIdx === -1) startCellIdx = 0;
       }
-    });
-    const nextId = maxId + 1;
-    const paddedId = nextId.toString().padStart(3, '0');
 
-    const clone = alarmTemplate.content.cloneNode(true);
+      // Get clipboard data
-    clone.querySelector('[name="alarm_id"]').value = nextId;
+      const clipboardData = event.clipboardData || window.clipboardData;
-    clone.querySelector('[name="alarm_name"]').value = `ALARM_${paddedId}`;
+      const pastedData = clipboardData.getData('Text');
-    const removeBtn = clone.querySelector('.remove-row-btn');
+      if (!pastedData) return;
-    removeBtn.addEventListener('click', (e) => {
+
-      e.target.closest('tr').remove();
+      // Find current max ID for auto-increment
+      const currentIdInputs = tableBody.querySelectorAll(`[name="${fields[0]}"]`);
+      let maxId = 0;
+      currentIdInputs.forEach(input => {
+        const currentId = parseInt(input.value, 10);
+        if (!isNaN(currentId) && currentId > maxId) maxId = currentId;
+      });
+
+      // Split rows by newline, columns by tab
+      const rows = pastedData.trim().split(/\r?\n/);
+      rows.forEach((row, rowOffset) => {
+        const cols = row.split('\t');
+        if (cols.every(col => !col.trim())) return; // Ignore empty rows
+
+        let rowToFill = allRows[startRowIdx + rowOffset];
+        if (!rowToFill) {
+          // Add new row if needed
+          maxId += 1;
+          rowToFill = addRow(tableBody, rowTemplate, maxId, fields, prefix, nameFormat);
+        }
+
+        // Get all editable fields in the row
+        const editableFields = fields.map(f => rowToFill.querySelector(`[name="${f}"]`));
+
+        // If only last field (description/message) is pasted, auto-fill ID and name
+        if (cols.length === 1 || (cols.length > 0 && cols.slice(0, -1).every(col => !col.trim()))) {
+          maxId += (!rowToFill.querySelector(`[name="${fields[0]}"]`).value ? 1 : 0);
+          const paddedId = maxId.toString().padStart(3, '0');
+          if (editableFields[0]) editableFields[0].value = maxId;
+          if (editableFields[1] && nameFormat) editableFields[1].value = nameFormat(maxId, paddedId);
+          if (editableFields[editableFields.length - 1]) editableFields[editableFields.length - 1].value = cols[cols.length - 1].trim();
+        } else {
+          // Paste values to the right, only filling available cells
+          for (let colOffset = 0; colOffset < cols.length; colOffset++) {
+            const fieldIdx = startCellIdx + colOffset;
+            if (fieldIdx < editableFields.length && editableFields[fieldIdx]) {
+              editableFields[fieldIdx].value = cols[colOffset].trim();
+            }
+          }
+        }
+      });
+
+      event.preventDefault(); // Prevent default paste
     });
-    alarmsTableBody.appendChild(clone);
+  }
+
+  function addRow(tableBody, rowTemplate, id, fields, prefix, nameFormat) {
+    const paddedId = id.toString().padStart(3, '0');
+    const clone = rowTemplate.content.cloneNode(true);
+    if (fields[0]) clone.querySelector(`[name="${fields[0]}"]`).value = id;
+    if (fields[1] && nameFormat) clone.querySelector(`[name="${fields[1]}"]`).value = nameFormat(id, paddedId);
+    const removeBtn = clone.querySelector('.remove-row-btn');
+    if (removeBtn) {
+      removeBtn.addEventListener('click', (e) => {
+        e.target.closest('tr').remove();
+      });
+    }
+    tableBody.appendChild(clone);
+    return tableBody.querySelectorAll('tr')[tableBody.querySelectorAll('tr').length - 1];
+  }
+
+  // --- ALARMS ---
+  setupDynamicTable({
+    tableBodyId: 'alarms-table-body',
+    templateId: 'alarm-row-template',
+    bulkInputId: 'bulk-alarm-count',
+    bulkBtnId: 'add-multiple-alarms-btn',
+    fields: ['alarm_id', 'alarm_name', 'alarm_message'],
+    prefix: 'ALARM',
+    nameFormat: (id, paddedId) => `ALARM_${paddedId}`
   });
 
-  const addWarningBtn = document.getElementById('add-warning-btn');
+  // --- WARNINGS ---
-  const warningsTableBody = document.getElementById('warnings-table-body');
+  setupDynamicTable({
-  const warningTemplate = document.getElementById('warning-row-template');
+    tableBodyId: 'warnings-table-body',
-
+    templateId: 'warning-row-template',
-  addWarningBtn.addEventListener('click', () => {
+    bulkInputId: 'bulk-warning-count',
-    const currentIdInputs = warningsTableBody.querySelectorAll('[name="warning_id"]');
+    bulkBtnId: 'add-multiple-warnings-btn',
-    let maxId = 0;
+    fields: ['warning_id', 'warning_name', 'warning_message'],
-    currentIdInputs.forEach(input => {
+    prefix: 'WARNING',
-      const currentId = parseInt(input.value, 10);
+    nameFormat: (id, paddedId) => `WARNING_${paddedId}`
-      if (!isNaN(currentId) && currentId > maxId) {
-        maxId = currentId;
-      }
-    });
-    const nextWarningId = maxId + 1;
-    const paddedWarningId = nextWarningId.toString().padStart(3, '0');
-
-    const clone = warningTemplate.content.cloneNode(true);
-    clone.querySelector('[name="warning_id"]').value = nextWarningId;
-    clone.querySelector('[name="warning_name"]').value = `WARNING_${paddedWarningId}`;
-    const removeBtn = clone.querySelector('.remove-row-btn');
-    removeBtn.addEventListener('click', (e) => {
-      e.target.closest('tr').remove();
-    });
-    warningsTableBody.appendChild(clone);
   });
 
-  //dynamic row for the counter tab
+  // --- COUNTERS ---
-  const addCounterBtn = document.getElementById('add-counter-btn');
+  setupDynamicTable({
-  const countersTableBody = document.getElementById('counters-table-body');
+    tableBodyId: 'counters-table-body',
-  const counterTemplate = document.getElementById('counter-row-template');
+    templateId: 'counter-row-template',
+    bulkInputId: null, // Add bulk if you want
+    bulkBtnId: null,   // Add bulk if you want
+    fields: ['counter_id', 'counter_name', 'counter_type', 'counter_description'],
+    prefix: 'COUNTER',
+    nameFormat: (id, paddedId) => `COUNTER_${paddedId}`
+  });
 
-  addCounterBtn.addEventListener('click', () => {
+  // --- SETPOINTS ---
-    const currentIdInputs = countersTableBody.querySelectorAll('[name="counter_id"]');
+  setupDynamicTable({
-    let maxId = 0;
+    tableBodyId: 'setpoints-table-body',
-    currentIdInputs.forEach(input => {
+    templateId: 'setpoint-row-template',
-      const currentId = parseInt(input.value, 10);
+    bulkInputId: null, // Add bulk if you want
-      if (!isNaN(currentId) && currentId > maxId) {
+    bulkBtnId: null,   // Add bulk if you want
-        maxId = currentId;
+    fields: ['setpoint_id', 'setpoint_name', 'setpoint_message'],
-      }
+    prefix: 'SETPOINT',
-    });
+    nameFormat: (id, paddedId) => `SETPOINT_${paddedId}`
-    const nextCounterId = maxId + 1;
+  });
-    const paddedCounterId = nextCounterId.toString().padStart(3, '0');
 
-    const clone = counterTemplate.content.cloneNode(true);
+  // --- REALTIME VARIABLES ---
-    clone.querySelector('[name="counter_id"]').value = nextCounterId;
+  setupDynamicTable({
-    clone.querySelector('[name="counter_name"]').value = `COUNTER_${paddedCounterId}`;
+    tableBodyId: 'realtime-table-body',
-    const removeBtn = clone.querySelector('.remove-row-btn');
+    templateId: 'realtime-row-template',
-    removeBtn.addEventListener('click', (e) => {
+    bulkInputId: null, // Add bulk if you want
-      e.target.closest('tr').remove();
+    bulkBtnId: null,   // Add bulk if you want
-    });
+    fields: ['realtime_id', 'realtime_name', 'realtime_message'],
-    countersTableBody.appendChild(clone);
+    prefix: 'REALTIME',
+    nameFormat: (id, paddedId) => `REALTIME_${paddedId}`
   });
 
   // --- 3. FORM SUBMISSION LOGIC ---
@@ -201,8 +289,12 @@ document.addEventListener('DOMContentLoaded', () => {
   // Add event listeners to all "Next" buttons
   document.querySelectorAll('.next-tab-btn').forEach((btn, idx) => {
     btn.addEventListener('click', () => {
-      // Move to the next tab
+      // Find the currently active tab
-      const nextTabId = tabOrder[idx + 1];
+      const currentTab = document.querySelector('.tab-content.active');
+      if (!currentTab) return;
+      const currentTabId = currentTab.id;
+      const currentIdx = tabOrder.indexOf(currentTabId);
+      const nextTabId = tabOrder[currentIdx + 1];
       if (nextTabId) {
         // Switch tab button active state
         document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
@@ -210,12 +302,6 @@ document.addEventListener('DOMContentLoaded', () => {
         // Switch tab content active state
         document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
         document.getElementById(nextTabId).classList.add('active');
-        // Show submit button only on last tab
-        if (nextTabId === 'realtime-tab') {
-          document.getElementById('submit-container').style.display = '';
-        } else {
-          document.getElementById('submit-container').style.display = 'none';
-        }
       }
     });
   });