Index: trunk/src/cptms/cms_demo.html
===================================================================
--- trunk/src/cptms/cms_demo.html (revision 296)
+++ trunk/src/cptms/cms_demo.html (revision 297)
@@ -2,64 +2,66 @@
-
+
- KML Click Demo
+ CMS Manager Demo
@@ -67,11 +69,14 @@
-
+
+
+
+
+
+
+
-
-
-
-
-
+
+
@@ -80,41 +85,91 @@
var centerPoint = {lat: 33.693385, lng: -117.798937};
var map;
-//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
-var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml";
-
-// var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
-// var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
-// var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
+ var kMapStartupFile = "cmsStatusD12.json";
+ //var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
+ //var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml";
+ // var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
+ // var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
+ // var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
+ var blueFlag = "icon_cmsBlue.png";
+ var yellowFlag = "icon_cmsYellow.png";
+ var messageList;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: centerPoint,
zoom: 11,
- mapTypeId: 'terrain'
+ /* mapTypeId: 'terrain', */
+ mapTypeControl: false,
+ streetViewControl: false
});
-
- var kmlLayer = new google.maps.KmlLayer(src, {
- suppressInfoWindows: true,
- preserveViewport: false, // false for zoom to placemarks
- map: map
+ getMessage(1); // load the current message file
+ setMarkers();
+ }
+
+ var cms_info;
+ var markerList = [];
+
+
+ function setMarkers()
+ {
+ var simpleImage = "";
+
+ loadcmsJSON(function(response)
+ {
+ // Parse JSON string into object
+ cms_info = JSON.parse(response);
+ console.log(cms_info.data[0].cms);
+ // Process each new marker
+ for (var i = 0; i < cms_info.data.length; i++)
+ {
+ var cms = cms_info.data[i].cms;
+ var currLat = Number(cms.location.latitude);
+ var currLong = Number(cms.location.longitude);
+ // load a yellow flag if there's currently no message
+ if (messageList[i] == "||")
+ simpleImage = yellowFlag;
+ else
+ simpleImage = blueFlag;
+ markerList[i] = new google.maps.Marker(
+ {
+ position: {lat: currLat, lng: currLong},
+ map: map,
+ icon: simpleImage,
+ title: " "+cms.location.route + " "+ cms.location.direction+ " "+ cms.location.postmile,
+ label: ""+i
+ });
+ console.log("built: "+markerList[i].id+" "+markerList[i].title);
+ // }
+ // for (var i = 0; i < markerList.length; i++)
+ // {
+ google.maps.event.addListener(markerList[i], 'click', function () {
+ //var content = event.featureData.infoWindowHtml;
+ var cmsName = document.getElementById('cms-name');
+ cmsName.innerHTML = this.getTitle(); // put sign name in display
+ cmsName.style.display = 'block'
+ var cmsMsg = document.getElementById('cms-message');
+ cmsMsg.style.display = 'block'
+ cmsID = Number(this.getLabel());
+ getMessage(cmsID); // note: this is async
+ document.getElementById('cmsID').value=cmsID ;
+ var userInput = document.getElementById('userinput');
+ userInput.style.display = 'block'
+ });
+ }
});
- kmlLayer.addListener('click', function(event) {
- // grab description from kml file
- var feature = event.featureData;
- //var content = event.featureData.infoWindowHtml;
- var cmsName = document.getElementById('cms-name');
- cmsName.innerHTML = feature.name; // put sign name in display
- cmsName.style.display = 'block'
- cmsID = feature.id
- getMessage(cmsID); // note: this is async
- // clear the response area
- document.getElementById('msgcontent1').value="";
- document.getElementById('msgcontent2').value="";
- document.getElementById('msgcontent3').value="";
- document.getElementById('cmsID').value=cmsID ;
- var userInput = document.getElementById('userinput');
- userInput.style.display = 'block'
- console.log("clicked on: "+feature.id+" - " + feature.name);
- });
- }
+ }
+ function loadcmsJSON(callback) {
+
+ var xobj = new XMLHttpRequest();
+ xobj.overrideMimeType("application/json");
+ xobj.open('GET', kMapStartupFile, true);
+ xobj.onreadystatechange = function () {
+ if (xobj.readyState == 4 && xobj.status == "200") {
+ callback(xobj.responseText);
+ }
+ };
+ // We want ajax to ignore any cached responses
+ xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
+ xobj.send(null);
+ }
function handleSubmit()
{
@@ -127,5 +182,5 @@
var response2 = document.getElementById('msgcontent2').value;
var response3 = document.getElementById('msgcontent3').value;
- saveMessage(response1+"
"+response2+"
"+response3);
+ saveMessage(response1+"|"+response2+"|"+response3);
}
function handleCancel()
@@ -135,4 +190,11 @@
document.getElementById('userinput').style.display = 'none'
document.getElementById('cms-name').style.display = 'none'
+ }
+ function handleClear()
+ {
+ document.getElementById('msgcontent1').value="";
+ document.getElementById('msgcontent2').value="";
+ document.getElementById('msgcontent3').value="";
+ document.getElementById('msgcontent1').focus();
}
@@ -151,5 +213,4 @@
xobj.send(null);
}
- var messageList;
// retrieve the current cms message file
function getMessage(cmsID)
@@ -161,7 +222,12 @@
// select a message from json for the given cmsID
console.log("get by cmsID="+cmsID);
- var cmsSign = document.getElementById('cms-message');
- cmsSign.innerHTML = messageList[cmsID];
+ var cmsSign = document.getElementById('msgcontent1');
+ //cmsSign.innerHTML = messageList[cmsID];
+ messageparts = messageList[cmsID].split("|");
+ cmsSign.value = messageparts[0];
+ document.getElementById('msgcontent2').value = messageparts[1];
+ document.getElementById('msgcontent3').value = messageparts[2];
cmsSign.style.display = 'block'
+ cmsSign.focus();
});
}
@@ -173,4 +239,8 @@
console.log("Saving " + outMessage + " for cmsID " + cmsID)
messageList[cmsID] = outMessage;
+ if (outMessage.length < 4)
+ markerList[cmsID].setIcon(yellowFlag);
+ else
+ markerList[cmsID].setIcon(blueFlag);
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true);