From b73cc60d98121cb5127290d0fa1dbf557eabd184 Mon Sep 17 00:00:00 2001
From: Hidde Wieringa <hidde@hiddewieringa.nl>
Date: Sun, 15 Dec 2024 12:40:09 +0100
Subject: [PATCH] formatting for feature properties

---
 proxy/js/features.mjs | 14 ++++++++++++--
 proxy/js/ui.js        | 12 +++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/proxy/js/features.mjs b/proxy/js/features.mjs
index 197ca88d..eda138c3 100644
--- a/proxy/js/features.mjs
+++ b/proxy/js/features.mjs
@@ -141,19 +141,29 @@ const railwayLineFeatures = {
     electrification_state: {
       name: 'Electrification',
     },
-    // TODO format with 2 digits and Hz
     frequency: {
       name: 'Frequency',
+      format: {
+        template: '%.2d Hz',
+      },
     },
-    // TODO format with V
     voltage: {
       name: 'Voltage',
+      format: {
+        template: '%d V',
+      },
     },
     future_frequency: {
       name: 'Future frequency',
+      format: {
+        template: '%.2d Hz',
+      },
     },
     future_voltage: {
       name: 'Future voltage',
+      format: {
+        template: '%d V',
+      },
     },
     gauge_label: {
       name: 'Gauge',
diff --git a/proxy/js/ui.js b/proxy/js/ui.js
index cc91ed34..3e272020 100644
--- a/proxy/js/ui.js
+++ b/proxy/js/ui.js
@@ -703,8 +703,18 @@ function popupContent(feature) {
   const featureType = featureContent && featureContent.type || 'point';
   const osmType = featureType === 'point' ? 'node' : 'way';
 
+  const formatPropertyValue = (value, format) => {
+    if (!format) {
+      return String(value);
+    } else if (format.template) {
+      return format.template.replace('%s', () => String(value)).replace(/%(\.(\d+))?d/, (_1, _2, decimals) => value.toFixed(Number(decimals)));
+    } else {
+      return String(value);
+    }
+  }
+
   const propertyValues = Object.entries(featureCatalog.properties || {})
-    .map(([property, {name}]) => properties[property] ? `<span class="badge rounded-pill text-bg-light">${name}${properties[property] === true ? '' : `: <span class="text-monospace">${properties[property]}`}</span></span>` : '')
+    .map(([property, {name, format}]) => (properties[property] !== undefined && properties[property] !== null && properties[property] !== '' && properties[property] !== false) ? `<span class="badge rounded-pill text-bg-light">${name}${properties[property] === true ? '' : `: <span class="text-monospace">${formatPropertyValue(properties[property], format)}`}</span></span>` : '')
     .filter(it => it)
     .join('')