feat: Add function displayPrice as an ui helper

src/rest/routes.go

@@ -5,6 +5,7 @@ import (
 	"controtto/src/app/managing"
 	"controtto/src/app/querying"
 	"controtto/src/app/trading"
+	"controtto/src/rest/ui"
 	"fmt"
 	"log"
 
@@ -15,6 +16,7 @@ import (
 func Run(c *config.Manager, m *managing.Service, q *querying.Service, t *trading.Service) {
 	engine := html.New("./views", ".html")
 	engine.Debug(true)
+	engine.AddFunc("displayPrice", ui.DisplayPrice)
 	app := fiber.New(fiber.Config{
 		Views: engine,
 		ErrorHandler: func(c *fiber.Ctx, err error) error {

src/rest/ui/parsePrice.go

@@ -0,0 +1,26 @@
+package ui
+
+import (
+	"fmt"
+	"strings"
+)
+
+func DisplayPrice(v float64) string {
+	s := fmt.Sprintf("%.2f", v)
+	n := len(s)
+	if n <= 6 { // e.g. 999.99
+		return s
+	}
+	// Insert commas for thousands
+	parts := strings.Split(s, ".")
+	intPart := parts[0]
+	decPart := parts[1]
+	var out []byte
+	for i, c := range intPart {
+		if i != 0 && (len(intPart)-i)%3 == 0 {
+			out = append(out, ',')
+		}
+		out = append(out, byte(c))
+	}
+	return string(out) + "." + decPart
+}

views/pairCards.html

@@ -29,7 +29,10 @@ <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
             <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
           </svg>
-          <span>Current Price</span>
+          <span> 
+          Current Price (<span class="text-sm md:text-sm font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span>
+          {{ displayPrice .Pair.Calculations.BasePrice }}) 
+        </span>
         </div>
         {{/* Form targets the main panel now */}}
         <form
@@ -78,20 +81,20 @@ <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">
              <span>Profit / Loss</span>
            </div>
            <span class="px-2 py-0.5 text-[10px] md:text-xs rounded-full {{ if (gt .Pair.Calculations.PNLPercent 0.0) }}bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300{{else}}bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300{{end}} font-medium">
-             {{ printf "%.2f" .Pair.Calculations.PNLPercent }}%
+             {{ displayPrice .Pair.Calculations.PNLPercent }}%
            </span>
          </div>
 
          {{ if (gt .Pair.Calculations.PNLAmount 0.0) }}
            <div class="font-bold text-2xl md:text-3xl text-emerald-500">
-             +{{ printf "%.2f" .Pair.Calculations.PNLAmount }}
+             +{{ displayPrice .Pair.Calculations.PNLAmount }}
              <span class="text-lg md:text-xl font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">
                {{ .Pair.QuoteAsset.Symbol }}
              </span>
            </div>
          {{ else }}
            <div class="font-bold text-2xl md:text-3xl text-red-500">
-             {{ printf "%.2f" .Pair.Calculations.PNLAmount }}
+             {{ displayPrice .Pair.Calculations.PNLAmount }}
              <span class="text-lg md:text-xl font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">
                {{ .Pair.QuoteAsset.Symbol }}
              </span>
@@ -115,13 +118,13 @@ <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">
           <span>Holdings</span>
         </div>
         <div class="text-lg md:text-xl font-semibold text-gray-800 dark:text-white">
-          {{ printf "%.6f" .Pair.Calculations.TotalBase }}
+          {{ displayPrice .Pair.Calculations.TotalBase }}
           <span class="text-base md:text-lg font-medium ml-1" style="color:{{ .Pair.BaseAsset.Color }}">
             {{ .Pair.BaseAsset.Symbol }}
           </span>
         </div>
         <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-          Value: {{ printf "%.2f" .Pair.Calculations.TotalBaseInQuote }}
+          Value: {{displayPrice .Pair.Calculations.TotalBaseInQuote }}
           <span style="color:{{ .Pair.QuoteAsset.Color }}">
             {{ .Pair.QuoteAsset.Symbol }}
           </span>
@@ -144,35 +147,35 @@ <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">
            </button>
          </div>
         <div class="text-lg md:text-xl font-semibold text-gray-800 dark:text-white"> {{/* Slightly smaller */}}
-          {{ printf "%.2f" .Pair.Calculations.TotalFeeInQuote }}
+          {{ displayPrice .Pair.Calculations.TotalFeeInQuote }}
           <span class="text-sm md:text-base font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">
             {{ .Pair.QuoteAsset.Symbol }}
           </span>
         </div>
         <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-           ({{ printf "%.6f" .Pair.Calculations.TotalFeeInBase }}
+           ({{ displayPrice .Pair.Calculations.TotalFeeInBase }}
            <span style="color:{{ .Pair.BaseAsset.Color }}">
              {{ .Pair.BaseAsset.Symbol }} </span>)
         </div>
        </div>
 
-      {{/* Current Value */}}
+      {{/* Holdings Value */}}
       <div class="flex flex-col items-center gap-1">
         <div class="flex items-center justify-center space-x-2 text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400">
            <div class="flex items-center space-x-2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
              </svg>
-             <span>Current Value</span>
+             <span>Holdings Value</span>
            </div>
-           <button title="Current value based on holdings and price" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
+           <button title="Holdings based on current value" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
              </svg>
            </button>
          </div>
          <div class="text-lg md:text-xl font-semibold text-gray-800 dark:text-white">
-           {{ printf "%.2f" .Pair.Calculations.CurrentBaseAmountInQuote }}
+           {{ displayPrice .Pair.Calculations.CurrentBaseAmountInQuote }}
            <span class="text-base md:text-lg font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">
              {{ .Pair.QuoteAsset.Symbol }}
            </span>
@@ -195,7 +198,7 @@ <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">
           </button>
         </div>
         <div class="text-lg md:text-xl font-semibold text-gray-800 dark:text-white">
-          {{ printf "%.7g" .Pair.Calculations.AvgBuyPrice }}
+          {{ displayPrice .Pair.Calculations.AvgBuyPrice }}
           <span class="text-base md:text-lg font-medium ml-1" style="color:{{ .Pair.QuoteAsset.Color }}">
             {{ .Pair.QuoteAsset.Symbol }}
           </span>