User login info in toolbar/header

Dashboard
,
1

Hi all,

in my labour, I’m not able to find answer for my question.

How is possible to add in toolbar/heade of dashboard(v1) logged user f.e. -
Logged user : Jack_Sparrow

At this moment I have only time and date in the toolbar, as was described in many forums.

<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 upTime() {
        var d = new Date();
        p.text(d.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' }));
    }

    if(document.clockInterval){ 
            clearInterval(document.clockInterval);
            document.clockInterval = null;
    }
        
    document.clockInterval = setInterval(upTime,1000);
}

</script>

Thanks for help. Bobo

2

assuming that you have the required data in a msg.payload. you can try this below code

[{"id":"0ddff8334eeace04","type":"group","z":"f7896303b8f338aa","name":"Buttons/Clock/Logo in Toolbar Header","style":{"stroke":"#ffC000","fill":"#ffdf7f","label":true,"label-position":"n","color":"#3f93cf"},"nodes":["91670c03.c29ad","5065704ae7cce962","8ee9d70d108a5661","2f20553b4b37a60c","63d8e8fbf4884e2a","6b09f17994dc574b"],"x":84,"y":69,"w":562,"h":202},{"id":"91670c03.c29ad","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"Header Buttons","order":2,"width":"1","height":"1","format":"<script id=\"titleScript\" type=\"text/javascript\">\n(function(scope) {\n    function createToolbarButtons() {\n        var toolbar = $('.md-toolbar-tools');\n        if (toolbar.length === 0) {\n            setTimeout(createToolbarButtons, 50);\n            return;\n        }\n\n        // Hide the default toolbar heading\n        toolbar.find('h1').hide();\n\n        // Remove existing custom elements to prevent duplicates on refresh\n        $('#clock').remove();\n        $('#button-container').remove();\n        $('#logo').remove();\n        $('#msg-payload-textbox').remove(); // --- NEW: Remove the old textbox as well ---\n\n        var buttonDiv = $('<div/>', {\n            id: 'button-container',\n            css: {\n                'display': 'flex',\n                'align-items': 'center'\n            }\n        });\n\n        // --- NEW: Create a textbox to display the msg.payload content ---\n        var payloadTextbox = $('<div/>', {\n            id: 'msg-payload-textbox',\n            css: {\n                'margin-left': '10px',\n                'padding': '8px',\n                'border': '1px solid #ccc',\n                'border-radius': '5px',\n                'min-width': '200px',\n                'white-space': 'nowrap',\n                'overflow': 'hidden',\n                'text-overflow': 'ellipsis',\n                'background-color': '#f9f9f9',\n                'font-family': 'monospace',\n                'color': '#333'\n            }\n        });\n\n        // --- Clock on the right ---\n        var clockButton = $('<button/>', {\n            id: 'clock',\n            class: 'time_display',\n            css: {\n                'margin-left': 'auto',\n                'margin-right': '5px',\n                'cursor': 'default'\n            }\n        });\n\n        // --- Insert the Logo Here, after the clock ---\n        var logo = $('<img/>', {\n            id: 'logo',\n            src: '/animated.gif',\n            width: '65',\n            height: '52',\n            css: {\n                'margin-right': '5px',\n                'cursor': 'pointer'\n            }\n        });\n\n        // Add a click event to the logo\n        logo.on('click', function() {\n            scope.send({ payload: 6 });\n            $('.my-toolbar-button').removeClass('active');\n        });\n\n        // --- Build the buttons and append them to the button container ---\n        var buttonLabels = ['LIVE DASHBOARD', 'BUTTON-2', 'BUTTON-3', 'BUTTON-4', 'BUTTON-5'];\n        var lastClickedButton = null;\n\n        for (let i = 0; i < buttonLabels.length; i++) {\n            var button = $('<button/>', {\n                text: buttonLabels[i],\n                class: 'my-toolbar-button',\n                'data-button-id': i + 1\n            });\n\n            button.on('click', function() {\n                var clickedButton = $(this);\n                if (lastClickedButton) {\n                    lastClickedButton.removeClass('active');\n                }\n                clickedButton.addClass('active');\n                lastClickedButton = clickedButton;\n                var payloadValue = clickedButton.data('button-id');\n                scope.send({ payload: payloadValue });\n            });\n            buttonDiv.append(button);\n        }\n\n        // --- Append the elements in the correct order ---\n        toolbar.append(buttonDiv);\n        toolbar.append(payloadTextbox); // --- NEW: Append the textbox to the toolbar ---\n        toolbar.append(clockButton);\n        toolbar.append(logo);\n\n        // Ensure the toolbar uses flexbox\n        toolbar.css({\n            'display': 'flex',\n            'align-items': 'center'\n        });\n\n        // --- Clock functionality ---\n        function upTime() {\n            var d = new Date();\n            var formatter = new Intl.DateTimeFormat('en-US', {\n                year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',\n                hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23'\n            });\n            var formattedDate = formatter.format(d);\n            var day = d.getDate();\n            var suffix = (day >= 11 && day <= 13) ? 'th' : (['st', 'nd', 'rd', 'th'][day % 10] || 'th');\n            formattedDate = formattedDate.replace(/(\\s\\d+)/, '$1' + suffix);\n            clockButton.text(formattedDate);\n        }\n\n        upTime();\n        setInterval(upTime, 1000);\n    }\n\n    // --- NEW: Watch for incoming messages and update the textbox ---\n    scope.$watch('msg', function(msg) {\n        if (msg && msg.payload !== undefined) {\n            // Check if the payload is a simple type (string, number, boolean)\n            // or a more complex object/array.\n            var content = typeof msg.payload === 'object' ?\n                JSON.stringify(msg.payload, null, 2) :\n                msg.payload;\n            $('#msg-payload-textbox').text(content);\n        }\n    });\n\n    createToolbarButtons();\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":200,"y":200,"wires":[["8ee9d70d108a5661","2f20553b4b37a60c"]]},{"id":"5065704ae7cce962","type":"ui_template","z":"f7896303b8f338aa","g":"0ddff8334eeace04","group":"c536db49089f0a12","name":"CSS","order":1,"width":"1","height":"2","format":"<style>\n  .overflow-hidden {overflow: hidden;}\n  .livedisplay {font-size: 2.5em;text-align: center;}\n\n\n    .my-toolbar-button {\n        background-color: #0078d0;\n        border: 3px solid black;\n        color: white;\n        padding: 8px 16px;\n        text-align: center;\n        text-decoration: none;\n        display: inline-block;\n        font-size: 1.2em;\n        margin: 4px 2px;\n        cursor: pointer;\n        border-radius: 28px;\n        transition-duration: 0.4s;\n        /* --- New CSS Rule for all buttons --- */\n        white-space: nowrap;\n    }\n\n    .time_display {\n   background-color: green;\n        border: 3px solid black;\n        color: white;\n        padding: 8px 16px;\n        text-align: center;\n        text-decoration: none;\n        display: inline-block;\n        font-size: 1.2em;\n        margin: 4px 2px;\n        cursor: none;\n        border-radius: 28px;\n        transition-duration: 0.4s;\n        /* --- New CSS Rule for all buttons --- */\n        white-space: nowrap;\n    }\n\n\n    .my-toolbar-button:hover {\n        background-color: white;\n        color: #1B61E4;\n        border: 3px solid #2196F3;\n    }\n\n    .my-toolbar-button.active {\n        background-color: #d1e5fa;\n        color: #005a9e;\n        border: 3px solid #005a9e;\n        font-weight: bold;\n    }\n\n    .my-toolbar-button.active:hover {\n        background-color: #d1e5fa;\n        color: #005a9e;\n        cursor: default;\n    }\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":170,"y":110,"wires":[[]]},{"id":"8ee9d70d108a5661","type":"switch","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"}],"checkall":"true","repair":false,"outputs":6,"x":360,"y":200,"wires":[["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"],["63d8e8fbf4884e2a"]]},{"id":"2f20553b4b37a60c","type":"debug","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":120,"wires":[]},{"id":"63d8e8fbf4884e2a","type":"ui_toast","z":"f7896303b8f338aa","g":"0ddff8334eeace04","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":550,"y":200,"wires":[[]]},{"id":"6b09f17994dc574b","type":"inject","z":"f7896303b8f338aa","g":"0ddff8334eeace04","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":160,"wires":[["91670c03.c29ad"]]},{"id":"c536db49089f0a12","type":"ui_group","name":"ONE","tab":"fbe9cc4da47a8d17","order":1,"disp":false,"width":"50","collapse":false,"className":""},{"id":"fbe9cc4da47a8d17","type":"ui_tab","name":"DASH","icon":"fa-table","order":1,"disabled":false,"hidden":false}]
3

@smanjunath211 nice, but so sorry, I am not able to apply it to my project.

Example working for me, but after some editing actions is not valid. Also I am not specialist in javascript. Only have a starter programming.

4

can you share the flow after your editing ?

I hope my assumption is correct, my flow will not give you any information of a logged user, but it will display any payload that you pass on to the template node.

Regards
Manjunath S

5

@smanjunath211 I am sure, that your code was correct, I have tested it. But I am not able to adapt it to my flow.

So, based on new conditions. I am completely throw away this solution and trying to do this.
After reinstalled DB1 to DB2 and completely renew all visual components, I would like to try put the clock to new DB2.

But still I haven’t be lucky.

There is my code, which I this has a good parts, because formattedTime gets correct value of time, which I need, but only static, not running. There is an error, which also I’m not able to solve.

<template>
    <Teleport v-if="loaded" to="#app-bar-actions">
        <div class="clock-display">{{formattedTime}}</div>
    </Teleport>
</template>


        <script>

            export default {
    data() {
        return {
            loaded: false,
        };
    },
    mounted() {
        this.loaded = true;
        this.startClock();
    },
    beforeUnmount() {
        clearInterval(this.clockInterval);
    },
    computed:{

formattedTime() {
            var d = new Date(); 
            var time_string = d.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' });
            return time_string;
           
        }
    
    },
    methods:{
     startClock() {
            this.clockInterval = setInterval(formattedTime, 1000);
        }   
    }
};

        </script>

<style>
    .clock-display {
        margin: 5px 15px;
        font-size: 24px;
        font-weight: bold;
        color: #000000;
    }
</style>

Pleas, if is possible to help me, I will be glad. Thanks.

Bobo

6

This is what I use (with your date format). Make sure your widget is UI-scoped

<template>
    <Teleport v-if="mounted" to="#app-bar-actions">
            <p>{{ displayDateTime }}</p>

    </Teleport>

</template>

<script>

    export default {
        data() {
            return {
                mounted: false,
                currentTime: new Date(),
                timer: undefined,

            }

        },

        methods: {
            setDateTime: function() {
                this.currentTime = new Date()

            }

        },

        computed: {
            displayDateTime: function() {
                //return `${this.currentTime.toLocaleDateString()}, ${this.currentTime.toLocaleTimeString()}`
                return this.currentTime.toLocaleString('sk-SK', { timeZone: 'Europe/Bratislava' })

            }

        },
 
        mounted() {
            this.mounted = true,
            this.timer = setInterval(this.setDateTime, 1000)
        },

        unmounted() {
            clearInterval(this.timer)

        },

    }

</script>
7

@Buckskin Thanks a lot sir. This is what I need.

So, at this moment I am looking for a new challenge …… user management in DB2.
And this is so difficult, because I don’t want flowfuse cloud solution. Because, this network will be separated from any public, only based on RPi.

So once again, big thanks. Working like a charm. UI widget was set few hours back, at the first testing.

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.