222 lines
8.4 KiB
JavaScript
222 lines
8.4 KiB
JavaScript
// renderer.js
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
console.log('DOM fully loaded. renderer.js is now running.');
|
|
|
|
// --- 0. INITIALIZE FORM DEFAULTS ---
|
|
const publicationDateInput = document.getElementById('publicationDate');
|
|
if (publicationDateInput) {
|
|
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'));
|
|
tabContents.forEach(content => content.classList.remove('active'));
|
|
button.classList.add('active');
|
|
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 ---
|
|
const addAlarmBtn = document.getElementById('add-alarm-btn');
|
|
const alarmsTableBody = document.getElementById('alarms-table-body');
|
|
const alarmTemplate = document.getElementById('alarm-row-template');
|
|
|
|
addAlarmBtn.addEventListener('click', () => {
|
|
const currentIdInputs = alarmsTableBody.querySelectorAll('[name="alarm_id"]');
|
|
let maxId = 0;
|
|
currentIdInputs.forEach(input => {
|
|
const currentId = parseInt(input.value, 10);
|
|
if (!isNaN(currentId) && currentId > maxId) {
|
|
maxId = currentId;
|
|
}
|
|
});
|
|
const nextId = maxId + 1;
|
|
const paddedId = nextId.toString().padStart(3, '0');
|
|
|
|
const clone = alarmTemplate.content.cloneNode(true);
|
|
clone.querySelector('[name="alarm_id"]').value = nextId;
|
|
clone.querySelector('[name="alarm_name"]').value = `ALARM_${paddedId}`;
|
|
const removeBtn = clone.querySelector('.remove-row-btn');
|
|
removeBtn.addEventListener('click', (e) => {
|
|
e.target.closest('tr').remove();
|
|
});
|
|
alarmsTableBody.appendChild(clone);
|
|
});
|
|
|
|
const addWarningBtn = document.getElementById('add-warning-btn');
|
|
const warningsTableBody = document.getElementById('warnings-table-body');
|
|
const warningTemplate = document.getElementById('warning-row-template');
|
|
|
|
addWarningBtn.addEventListener('click', () => {
|
|
const currentIdInputs = warningsTableBody.querySelectorAll('[name="warning_id"]');
|
|
let maxId = 0;
|
|
currentIdInputs.forEach(input => {
|
|
const currentId = parseInt(input.value, 10);
|
|
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
|
|
const addCounterBtn = document.getElementById('add-counter-btn');
|
|
const countersTableBody = document.getElementById('counters-table-body');
|
|
const counterTemplate = document.getElementById('counter-row-template');
|
|
|
|
addCounterBtn.addEventListener('click', () => {
|
|
const currentIdInputs = countersTableBody.querySelectorAll('[name="counter_id"]');
|
|
let maxId = 0;
|
|
currentIdInputs.forEach(input => {
|
|
const currentId = parseInt(input.value, 10);
|
|
if (!isNaN(currentId) && currentId > maxId) {
|
|
maxId = currentId;
|
|
}
|
|
});
|
|
const nextCounterId = maxId + 1;
|
|
const paddedCounterId = nextCounterId.toString().padStart(3, '0');
|
|
|
|
const clone = counterTemplate.content.cloneNode(true);
|
|
clone.querySelector('[name="counter_id"]').value = nextCounterId;
|
|
clone.querySelector('[name="counter_name"]').value = `COUNTER_${paddedCounterId}`;
|
|
const removeBtn = clone.querySelector('.remove-row-btn');
|
|
removeBtn.addEventListener('click', (e) => {
|
|
e.target.closest('tr').remove();
|
|
});
|
|
countersTableBody.appendChild(clone);
|
|
});
|
|
|
|
// --- 3. FORM SUBMISSION LOGIC ---
|
|
const form = document.getElementById('machine-form');
|
|
if (form) {
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
|
|
// A. Collect data from the main "Machine" tab using FormData
|
|
const formData = new FormData(form);
|
|
// Convert FormData to a plain object
|
|
const mainData = {};
|
|
for (const [key, value] of formData.entries()) {
|
|
// This check prevents multi-value fields from overwriting themselves
|
|
if (!mainData[key]) {
|
|
mainData[key] = value;
|
|
}
|
|
}
|
|
mainData.addins = formData.getAll('addins');
|
|
|
|
// B. Collect all alarm rows from the table
|
|
const alarmRows = alarmsTableBody.querySelectorAll('tr');
|
|
const alarmsData = [];
|
|
alarmRows.forEach(row => {
|
|
const alarm = {
|
|
id: row.querySelector('[name="alarm_id"]').value,
|
|
name: row.querySelector('[name="alarm_name"]').value,
|
|
message: row.querySelector('[name="alarm_message"]').value,
|
|
};
|
|
if (alarm.message) {
|
|
alarmsData.push(alarm);
|
|
}
|
|
});
|
|
|
|
// D. Collect all warning rows from the table
|
|
const warningRows = warningsTableBody.querySelectorAll('tr');
|
|
const warningsData = [];
|
|
warningRows.forEach(row => {
|
|
const warning = {
|
|
id: row.querySelector('[name="warning_id"]').value,
|
|
name: row.querySelector('[name="warning_name"]').value,
|
|
message: row.querySelector('[name="warning_message"]').value,
|
|
};
|
|
if (warning.message) {
|
|
warningsData.push(warning);
|
|
}
|
|
});
|
|
|
|
// E. Collect all counter rows from the table
|
|
const counterRows = countersTableBody.querySelectorAll('tr');
|
|
const countersData = [];
|
|
counterRows.forEach(row => {
|
|
const counter = {
|
|
id: row.querySelector('[name="counter_id"]').value,
|
|
name: row.querySelector('[name="counter_name"]').value,
|
|
type: row.querySelector('[name="counter_type"]').value,
|
|
description: row.querySelector('[name="counter_description"]').value,
|
|
};
|
|
if (counter.type) {
|
|
countersData.push(counter);
|
|
}
|
|
});
|
|
|
|
// C. Combine all data into a single object
|
|
const finalData = { ...mainData, alarms: alarmsData, warnings: warningsData, counters: countersData };
|
|
|
|
console.log('Sending all collected data to main process:', finalData);
|
|
|
|
try {
|
|
const result = await window.electronAPI.submitForm(finalData);
|
|
if (result.success) {
|
|
// // Reset the entire form to its initial state
|
|
// form.reset();
|
|
// // Re-apply the defaults that are not part of the standard reset
|
|
// document.getElementById('publicationDate').value = new Date().toISOString().split('T')[0];
|
|
// document.querySelector('#stopReasonYes').checked = true; // Set StopReason back to Yes
|
|
// updateFilename(); // Clear the filename preview
|
|
}
|
|
} catch (error) {
|
|
console.error('Error during form submission process:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- 4. TAB NAVIGATION BUTTONS ---
|
|
const tabOrder = [
|
|
'machine-tab',
|
|
'alarms-tab',
|
|
'warnings-tab',
|
|
'counters-tab',
|
|
'setpoints-tab',
|
|
'realtime-tab'
|
|
];
|
|
|
|
// Add event listeners to all "Next" buttons
|
|
document.querySelectorAll('.next-tab-btn').forEach((btn, idx) => {
|
|
btn.addEventListener('click', () => {
|
|
// Move to the next tab
|
|
const nextTabId = tabOrder[idx + 1];
|
|
if (nextTabId) {
|
|
// Switch tab button active state
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.querySelector(`[data-tab="${nextTabId.replace('-tab','')}"]`).classList.add('active');
|
|
// 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';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}); |