-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
312 lines (306 loc) · 17.7 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!doctype html>
<html>
<head>
<title>US Government Clearinghouse Site</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="US Government Information Clearinghouse " />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
var latitude =0;
var longitude=0;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("in show position");
alert(position.coords.latitude + ":" + position.coords.longitude);
}
</script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container" class="container">
<div id="topbar">
<h1>Government Information Clearinghouse</h1>
<div class="clear"></div>
<div id="banner">
<div id="site_menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="federal_id">Federal:</li>
<li id="senate_menu_item">Senate</li>
<li id="house_menu_item">House</li>
<li id="historical_menu_item">Historical</li>
<li id="state_id">State:</li>
<li id="upper_house_menu_item">Upper House</li>
<li id="lower_house_menu_item">Lower House</li>
<li id="about_site_id">About this site</li>
<li id="about_me_id">About me</li>
<li id="help_id">Help</li>
</ul>
</div> <!-- site_menu -->
</div> <!-- banner -->
</div> <!-- topbar -->
<div id="main_content">
<div class="clear"></div>
<div id="historical_site">
<div id="abe_lincoln_div">
<h2>Explore our history</h2>
<button class="btn btn-sm btn-primary" id="john_kennedy">John Kennedy</button><br/><br/>
<button class="btn btn-sm btn-primary" id="abe_lincoln">Abe Lincoln</button><br/><br/>
<button class="btn btn-sm btn-primary" id="richard_nixon">Richard Nixon</button>
</div>
<span id="history_search_form">
<h2>Discover your past</h2>
<h3>Enter a year between 1790 and now</h3>
<input type='number' id='history_year' min="1790"></input>
<select id="history_state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<button class="btn btn-primary" id="find_history" >Discover</button>
</span>
<span id="history_list">
<table id="history_table">
<thead>
<th>name</th><th>biography</th></thead>
<tbody id="history_table_body"></tbody>
</table>
</span>
</div>
<div id="government_site">
<div id="help" class="jumbotron">
<p>The purpose of this application is to provide access to US elected officials at the state and federal level, as well as understanding what they are (or are not) doing on your behalf.</p>
<p>Based on your location, you can find state and federal representatives, any social media links available, and look at what legislation they are sponsoring in the current administration</p>
<p style="font-size:1.2em">This site was setup as a demonstration of some of my capabilities using Python, Django, Git and Jenkins. It is in no way associated with the US Government or any other agency.</p>
</div>
<div id="federal">
<div class="clear"></div>
<span id="find_senator_form">
<h2>Find your senators</h2>
<select style="position:relative;top:5px" id="senator_state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<button class="btn btn-sm btn-primary" id="find_senator" >Search</button>
</span>
<span id="find_house_form">
<h3>Using a zip code</h3>
<h4>(if geolocation doesn't work for you)</h4>
<input type="number" id="zip_code" min="0" max="99999"/>
<button class="btn btn-sm btn-primary" id="find_congressmen">Find My Congressmen</button>
</span>
<span id="find_upper_house_form">
<h3>Enter a zip code</h3>
<input type="number" id="zip_code" min="0" max="99999"/>
<button class="btn btn-sm btn-primary" id="find_state_senator">Find Upper State Rep</button>
</span>
<span id="find_lower_house_form">
<h3>Enter a zip code</h3>
<input type="number" id="zip_code" min="0" max="99999"/>
<button class="btn btn-sm btn-primary" id="find_state_rep">Find Lower State Rep</button>
</span>
<span id="senator_list">
<table id="senator_table">
<thead>
<th>name</th><th>party</th><th>biography</th><th>email</th><th>contact form</th><th>website</th><th>facebook</th><th>twitter</th><th>You Tube</th></thead>
<tbody id="senator_table_body"></tbody>
</table>
</span>
</div>
<div id="state">
</div>
</div>
<div id="about_site" style="margin:0;padding:0">
<h4 class="accord"> <img src="images/shape_square_go.png" height="25px">How this website was built</h4>
<div class="white_background">
<ul>
<li><a href="http://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a></li>
<li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">CSS</a></li>
<li><a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">javascript</a></li>
<li><a href="http://jquery.com" target="_blank">JQuery</a></li>
<li><a href="http://getbootstrap.com" target="_blank">Bootstrap</a></li>
<li>with <a href="http://en.wikipedia.org/wiki/Representational_state_transfer" target="_blank">REST APIs</a> to the <a href="http://sunlightfoundation.com/api/" target="_blank">Sunlight foundation Congress API</a></li>
</ul>
</div>
<h4 class="accord"><img src="images/shape_square_go.png" height="25px"> How it works</h4>
<div>
<div id="arch_image" style="float:left">
<a href="architecture.html" target="_blank"><img style="display:block" height="275px" src="images/architecture.jpg"/></a>
</div>
<div id="arch_desc" class="white_background" style="margin-left:250px">
<p><b>Click on image to see details</b></p>
<p>The Senate accepts the state from a select list and calls the congress API of the sunlight foundation.</p>
<p>The House attempts to use the browser's Geolocation API to get lat/long then calls the Congress API that uses location. If that works it displays it. It also gives the option of using zip code via a less accurate Sunlight foundation API</p>
<p>The historic accepts a state from the list and year, and passes it to my own API which queries a local database. The database contains three tables, representatives, terms and zipcodes. Representative contains information about the representative including the state he/she served in, where terms contains the list of terms that the person served, by start and end date, and a reference back to the representative entry. This data came from a yaml file downloaded from the sunlight foundation website, then parsed using pyyaml and calls to create entries in the database via the django object model. The query then looks for all terms which match the state and where the start date is less than or equal to the year entered, and the end date is greater than or equal to the year entered. We can then loop through the terms returned to find the representative information.</p>
<p>For the state data, to be done later, the Congress API does not support zip codes, so where geolocation api does not work we will need an alternative. In preparation for that I found a csv file which translates zipcodes to an approximate lat/long value. I then use standard python text parsing techniques like split to
generate the data to fill the database via the Django Object model.</p>
</div>
</div>
<h4 class="accord"><img src="images/shape_square_go.png" height="25px"> How the server was built</h4>
<div class="white_background">
<p>I am using a separate server and hosted website, as if our server were an independent service vending REST APIS. </p>
<p>The server is a droplet from <a href="http://www.digitalocean.com" target="_blank">digital ocean</a> running Ubuntu 14, built using:</p>
<ul>
<li><a href="http://python.org" target="_blank">Python</a></li>
<li><a href="http://www.djangoproject.com" target="_blank">Django</a></li>
<li><a href="http://mysql.com" target="_blank">MySQL</a></li>
</ul>
<p>I am hosting our web site on <a href="http://ecowebhosting.co.uk" target="_blank">Ecowebhosting</a></p>
<p>The HTML is being developed using <a href="http://www.sublimetext.com" target="_blank">Sublime Text 2</a> and the python is developed using <a href="spring.io/tools" target="_blank">Springsource version of Eclipse</a> on Windows 7.</p>
<p>I am uploading the http to the website using <a href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/" target="_blank">FireFTP</a>, a plugin inside of Firefox, and using git to control the movement of python between the development Ubuntu VM I have running under <a href="http://www.vmware.com/products/workstation/features" target="_blank">VMWare Workstation</a> and the target droplet.</p>
</div>
<h4 class="accord"><img src="images/shape_square_go.png" height="25px">How the source for this site is controlled</h4>
<div class="white_background">
<p>The code is controlled in <a href="http://github.com">github</a> in two separate repositories. <a href="https://github.com/michaeltoback/government_clearinghouse" target="_blank">One</a> for the website, <a href="https://github.com/michaeltoback/hello-django" target="_blank">one</a> for the server code.</p>
<p>You can find the git repositories <a href="https://github.com/michaeltoback/" target="_blank">here</a>
</div>
</div>
<div id="about_me">
<h4 class="accord"><img src="images/shape_square_go.png" height="25px">What do I do?</h4>
<div class="white_background">
<p>I am a software developer and certified scrum master with formal training in electrical and biomedical engineering. I am also licensed to practice law before the <a href="http://members.calbar.ca.gov/fal/Member/Detail/248938" target="_blank">California Bar</a> and the <a href="https://oedci.uspto.gov/OEDCI/details.do?regisNum=56456" target="_blank">US Patent Office</a>.
</p>
</div>
<h4 class="accord"><img src="images/shape_square_go.png" height="25px">What do I know?</h4>
<div class="white_background">
<p>I know programming languages like <a href="http://www.python.org" target="_blank">Python</a>, <a href="https://www.java.com/en/" target="_blank">Java</a>, and <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">Javascript</a>. I've worked with C++, Ada, Perl, and many other languages in the past.</p>
<p>I know databases. I use MySQL and MongoDB on a regular basis, and in the past I've used DB2 and SQLServer</p>
<p>I know how to use VMWare Workstation, Fusion, vCenter, and vCloud Air to build Virtual Machines and have built and used VMs with Ubuntu, Centos and Windows.</p>
<p>I know some shell scripting, though not a guru can usually make things work</p>
<p>I know process. From Waterfall to Agile to Lean. I've lead large teams using MIL-STD-2167, am a certified Scrum Master and a <a href="http://rallydev.com" target="_blank">Rally</a> Administrator</p>
<p>I know continuous integration. I've managed a Jenkins server, integrated with git, robotframework, and Selenium</p>
</div>
<h4 class="accord"><img src="images/shape_square_go.png" height="25px">What do I like to do when I'm not working</h4>
<div class="white_background">
<p>I play piano, some guitar, enjoy listening to classical music</p>
<p>I enjoy reading science fiction, historical novels, and history</p>
<p>I am teaching myself French and Spanish</p>
</div>
</div>
</div>
<div id="coming_soon">
<img height=150px src="images/coming_soon.JPG" alt="Coming soon!"/>
</div>
<div class="clear"></div>
<div id="footer">
<p class="caveat">This site was setup as a demonstration of some of my capabilities using Python, Django, Git and Jenkins. It is in no way associated with the US Government or any other agency. </p>
<p style="position:relative;top:5px" class="summary"><a class="btn btn-xs btn-info" style="position:relative;left:100px" href="#" onclick="onAboutMe()">About Me</a><a class="btn btn-xs btn-info" style="position:relative;left:200px" href="#" onclick="onAboutSite()">About Site</a><a class="btn btn-xs btn-info"style="position:relative;left:300px" href="http://198.199.114.41:8080/view/current_status/job/test/" target="_blank">Current development status</a></p>
<p style="position:relative;top:10px" class="summary">Created by Michael Toback Last Updated October 15, 2014.... more coming soon! <a href="http://www.linkedin.com/in/mtoback"> <img style="display:inline-block" src="https://static.licdn.com/scds/common/u/img/webpromo/btn_viewmy_160x25.png" width="160" height="25" border="0" alt="View Michael Toback's profile on LinkedIn"></a></p>
</div>
</div>
<script src="js/json2.js"></script>
<script src="js/script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>