Difference between revisions of "Widget:GTform"

From Transit.Wiki
m
m (Text replacement - "jquery-1.7.2.min.js" to "jquery-3.4.1.min.js")
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<includeonly>
 
<includeonly>
−
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+
<script src="https://apps.transitunlimited.org/jquery-3.4.1.min.js"></script>
−
    <script>
+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
−
      var directions = new google.maps.DirectionsService();
+
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyA1-YSOAtIlnU0ZcufMDLNjEVZDmq7sPh4"></script>
−
      var renderer = new google.maps.DirectionsRenderer();
+
<p id="note"></p>
−
      var map, transitLayer;
+
<div id="info">
−
 
+
<button onclick="getLocation(1)">Trip from here</button>
−
      function initialize() {
+
<button onclick="getLocation(2)">Trip to here</button>
−
        var mapOptions = {
+
<button onclick="resetform()">Reset form</button>
−
          zoom: 5,
+
<br/>
−
          center: new google.maps.LatLng(38.6, -114.6),
+
<div style="display:inline-block;margin:2px 0 2px 0;"><label>from</label>
−
          mapTypeId: google.maps.MapTypeId.ROADMAP
+
         <input class="input" type="text" id="from" value=""><span id="fromnote" style="display:none;">where I am at</span></div>
−
        };
+
<div style="display:inline-block;margin:2px 0 2px 0;"><label>to</label>
−
 
+
  <input class="input" type="text" id="to" value=""><span id="tonote" style="display:none;">where I am at</span>.</div>
−
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
+
<div style="margin:2px;">  
−
 
+
<form id="triptime" style="display:inline;" >
−
        google.maps.event.addDomListener(document.getElementById('go'), 'click',
+
  <input type="radio" name="triptime" value="depart" checked> Departing
−
        route);
+
  <input type="radio" name="triptime" value="arrive"> arriving at
−
 
+
  </form>
−
        transitLayer = new google.maps.TransitLayer();
 
−
 
 
−
        var control = document.getElementById('transit-wpr');
 
−
 
 
−
        google.maps.event.addDomListener(control, 'click', function() {
 
−
          transitLayer.setMap(transitLayer.getMap() ? null : map);
 
−
         });
 
−
 
 
−
        google.maps.event.addDomListener(window, "resize", function() {
 
−
        center = map.getCenter();
 
−
        google.maps.event.trigger(map, "resize");
 
−
        map.setCenter(center);
 
−
        });
 
−
 
 
−
        addDepart();
 
−
        route();
 
−
      }
 
−
 
 
−
      function route() {
 
−
        var departure = document.getElementById('depart').value;
 
−
        var bits = departure.split(':');
 
−
        var now = new Date();
 
−
        var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;
 
−
 
 
−
        var time = new Date();
 
−
        time.setHours(bits[0]);
 
−
        time.setMinutes(bits[1]);
 
−
 
 
−
        var ms = time.getTime();
 
−
        if (ms < now.getTime()) {
 
−
          ms += 24 * 60 * 60 * 1000;
 
−
        }
 
−
 
 
−
        var departureTime = new Date(ms);
 
−
 
 
−
        var request = {
 
−
          origin: document.getElementById('from').value,
 
−
          destination: document.getElementById('to').value,
 
−
          travelMode: google.maps.DirectionsTravelMode.TRANSIT,
 
−
          provideRouteAlternatives: true,
 
−
          transitOptions: {
 
−
            departureTime: departureTime
 
−
          }
 
−
        };
 
−
 
 
−
        var panel = document.getElementById('panel');
 
−
        panel.innerHTML = '';
 
−
        directions.route(request, function(response, status) {
 
−
          if (status == google.maps.DirectionsStatus.OK) {
 
−
            renderer.setDirections(response);
 
−
            renderer.setMap(map);
 
−
            renderer.setPanel(panel);
 
−
          } else {
 
−
            renderer.setMap(null);
 
−
            renderer.setPanel(null);
 
−
          }
 
−
        });
 
−
 
 
−
      }
 
−
 
 
−
      google.maps.event.addDomListener(window, 'load', initialize);
 
−
    </script>
 
−
      <div id="info">
 
−
          <label>from:</label>
 
−
          <input class="input" id="from" value="">
 
−
  <label>to:</label>
 
−
  <input class="input" id="to" value="">
 
−
        <div>Depart at
 
 
<select id="depart">
 
<select id="depart">
 +
<option value="now" selected>Now</option>
 
<option value="03:00">3:00 am</option>
 
<option value="03:00">3:00 am</option>
 
<option value="03:30">3:30 am</option>
 
<option value="03:30">3:30 am</option>
Line 97: Line 30:
 
<option value="06:30">6:30 am</option>
 
<option value="06:30">6:30 am</option>
 
<option value="06:45">6:45 am</option>
 
<option value="06:45">6:45 am</option>
−
<option value="07:00" selected>7:00 am</option>
+
<option value="07:00">7:00 am</option>
 
<option value="07:15">7:15 am</option>
 
<option value="07:15">7:15 am</option>
 
<option value="07:30">7:30 am</option>
 
<option value="07:30">7:30 am</option>
Line 155: Line 88:
 
<option value="02:00">2:00 am</option>
 
<option value="02:00">2:00 am</option>
 
<option value="02:30">2:30 am</option>
 
<option value="02:30">2:30 am</option>
−
</select> (Today and next day if time has passed) </div>
+
          </select> (time) today or next day or on
 +
          <input type="text" id="datepicker" size="7"> (date)</div>
 
           <button id="go">Get Transit directions</button>
 
           <button id="go">Get Transit directions</button>
 
       </div>
 
       </div>
 +
 +
<script type="text/javascript">
 +
(window.RLQ=window.RLQ||[]).push(function(){
 +
var nt1 = document.getElementById("note");
 +
var nt2 = document.getElementById("from");
 +
var nt2a = document.getElementById("fromnote");
 +
var nt3 = document.getElementById("to");
 +
var nt3a = document.getElementById("tonote");
 +
var tpk1 = document.getElementById("datepicker");
 +
 
 +
function resetform() {
 +
  nt2a.style.display = "none";
 +
  nt3a.style.display = "none";
 +
  nt2.style.display = "inline";
 +
  nt2.value="";
 +
  nt3.style.display = "inline";
 +
  nt3.value="";
 +
  tpk1.value="";
 +
  document.getElementById("depart").selectedIndex = 0;
 +
}
 +
 +
function getLocation(ntq) {
 +
    if (ntq == 1) {
 +
  ntx=nt2; ntxa=nt2a; ntn=nt3; ntna=nt3a;
 +
  } else {
 +
  ntx=nt3; ntxa=nt3a; ntn=nt2; ntna=nt2a;
 +
  }
 +
    if (navigator.geolocation) {
 +
        navigator.geolocation.getCurrentPosition(showPosition);
 +
        ntx.style.display = "none";
 +
        ntxa.style.display = "inline";
 +
        setTimeout(function(){
 +
        map.setOptions({
 +
        center: ntxg,
 +
        zoom:14
 +
        });
 +
        },2000);
 +
        if (ntn.style.display=="none") {
 +
          ntn.style.display="inline";
 +
          ntn.value="";
 +
          ntna.style.display="none";
 +
        }
 +
    } else {
 +
        nt1.innerHTML = "Geolocation is not supported by this browser.";
 +
    return false;}
 +
}
 +
   
 +
function showPosition(position) {
 +
  ntx.value = position.coords.latitude + ', ' +  position.coords.longitude;
 +
  ntxg = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 +
}
 +
 +
$(function () {
 +
    $( "#datepicker" ).datepicker();
 +
} );
 +
 +
      var directions = new google.maps.DirectionsService();
 +
      var renderer = new google.maps.DirectionsRenderer();
 +
      var map, transitLayer;
 +
 +
      function initialize() {
 +
        var mapOptions = {
 +
          zoom: 5,
 +
          center: new google.maps.LatLng(38.6, -114.6),
 +
          mapTypeId: google.maps.MapTypeId.ROADMAP
 +
        };
 +
 +
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 +
 +
        google.maps.event.addDomListener(document.getElementById('go'), 'click',
 +
        route);
 +
 +
        transitLayer = new google.maps.TransitLayer();
 +
 +
        var control = document.getElementById('transit-wpr');
 +
 +
        google.maps.event.addDomListener(control, 'click', function() {
 +
          transitLayer.setMap(transitLayer.getMap() ? null : map);
 +
        });
 +
 +
        google.maps.event.addDomListener(window, "resize", function() {
 +
        google.maps.event.trigger(map, "resize");
 +
        map.setCenter(center);
 +
        });
 +
 +
        route();
 +
      }
 +
 +
function route() {
 +
        var triptime = $('input[name="triptime"]:checked', '#triptime').val();
 +
        var departure = document.getElementById('depart').value;
 +
        var tripdate = $('input[id="datepicker"]').datepicker('getDate');
 +
        if (departure=='now') {
 +
              var departureTime = null;
 +
              var arrivalTime = null;
 +
        } else {
 +
              var bits = departure.split(':');
 +
              var now = new Date();
 +
              var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;
 +
 +
              var time = new Date();
 +
              time.setHours(bits[0]);
 +
              time.setMinutes(bits[1]);
 +
 +
              var ms = time.getTime();
 +
              if (ms < now.getTime()) {
 +
              ms += 24 * 60 * 60 * 1000;
 +
              }
 +
         
 +
              if (tripdate == null) {         
 +
              departureTime = new Date(ms);
 +
              arrivalTime = null;
 +
              } else {
 +
              var datetimestring = new Date(tripdate.getFullYear(), tripdate.getMonth(), tripdate.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
 +
              departureTime = datetimestring;
 +
              arrivalTime = null;
 +
              }                   
 +
         
 +
              if (triptime == 'arrive') {
 +
              arrivalTime = departureTime;
 +
              departureTime = null;
 +
              }
 +
        }
 +
       
 +
        var request = {
 +
          origin: document.getElementById('from').value,
 +
          destination: document.getElementById('to').value,
 +
          travelMode: google.maps.DirectionsTravelMode.TRANSIT,
 +
          provideRouteAlternatives: true,
 +
          transitOptions: {
 +
            departureTime: departureTime,
 +
            arrivalTime: arrivalTime
 +
          }
 +
        };
 +
 +
        var panel = document.getElementById('panel');
 +
        panel.innerHTML = '';
 +
        directions.route(request, function(response, status) {
 +
          if (status == google.maps.DirectionsStatus.OK) {
 +
            renderer.setDirections(response);
 +
            renderer.setMap(map);
 +
            renderer.setPanel(panel);
 +
          } else {
 +
            renderer.setMap(null);
 +
            renderer.setPanel(null);
 +
          }
 +
        });
 +
 +
}
 +
 +
google.maps.event.addDomListener(window, 'load', initialize);
 +
});
 +
</script>
 
     <div id="transit-wpr">
 
     <div id="transit-wpr">
 
</div>
 
</div>
 
</includeonly>
 
</includeonly>

Latest revision as of 01:36, 24 October 2023

Retrieved from "https://www.transit.wiki/index.php?title=Widget:GTform&oldid=237114"