New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


Digital time - Moment.js not showing on map view

Votes:

1

Your Vote:

Up

Down

Hi All, I'm having a strange issue. I have managed to create a new object for my map that pulls the time from moment.js and displays it. The reason I want to use this, is that I need to see several time zones and the only templates I have seen show server time and nothing else.

Here is the code (I then have other copies with a different time zone):

<!--Added Objects: GMT-->

<div class="map_object map_table" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;font-size:80px;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">;

    ">
        <#mapobject type="objectgrip" mode="<@editmode>">
        <#mapobject type="htmlbefore" subid="<@subid>">
    
    <div id="MyClockDisplay4" class="clock"></div>
            
    <style>
         <div class="top10listcontainer" style="overflow:hidden">
        .clock {
            color: #000000;
            font-family: Orbitron;
            letter-spacing: 7px;
            width: 200px
            }
    </style>
    
    <div id="MyClockDisplay4"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

    <script src="https://momentjs.com/downloads/moment-timezone-with-data-10-year-range.js"></script>
    
    
    <script>
        const MyClockDisplay4 = document.getElementById('MyClockDisplay4');

function updateTime(){
    const now = moment().tz('Europe/London');
     const humanReadable = now.format('HH:mm');

        MyClockDisplay4.textContent = humanReadable;
}

        setInterval(updateTime, 30000);
        updateTime();

        </script>

        <#mapobject type="htmlafter" subid="<@subid>">
    </div>

Now, I am completely new to JS so this may not be correct... This is from chopping up code I found online and using the docs.

Now the issue i'm having is that it shows on the "map designer" view as expected, but when I look at the map the url, it is blank:

Map Designer View:

Map Designer View

View Map View:

View Map View

Accessing via URL - Deliberately blank as this doesn't show:

URL

I just can't figure out why it would show in the design views, but not via the URL.

I would be eternally greatful if someone could help me out

P.S. The reason for "MyClockDisplay4" in the code is because I am using multiple versions of this with different time zones, so this is how I am seperating them (so they don't conflict when on the same page).

Thanks

Ashley

clock digital-clock javascript map-designer map-objects maps moment-js template

Created on Oct 22, 2019 8:01:30 AM by  Ashleyu (11) 1 1

Last change on Oct 22, 2019 11:11:07 AM by  Torsten Lindner [Paessler Support]



1 Reply

Votes:

1

Your Vote:

Up

Down

Got it working for anyone with the same issue:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>

Had to be replaced with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

This will give you a digital clock without seconds, but it's easy to add if you want it.

-Ashley

Created on Oct 22, 2019 11:13:53 AM by  Ashleyu (11) 1 1



Please log in or register to enter your reply.


Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.