From 1381eb8fdce7c7e949229a37cf66be69995e4607 Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 16 Jul 2025 15:19:04 +0200
Subject: [PATCH] add thousand separator for better understanding

---
 .../calculator/csp_roi_calculator.html        | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/hub/services/templates/calculator/csp_roi_calculator.html b/hub/services/templates/calculator/csp_roi_calculator.html
index 1b8bfc1..d50dd2f 100644
--- a/hub/services/templates/calculator/csp_roi_calculator.html
+++ b/hub/services/templates/calculator/csp_roi_calculator.html
@@ -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;