JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="//capmetro.org/lib/js/noTrace.js"></script>
<link rel="stylesheet" href="//capmetro.org/schedmap/css/ttable.css">
<script src="//capmetro.org/schedmap/js/ttable.js"></script>
<script src="//capmetro.org/schedmap/js/miscUtil.js"></script>
<script src="//capmetro.org/schedmap/js/servalrt.js"></script>
<script src="//capmetro.org/schedmap/js/geoUtil.js"></script>
<script src="//capmetro.org/schedmap/js/dates.js"></script>
<script src="//capmetro.org/schedmap/js/tweaks.js"></script>
<script src="//capmetro.org/planner/js/map.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=drawing,geometry"></script>
<div id="page">
  <div id="pgHdr">

    <img src="/images/logo-mobile.gif" alt="Capital Metro Logo">
    <h1></h1>

    <button id="btnMain">Main Menu</button>

  </div>
  <div id="leftPane">

    <div id="rteBtn">
      <h2><a href="javascript:void(0)">Select a Route<img id="rteBtnArw" alt="arrow" src="images/right-15px.gif"></a>
            </h2>
    </div>
    <!-- -->
    <div id="routeMenu" aria-live="assertive"></div>
    <button id="mapToggle">
      <img id="imgFlip" src="images/map-28px.png">
      <p>Show Map</p>
    </button>
    <h2 id="rteTitle">1 South Congress/Metric, Northbound, Weekday</h2>
    <ul id="tttyp" class="tab sType">
      <li id="typ0" class="selected"><a href="javascript:void(0)">Weekday</a></li>
      <li id="typ1"><a href="javascript:void(0)">Saturday</a></li>
      <li id="typ2"><a href="javascript:void(0)">Sunday</a></li>
      <li id="typ3" style="display: none"></li>
    </ul>
    <div id="tableBox">
      <div id="rteHeader">
        <div id="servalrt" style="display: none; width: 476px;"></div>
        <div id="rteLinks">
          <a target="_blank" href="/current_schedules/pdf/001.pdf" title="Printable PDF of This Route"><img alt="Printable PDF of This Route" src="/images/pdf-25px.gif" title="Printable PDF of This Route" aria-hidden="true"></a>
          <a target="_blank"...

JavaScript

// load system-specific configuration from CONFIG.JSN in home folder
var config = {
	data:{},
	map:"",					// active map object
	iw:"", 					// map infoWindow
	mapReady:false,
	dispFmt:"D",		// D)esktop or M)obile
	internalUser:false,
	quietFlag:false,

	load:
		function(thenCall) {
			fEntry("config.load");
			this.init();

			$.getJSON("config.jsn",	function(data) {
				if (data) {
					// showBytes(data,"cfg");
					config.data = data;
					servAlrt.loadData(
						function() {
							if (thenCall)
								thenCall();  //timeTable.loadRoute
						}
					);
				}
				else
					alert("Unable to retrieve configuration data from CONFIG.JSN");
			});
			fExit("config.load");
		},

	init:
		function() {
			fEntry("config.init");
			$(document).ready(function(){
				$.ajaxSetup({ cache: false });  // no caching of ajax calls

				config.internalUser = $("#intUser").val() == "1";

				config.resize();

				$(window).resize(function() {
					config.resize();
				});

				// setup event handlers on DOM objects
				$("#btnBack").click(function(){
					parent.history.back();
					return false;
				});
				$("#btnMain").click(function(){
					window.location = "/m.default.aspx";
				});
				$("#btnFav").click(function(){  // from Bytemark app only
					var rte = $("#rteTitle").html();
					var mode = timeTable.visibleObj == "T" ? "sch" : "map";
					if (confirm("Save " + rte + " as your favorite schedule?")) {
//alert("Schedule favorited!\n\nNav to:\n\n"+"btmk|" + mode + "|" + rte + "|" + timeTable.getURL(false));
						alert("Schedule favorited!");
						document.location.href="btmk|" + mode + "|" + rte + "|" + timeTable.getURL(false);
						return false;
					}
				});

				$("#mapFS").click(function(){
					timeTable.toggleMap();
				});
				$("#mapToggle").click(function(){
					routeList.hide();
					timeTable.flip();
				});

				config.dispFmt = isVisible("mapToggle") ? "M" : "D";

				if (config.dispFmt == "M" && $("#map1st").val() ==...