source: tmcsimulator/trunk/webapps/js/cmsLayer.js @ 326

function initCMSbutton()

{

    var cmsBtnDiv = document.getElementById('cmsButton');

    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(cmsBtnDiv)

    cmsBtnDiv.title = 'Click to toggle cms view';

    // Setup the click event listeners to toggle icon display

    cmsBtnDiv.addEventListener('click', function()

    {

        cms_showing = !cms_showing;

        // Determine which button image to show

        if (cms_showing)

        {

            pic = "images/btnDepressed_CMS.png"

            // It's nice when icons become visible that the messages have been refreshed.

            loadAllMessages();

        }

        else

        {

            pic = "images/btnReady_CMS.png"

        }

        document.getElementById('cmsBtnImg').src = pic;

        // reveal or hide all the icons

        cmsLayer.forEach(function(feature)

        {

            cmsLayer.overrideStyle(feature,

            {

                visible: cms_showing

            });

        });

    });

}

function loadCMSlayer()

{

    cmsLayer = new google.maps.Data();

    cmsLayer.setMap(map);

    cmsLayer.loadGeoJson(kCMSfile);  

    cmsLayer.setStyle(function(feature)

    {

        // return the StyleOptions

        return {

            icon: yellowFlag,

            title: feature.getId()+ " " +feature.getProperty("location")+ " " 

                    + feature.getProperty("street"),

            visible: false

        };

    });

    

    cmsLayer.addListener('click', function(event)

    {

        var dialog = document.getElementById('dialog');

        // Note: If the dialog is already being displayed when someone else

        // updates the message, it won't be reflected in the dialog, until

        // you close and reopen it.

        dialog.style.display = 'block';

        cmsID = event.feature.getId();

        // Assign to the hidden field

        document.getElementById('cmsID').value = cmsID;

        showMessage(cmsID); // note: this is async

        document.getElementById('cms-info-label').innerHTML = "CMS ID: " +

            cmsID + "   LOCATION: " + event.feature.getProperty("location");

        // clear input fields

        document.getElementById('msgcontent1').value = "";

        document.getElementById('msgcontent2').value = "";

        document.getElementById('msgcontent3').value = "";

        document.getElementById('msgcontent1').focus();

        var span = document.getElementsByClassName("close")[0]

            // When the user clicks on <span> (x), close the modal

        span.onclick = function()

        {

            handleDialogClose();

        }

    });

}



    // Center justify message text in a 16 column field

    function justifyCMStext(message)

    {

        var kBlanks = "                ";

        var padLen = (16 - message.length) / 2;

        var padding = kBlanks.substring(0, padLen);

        return padding + message;

    }



    function handleCMSsubmit()

    {

        // recover the user's response

        var response1 = justifyCMStext(document.getElementById('msgcontent1').value.trim());

        var response2 = justifyCMStext(document.getElementById('msgcontent2').value.trim());

        var response3 = justifyCMStext(document.getElementById('msgcontent3').value.trim());

        var newMsg = response1 + response2 + response3;

        if (newMsg.length == 0)

        {

            alert("Nothing to Send ... Proposed is empty.");

        }

        else

        {

            document.getElementById('msgdisplay1').value = response1;

            document.getElementById('msgdisplay2').value = response2;

            document.getElementById('msgdisplay3').value = response3;

            saveMessage(response1 + "|" + response2 + "|" + response3);

        }

    }



    function handleDialogClose()

    {

        // hide the display

        document.getElementById('dialog').style.display = 'none'

    }



    function handleCMSclear()

    {

        document.getElementById('msgdisplay1').value = "";

        document.getElementById('msgdisplay2').value = "";

        document.getElementById('msgdisplay3').value = "";

        saveMessage("||");

    }

    // retrieve the current cms message file

    function showMessage(cmsID)

    {

        loadAllMessages();  // because someone else may have made a recent update

        // lookup the message for this cms ID

        var message = messageDict[cmsID].cms.message;

        // show the message in the display

        document.getElementById('msgdisplay1').value = message.phase1.Line1;

        document.getElementById('msgdisplay2').value = message.phase1.Line2;

        document.getElementById('msgdisplay3').value = message.phase1.Line3;

    }

    function loadAllMessages()

    {

        loadJSON("cms_messages.json", function(response)

        {

            // Parse JSON string into object

            messagejson = JSON.parse(response);

            // Add each message to a lookup dictionary 

            for (var i = 0; i < messagejson.data.length; i++)

            {

                var item = messagejson.data[i];

                messageDict[item.cms.index] = item;

                // Set the appropriate icon on the cms icon

                // set a yellow flag if there's currently no message

                if (item.cms.message.phase1.Line1 + 

                    item.cms.message.phase1.Line2 +

                    item.cms.message.phase1.Line3 == "")

                {

                    cmsLayer.overrideStyle(cmsLayer.getFeatureById(item.cms.index), {icon: yellowFlag})

                }

                else

                {

                    cmsLayer.overrideStyle(cmsLayer.getFeatureById(item.cms.index), {icon: blueFlag})

                }

            }

        });

    }



    // Save an updated cms message to the file

    function saveMessage(outMessage)

    {

        // Fetch cmsID from hidden field where it was put when dialog opened.

        var cmsID = document.getElementById('cmsID').value;

        //console.log("Saving " + outMessage + " for cmsID " + cmsID)

        msgParts = outMessage.split("|");

        messageDict[cmsID].cms.message.phase1.Line1 = msgParts[0];

        messageDict[cmsID].cms.message.phase1.Line2 = msgParts[1];

        messageDict[cmsID].cms.message.phase1.Line3 = msgParts[2];

        // Set icon to reflect message state

        if (outMessage == "||")

        {

            currentIcon = {icon: yellowFlag};

        }

        else

        {

            currentIcon = {icon: blueFlag};

        }

        cmsLayer.overrideStyle(cmsLayer.getFeatureById(cmsID), currentIcon)

        outString = "{\n\t\"data\":\n\t\t" + JSON.stringify(Object.values(messageDict)) + "}";



        var xhttp = new XMLHttpRequest();

        xhttp.open("GET", "cgi-bin/saveMessage.py?msg=" + outString, true);

        xhttp.send();

        // Using POST might be a better idea ... haven't tried this yet

        //      var xhr = new XMLHttpRequest();

        //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);

        //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

        // send the collected data as JSON

        //      xhr.send(JSON.stringify(messageList));

    }