/
index.html
73 lines (66 loc) · 3.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="css/rdatatable.css">
<script src="lib/jquery/jquery-1.11.1.min.js"></script>
<script src="lib/es5/es5-shim-4.0.5.min.js"></script>
<script src="lib/es5/es5-sham-4.0.5.min.js"></script>
<script src="lib/react-0.12.1/react.js"></script>
<script src="src/data.js"></script>
<script src="src/pic-gallery.js"></script>
<script src="src/rdatatable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var selectItemHandler = function(o) {
// Row selection handler here
};
/**
* This is a way to customize column display.
* In this example, we want to strip away the
* address leaving only the latitude and longitude
* information, then we want it to be a link
* to Google Map.
*/
var locationRenderCallback = function(data) {
var loc = data.substring(data.indexOf('(')); // strip the address
loc = loc.substr(1, loc.length - 2); // strip '(' and ')'
var mapLink = "http://maps.google.com/maps?q=" + loc;
return React.DOM.a({href:mapLink, target:"_blank"}, "map");
};
var colDef = [{title:"Area Name", key:"areaName"},
{title:"Property Type", key:"propertyType"},
{title:"Property Name", key:"propertyName"},
{title:"Address", key:"addr"},
{title:"Zip Code", key:"zip"},
{title:"Phone Number", key:"phone"},
{title:"Management Company", key:"mgmtCompany"},
{title:"Units", key:"units"},
{title:"Location", key:"loc", renderCallback:locationRenderCallback, sortable:false},
{key:"lat", isVisible:false},
{key:"lon", isVisible:false}];
var renderExpandedRowContent = function(data) {
return React.createElement(PicGallery, {title:"Street view of the area...", lat:data.lat, lon:data.lon});
};
React.render(React.createElement(RDataTable, {colDefinitions:colDef,
data:sampleJson,
// tableIndex:"id", // We need a unique key for the single row highlighting. If not specified, the table will create it's own internal key.
selectItemCallback:selectItemHandler,
enableExpandCollapseRow:true,
renderExpandedRowContent:renderExpandedRowContent}),
document.getElementById("table-container"));
});
</script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="header-container">
<h1>Chicago City Affordable Rental Housing Development Data</h1>
<p><a href="https://data.cityofchicago.org/Community-Economic-Development/Affordable-Rental-Housing-Developments/s6ha-ppgi">For the actual data source please click...</a></p>
</div>
<div id="table-container" class="table-container"></div>
</body>
</html>