Skip to content

Instantly share code, notes, and snippets.

@davious

davious/lsbae-roster-demo.html

Last active October 9, 2018 00:23
Show Gist options
  • Save davious/21eaa0db2e780a3168aa6a04ee6831ba to your computer and use it in GitHub Desktop.
Save davious/21eaa0db2e780a3168aa6a04ee6831ba to your computer and use it in GitHub Desktop.
Download ZIP
Test Page fro LSBAE Roster Demo
Raw
lsbae-roster-demo.html
<html>
<head>
<style>
body > div {
display: flex;
justify-content: space-around;
}
li {
list-style: none;
background-color: #fafafa;
margin: 5px 0;
padding: 20px;
white-space: normal;
}
li > div {
display: flex;
}
li > div > div {
flex: 1 1 0;
margin-right: 10px
}
h2 {
margin: 0 0 10px;
padding: 0;
}
</style>
</head>
<body>
<h1>LSBAE Demo Roster</h1>
<div>
<div id="architects" >
<h1>Architect Search</h1>
<form onsubmit="return search('architects')">
<table>
<tbody>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Firm</td>
<td><input type="text" name="firm"></td>
</tr>
<tr>
<td>Registration No</td>
<td><input type="text" name="licenseNumber"></td>
</tr>
<tr>
<td>Street</td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state"></td>
</tr>
<tr>
<td>Title</td>
<td><input type="text" name="credentials"></td>
</tr>
<tr>
<td>Restrict Records</td>
<td><input type="text" name="pageSize"></td>
</tr>
</table>
<p>
<button type="submit">Search</button>
</p>
</form>
</div>
<div id="firms">
<h1>Firm Search</h1>
<form onsubmit="return search('firms')">
<table>
<tbody>
<tr>
<td>Firm Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Registration No</td>
<td><input type="text" name="licenseNumber"></td>
</tr>
<tr>
<td>Street</td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state"></td>
</tr>
<tr>
<td>Zip</td>
<td><input type="text" name="zip"></td>
</tr>
<tr>
<td>Restrict Records</td>
<td><input type="text" name="pageSize"></td>
</tr>
</table>
<p>
<button type="submit">Search</button>
</p>
</form>
</div>
</div>
<script id="architectsTemplate" type="text/x-jquery-tmpl">
<li>
<h2>${person.name.first} ${person.name.last} ${person.credentials}</h2>
<div>
<div>
${person.primaryAddress && person.primaryAddress.streetLine1}
<br/>
${person.primaryAddress && person.primaryAddress.streetLine2 && (person.primaryAddress.streetLine2 + String.fromCharCode(160))}
${person.primaryAddress && person.primaryAddress.city}
${person.primaryAddress && person.primaryAddress.state.code},
${person.primaryAddress && person.primaryAddress.zip}
<p>
${person.email}
</p>
<p>
${person.credential}
</p>
</div>
<div>
<strong>#${number}</strong>
<p>
${person.primaryPhone && person.primaryPhone.number}
</p>
<p>
${firmName}
</p>
<p>
${firmWebsite}
</p>
</div>
</div>
</li>
</script>
<script id="firmsTemplate" type="text/x-jquery-tmpl">
<li>
<h2>${firm.name}</h2>
<div>
<div>
${firm.publicAddress && firm.publicAddress.streetLine1}
<br/>
${firm.publicAddress && firm.publicAddress.streetLine2 && (person.primaryAddress.streetLine2 + String.fromCharCode(160))}
${firm.publicAddress && firm.publicAddress.city}
${firm.publicAddress && firm.publicAddress.state.code},
${firm.publicAddress && firm.publicAddress.zip}
<p>
${firm.email}
</p>
<p>
${firm.website}
</p>
</div>
<div>
<strong>#${number}</strong>
<p>
${firm.primaryPhone}
</p>
</div>
</div>
</li>
</script>
<pre>
<ul id="results">
</ul>
</pre>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
function search(kind) {
var query = $("#" + kind + " input").serialize();
var url = "https://demo.ls.ncarb.org/api/roster/" + kind + "?" + query;
console.log(url)
$.get(url, function(data) {
$("#results").html('')
console.log(data)
$("#" + kind + "Template").tmpl(data).appendTo("#results");
});
return false;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment