Changeset 579 in tmcsimulator for trunk/webapps

Timestamp:

02/02/2020 08:09:33 AM (6 years ago)

Author:

jdalbey

Message:

Add timebox to GTEC.

Location:

trunk/webapps/GTEC

Files:

• css/styles.css (modified) (1 diff)
• index.html (modified) (1 diff)
• js/vdsLayer.js (modified) (9 diffs)

trunk/webapps/GTEC/css/styles.css

@@ -55 +55 @@
           border:1px red solid;
         }
-      #time {
+      #timebox {
         background: #E6E6FA;
         font-family: Roboto;

trunk/webapps/GTEC/index.html

@@ -26 +26 @@
     <button id="greenButton">Green</button>
     <button id="yellowButton">Yellow</button>
+    <input type = "text"
+                 id = "timebox"
+                 value = "00:00:00"
+                 autocomplete=off
+                 onchange = "saveTime()"/>
     <!-- <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
     <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>

trunk/webapps/GTEC/js/vdsLayer.js

@@ +1 @@
+/** Logic for traffic events creator.
+    Based on vdsLayer from CPTMS. 
+    @author T. Kumar, J. Dalbey   Feb 2020
+    See wiki for user documentation.
+*/
 var postmileList = [];  // the list of postmiles saved from the json file.
 var chosenColor = "yellow"; // stores color that user picks, initial default yellow
+var currentTime; // the current event time
 
 // function to find differences between two arrays
@@ -27 +33 @@
             anchor: new google.maps.Point(6, 6)
         };
+    }
+
+    function saveTime() 
+    {
+        var timeOverride = document.getElementById("timebox").value; 
+        var d = new Date(); // creates a Date Object using the clients current time
+
+        let [hours,minutes,seconds] = timeOverride.split(':'); // using ES6 destructuring
+
+        d.setHours(+hours); // set the hours, using implicit type coercion
+        d.setMinutes(minutes); // you can pass Number or String, it doesn't really matter
+        d.setSeconds(seconds);
+        currentTime = d;  // save as new current time
+    }
+
+    // Refresh the time display
+    function updateTime(time)
+    {
+        document.getElementById("timebox").value = time;   
     }
 
@@ -56 +81 @@
         var first = []; // stores first dot
         var asc = false; //ascending
-        //var color_arr = []; 
         var white_arr = []; //stores all white dots
         // Initialize the current time to zero
-        var currentTime = new Date(0);
+        currentTime = new Date(0);
         currentTime.setHours(0);
         currentTime.setMinutes(0);
@@ -76 +100 @@
                 // checks highway direction to determine if postmiles are ascending or descending 
                 if (parseFloat(event_arr[2]) < parseFloat(first[2]))
-                {
+                { 
                     asc = false;
                 }
@@ -106 +130 @@
                     }
                 });
-                //color_arr.push(clicked_dots);
-                //console.log(clicked_dots);
-                //console.log(range);
                 // extracts ids for all the white dots
                 var white_arr_ids = white_arr.map(function (marker) {
@@ -136 +157 @@
                     });
                 }
-                // Increment the time by one-half minute (30 seconds)
-                var millisecs = currentTime.getTime();
-                millisecs += 30000;  
-                currentTime = new Date(millisecs);
 
                 // Create a printable string for the time (HH:MM:SS)
@@ -148 +165 @@
                 first[1] + "\t" + first[2] + "\t" + range.toFixed(3) + "\t" 
                 + getColorAbbr(chosenColor);
-                console.log(lineOut);
 
                 // Using Ajax POST to send the data 
@@ -156 +172 @@
                 // send the collected data 
                 xhr.send("msg="+lineOut + "\n")
+
+                // Increment the time by one-half minute (30 seconds)
+                var millisecs = currentTime.getTime();
+                millisecs += 30000;  
+                currentTime = new Date(millisecs);
+                // Refresh the time display
+                updateTime(currentTime.toLocaleTimeString('it-IT'));
+
             }
             // if user has not yet clicked on a dot
@@ -317 +341 @@
     var greenColor = document.getElementById('greenButton');
     var yellowColor = document.getElementById('yellowButton');
+    var time = document.getElementById('timebox');
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(time);
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(redColor);
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(greenColor);