Untitled

<html>
<head>
    <link rel="stylesheet" href="css/L3_Single_HX.css" type="text/css" charset="utf-8">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/test.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        var timestampOld;
        var timestamp;
        var sMain1;
        var sSub1;


        var xmlDoc;

        var xhr = new XMLHttpRequest();

        var animating = false;
        var doUpdate = false;

        function init() {
            xhr.overrideMimeType('text/xml');

            var timeout = this.window.setInterval(function() {
                pollHandler();
            }, 50);

            $('#sMain1').html('');
            $('#sSub1').html('');

            anime({
                targets: '#base',
                translateX: 50,
                opacity: 1,
                easing: 'linear',
                duration: 500
            });
        }

        function pollHandler() {
            loadData();
            if (timestamp != timestampOld) {
                doUpdate = true;
            }
            if (!animating && doUpdate) {
                updateBoard();
            }
        }


        function updateBoard() {
            idUpdateAnime('sMain1', sMain1, 30, 460);
            idUpdateAnime('sSub1', sSub1, 30, 460);

            doUpdate = false;
        }

        function getValueFromTag(xmlDoc, tag) {
            if (xmlDoc.getElementsByTagName(tag).length != 0) {
                if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
                    return '';
                } else {
                    return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
                }
            } else {
                return '';
            }
        }

        function idUpdateAnime(id, idName, leftStart, leftStop){
            if ($('#' + id).html() != idName) {
                animating = true;

                anime({
                    delay: 100,
                    targets: '#' + id,
                    translateX: leftStart,
                    duration: 500,
                    opacity: 1,
                    easing: 'easeOutQuart',
                    begin: function(anim) {
                        console.log('complete');
                        $('#'+ id).html(idName);
                    }
                });

                anime({
                    targets: '#' + id,
                    complete: function(anim) {
                        console.log('complete123');
                        animating = false;
                    }
                });


                console.log('fired');
            }
        }

        function loadData() {
            xhr.open('GET', 'graphicsintegration.xml');
            xhr.send();
            xhr.onreadystatechange = function () {
                xmlDoc = xhr.responseXML;
                if (xmlDoc) {
                    sMain1 = getValueFromTag(xmlDoc, 'sMain1').toUpperCase();
                    sSub1 = getValueFromTag(xmlDoc, 'sSub1').toUpperCase();
                    timestampOld = timestamp;
                    timestamp = getValueFromTag(xmlDoc, 'timestamp');
                }
                else if (!xmlDoc) {
                }
            }
        }


        function getCountry (country) {

            var count = iso.findCountryByName(country);
            if (!count)
            count = iso.findCountryByCode(country);
            if (!count) {
            var count = new Array();
            count['value'] = "unknown";
            }

            return count['value'];
        }
    </script>
</head>
<body onLoad="init()">
    <div id="base">
        <div id="sMain1"></div>
        <div id="sSub1"></div>
    </div>
    <div id="logo"></div>
</body>
</html>