index.html

<html>
<head>
<title>KmbETA - DB</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script>
var db = null;

function load(){
	$.ajax({
		url: "https://db.kmbeta.ml/kmbeta_db.b64",
		type: "GET",
		dataType: "text",
		async: true,
		error: function(){
			$("#status").html("Failed to fetch database.");
		},
		success: function(data){
			db = JSON.parse(atob(data));
			$("#status").html("Available");
			$("#time").html(db.generated);
			$("#date").html(db.generated_human);
			
			$("#numbuses").html(db.routes.length);
			$("#numroutes").html(db.buses.length);
			
			var str = "<ul>";
			for (var i = 0; i < db.buses.length; i++){
				str += "<li>" + db.buses[i].name + "</li>";
			}
			str += "</ul>";
			
			document.getElementById("buses").innerHTML = str;
			
			str = "<select id='routeName'>";
			for (var i = 0; i < db.buses.length; i++){
				str += "<option value='" + db.buses[i].name + "'>" + db.buses[i].name + "</option>";
			}
			str += "</select>";
			
			document.getElementById("selection").innerHTML = str;
		}
	});
}

function update(){
	if (db == null || db == ""){
		$("#routestatus").html("N/A");
		$("#stops").html("N/A");
		return;
	}
	
	var name = $("#routeName").val();
	
	if (name == ""){
		$("#routestatus").html("No route selected");
		$("#stops").html("No route selected");
		return;
	}
	var index = -1;
	console.log("Finding for Name: " + name)
	for (var i = 0; i < db.buses.length; i++){
		if (name == db.buses[i].name){
			console.log("Found: " + i);
			index = i;
			break;
		}
	}
	
	if (index == -1){
		$("#routestatus").html("Not found");
		$("#stops").html("Not found");
		return;
	}
	
	$("#routestatus").html("Found. Index " + index + " and name " + db.buses[i].name + ". " + db.buses[index].bounds.length + " bounds");
	var str = "<ul>";
	for (var i = 0; i < db.buses[index].bounds.length; i++){
		str += "		<li> <b>Bound " + (i+1) + "</b>";
		str += "			<ul>";
		for (var j = 0; j < db.buses[index].bounds[i].stops.length; j++){
			str += "			<li> <b> Stop " + (j+1) + "</b>";
			str += "				<ul>";
			str += "					<li>Stop name (Eng): " + (db.buses[index].bounds[i].stops[j].stopname_eng) + "</li>";
			str += "					<li>Stop name (Chi): " + (db.buses[index].bounds[i].stops[j].stopname_chi) + "</li>";
			str += "					<li>Normal fare (No longer exist): " + (db.buses[index].bounds[i].stops[j].normal_fare) + "</li>";
			str += "					<li>Air conditioner fare (Normal Fare): " + (db.buses[index].bounds[i].stops[j].air_cond_fare) + "</li>";
			str += "					<li>Area: " + (db.buses[index].bounds[i].stops[j].area) + "</li>";
			str += "					<li>Address (Eng): " + (db.buses[index].bounds[i].stops[j].addr_eng) + "</li>";
			str += "					<li>Address (Chi): " + (db.buses[index].bounds[i].stops[j].addr_chi) + "</li>";
			str += "					<li>Stop Sequence: " + (db.buses[index].bounds[i].stops[j].stopseq) + "</li>";
			str += "					<li>Stop code (Subarea): " + (db.buses[index].bounds[i].stops[j].stopcode) + "</li>";
			str += "					<li>Longitude: " + (db.buses[index].bounds[i].stops[j].lng) + "</li>";
			str += "					<li>Latitude: " + (db.buses[index].bounds[i].stops[j].lat) + "</li>";
			str += "				</ul>";
			str += "			</li>";
		}
		str += "			</ul>";
		str += "		</li>";
	}
	str += "</ul>";
	
	if (db.buses[index].bounds.length <= 0){
		str = "<font color='#ff0000'>Database resulted 0 bounds. Seems this route's data cannot be fetched.</font>";
	}
	document.getElementById("stops").innerHTML = str;
}
</script>
</head>
<body onload="load()">
<a href="https://github.com/mob41/KmbETA-DB"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<!-- This code is so so dirty. Onload function should not be inline. I will change it afterwards. -->
<table border="0" width="100%">
	<tr>
		<td style="background-color:#ffb3b3">
			<br/>
			<img src="kmbeta-icon.fw.png"></img><br/>
		</td>
	<tr>
	<tr>
		<td>
		</td>
	</tr>
	<tr>
		<td style="background-color:#ffb3b3">
			&nbsp;
		</td>
	</tr>
	<tr>
		<td style="background-color:#ffe6e6">
			<h1>KmbETA Pre-built database</h1>
				<p>This database is compatible for Java, JavaScript version of KmbETA-API.</p>
				<p>Database is hosted on GitHub. <a href="http://db.kmbeta.ml/kmbeta_db.b64">http://db.kmbeta.ml/kmbeta_db.b64</a>
				<p><b>Here is using Base64 encoding of JSON now because of browser JSON UTF-8 compatiblity problems. Using the old UTF8-encoded (lossy) JSON version won't work and it is outdated.</b></p>
				<p>This is just for testing. Layout, HTML coding are so dirty. Don't blame me too much...</p>
			<h2>Status</h2>
				<p>Database status: <div id="status">Loading database... it might take a while</div></p>
				<p>Last update (ms): <div id="time">N/A</div></p>
				<p>Last update (Date): <div id="date">N/A</div></p>
			<h2>Bus information</h2>
				<p>Select the route below, and a list of bus stops of that route will be shown.</p>
				<p>Route name: <div id="selection"><select id="routeName" onchange="update()"><option value="">-- None --</option></select></div><input type="button" onclick="update()" value="Search" /></p>
				<p>Status: <div id="routestatus">N/A</div></p>
				<p>List of bus stops:</p>
				<div id="stops">N/A</div>
			<h2>Database information</h2>
				<p>Number of buses: <div id="numbuses">N/A</div></p>
				<p>Number of routes downloaded: <div id="numroutes">N/A</div></p>
				<p>Available buses:</p>
				<div id="buses">N/A</div>
		</td>
	</tr>
	<tr>
		<td style="background-color:#ffb3b3; text-align:center">
			Copyright(c) 2016. mob41
		</td>
	</tr>
</table>
</body>
</html>