Changeset 566 in tmcsimulator for trunk/webapps

Timestamp:

01/24/2020 12:53:15 PM (6 years ago)

Author:

jdalbey

Message:

GTEC vdsLayer.js Add color buttons.

File:

• trunk/webapps/GTEC/js/vdsLayer.js (modified) (7 diffs)

trunk/webapps/GTEC/js/vdsLayer.js

@@ -1 +1 @@
 var postmileList = [];  // the list of postmiles saved from the json file.
-
+var chosenColor = null;
 
 Array.prototype.diff = function(a) {
@@ -29 +29 @@
 
     // Load the map data from a json file and style all the points
-    function initializeVDSlayer()
+    function loadVDSlayer()
     {
         // Load the static map data and call saveCoords when done
@@ -112 +112 @@
                 });
                 white_arr = [];
+                if (chosenColor)
+                {
+                    clicked_dots.forEach(function (dot) {
+                        dot.setProperty("color", chosenColor);
+                    });
+                }
+
                 // Assemble the line to be written to the events file
-                var lineOut = "0:01:00  " + range.toFixed(3);
+                var lineOut = "181   00:00:00    " + first[0] + "       " + 
+                first[1] + "            " + first[2] + "        " + range.toFixed(3) + "         " 
+                + getColorAbbr(chosenColor);
 
                 // Using Ajax POST to send the data 
                 var xhr = new XMLHttpRequest();
-                xhr.open("POST", "../cgi-bin/saveTrafficEvent.py", true);
+                xhr.open("POST", "../../cgi-bin/saveTrafficEvent.py", true);
                 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                 // send the collected data 
@@ -228 +237 @@
         // see if new color is different than current color
         currentFeature = map.data.getFeatureById(target);
-        currentColor = currentFeature.getProperty("color");
-        // if a new color is desired then assign it to the feature's color property
-        if (currentColor != newColor)
-        {
-            currentFeature.setProperty("color", newColor);
-            // set zIndex for slowed traffic to a higher value so they overlap
-            currentFeature.setProperty("zIndex", colorZvalues[newColor]);
+        if (currentFeature) {
+            currentColor = currentFeature.getProperty("color");
+            // if a new color is desired then assign it to the feature's color property
+            if (currentColor != newColor)
+            {
+                currentFeature.setProperty("color", newColor);
+                // set zIndex for slowed traffic to a higher value so they overlap
+                currentFeature.setProperty("zIndex", colorZvalues[newColor]);
+            }
         }
     }
@@ -275 +286 @@
         else if (str === "G\r" || str === "G")
             return "lime";
+    }
+
+    function getColorAbbr(str){
+        if (str === "red")
+            return "R";
+        else if (str === "yellow")
+            return "Y";
+        else if (str === "lime")
+            return "G";
     }
 
@@ -402 +422 @@
 }*/
 
+function initColorButtons()
+{
+    var redColor = document.getElementById('redButton');
+    var greenColor = document.getElementById('greenButton');
+    var yellowColor = document.getElementById('yellowButton');
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(redColor);
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(greenColor);
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(yellowColor);
+    redColor.addEventListener('click', function() {
+        chosenColor = "red";
+    });
+    greenColor.addEventListener('click', function() {
+        chosenColor = "lime";
+    });
+    yellowColor.addEventListener('click', function(){
+        chosenColor = "yellow";
+    });
+}
+
 // init beginning, forward and back buttons as well as time display on map
-function initControlButtons()
+/*function initControlButtons()
 {
     var i = 0;
-    /*var time = document.getElementById('time');
+    var time = document.getElementById('time');
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(time)
     var start = document.getElementById('start');
@@ -446 +485 @@
         i = 0;
         time.innerHTML = "00:00:00";
-    });*/
+    });
 }
-
+*/