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:
@@ -251,6 +251,45 @@
|
|||||||
// Current page for pagination
|
// Current page for pagination
|
||||||
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) {
|
||||||
@@ -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);
|
||||||
@@ -600,14 +651,18 @@
|
|||||||
spinner.classList.add('d-none');
|
spinner.classList.add('d-none');
|
||||||
generateBtn.disabled = false;
|
generateBtn.disabled = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle operation exercises form submission
|
// Handle operation exercises form submission
|
||||||
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');
|
||||||
|
|||||||
Reference in New Issue
Block a user