feat: implement localStorage for form parameter persistence

- Add saveFormValues() function to store all form parameters in localStorage
- Add restoreFormValues() function to retrieve form parameters from localStorage
- Modify DOMContentLoaded event to restore form values on page load
- Add calls to saveFormValues() in both form submission handlers
- Add event listeners to save form values whenever any input changes

This enhancement improves user experience by preserving form settings between visits.
This commit is contained in:
2025-10-07 08:29:42 +02:00
parent 3d720ff426
commit 21c9bfd359
+55
View File
@@ -252,6 +252,45 @@
let currentPage = 1; let currentPage = 1;
const pageSize = 10; const pageSize = 10;
// Save form values to localStorage
function saveFormValues() {
const exerciseFormValues = {
minTable: document.getElementById('minTable').value,
maxTable: document.getElementById('maxTable').value,
numExercises: document.getElementById('numExercises').value,
multiplicationOnly: document.getElementById('multiplicationOnly').checked,
maxFirstOperand: document.getElementById('maxFirstOperand').value
};
const operationFormValues = {
numOperationExercises: document.getElementById('numOperationExercises').value
};
localStorage.setItem('exerciseFormValues', JSON.stringify(exerciseFormValues));
localStorage.setItem('operationFormValues', JSON.stringify(operationFormValues));
}
// Restore form values from localStorage
function restoreFormValues() {
// Restore exercise form values
const savedExerciseValues = localStorage.getItem('exerciseFormValues');
if (savedExerciseValues) {
const exerciseValues = JSON.parse(savedExerciseValues);
document.getElementById('minTable').value = exerciseValues.minTable || 1;
document.getElementById('maxTable').value = exerciseValues.maxTable || 10;
document.getElementById('numExercises').value = exerciseValues.numExercises || 15;
document.getElementById('multiplicationOnly').checked = exerciseValues.multiplicationOnly || false;
document.getElementById('maxFirstOperand').value = exerciseValues.maxFirstOperand || 10;
}
// Restore operation form values
const savedOperationValues = localStorage.getItem('operationFormValues');
if (savedOperationValues) {
const operationValues = JSON.parse(savedOperationValues);
document.getElementById('numOperationExercises').value = operationValues.numOperationExercises || 20;
}
}
// Function to load and display existing PDFs with pagination (sorted from newest to oldest) // Function to load and display existing PDFs with pagination (sorted from newest to oldest)
async function loadPdfList(page = 1) { async function loadPdfList(page = 1) {
const refreshBtn = document.getElementById('refreshListBtn'); const refreshBtn = document.getElementById('refreshListBtn');
@@ -424,9 +463,18 @@
// Load PDF list on page load // Load PDF list on page load
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
restoreFormValues();
loadPdfList(currentPage); loadPdfList(currentPage);
}); });
// Add event listeners to save form values on change
document.getElementById('minTable').addEventListener('change', saveFormValues);
document.getElementById('maxTable').addEventListener('change', saveFormValues);
document.getElementById('numExercises').addEventListener('change', saveFormValues);
document.getElementById('multiplicationOnly').addEventListener('change', saveFormValues);
document.getElementById('maxFirstOperand').addEventListener('change', saveFormValues);
document.getElementById('numOperationExercises').addEventListener('change', saveFormValues);
// Event listener for select all button // Event listener for select all button
document.getElementById('selectAllBtn').addEventListener('click', function() { document.getElementById('selectAllBtn').addEventListener('click', function() {
document.querySelectorAll('.file-checkbox').forEach(checkbox => { document.querySelectorAll('.file-checkbox').forEach(checkbox => {
@@ -523,6 +571,9 @@
document.getElementById('exerciseForm').addEventListener('submit', async function(e) { document.getElementById('exerciseForm').addEventListener('submit', async function(e) {
e.preventDefault(); e.preventDefault();
// Save form values to localStorage
saveFormValues();
const minTable = parseInt(document.getElementById('minTable').value); const minTable = parseInt(document.getElementById('minTable').value);
const maxTable = parseInt(document.getElementById('maxTable').value); const maxTable = parseInt(document.getElementById('maxTable').value);
const numExercises = parseInt(document.getElementById('numExercises').value); const numExercises = parseInt(document.getElementById('numExercises').value);
@@ -606,8 +657,12 @@
document.getElementById('operationExerciseForm').addEventListener('submit', async function(e) { document.getElementById('operationExerciseForm').addEventListener('submit', async function(e) {
e.preventDefault(); e.preventDefault();
// Save form values to localStorage
saveFormValues();
const numExercises = parseInt(document.getElementById('numOperationExercises').value); const numExercises = parseInt(document.getElementById('numOperationExercises').value);
const generateBtn = document.getElementById('generateOperationBtn'); const generateBtn = document.getElementById('generateOperationBtn');
const buttonText = document.getElementById('operationButtonText'); const buttonText = document.getElementById('operationButtonText');
const spinner = document.getElementById('operationSpinner'); const spinner = document.getElementById('operationSpinner');