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

add thousand separator for better understanding

Browse source
This commit is contained in:
Tobias Brunner 2025-07-16 15:19:04 +02:00
parent 3688720f1b
commit 1381eb8fdc
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
1 changed files with 42 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -237,8 +237,9 @@
<label for="investment-amount">Investment Amount</label>
<div class="input-group">
<span class="input-group-text currency-symbol">CHF</span>
<input type="number" class="form-control" id="investment-amount"
min="100000" max="2000000" step="10000" value="500000"
<input type="text" class="form-control" id="investment-amount"
data-value="500000" value="500,000"
oninput="handleInvestmentAmountInput(this)"
onchange="updateCalculations()">
</div>
<div class="slider-container">
@ -564,7 +565,7 @@ class ROICalculator {
getInputValues() {
return {
investmentAmount: parseFloat(document.getElementById('investment-amount').value),
investmentAmount: parseFloat(document.getElementById('investment-amount').getAttribute('data-value')),
timeframe: parseInt(document.getElementById('timeframe').value),
discountRate: parseFloat(document.getElementById('discount-rate').value) / 100,
revenuePerInstance: parseFloat(document.getElementById('revenue-per-instance').value),
@ -973,8 +974,42 @@ function checkExportLibraries() {
}
// Input update functions
function formatNumberWithCommas(num) {
return parseInt(num).toLocaleString('en-US');
}
function parseFormattedNumber(str) {
return parseFloat(str.replace(/,/g, '')) || 0;
}
function handleInvestmentAmountInput(input) {
// Remove non-numeric characters except commas
let value = input.value.replace(/[^\d,]/g, '');
// Parse the numeric value
let numericValue = parseFormattedNumber(value);
// Enforce min/max limits
if (numericValue < 100000) numericValue = 100000;
if (numericValue > 2000000) numericValue = 2000000;
// Update the data attribute with the raw numeric value
input.setAttribute('data-value', numericValue.toString());
// Format and display the value with commas
input.value = formatNumberWithCommas(numericValue);
// Update the slider
document.getElementById('investment-slider').value = numericValue;
// Trigger calculations
updateCalculations();
}
function updateInvestmentAmount(value) {
document.getElementById('investment-amount').value = value;
const input = document.getElementById('investment-amount');
input.setAttribute('data-value', value);
input.value = formatNumberWithCommas(value);
updateCalculations();
}
@ -1261,7 +1296,9 @@ function exportToCSV() {
function resetCalculator() {
if (confirm('Are you sure you want to reset all parameters to default values?')) {
// Reset input values
document.getElementById('investment-amount').value = 500000;
const investmentInput = document.getElementById('investment-amount');
investmentInput.setAttribute('data-value', '500000');
investmentInput.value = '500,000';
document.getElementById('investment-slider').value = 500000;
document.getElementById('timeframe').value = 3;
document.getElementById('discount-rate').value = 10;