- Added cick handling

tazle · Apr 23, 2012 · ec612c4 · ec612c4
1 parent aae3baf
commit ec612c4
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/test.css b/test.css
@@ -1,4 +1,5 @@
 body {
+    font-family: sans-serif;
     background: #909090;
 }
 

diff --git a/test.html b/test.html
@@ -14,20 +14,38 @@
     <script type="text/javascript"
             src="test.js"></script>
     <link rel="stylesheet" type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.19.custom.css"></link>
+    <link rel="stylesheet" type="text/css" href="test.css"></link>
   </head>
   <body>
-    Map:
     <div id="map_canvas" style="width: 100%; height: 500px;"></div>
-    Date Selector:
-    <form action="">
-      <ul>
-        <li><input type="radio" name="day" value="/2012-04-19.json" checked="checked" /> Thursday</li>
-        <li><input type="radio" name="day" value="/2012-04-20.json" /> Friday </li>
-        <li><input type="radio" name="day" value="/2012-04-21.json" /> Saturday </li>
-        <li><input type="radio" name="day" value="/2012-04-22.json" /> Sunday </li>
-      </ul>
-    </form>
-    From <span id="start">07:00</span> to <span id="end">09:00</span>.
-    <span id="range-begin"></span><div id="slider" style="height: 10px;"></div><span id="range-end"></span>
+    <div>
+      <p>Date Selector:</p>
+      <form action="">
+        <input type="radio" name="day" value="/2012-04-19.json" checked="checked" /> Thursday
+        <input type="radio" name="day" value="/2012-04-20.json" /> Friday
+        <input type="radio" name="day" value="/2012-04-21.json" /> Saturday
+        <input type="radio" name="day" value="/2012-04-22.json" /> Sunday
+      </form>
+    </div>
+    <p>
+      From <span id="start">07:00</span> to <span id="end">09:00</span>.
+    </p>
+    <div>
+      <div id="range-begin" style="float: left; width: 3em; margin-right: 1em;"></div>
+      <div id="time-slider-container" style="float: left; width: 80%;">
+        <div id="time-slider" style="height: 10px;"></div>
+      </div>
+      <div id="range-end" style="float: left; margin-left: 1em;"></div>
+    </div>
+    <p style="clear: left;">
+      Time limits <span class="c-short" id="short">5</span> minutes, <span class="c-medium" id="medium">10</span> minutes, <span class="c-long" id="long">20</span> minutes, <span class="c-superlong" id="superlong">30</span> minutes.
+    </p>
+    <div>
+      <div id="color-range-begin" style="float: left; width: 3em; margin-right: 1em;">0</div>
+      <div style="float: left; width: 80%">
+        <div id="color-slider" style="height: 10px;"></div>
+      </div>
+      <div id="color-range-end" style="float: left; margin-left: 1em;">60</div>
+    </div>
   </body>
 </html>
diff --git a/test.js b/test.js
@@ -142,6 +142,10 @@ function max_interval(stops, from, to) {
         prev = time;
     });
     var last = to - prev;
+    if (max_int == 0) {
+        // Handle empty intervals
+        return to-from;
+    }
     return max(max_int, last);
 }
 
@@ -159,6 +163,18 @@ function get_color(interval) {
     }
 }
 
+function format_stops(stops) {
+    var result = [];
+    result.push("<ul>");
+    $.each(stops, function(i, time) {
+        if (time >= start_time && time <= end_time) {
+            result.push("<li>" + format_hhmm(time) + "</li>");
+        }
+    });
+    result.push("</ul>");
+    return result.join("");
+}
+
 var zs = {
     "#14ff14": 4,
     "#ffff14": 3,
@@ -183,7 +199,18 @@ function update_lines() {
         var z = zs[color];
         if (color != null) {
             var path = [new google.maps.LatLng(from[1][1], from[1][0]), new google.maps.LatLng(to[1][1], to[1][0])];
-            var line = new google.maps.Polyline({map: map, path: path, strokeColor: color});
+            var line = new google.maps.Polyline({map: map, path: path, strokeColor: color, zIndex: z});
+            var infowindow = null;
+            google.maps.event.addListener(line, 'click', function(event) {
+                if (infowindow == null) {
+                    infowindow = new google.maps.InfoWindow({
+                        content: format_stops(stops),
+                        position: event.latLng,
+                    });
+                }
+                infowindow.setPosition(event.latLng);
+                infowindow.open(map);
+            });
             lines.push(line);
         }
     });
@@ -193,6 +220,12 @@ function selected_url() {
     return $('input:radio[name=day]:checked').val();
 }
 
+function on_click() {
+    var infowindow = new google.maps.InfoWindow({
+        content: contentString
+    });
+}
+
 function initialize() {
     var myOptions = {
         zoom: 16,