Difference between revisions of "Widget:GTform"

From Transit.Wiki
m
m
Line 1: Line 1:
 
<includeonly>
 
<includeonly>
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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" 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" id="to" value=""><span id="tonote" style="display:none;">where I am at</span>.</div>
 +
<div style="margin:2px;">Depart at
 +
<select id="depart">
 +
<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" selected>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> (Today and next day if time has passed) </div>
 +
          <button id="go">Get Transit directions</button>
 +
       </div>
 +
 
 +
<script type="text/javascript">
 +
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");
 +
 
 +
function resetform() {
 +
  nt2a.style.display = "none";
 +
  nt3a.style.display = "none";
 +
  nt2.style.display = "inline";
 +
  nt2.value="";
 +
  nt3.style.display = "inline";
 +
  nt3.value="";
 +
}
 +
 
 +
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";
 +
        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;
 +
}
 +
</script>
 +
 
 +
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
     <script>
 
     <script>
 
       var directions = new google.maps.DirectionsService();
 
       var directions = new google.maps.DirectionsService();
Line 78: Line 204:
  
 
       google.maps.event.addDomListener(window, 'load', initialize);
 
       google.maps.event.addDomListener(window, 'load', initialize);
    </script>
+
</script>
      <div id="info">
 
          <div style="display:inline-block;margin:2px;"><label>from:</label>
 
          <input class="input" id="from" value=""></div>
 
  <div style="display:inline-block;margin:2px;"><label>to:</label>
 
  <input class="input" id="to" value=""></div>
 
        <div style="margin:2px;">Depart at
 
<select id="depart">
 
<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" selected>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> (Today and next day if time has passed) </div>
 
          <button id="go" style="margin:2px;">Get Transit directions</button>
 
      </div>
 
 
     <div id="transit-wpr">
 
     <div id="transit-wpr">
 
</div>
 
</div>
 
</includeonly>
 
</includeonly>

Revision as of 22:30, 9 April 2016