149 lines
4.8 KiB
HTML
149 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Blood Pressure Health Monitor Dashboard </title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
|
|
<style>
|
|
.dropbtn {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbtn:hover, .dropbtn:focus {
|
|
background-color: #3e8e41;
|
|
}
|
|
|
|
#myInput {
|
|
box-sizing: border-box;
|
|
background-image: url('searchicon.png');
|
|
background-position: 14px 12px;
|
|
background-repeat: no-repeat;
|
|
font-size: 16px;
|
|
padding: 14px 20px 12px 45px;
|
|
border: none;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
#myInput:focus {outline: 3px solid #ddd;}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f6f6f6;
|
|
min-width: 230px;
|
|
overflow: auto;
|
|
border: 1px solid #ddd;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown a:hover {background-color: #ddd;}
|
|
|
|
.show {display: block;}
|
|
.custom-select{
|
|
width: 40%;
|
|
margin-right: 25px;
|
|
font-weight: 600;
|
|
}
|
|
iframe{
|
|
width: 100%;
|
|
border: 0;
|
|
margin-bottom: 25px;
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
.custom-row{
|
|
margin-top: 25px;
|
|
position: relative;
|
|
}
|
|
#emptyMessage{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(0,0,0,0.7);
|
|
font-weight: 500;
|
|
letter-spacing: 0.45px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand">Blood Pressure Health Monitor Dashboard</a>
|
|
</div>
|
|
</nav>
|
|
<div class="container body-content" style="padding-top: 50px;">
|
|
<div class="container">
|
|
<div class="row justify-content-start" style="padding-top:10px;">
|
|
<div class="col" style="padding-top:10px;">
|
|
<h3 style="font-size: 18px;">All Patients</h3>
|
|
<select class="custom-select" onchange="changePatient(this.value)" name="patients">
|
|
<option value="" selected="selected">Choose</option>
|
|
<option value="alec-ray.html" >Alec Ray</option>
|
|
<option value="anabel-knapp.html" >Anabel Knapp</option>
|
|
<option value="hanna-martins.html" >Hanna Martins</option>
|
|
<option value="may-lindsay.html" >May Lindsey</option>
|
|
<option value="domonic.html" >Domonic Mccormack</option>
|
|
</select>
|
|
<a type="button" class="btn btn-primary" onclick="changePatient('all-patients.html')">All Patients</a>
|
|
<!-- <a id="https://www.facebook.com/" href="?action=IT">IT</a> -->
|
|
<div class="row justify-content-center bg-light align-item-center custom-row" style="padding-top:10px;">
|
|
<div id="emptyMessage">Select any patient to view result</div>
|
|
<!-- <img alt="Image html" width="90%" height="90%" style="max-height:800px;max-width:800px;" src="dashboard.png" /> -->
|
|
<iframe src="about:blank" frameborder="0" id="iframeId"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function myFunction() {
|
|
document.getElementById("myDropdown").classList.toggle("show");
|
|
}
|
|
function filterFunction() {
|
|
var input, filter, ul, li, a, i;
|
|
input = document.getElementById("myInput");
|
|
filter = input.value.toUpperCase();
|
|
div = document.getElementById("myDropdown");
|
|
a = div.getElementsByTagName("a");
|
|
for (i = 0; i < a.length; i++) {
|
|
txtValue = a[i].textContent || a[i].innerText;
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
a[i].style.display = "";
|
|
} else {
|
|
a[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
function changePatient(patientData) {
|
|
console.log(patientData)
|
|
document.getElementById('iframeId').src = patientData;
|
|
document.getElementById('emptyMessage').style.display = 'none'
|
|
if(patientData === ''){
|
|
document.getElementById('emptyMessage').style.display = 'flex'
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |