servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

improve investment input field

Browse source
This commit is contained in:
Tobias Brunner 2025-07-23 14:38:30 +02:00
parent e4ba1378b6
commit adc3a6b905
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
3 changed files with 91 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

74
hub/services/static/js/roi-calculator/input-utils.js
View file

@ -44,13 +44,56 @@ class InputUtils {
}
try {
// Remove non-numeric characters except commas
let value = input.value.replace(/[^\d,]/g, '');
// Allow only digits, no immediate formatting during typing
let value = input.value.replace(/[^\d]/g, '');
// Handle empty input
if (!value) {
input.setAttribute('data-value', '0');
return;
}
// Parse the numeric value
let numericValue = InputUtils.parseFormattedNumber(value);
let numericValue = parseInt(value) || 0;
// Enforce min/max limits
// Update the data attribute with the raw numeric value (no limits during typing)
input.setAttribute('data-value', numericValue.toString());
// Update the input value (keep it clean, no commas during typing)
input.value = value;
// Update the slider if it exists (with limits)
const slider = document.getElementById('investment-slider');
if (slider) {
const minValue = parseInt(slider.min) || 100000;
const maxValue = parseInt(slider.max) || 2000000;
const sliderValue = Math.max(minValue, Math.min(maxValue, numericValue));
slider.value = sliderValue;
}
// Trigger calculations with debouncing
if (window.ROICalculatorApp && window.ROICalculatorApp.calculator) {
clearTimeout(input._calculationTimeout);
input._calculationTimeout = setTimeout(() => {
window.ROICalculatorApp.calculator.updateCalculations();
}, 300); // 300ms delay to avoid excessive calculations during typing
}
} catch (error) {
console.error('Error handling investment amount input:', error);
// Set a safe default value
input.setAttribute('data-value', '500000');
input.value = '500000';
}
}
static handleInvestmentAmountBlur(input) {
if (!input) return;
try {
// Get the numeric value
let numericValue = parseInt(input.getAttribute('data-value')) || 500000;
// Enforce min/max limits on blur
const minValue = 100000;
const maxValue = 2000000;
@ -60,30 +103,43 @@ class InputUtils {
numericValue = maxValue;
}
// Update the data attribute with the raw numeric value
// Update the data attribute with the corrected value
input.setAttribute('data-value', numericValue.toString());
// Format and display the value with commas
// Format and display the value with commas on blur
input.value = InputUtils.formatNumberWithCommas(numericValue);
// Update the slider if it exists
// Update the slider
const slider = document.getElementById('investment-slider');
if (slider) {
slider.value = numericValue;
}
// Trigger calculations
// Trigger immediate calculation on blur
if (window.ROICalculatorApp && window.ROICalculatorApp.calculator) {
clearTimeout(input._calculationTimeout);
window.ROICalculatorApp.calculator.updateCalculations();
}
} catch (error) {
console.error('Error handling investment amount input:', error);
console.error('Error handling investment amount blur:', error);
// Set a safe default value
input.setAttribute('data-value', '500000');
input.value = '500,000';
}
}
static handleInvestmentAmountFocus(input) {
if (!input) return;
try {
// Remove commas when focusing for easier editing
const numericValue = input.getAttribute('data-value') || '500000';
input.value = numericValue;
} catch (error) {
console.error('Error handling investment amount focus:', error);
}
}
static getCSRFToken() {
try {
// Try to get CSRF token from meta tag first