Custom API Service widgets: how do I convert a timestamp that's in unixtime to a human-readable format?

[kmichels]

Description

Hey, so, as per the title, I am using the custom API service widget to pull weather data from an API. The sunrise and sunset times are in unixtime though, and using format: date does not know how to handle it, just displaying Jan 20th 1970, for example.

I've looked through a bit of documentation and tried to use custom.js, but I'm clearly missing a few pieces somewhere. See below for config details of what I've tried.

homepage version

v0.8.13

Installation method

Docker

Configuration

Mappings look something like this:

mappings:
            - field:
                forecast:
                  daily:
                    0:
                      sunrise
              label: Sunrise
              format: date

I also tried:

mappings:
            - field:
                forecast:
                  daily:
                    0: 
                      sunset
              label: Sunset
              format: text # Use text to handle formatting in JS
              id: sunset-time

and then put the following in my custom.js:

// Function to convert Unix timestamp to human-readable date format
function unixToDate(timestamp) {
  return new Intl.DateTimeFormat('en-US', {
    dateStyle: 'long',
    timeStyle: 'short'
  }).format(new Date(timestamp * 1000));
}

// Event listener to format the timestamp after the DOM content is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Select the element by its ID
  const sunsetTimeElement = document.getElementById('sunset-time');

  // If the element exists and contains text content
  if (sunsetTimeElement && sunsetTimeElement.textContent) {
    // Parse the text content as an integer timestamp
    const timestamp = parseInt(sunsetTimeElement.textContent.trim(), 10);

    // If the parsed timestamp is a valid number
    if (!isNaN(timestamp)) {
      // Replace the text content with the formatted date
      sunsetTimeElement.textContent = unixToDate(timestamp);
    }
  }
});

Container Logs

No response

Browser Logs

No response

Troubleshooting

Nothing other than modifying services.yaml and custom.js

Did a search in other discussions but didn't see anything that I found helpful.

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

Based on the information provided, it seems you are trying to format Unix timestamps for sunrise and sunset times using the Custom API widget in Homepage. The format: date option in the mappings configuration expects a JavaScript Date object or a date string that can be parsed into a Date object, not a Unix timestamp.

To handle Unix timestamps, you will need to convert them to a Date object before formatting. Since the Custom API widget does not natively support Unix timestamp conversion, your approach to use custom.js for post-processing is correct.

However, it seems there might be an issue with the way you are trying to apply the custom JavaScript. The id attribute you are trying to use in the mappings configuration is not a standard field for the widget configuration based on the provided documentation. Instead, you should use the additionalField property to add custom data to the widget, which can then be targeted with JavaScript.

Here's how you can adjust your services.yaml configuration:

mappings:
  - field:
      forecast:
        daily:
          0: 
            sunset
    label: Sunset
    format: text # Use text to handle formatting in JS
    additionalField:
      id: sunset-time # This is a custom field for targeting with JS

And in your custom.js, you should ensure that the element with the ID sunset-time is being rendered by the widget. If the widget does not support rendering additional fields with custom IDs, your JavaScript code will not work as expected.

If the widget does support additional fields, ensure that your JavaScript code is executed after the widget has been rendered and the DOM is fully loaded. If the widget is loaded asynchronously or there is a delay in rendering, you may need to use a different event or method to ensure your code runs at the right time.

If you continue to face issues, you may want to reach out to the Homepage community or check the GitHub issues/discussions for similar cases or further assistance.

Remember to check the browser console for any errors that might indicate problems with your custom JavaScript code or other issues with the widget rendering.

This comment was generated by Glime.