hassio-addons/addon-node-red

Dashboard does not respect browser locale / date format. #269

universenz posted onGitHub

Problem/Motivation

Node Red Dashboard displays current date and time in top right corner by default. It appears that this date format is hard set to MM-DD-YYYY and does not check/respect the time zone from the HASS configuration or the user's web browser.

<img width="490" alt="Screen Shot 2019-07-20 at 8 06 17 AM" src="https://user-images.githubusercontent.com/7688693/61562633-d5937200-aac5-11e9-8dd1-9d5625320bfc.png">

Expected behavior

Typically this should reflect the user's browser locale or preferred date format. In my case DD-MM-YYYY not MM-DD-YYYY.

Actual behavior

It is displaying only the MM-DD-YYYY format despite any settings to the contrary.

Steps to reproduce

Proposed changes

Update the Dashboard component to check the local and format date accordingly.


Would it be possible to post an example dashboard to install?, although I am not that familiar with the function, I would of imagined this is a Javascript function thing.

posted by sinclairpaul over 5 years ago

Dashboard is a component that is installed by default with Node-Red for Hassio. To access the dashboard click this icon: <img width="331" alt="Screen Shot 2019-07-20 at 8 49 05 AM" src="https://user-images.githubusercontent.com/7688693/61564741-3e311d80-aacb-11e9-86b6-2b04b78619c3.png">

Then create a tab - eg. Home. (Hover over the Tab in the Dashboard menu and click Edit to name)

Now to launch the Dashboard click this icon: <img width="105" alt="Screen Shot 2019-07-20 at 8 51 00 AM" src="https://user-images.githubusercontent.com/7688693/61564869-82bcb900-aacb-11e9-80c5-c81b603cc1ba.png">

If your Dashboard doesn't load, you may need to configure your port settings under the Node-Red add-on configuration page as the plugin doesn't support Hass Ingress at this point.

posted by universenz over 5 years ago

Thanks I am aware on how to load the Dashboard, what I was asking for is the config of yours, also can you validate the option for date format. image

posted by sinclairpaul over 5 years ago

Ah, interesting! Sorry, I don't know if it is possible to export just the dashboard configuration.

The dashboard with a single tab is all you need to recreate this issue as it sits in the title bar.

In other news, I didn't realise NR had its own internal date format setting in the menu.. thank you for pointing that out! Haha. :)

<img width="323" alt="Screen Shot 2019-07-20 at 9 00 46 AM" src="https://user-images.githubusercontent.com/7688693/61565368-f01d1980-aacc-11e9-86c2-aebb8aac5eb5.png">

Despite it seemingly detecting my locale automatically (I never set it to DD/MM/YYYY), it is still not respecting that setting in the front end.

posted by universenz over 5 years ago

Sorry maybe I am misunderstanding, you should have a flow with Dashboard nodes that configures this. For example:

image

Which then shows:

image

There should be something in your flow for the dashboard that is configuring that header.

posted by sinclairpaul over 5 years ago

Ah, that's truly embarrassing. 🤦🏻‍♂️

You are right, there was a rogue template node from a flow I had pasted in that was quite far out on the NR canvas (out of view without scrolling right).. I had never noticed it, nor did I go looking for it because I thought the date/time was a new feature of NR after recently updating the add-on. Sheesh, my apologies!

Here's what the template node code included:

<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadClock();
    }else setTimeout(loadClock, 500)
});

function loadClock(){
    $('#clock').remove();
    var toolbar = $('.md-toolbar-tools');

    var div = $('<div/>');
    var p = $('<p/ id="clock">');

    div.append(p);
    div[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div);

    function displayTitle(lh) {
        p.text(lh); 
    }

    function upTime() {
        var d = new Date();
        p.text(d.toLocaleString());
    }

    if(document.clockInterval){ 
            clearInterval(document.clockInterval);
            document.clockInterval = null;
    }

    document.clockInterval = setInterval(upTime,1000);
}

</script>

I'm still not sure from the above why the date is not respecting the local settings. But then again I'm no expert with JS. I don't actually want to keep this node, so I'll close this issue.

Thanks for your help.

posted by universenz over 5 years ago

Glad you found it, I can't get this to load, but I am guessing that something just needs to be converted using the toLocaleString function.

posted by sinclairpaul over 5 years ago

@universenz After a nights sleep I believe I know what this is likely to be, if you are using HassOS the timezone will be UTC locally, please see Issue #235 for setting it correctly.

posted by sinclairpaul over 5 years ago

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

posted by addons-assistant[bot] over 5 years ago

Fund this Issue

$0.00
Funded

Pull requests