{ "id": "mod_fuel_cost_calculator", "type": "module", "version": "1.1", "context": { "title": "Fuel Cost Calculator", "icon": "⛽️", "layout": "phone" }, "state": { "origin": "", "destination": "", "tripType": "One-way", "fuelType": "Petrol", "consumptionText": "7.0", "consumptionUnit": "L/100 km", "passengersText": "1", "fuelPriceText": "", "automaticDistance": true, "manualDistanceText": "", "routeDistanceKm": 0, "hasResult": false, "isLoading": false, "routeError": "", "inputError": "", "focused": "", "showSavedToast": false }, "dependencies": [ { "repository": { "remote": { "id": "fuel_geo_api", "config": { "endPoint": "https://geocoding-api.open-meteo.com/v1/search" } } } }, { "repository": { "remote": { "id": "fuel_route_api", "config": { "endPoint": "https://router.project-osrm.org" } } } }, { "repository": { "local": { "id": "fuel_cost_settings_store", "config": {} } } }, { "service": { "audio": { "id": "fuel_audio" } } } ], "children": [ { "id": "fuel_root_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#101815", "#17231E", "#1E2D26" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "fuel_content", "type": "vstack", "context": { "_spacing": 20, "_alignment": "leading", "consumptionValue": "{{ cast(${consumptionText}, 'double') ?? 0 }}", "passengerCount": "{{ cast(${passengersText}, 'int') ?? 0 }}", "fuelPrice": "{{ cast(${fuelPriceText}, 'double') ?? 0 }}", "manualDistance": "{{ cast(${manualDistanceText}, 'double') ?? 0 }}", "baseDistance": "{{ ${automaticDistance} ? ${routeDistanceKm} : @{manualDistance} }}", "totalDistance": "{{ ${tripType} == 'Round trip' ? @{baseDistance} * 2 : @{baseDistance} }}", "litersPer100": "{{ ${consumptionUnit} == 'L/100 km' ? @{consumptionValue} : (@{consumptionValue} > 0 ? 100 / @{consumptionValue} : 0) }}", "fuelRequired": "{{ @{totalDistance} * @{litersPer100} / 100 }}", "totalCost": "{{ @{fuelRequired} * @{fuelPrice} }}", "costPer100": "{{ @{litersPer100} * @{fuelPrice} }}", "costPerPassenger": "{{ @{passengerCount} > 0 ? @{totalCost} / @{passengerCount} : 0 }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 16, "bottom": 32, "leading": 16, "trailing": 16 } } }, "children": [ { "id": "fuel_route_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "fuel_route_heading", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_route_icon", "type": "image", "context": { "_source": "sf://map.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": "mint" } } }, { "id": "fuel_route_title", "type": "text", "context": { "_text": "Route" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } } ] }, { "id": "fuel_origin_field", "type": "textfield", "context": { "_label": "Origin city", "_text": "${origin}", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder", "submitLabel": "next" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_destination_field", "type": "textfield", "context": { "_label": "Destination city", "_text": "${destination}", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder", "submitLabel": "done" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_trip_picker", "type": "picker", "context": { "_label": "Journey", "_selection": "${tripType}", "_options": [ "One-way", "Round trip" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_auto_distance_toggle", "type": "toggle", "context": { "_label": "Calculate driving distance", "_image": "sf://point.topleft.down.to.point.bottomright.curvepath", "_isOn": "${automaticDistance}" } }, { "id": "fuel_manual_distance_cond", "type": "conditional", "context": { "_condition": "{{ !${automaticDistance} }}", "_trueComponent": { "id": "fuel_manual_distance_group", "type": "vstack", "context": { "_spacing": 5, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "fuel_manual_distance_field", "type": "textfield", "context": { "_label": "One-way distance (km)", "_text": "${manualDistanceText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_manual_distance_hint", "type": "text", "context": { "_text": "Enter the one-way distance. Round trips are doubled automatically." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, "_falseComponent": { "id": "fuel_auto_distance_hint", "type": "text", "context": { "_text": "City names are geocoded with Open-Meteo, then routed with the public OSRM service." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } } } ] }, { "id": "fuel_vehicle_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "fuel_vehicle_heading", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_vehicle_icon", "type": "image", "context": { "_source": "sf://car.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": "mint" } } }, { "id": "fuel_vehicle_title", "type": "text", "context": { "_text": "Vehicle and fuel" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } } ] }, { "id": "fuel_type_picker", "type": "picker", "context": { "_label": "Fuel type", "_selection": "${fuelType}", "_options": [ "Petrol", "Diesel", "Hybrid" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_consumption_unit_picker", "type": "picker", "context": { "_label": "Consumption unit", "_selection": "${consumptionUnit}", "_options": [ "L/100 km", "km/L" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_consumption_field", "type": "textfield", "context": { "_label": "{{ 'Fuel consumption (' + ${consumptionUnit} + ')' }}", "_text": "${consumptionText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_passengers_field", "type": "textfield", "context": { "_label": "Passengers", "_text": "${passengersText}", "_keyboard": "numberPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_price_field", "type": "textfield", "context": { "_label": "Fuel price per liter (€)", "_text": "${fuelPriceText}", "_keyboard": "decimalPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "color": "primary" } }, "layout": { "maxWidth": "infinity" } } }, { "id": "fuel_price_api_note", "type": "hstack", "context": { "_spacing": 7, "_alignment": "top" }, "children": [ { "id": "fuel_price_note_icon", "type": "image", "context": { "_source": "sf://info.circle" }, "style": { "layout": { "width": 15, "height": 15 }, "common": { "foreground": { "color": "secondary" } } } }, { "id": "fuel_price_note_text", "type": "text", "context": { "_text": "A reliable key-free fuel-price feed is not available for every location and fuel type, so the current price is entered manually." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "fuel_settings_memory_note", "type": "label", "context": { "_title": "Vehicle type, consumption, unit, and passenger count are remembered on this device.", "_image": "sf://internaldrive.fill" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "fuel_input_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${inputError}) }}", "_trueComponent": { "id": "fuel_input_error_banner", "type": "label", "context": { "_title": "${inputError}", "_image": "sf://exclamationmark.triangle.fill" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "color": "red", "opacity": 0.12 }, "foreground": { "color": "red" }, "cornerRadius": 14, "font": "subheadline" } } }, "_falseComponent": { "id": "fuel_input_error_empty", "type": "empty" } } }, { "id": "fuel_route_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${routeError}) }}", "_trueComponent": { "id": "fuel_route_error_banner", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "color": "orange", "opacity": 0.14 }, "foreground": { "color": "primary" }, "cornerRadius": 14 } }, "children": [ { "id": "fuel_route_error_label", "type": "label", "context": { "_title": "${routeError}", "_image": "sf://wifi.exclamationmark" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "primary" } } } }, { "id": "fuel_route_error_help", "type": "text", "context": { "_text": "Turn off automatic distance, enter the one-way distance in kilometers, and calculate again." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, "_falseComponent": { "id": "fuel_route_error_empty", "type": "empty" } } }, { "id": "fuel_action_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "fuel_calculate_button", "type": "button", "context": { "_label": "{{ ${isLoading} ? 'Calculating route…' : 'Calculate' }}", "_image": "sf://fuelpump.fill", "_isLoading": "${isLoading}" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } }, "layout": { "maxWidth": "infinity", "minHeight": 50 }, "common": { "disabled": "${isLoading}" } }, "events": { "onTap": [ { "state": { "id": "fuel_validate_inputs", "input": { "inputError": "{{ switch(${automaticDistance} && (empty(trim(${origin})) || empty(trim(${destination}))), 'Enter both an origin and destination.', !${automaticDistance} && @{manualDistance} <= 0, 'Enter a one-way distance greater than zero.', @{consumptionValue} <= 0, 'Enter fuel consumption greater than zero.', @{passengerCount} < 1, 'Enter at least one passenger.', @{fuelPrice} <= 0, 'Enter a fuel price greater than zero.', '') }}", "routeError": "", "focused": "" } } }, { "condition": { "id": "fuel_inputs_valid_guard", "input": "{{ (!${automaticDistance} || (notEmpty(trim(${origin})) && notEmpty(trim(${destination})))) && (${automaticDistance} || @{manualDistance} > 0) && @{consumptionValue} > 0 && @{passengerCount} >= 1 && @{fuelPrice} > 0 }}", "output": { "success": [ { "condition": { "id": "fuel_distance_mode_guard", "input": "${automaticDistance}", "output": { "success": [ { "state": { "id": "fuel_begin_route_lookup", "input": { "isLoading": true, "hasResult": false, "routeError": "" }, "output": { "success": [ { "repo": { "id": "fuel_geocode_origin", "input": { "repositoryId": "fuel_geo_api", "operation": "read", "params": { "body": { "name": "${origin}", "count": 1, "language": "en", "format": "json" } } }, "output": { "success": [ { "condition": { "id": "fuel_origin_found_guard", "input": "{{ count(@{fuel_geocode_origin.results}) > 0 }}", "output": { "success": [ { "repo": { "id": "fuel_geocode_destination", "input": { "repositoryId": "fuel_geo_api", "operation": "read", "params": { "body": { "name": "${destination}", "count": 1, "language": "en", "format": "json" } } }, "output": { "success": [ { "condition": { "id": "fuel_destination_found_guard", "input": "{{ count(@{fuel_geocode_destination.results}) > 0 }}", "output": { "success": [ { "repo": { "id": "fuel_fetch_route", "input": { "repositoryId": "fuel_route_api", "operation": "read", "params": { "subUrl": "{{ '/route/v1/driving/' + cast(@{fuel_geocode_origin.results[0].longitude}, 'str') + ',' + cast(@{fuel_geocode_origin.results[0].latitude}, 'str') + ';' + cast(@{fuel_geocode_destination.results[0].longitude}, 'str') + ',' + cast(@{fuel_geocode_destination.results[0].latitude}, 'str') }}", "body": { "overview": "false", "alternatives": "false", "steps": "false" } } }, "output": { "success": [ { "condition": { "id": "fuel_route_found_guard", "input": "{{ count(@{fuel_fetch_route.routes}) > 0 && @{fuel_fetch_route.routes[0].distance} > 0 }}", "output": { "success": [ { "state": { "id": "fuel_apply_route_result", "input": { "routeDistanceKm": "{{ @{fuel_fetch_route.routes[0].distance} / 1000 }}", "isLoading": false, "hasResult": true, "routeError": "", "showSavedToast": true }, "output": { "success": [ { "repo": { "id": "fuel_save_settings_auto", "input": { "repositoryId": "fuel_cost_settings_store", "operation": "create", "params": { "collection": "settings", "documentId": "vehicle", "rewrite": true, "body": { "fuelType": "${fuelType}", "consumptionText": "${consumptionText}", "consumptionUnit": "${consumptionUnit}", "passengersText": "${passengersText}" } } }, "output": { "failure": [ { "state": { "id": "fuel_save_settings_auto_error", "input": { "isLoading": false, "hasResult": false, "routeError": "The calculation completed, but vehicle settings could not be saved." } } } ] } } }, { "service": { "id": "fuel_success_haptic_auto", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "success" } }, "output": { "failure": [ { "state": { "id": "fuel_success_haptic_auto_error", "input": { "isLoading": false, "hasResult": false, "routeError": "The calculation completed, but success feedback could not be played." } } } ] } } }, { "interval": { "id": "fuel_toast_timer_auto", "input": { "delay": 2 }, "output": { "success": [ { "interval": { "id": "fuel_toast_timer_auto", "input": { "cancel": true } } }, { "state": { "id": "fuel_hide_toast_auto", "input": { "showSavedToast": false } } } ] } } } ] } } } ], "failure": [ { "state": { "id": "fuel_route_empty_error", "input": { "isLoading": false, "hasResult": false, "routeError": "No driving route was returned for these locations." } } }, { "service": { "id": "fuel_route_empty_haptic", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "warning" } }, "output": { "failure": [ { "state": { "id": "fuel_route_empty_haptic_error", "input": { "isLoading": false, "routeError": "No driving route was returned for these locations, and warning feedback could not be played." } } } ] } } } ] } } } ], "failure": [ { "state": { "id": "fuel_route_request_error", "input": { "isLoading": false, "hasResult": false, "routeError": "{{ 'Route request failed' + (notEmpty(@{fuel_fetch_route.message}) ? ': ' + @{fuel_fetch_route.message} : '. Check your network and try again.') }}" } } }, { "service": { "id": "fuel_route_request_haptic", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "warning" } }, "output": { "failure": [ { "state": { "id": "fuel_route_request_haptic_error", "input": { "isLoading": false, "routeError": "The route request failed, and warning feedback could not be played." } } } ] } } } ] } } } ], "failure": [ { "state": { "id": "fuel_destination_missing_error", "input": { "isLoading": false, "hasResult": false, "routeError": "The destination could not be found. Try a more specific city name." } } } ] } } } ], "failure": [ { "state": { "id": "fuel_destination_request_error", "input": { "isLoading": false, "hasResult": false, "routeError": "{{ 'Destination lookup failed' + (notEmpty(@{fuel_geocode_destination.message}) ? ': ' + @{fuel_geocode_destination.message} : '. Check your network and try again.') }}" } } } ] } } } ], "failure": [ { "state": { "id": "fuel_origin_missing_error", "input": { "isLoading": false, "hasResult": false, "routeError": "The origin could not be found. Try a more specific city name." } } } ] } } } ], "failure": [ { "state": { "id": "fuel_origin_request_error", "input": { "isLoading": false, "hasResult": false, "routeError": "{{ 'Origin lookup failed' + (notEmpty(@{fuel_geocode_origin.message}) ? ': ' + @{fuel_geocode_origin.message} : '. Check your network and try again.') }}" } } }, { "service": { "id": "fuel_origin_request_haptic", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "warning" } }, "output": { "failure": [ { "state": { "id": "fuel_origin_request_haptic_error", "input": { "isLoading": false, "routeError": "The origin lookup failed, and warning feedback could not be played." } } } ] } } } ] } } } ] } } } ], "failure": [ { "state": { "id": "fuel_apply_manual_result", "input": { "isLoading": false, "hasResult": true, "routeError": "", "showSavedToast": true }, "output": { "success": [ { "repo": { "id": "fuel_save_settings_manual", "input": { "repositoryId": "fuel_cost_settings_store", "operation": "create", "params": { "collection": "settings", "documentId": "vehicle", "rewrite": true, "body": { "fuelType": "${fuelType}", "consumptionText": "${consumptionText}", "consumptionUnit": "${consumptionUnit}", "passengersText": "${passengersText}" } } }, "output": { "failure": [ { "state": { "id": "fuel_save_settings_manual_error", "input": { "hasResult": false, "routeError": "The calculation completed, but vehicle settings could not be saved." } } } ] } } }, { "service": { "id": "fuel_success_haptic_manual", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "success" } }, "output": { "failure": [ { "state": { "id": "fuel_success_haptic_manual_error", "input": { "hasResult": false, "routeError": "The calculation completed, but success feedback could not be played." } } } ] } } }, { "interval": { "id": "fuel_toast_timer_manual", "input": { "delay": 2 }, "output": { "success": [ { "interval": { "id": "fuel_toast_timer_manual", "input": { "cancel": true } } }, { "state": { "id": "fuel_hide_toast_manual", "input": { "showSavedToast": false } } } ] } } } ] } } } ] } } } ], "failure": [ { "service": { "id": "fuel_validation_haptic", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } }, { "id": "fuel_reset_button", "type": "button", "context": { "_label": "Reset", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } }, "layout": { "minHeight": 50 } }, "events": { "onTap": [ { "state": { "id": "fuel_reset_trip", "input": { "origin": "", "destination": "", "tripType": "One-way", "fuelPriceText": "", "automaticDistance": true, "manualDistanceText": "", "routeDistanceKm": 0, "hasResult": false, "isLoading": false, "routeError": "", "inputError": "", "focused": "", "showSavedToast": false } } }, { "service": { "id": "fuel_reset_haptic", "input": { "serviceId": "fuel_audio", "params": { "sound": "none", "haptic": "light" } }, "output": { "failure": [ { "state": { "id": "fuel_reset_haptic_error", "input": { "automaticDistance": false, "inputError": "The trip was reset, but reset feedback could not be played." } } } ] } } } ] } } ] }, { "id": "fuel_loading_cond", "type": "conditional", "context": { "_condition": "${isLoading}", "_trueComponent": { "id": "fuel_loading_card", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "material": "ultraThin" }, "foreground": { "color": "primary" }, "cornerRadius": 16 } }, "children": [ { "id": "fuel_loading_progress", "type": "progress", "context": { "_value": 0, "_total": 1 } }, { "id": "fuel_loading_text", "type": "text", "context": { "_text": "Finding both places and calculating the driving route…" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "primary" } } } } ] }, "_falseComponent": { "id": "fuel_loading_empty", "type": "empty" } } }, { "id": "fuel_results_cond", "type": "conditional", "context": { "_condition": "${hasResult}", "_trueComponent": { "id": "fuel_results_stack", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading", "resultConsumption": "@{litersPer100}", "resultDistance": "@{totalDistance}", "resultFuel": "@{fuelRequired}", "resultTotal": "@{totalCost}", "resultPer100": "@{costPer100}", "resultPerPassenger": "@{costPerPassenger}" }, "style": { "layout": { "maxWidth": "infinity" }, "animation": { "kind": "spring", "value": "${hasResult}", "duration": 0.4, "bounce": 0.25 } }, "children": [ { "id": "fuel_total_hero", "type": "vstack", "context": { "_spacing": 7, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 22 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#176B4D", "#238A64", "#2AA876" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": "white", "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.25 }, "radius": 14, "y": 8 } }, "children": [ { "id": "fuel_total_hero_icon", "type": "image", "context": { "_source": "sf://fuelpump.fill" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "foreground": "white" } } }, { "id": "fuel_total_hero_label", "type": "text", "context": { "_text": "Estimated trip fuel cost" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "white", "opacity": 0.82 } } } }, { "id": "fuel_total_hero_value", "type": "text", "context": { "_text": "@{resultTotal}", "_format": { "number": { "style": "currency", "currencyCode": "EUR", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": "white" }, "text": { "lineLimit": 1, "minimumScaleFactor": 0.7 } } }, { "id": "fuel_total_hero_route", "type": "text", "context": { "_text": "{{ ${tripType} + ' · ' + ${fuelType} }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.76 } } } } ] }, { "id": "fuel_breakdown_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "color": "primary" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "fuel_breakdown_heading", "type": "label", "context": { "_title": "Calculation breakdown", "_image": "sf://list.bullet.rectangle.fill" }, "style": { "common": { "font": "headline", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_distance_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_breakdown_distance_icon", "type": "image", "context": { "_source": "sf://road.lanes" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "mint" } } }, { "id": "fuel_breakdown_distance_label", "type": "text", "context": { "_text": "Total distance" }, "style": { "common": { "font": "body", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_distance_spacer", "type": "spacer" }, { "id": "fuel_breakdown_distance_value", "type": "text", "context": { "_text": "@{resultDistance}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 1 } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_distance_unit", "type": "text", "context": { "_text": "km" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "fuel_breakdown_fuel_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_breakdown_fuel_icon", "type": "image", "context": { "_source": "sf://drop.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "cyan" } } }, { "id": "fuel_breakdown_fuel_label", "type": "text", "context": { "_text": "Estimated fuel required" }, "style": { "common": { "font": "body", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_fuel_spacer", "type": "spacer" }, { "id": "fuel_breakdown_fuel_value", "type": "text", "context": { "_text": "@{resultFuel}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_fuel_unit", "type": "text", "context": { "_text": "L" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "fuel_breakdown_consumption_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_breakdown_consumption_icon", "type": "image", "context": { "_source": "sf://gauge.with.dots.needle.67percent" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "orange" } } }, { "id": "fuel_breakdown_consumption_label", "type": "text", "context": { "_text": "Converted consumption" }, "style": { "common": { "font": "body", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_consumption_spacer", "type": "spacer" }, { "id": "fuel_breakdown_consumption_value", "type": "text", "context": { "_text": "@{resultConsumption}", "_format": { "number": { "style": "decimal", "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_consumption_unit", "type": "text", "context": { "_text": "L/100 km" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] }, { "id": "fuel_breakdown_divider", "type": "divider" }, { "id": "fuel_breakdown_per100_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_breakdown_per100_icon", "type": "image", "context": { "_source": "sf://eurosign.circle.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "mint" } } }, { "id": "fuel_breakdown_per100_label", "type": "text", "context": { "_text": "Cost per 100 km" }, "style": { "common": { "font": "body", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_per100_spacer", "type": "spacer" }, { "id": "fuel_breakdown_per100_value", "type": "text", "context": { "_text": "@{resultPer100}", "_format": { "number": { "style": "currency", "currencyCode": "EUR", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "primary" } } } } ] }, { "id": "fuel_breakdown_passenger_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "fuel_breakdown_passenger_icon", "type": "image", "context": { "_source": "sf://person.2.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "indigo" } } }, { "id": "fuel_breakdown_passenger_label", "type": "text", "context": { "_text": "{{ 'Cost per passenger (' + ${passengersText} + ')' }}" }, "style": { "common": { "font": "body", "foreground": { "color": "primary" } } } }, { "id": "fuel_breakdown_passenger_spacer", "type": "spacer" }, { "id": "fuel_breakdown_passenger_value", "type": "text", "context": { "_text": "@{resultPerPassenger}", "_format": { "number": { "style": "currency", "currencyCode": "EUR", "minimumFractionDigits": 2, "maximumFractionDigits": 2 } } }, "style": { "common": { "font": { "kind": "body", "weight": "semibold" }, "foreground": { "color": "primary" } } } } ] }, { "id": "fuel_breakdown_passenger_note", "type": "text", "context": { "_text": "The per-passenger figure is each passenger’s share of the fuel cost for the entire trip." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } ] } ] }, "_falseComponent": { "id": "fuel_results_empty", "type": "empty" } } }, { "id": "fuel_saved_toast", "type": "label", "context": { "_title": "Calculation ready · vehicle settings saved", "_image": "sf://checkmark.circle.fill" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 10, "bottom": 10, "leading": 16, "trailing": 16 } }, "common": { "background": { "material": "ultraThin" }, "foreground": { "color": "primary" }, "cornerRadius": 18, "font": "subheadline", "opacity": "{{ ${showSavedToast} ? 1 : 0 }}", "scale": "{{ ${showSavedToast} ? 1 : 0.94 }}" }, "animation": { "kind": "spring", "value": "${showSavedToast}", "duration": 0.35, "bounce": 0.25 } } } ] } ] } ], "events": { "onAppear": [ { "repo": { "id": "fuel_load_settings", "input": { "repositoryId": "fuel_cost_settings_store", "operation": "read", "params": { "collection": "settings", "documentId": "vehicle" } }, "output": { "success": [ { "state": { "id": "fuel_restore_settings", "input": { "fuelType": "{{ @{fuel_load_settings.fuelType} ?? ${fuelType} }}", "consumptionText": "{{ @{fuel_load_settings.consumptionText} ?? ${consumptionText} }}", "consumptionUnit": "{{ @{fuel_load_settings.consumptionUnit} ?? ${consumptionUnit} }}", "passengersText": "{{ @{fuel_load_settings.passengersText} ?? ${passengersText} }}" } } } ], "failure": [] } } } ] } }