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")
 
(27 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>
 +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyA1-YSOAtIlnU0ZcufMDLNjEVZDmq7sPh4"></script>
 +
<p id="note"></p>
 +
<div id="info">
 +
<button onclick="getLocation(1)">Trip from here</button>
 +
<button onclick="getLocation(2)">Trip to here</button>
 +
<button onclick="resetform()">Reset form</button>
 +
<br/>
 +
<div style="display:inline-block;margin:2px 0 2px 0;"><label>from</label>
 +
        <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>
 +
<div style="margin:2px;">
 +
<form id="triptime" style="display:inline;" >
 +
  <input type="radio" name="triptime" value="depart" checked> Departing
 +
  <input type="radio" name="triptime" value="arrive"> arriving at
 +
  </form>
 +
<select id="depart">
 +
<option value="now" selected>Now</option>
 +
<option value="03:00">3:00 am</option>
 +
<option value="03:30">3:30 am</option>
 +
<option value="04:00">4:00 am</option>
 +
<option value="04:30">4:30 am</option>
 +
<option value="05:00">5:00 am</option>
 +
<option value="05:30">5:30 am</option>
 +
<option value="06:00">6:00 am</option>
 +
<option value="06:15">6:15 am</option>
 +
<option value="06:30">6:30 am</option>
 +
<option value="06:45">6:45 am</option>
 +
<option value="07:00">7:00 am</option>
 +
<option value="07:15">7:15 am</option>
 +
<option value="07:30">7:30 am</option>
 +
<option value="07:45">7:45 am</option>
 +
<option value="08:00">8:00 am</option>
 +
<option value="08:15">8:15 am</option>
 +
<option value="08:30">8:30 am</option>
 +
<option value="08:45">8:45 am</option>
 +
<option value="09:00">9:00 am</option>
 +
<option value="09:15">9:15 am</option>
 +
<option value="09:30">9:30 am</option>
 +
<option value="09:45">9:45 am</option>
 +
<option value="10:00">10:00 am</option>
 +
<option value="10:30">10:30 am</option>
 +
<option value="11:00">11:00 am</option>
 +
<option value="11:30">11:30 am</option>
 +
<option value="12:00">Noon</option>
 +
<option value="12:30">12:30 pm</option>
 +
<option value="13:00">1:00 pm</option>
 +
<option value="13:30">1:30 pm</option>
 +
<option value="14:00">2:00 pm</option>
 +
<option value="14:15">2:15 pm</option>
 +
<option value="14:30">2:30 pm</option>
 +
<option value="14:45">2:45 pm</option>
 +
<option value="15:00">3:00 pm</option>
 +
<option value="15:15">3:15 pm</option>
 +
<option value="15:30">3:30 pm</option>
 +
<option value="15:45">3:45 pm</option>
 +
<option value="16:00">4:00 pm</option>
 +
<option value="16:15">4:15 pm</option>
 +
<option value="16:30">4:30 pm</option>
 +
<option value="16:45">4:45 pm</option>
 +
<option value="17:00">5:00 pm</option>
 +
<option value="17:15">5:15 pm</option>
 +
<option value="17:30">5:30 pm</option>
 +
<option value="17:45">5:45 pm</option>
 +
<option value="18:00">6:00 pm</option>
 +
<option value="18:15">6:15 pm</option>
 +
<option value="18:30">6:30 pm</option>
 +
<option value="18:45">6:45 pm</option>
 +
<option value="19:00">7:00 pm</option>
 +
<option value="19:15">7:15 pm</option>
 +
<option value="19:30">7:30 pm</option>
 +
<option value="19:45">7:45 pm</option>
 +
<option value="20:00">8:00 pm</option>
 +
<option value="20:30">8:30 pm</option>
 +
<option value="21:00">9:00 pm</option>
 +
<option value="21:30">9:30 pm</option>
 +
<option value="22:00">10:00 pm</option>
 +
<option value="22:30">10:30 pm</option>
 +
<option value="23:00">11:00 pm</option>
 +
<option value="23:30">11:30 pm</option>
 +
<option value="00:00">Midnight</option>
 +
<option value="00:30">12:30 am</option>
 +
<option value="01:00">1:00 am</option>
 +
<option value="01:30">1:30 am</option>
 +
<option value="02:00">2:00 am</option>
 +
<option value="02:30">2:30 am</option>
 +
          </select> (time) today or next day or on
 +
          <input type="text" id="datepicker" size="7"> (date)</div>
 +
          <button id="go">Get Transit directions</button>
 +
      </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 directions = new google.maps.DirectionsService();
 
       var renderer = new google.maps.DirectionsRenderer();
 
       var renderer = new google.maps.DirectionsRenderer();
Line 13: Line 159:
 
         };
 
         };
  
−
         map = new google.maps.Map(document.getElementById('map'), mapOptions);
+
         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
 
         google.maps.event.addDomListener(document.getElementById('go'), 'click',
 
         google.maps.event.addDomListener(document.getElementById('go'), 'click',
Line 26: Line 172:
 
         });
 
         });
  
−
         addDepart();
+
         google.maps.event.addDomListener(window, "resize", function() {
 +
        google.maps.event.trigger(map, "resize");
 +
        map.setCenter(center);
 +
        });
 +
 
 
         route();
 
         route();
 
       }
 
       }
  
−
      function route() {
+
function route() {
 +
        var triptime = $('input[name="triptime"]:checked', '#triptime').val();
 
         var departure = document.getElementById('depart').value;
 
         var departure = document.getElementById('depart').value;
−
         var bits = departure.split(':');
+
         var tripdate = $('input[id="datepicker"]').datepicker('getDate');
−
        var now = new Date();
+
        if (departure=='now') {
−
        var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;
+
              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();
+
              var time = new Date();
−
        time.setHours(bits[0]);
+
              time.setHours(bits[0]);
−
        time.setMinutes(bits[1]);
+
              time.setMinutes(bits[1]);
  
−
        var ms = time.getTime();
+
              var ms = time.getTime();
−
        if (ms < now.getTime()) {
+
              if (ms < now.getTime()) {
−
          ms += 24 * 60 * 60 * 1000;
+
              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 departureTime = new Date(ms);
 
−
 
 
 
         var request = {
 
         var request = {
 
           origin: document.getElementById('from').value,
 
           origin: document.getElementById('from').value,
Line 53: Line 222:
 
           provideRouteAlternatives: true,
 
           provideRouteAlternatives: true,
 
           transitOptions: {
 
           transitOptions: {
−
             departureTime: departureTime
+
             departureTime: departureTime,
 +
            arrivalTime: arrivalTime
 
           }
 
           }
 
         };
 
         };
Line 70: Line 240:
 
         });
 
         });
  
−
      }
+
}
  
−
      google.maps.event.addDomListener(window, 'load', initialize);
+
google.maps.event.addDomListener(window, 'load', initialize);
−
    </script>
+
});
−
      <div id="info">
+
</script>
−
          <label>from:</label>
 
−
          <input class="input" id="from" value="">
 
−
  <label>to:</label>
 
−
  <input class="input" id="to" value="">
 
−
        <div>Depart at
 
−
<select id="depart">
 
−
<option value="05:00">5:00am</option>
 
−
<option value="05:30">5:30am</option>
 
−
<option value="06:00">6:00am</option>
 
−
<option value="06:15">6:15am</option>
 
−
<option value="06:30">6:30am</option>
 
−
<option value="06:45">6:45am</option>
 
−
<option value="07:00">7:00am</option>
 
−
<option value="07:15">7:15am</option>
 
−
<option value="07:30">7:30am</option>
 
−
<option value="07:45">7:45am</option>
 
−
<option value="08:00">8:00am</option>
 
−
<option value="08:15">8:15am</option>
 
−
<option value="08:30">8:30am</option>
 
−
<option value="08:45">8:45am</option>
 
−
<option value="09:00">9:00am</option>
 
−
<option value="09:15">9:15am</option>
 
−
<option value="09:30">9:30am</option>
 
−
<option value="09:45">9:45am</option>
 
−
<option value="10:00">10:00am</option>
 
−
<option value="10:30">10:30am</option>
 
−
<option value="11:00">11:00am</option>
 
−
<option value="11:30">11:30am</option>
 
−
<option value="12:00">Noon</option>
 
−
<option value="12:30">12:30pm</option>
 
−
<option value="13:00">1:00pm</option>
 
−
<option value="13:30">1:30pm</option>
 
−
<option value="14:00">2:00pm</option>
 
−
<option value="14:15">2:15pm</option>
 
−
<option value="14:30">2:30pm</option>
 
−
<option value="14:45">2:45pm</option>
 
−
<option value="15:00">3:00pm</option>
 
−
<option value="15:15">3:15pm</option>
 
−
<option value="15:30">3:30pm</option>
 
−
<option value="15:45">3:45pm</option>
 
−
<option value="16:00">4:00pm</option>
 
−
<option value="16:15">4:15pm</option>
 
−
<option value="16:30">4:30pm</option>
 
−
<option value="16:45">4:45pm</option>
 
−
<option value="17:00">5:00pm</option>
 
−
<option value="17:15">5:15pm</option>
 
−
<option value="17:30">5:30pm</option>
 
−
<option value="17:45">5:45pm</option>
 
−
<option value="18:00">6:00pm</option>
 
−
<option value="18:15">6:15pm</option>
 
−
<option value="18:30">6:30pm</option>
 
−
<option value="18:45">6:45pm</option>
 
−
<option value="19:00">7:00pm</option>
 
−
<option value="19:15">7:15pm</option>
 
−
<option value="19:30">7:30pm</option>
 
−
<option value="19:45">7:45pm</option>
 
−
<option value="20:00">8:00pm</option>
 
−
<option value="20:30">8:30pm</option>
 
−
<option value="21:00">9:00pm</option>
 
−
<option value="21:30">9:30pm</option>
 
−
<option value="22:00">10:00pm</option>
 
−
<option value="22:30">10:30pm</option>
 
−
<option value="23:00">11:00pm</option>
 
−
<option value="23:30">11:30pm</option>
 
−
<option value="00:00">Midnight</option>
 
−
<option value="00:30">12:30am</option>
 
−
<option value="01:00">1:00am</option>
 
−
<option value="01:30">1:30am</option>
 
−
<option value="02:00">2:00am</option>
 
−
<option value="02:30">2:30am</option>
 
−
<option value="03:00">3:00am</option>
 
−
<option value="03:30">3:30am</option>
 
−
<option value="04:00">4:00am</option>
 
−
<option value="04:30">4:30am</option>
 
−
</select> (Same day of week as today.) </div>
 
−
          <button id="go">Get Directions</button>
 
−
      </div>
 
 
     <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"