Gas tracker scriptable widget

// Scriptable Widget for Displaying Energy and Gas Tariff Information
// Adapted from https://github.com/smalley1992/smalley1992.github.io/blob/main/OctopusTrackerSmallWidget.scriptable
// CS Feb 2024
const widget = new ListWidget(); // Initialize a new list widget
widget.backgroundColor = new Color("#100030"); // Set the background color of the widget

widget.addSpacer(20); // Add space at the top
const header = widget.addText("Gas Tracker"); // Add header text
header.font = Font.boldSystemFont(14); // Set the font and size of the header
header.textColor = Color.white(); // Set the color of the header text
widget.addSpacer(8); // Add space below the header

// Function to fetch tariff data for electricity or gas
async function fetchTariffData(productCode, tariffCode) {
    const today = new Date(); // Get today's date
    const tomorrow = new Date(today.getTime() + 86400000); // Calculate tomorrow's date

    const baseUrl = `https://api.octopus.energy/v1/products/${productCode}/`; // Base URL for the API

    // Format today and tomorrow's dates as strings
    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
    const tomorrowStr = `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${String(tomorrow.getDate()).padStart(2, '0')}`;
    const tariffType = tariffCode.substring(0,1).toUpperCase() == 'G' ? 'gas' : 'electricity';
    // Construct URLs for today and tomorrow's tariff data
    const urlToday = `${baseUrl}${tariffType}-tariffs/${tariffCode}/standard-unit-rates/?period_from=${todayStr}T00:00:00Z&period_to=${todayStr}T23:59:59Z`;
    const urlTomorrow = `${baseUrl}${tariffType}-tariffs/${tariffCode}/standard-unit-rates/?period_from=${tomorrowStr}T00:00:00Z&period_to=${tomorrowStr}T23:59:59Z`;
    console.log(urlTomorrow);

    let dataToday, dataTomorrow;
    try {
        // Fetch and process today's tariff data
        let responseToday = await new Request(urlToday).loadJSON();
        dataToday = responseToday.results[0]?.value_inc_vat.toFixed(2);
        // Fetch and process tomorrow's tariff data
        let responseTomorrow = await new Request(urlTomorrow).loadJSON();
        dataTomorrow = responseTomorrow.results[0]?.value_inc_vat.toFixed(2);
    } catch (error) {
        // Handle errors by setting data to "N/A"
        console.error(`Error fetching tariff data: ${error}`);
        dataToday = "N/A";
        dataTomorrow = "N/A";
    }

    return { today: dataToday, tomorrow: dataTomorrow }; // Return today and tomorrow's data
}

// Function to display the tariff data on the widget
async function displayTariffData(productCode, tariffCode, symbolName) {
    const data = await fetchTariffData(productCode, tariffCode); // Fetch the tariff data
    let row = widget.addStack(); // Create a new row in the widget
    row.centerAlignContent(); // Center-align the content in the row

    const symbol = SFSymbol.named(symbolName); // Get the SF Symbol for the tariff type
    symbol.applyMediumWeight(); // Apply medium weight to the symbol for better visibility
    const img = row.addImage(symbol.image); // Add the symbol image to the row
    img.tintColor = Color.white(); // Set the symbol's color to white
    img.imageSize = new Size(30, 30); // Set the size of the symbol image
    img.resizable = true; // Allow the symbol image to be resizable
    row.addSpacer(8); // Add space after the symbol

    // Display today's price in a large font
    let priceElement = row.addText(`${data.today}p`);
    priceElement.font = Font.boldSystemFont(26);
    priceElement.textColor = Color.white();

    widget.addSpacer(4); // Add space below today's price

    let subText, subElement;
    // Check if tomorrow's price is available and not "N/A"
    if (data.tomorrow && data.tomorrow !== "N/A") {
        let change = data.today && data.today !== "N/A" ? ((parseFloat(data.tomorrow) - parseFloat(data.today)) / parseFloat(data.today)) * 100 : 0;
        // Determine the arrow direction based on price change
        let arrow = change > 0 ? "↑" : (change < 0 ? "↓" : ""); // Add an arrow for increase or decrease
        subText = `Tomorrow: ${data.tomorrow}p ${arrow}`;
        subElement = widget.addText(subText);
        // Color the text based on price change direction
        subElement.textColor = change > 0 ? new Color("#FF3B30") : (change < 0 ? new Color("#30D158") : Color.white());
        subElement.font = Font.systemFont(12);
    } else {
        // Display "Coming Soon" if tomorrow's price is not available
        subText = `Tomorrow: Unknown`;
        subElement = widget.addText(subText);
        subElement.textColor = Color.white();
        subElement.font = Font.systemFont(10);
    }

    widget.addSpacer(20); // Add final spacer for layout
}

const product= "SILVER-BB-23-12-06"; // Product code for the current tariff
const productOld = "VAR-BB-23-04-01"; // Product code for the previous tariff
const tariff = "G-1R-SILVER-BB-23-12-06-C"; // Tariff code for the current tariff
const tariffOld = "G-1R-VAR-BB-23-04-01-C"; // Tariff code for the previous tariff

// Display tariff information
await displayTariffData(product, tariff, "flame.fill");
await displayTariffData(productOld, tariffOld, "flame");

// Optional: Set the widget's URL to open a specific app or webpage when clicked
widget.url = "https://octopustracker.small3y.co.uk";

// Preview the widget in the app if not running in a widget context
if (!config.runsInWidget) {
    await widget.presentMedium();
}

Script.setWidget(widget); // Set the widget for display
Script.complete(); // Signal that the script has completed execution