feat: implement consistent fuel ordering in popups

- Add getOrderedFuelEntries method to FuelCategorizer for consistent ordering
- Update API endpoints to display fuels in standard order: Unleaded, Diesel, Premium
- Apply consistent ordering across mapbox endpoint, station details, and cache manager
- Improve user experience with predictable fuel price layout

Author: matthewgall

src/cache-manager.ts

@@ -1,7 +1,8 @@
 /// <reference path="../worker-configuration.d.ts" />
 import { BrandStandardizer } from './brand-standardizer'
 import { PopupGenerator } from './popup-generator'
-import { CACHE_TTL, MAP_CONFIG } from './constants'
+import { FuelCategorizer } from './fuel-categorizer'
+import { CACHE_TTL, MAP_CONFIG, PRICE_THRESHOLDS } from './constants'
 
 export interface CacheConfig {
     defaultTtl: number;
@@ -223,9 +224,26 @@ export class CacheManager {
                 const lat = stn.location.latitude;
 
                 if (lng >= bounds.west && lng <= bounds.east && lat >= bounds.south && lat <= bounds.north) {
-                    let prices: any = [];
+                    // Process fuel prices with consistent ordering
+                    let numericPrices: number[] = [];
+                    let fuelPrices: { [key: string]: number } = {};
+                    
                     for (let fuel of Object.keys(stn.prices)) {
-                        prices.push(`${fuel}: £${stn.prices[fuel]}`);
+                        let price = stn.prices[fuel];
+                        if (typeof price === 'number') {
+                            const priceInPounds = price > PRICE_THRESHOLDS.PENCE_CONVERSION ? price / 100 : price;
+                            numericPrices.push(priceInPounds);
+                            fuelPrices[fuel] = priceInPounds;
+                        }
+                    }
+                    
+                    // Group fuels by category and create display strings in consistent order
+                    const groupedFuels = FuelCategorizer.groupFuelsByCategory(fuelPrices);
+                    const orderedFuels = FuelCategorizer.getOrderedFuelEntries(groupedFuels);
+                    let prices: any = [];
+                    for (const [category, data] of orderedFuels) {
+                        const displayText = FuelCategorizer.formatFuelDisplay(category, data.price, data.originalType);
+                        prices.push(displayText);
                     }
 
                     features.push({

src/fuel-categorizer.ts

@@ -99,4 +99,25 @@ export class FuelCategorizer {
     static getAllCategories(): FuelCategory[] {
         return [...this.FUEL_CATEGORIES];
     }
+
+    static getOrderedFuelEntries(groupedFuels: { [key: string]: { price: number, originalType: string } }): Array<[string, { price: number, originalType: string }]> {
+        const orderedEntries: Array<[string, { price: number, originalType: string }]> = [];
+        
+        // First, add fuels in the standard order (unleaded, diesel, premium)
+        for (const category of this.FUEL_CATEGORIES) {
+            if (groupedFuels[category.name]) {
+                orderedEntries.push([category.name, groupedFuels[category.name]]);
+            }
+        }
+        
+        // Then add any other fuel types not in the standard categories
+        for (const [fuelType, data] of Object.entries(groupedFuels)) {
+            const isStandardCategory = this.FUEL_CATEGORIES.some(cat => cat.name === fuelType);
+            if (!isStandardCategory) {
+                orderedEntries.push([fuelType, data]);
+            }
+        }
+        
+        return orderedEntries;
+    }
 }

src/index.ts

@@ -218,9 +218,10 @@ router.get('/api/data.mapbox', async (request, env, _context) => {
                 }
             }
 
-            // Group fuels by category and create display strings
+            // Group fuels by category and create display strings in consistent order
             const groupedFuels = FuelCategorizer.groupFuelsByCategory(fuelPrices);
-            for (const [category, data] of Object.entries(groupedFuels)) {
+            const orderedFuels = FuelCategorizer.getOrderedFuelEntries(groupedFuels);
+            for (const [category, data] of orderedFuels) {
                 const displayText = FuelCategorizer.formatFuelDisplay(category, data.price, data.originalType);
                 prices.push(displayText);
             }
@@ -416,9 +417,10 @@ router.get('/api/station/:stationId', async (request, env, _context) => {
         }
     }
 
-    // Group fuels by category and create display strings
+    // Group fuels by category and create display strings in consistent order
     const groupedFuels = FuelCategorizer.groupFuelsByCategory(fuelPrices);
-    for (const [category, data] of Object.entries(groupedFuels)) {
+    const orderedFuels = FuelCategorizer.getOrderedFuelEntries(groupedFuels);
+    for (const [category, data] of orderedFuels) {
         const displayText = FuelCategorizer.formatFuelDisplay(category, data.price, data.originalType);
         prices.push(displayText);
     }