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

21
hub/services/static/css/roi-calculator.css
View file

@ -426,6 +426,27 @@
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}
/* Investment amount input enhancements */
#investment-amount {
font-family: 'Courier New', monospace;
font-weight: 600;
text-align: right;
padding-right: 1rem;
}
#investment-amount:focus {
text-align: left;
padding-left: 1rem;
padding-right: 0.75rem;
}
#investment-amount::placeholder {
font-family: system-ui, -apple-system, sans-serif;
font-weight: normal;
text-align: left;
opacity: 0.6;
}
.main-config-fields .form-select {
border-color: #dee2e6;
font-size: 1.1rem;

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

6
hub/services/templates/calculator/csp_roi_calculator.html
View file

@ -27,6 +27,8 @@ function updateCalculations() { window.ROICalculatorApp?.updateCalculations(); }
function exportToPDF() { window.ROICalculatorApp?.exportToPDF(); }
function exportToCSV() { window.ROICalculatorApp?.exportToCSV(); }
function handleInvestmentAmountInput(input) { InputUtils.handleInvestmentAmountInput(input); }
function handleInvestmentAmountFocus(input) { InputUtils.handleInvestmentAmountFocus(input); }
function handleInvestmentAmountBlur(input) { InputUtils.handleInvestmentAmountBlur(input); }
function updateInvestmentAmount(value) { window.ROICalculatorApp?.updateInvestmentAmount(value); }
function updateRevenuePerInstance(value) { window.ROICalculatorApp?.updateRevenuePerInstance(value); }
function updateServalaShare(value) { window.ROICalculatorApp?.updateServalaShare(value); }
@ -139,7 +141,9 @@ document.addEventListener('DOMContentLoaded', function() {
<input type="text" class="form-control" id="investment-amount"
data-value="500000" value="500,000"
oninput="handleInvestmentAmountInput(this)"
onchange="updateCalculations()">
onfocus="handleInvestmentAmountFocus(this)"
onblur="handleInvestmentAmountBlur(this)"
placeholder="Enter amount (100,000 - 2,000,000)">
</div>
<input type="range" class="form-range mt-3" id="investment-slider"
min="100000" max="2000000" step="50000" value="500000"