Skip to content

Instantly share code, notes, and snippets.

@aarshtalati

aarshtalati/index.html

Created May 14, 2018 17:54
Show Gist options
  • Save aarshtalati/5812e039e84ff41122659d08a27405a5 to your computer and use it in GitHub Desktop.
Save aarshtalati/5812e039e84ff41122659d08a27405a5 to your computer and use it in GitHub Desktop.
Download ZIP
Thymeleaf MVC Index view template, using fragments
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All patients</title>
<!--/*/ <th:block th:include="fragments/header :: head"></th:block> /*/-->
</head>
<body>
<!--/*/ <th:block th:include="fragments/header :: header"></th:block> /*/-->
<div class="table-responsive">
<table id="tblPatient" class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th style="display:table-cell; width: 3%;"></th>
<th>
<h4 class="text-center">Name
<button class="btn btn-xs btn-primary" title="Toggle filter" onclick="toggleFilter()"><span
class="glyphicon glyphicon-filter" aria-hidden="true"></span></button>
</h4>
</th>
<th colspan="3"><h4 class="text-center">Actions</h4></th>
</tr>
</thead>
<tbody id="tbodyPatient">
<!--filter row-->
<tr>
<td colspan="5"><input type="text" name="patientNameFilter" id="tbpatientNameFilter"
class="form-control">
</td>
</tr>
<!--Show this row when site is loading the data, else hide it-->
<tr id="loadingRecords" class="loadingRecords" style="display: none;">
<td colspan="5">
<div class="row text-center">
<i class="fa-spin glyphicon glyphicon-refresh"></i>Loading data ...
</div>
</td>
</tr>
<!--Show this row when there are no records to display, else hide it-->
<tr id="noRecords" class="noRecords" style="display: none;">
<td colspan="5">
<div class="row text-center">
<span class="glyphicon glyphicon-info-sign"></span>&nbsp;Nothing to show here.
</div>
</td>
</tr>
<!--insert patients here-->
</tbody>
<tfoot>
<tr>
<td colspan="5">
<div>
<button id="btnaddPatient" onClick="redirect('upsert',-1 )"><span
class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Patient
</button>
<button id="btnImportPatient" onclick="redirect('import', -1)"><span
class="glyphicon glyphicon-save" aria-hidden="true"></span>
Import Patient from FHIR
</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<!--/*/ <th:block th:include="fragments/header :: scripts"></th:block> /*/-->
</body>
<script type="text/javascript">
var patients = [];
var deletePatientId = undefined;
$(function () {
$('#loadingRecords').show();
$('#tblPatient tbody tr:first-child').hide();
loadPatients();
});
var toggleFilter = function () {
$('#tbpatientNameFilter').val('');
$('#tblPatient tbody tr:first-child').toggle();
if ($('#tblPatient tbody tr:first-child').css('display') === 'none') {
showPatients(patients);
}
};
$('#tbpatientNameFilter').keyup(function () {
var filterText = $(this).val();
if (filterText.length < 3) {
return;
}
$('#tblPatient').find('tr:gt(2):lt(-1)').remove();
var filterdRecords = [];
$.each(patients, function (key, val) {
var matchesFirstName = val.firstName.toLowerCase().indexOf(filterText.toLowerCase()) >= 0;
var matchesLastName = val.lastName.toLowerCase().indexOf(filterText.toLowerCase()) >= 0;
if (matchesFirstName || matchesLastName) {
filterdRecords.push(val);
}
});
showPatients(filterdRecords);
toastr.info('To clear filter, click again.');
});
var showPatients = function (records) {
$('#tblPatient').find('tr:gt(2):lt(-1)').remove();
$.each(records, function (key, val) {
var row = getPatientRowHtml(val);
$('#tbodyPatient').append(row);
});
};
var loadPatients = function () {
var url = '/api/persons/';
$.get(url, function () {
}).done(function (data) {
$('#loadingRecords').hide();
if (data.length === 0) {
$('#noRecords').show();
}
else {
patients = data;
$('#noRecords').hide();
showPatients(patients);
}
toastr.success('Patients loaded.');
}).fail(function () {
toastr.error('Can\'t load patients.');
});
};
var togglePatientVisits = function (patientId) {
var iconSpanElement = $('#btnChildTable' + patientId);
iconSpanElement.toggleClass('glyphicon-triangle-bottom glyphicon-triangle-right');
$('#visitsForPatient' + patientId).toggle();
};
var getPatientRowHtml = function (patient) {
var childTableRowHtml = '';
if (patient.visits && patient.visits.length > 0) {
var validVisits = patient.visits.filter(visitsWithAssessment);
if (validVisits && validVisits.length > 0) {
childTableRowHtml =
"<tr id='visitsForPatient" + patient.id.toString() + "' style='display: none;'>" +
" <td colspan=\"5\">" +
" <table class=\"table table-hover table-bordered table-striped\">" +
" <thead>" +
" <tr>" +
" <th>Visit #</th>" +
" <th>Date</th>" +
" <th>Impairment</th>" +
" <th>Risk</th>" +
" <th>Details</th>" +
" </tr>" +
" </thead>" +
" <tbody>";
validVisits.forEach(function (visit) {
var visitDate = (new Date(visit.visitDate)).toLocaleString();
childTableRowHtml +=
" <a>" +
" <td>" + visit.id + "</td>" +
" <td>" + visitDate + "</td>" +
" <td>" + visit.assessments[0].assessmentLevel + "</td>" +
" <td>" + visit.assessments[1].assessmentLevel + "</td>" +
" <td><a href='#' class='text-primary' onclick=\"redirect('visit', " + visit.id + ")\">view</a></td>" +
" </tr>";
});
childTableRowHtml +=
" </tbody>" +
" <tfoot></tfoot>" +
" </table>" +
" </td>" +
"</tr>";
}
}
function visitsWithAssessment(v) {
return v.assessments.length === 2;
}
var cheveronButtonHtml = '';
var start = "redirect('start','" + patient.id.toString() + "')";
var edit = "redirect('upsert','" + patient.id.toString() + "')";
var editButtonHtml = '<button class="personEditButton" onClick="' + edit + '"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</button>';
var deleteConfirmButtonHtml = '<button type=\"button\" data-toggle=\"modal\" data-target=\".patient-delete-confirm\" data-id="' + patient.id.toString();
deleteConfirmButtonHtml += '"><span class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></span> Delete</button>';
if (childTableRowHtml && childTableRowHtml.length > 0) {
cheveronButtonHtml = '<button type="button" onClick="togglePatientVisits(' + patient.id.toString() + ')"><span id="btnChildTable' + patient.id.toString() + '" class="glyphicon glyphicon-triangle-right"></span></button>';
} else {
// cheveronButtonHtml = '<button type="button"><span class="glyphicon glyphicon-triangle-right" disabled=""></span></button>';
cheveronButtonHtml = '';
}
var del = "";
var rowHtml = '';
rowHtml += '<tr><td>';
rowHtml += cheveronButtonHtml;
rowHtml += '</td><td>';
rowHtml += (patient.firstName + ' ' + patient.lastName);
rowHtml += '</td><td>';
rowHtml += editButtonHtml;
rowHtml += '</td><td>';
rowHtml += deleteConfirmButtonHtml;
rowHtml += '</td><td>';
rowHtml += '<button class="personQuestionnaireButton" onClick="' + start + '">Start Assessment</button>';
rowHtml += '</td></tr>';
if (childTableRowHtml && childTableRowHtml.length > 0) {
rowHtml += childTableRowHtml;
}
return rowHtml;
};
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment