Skip to content

Instantly share code, notes, and snippets.

@davious

davious/lsbae-roster-local.html

Last active May 19, 2022 19:02
Show Gist options
  • Save davious/2ecb34ee79a37178263144c2e3ef1868 to your computer and use it in GitHub Desktop.
Save davious/2ecb34ee79a37178263144c2e3ef1868 to your computer and use it in GitHub Desktop.
Download ZIP
Test Page for LSBAE Roster
Raw
lsbae-roster-local.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>
<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}</h2>
<div>
<div>
${person.workAddress && person.workAddress.streetLine1}
<br/>
${person.workAddress && person.workAddress.streetLine2 &&
(person.workAddress.streetLine2 + String.fromCharCode(160))}
${person.workAddress && person.workAddress.city}
${person.workAddress && ((person.workAddress.state && person.workAddress.state.code) || (person.workAddress.province && person.workAddress.province.code) || person.workAddress.region)},
${person.workAddress && person.workAddress.zip}
<p>
${person.email}
</p>
<p>
${person.credentials}
</p>
<p>
${person.primaryPhone && person.primaryPhone.number}
</p>
<p>
${firmName}
</p>
<p>
${firmWebsite}
</p>
</div>
<div>
<strong>License #${number}</strong>
<p>
Date of Licensure: ${issueDate}
</p>
<p>
Expiration Date: ${expirationDate}
</p>
<p>
Status: ${status}
</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 && (firm.publicAddress.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.primaryPhone && firm.primaryPhone.number}
</p>
<p>
${firm.website}
</p>
</div>
<div>
<strong>License #${number}</strong>
<p>
Date of Licensure: ${issueDate}
</p>
<p>
Expiration Date: ${expirationDate}
</p>
<p>
Status: ${status}
</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 = "http://localhost:8080/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