Skip to content

Commit e35c668

Browse files
NxNikiNxNiki
committed
add patients and navgator page
1 parent d57a793 commit e35c668

File tree

9 files changed

+289
-14
lines changed

9 files changed

+289
-14
lines changed

‎frontend/add_patient.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<link rel="stylesheet" href="css/styles.css">
88
</head>
99
<body>
10+
<div id="navbar-placeholder"></div>
11+
1012
<h2>Add Patient Information</h2>
1113

1214
<div class="container">
@@ -47,6 +49,8 @@ <h3>Experiments</h3>
4749
</div>
4850
<button id="add-experiment">Add Experiment</button>
4951

52+
<button id="confirm">Confirm</button>
53+
5054
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
5155
<script src="js/add_patient.js"></script>
5256
</body>

‎frontend/css/styles.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,38 @@ body {
66
padding: 20px;
77
}
88

9+
/* Navigation Bar Styles */
10+
.navbar {
11+
background-color: #0095ff;
12+
overflow: hidden;
13+
}
14+
15+
.navbar ul {
16+
list-style-type: none;
17+
margin: 0;
18+
padding: 0;
19+
display: flex;
20+
}
21+
22+
.navbar ul li {
23+
flex: 1;
24+
text-align: center;
25+
}
26+
27+
.navbar ul li a {
28+
display: block;
29+
color: white;
30+
text-align: center;
31+
padding: 5px 10px;
32+
text-decoration: none;
33+
font-size: 18px;
34+
}
35+
36+
.navbar ul li a:hover {
37+
background-color: #8bcfffcc;
38+
color: white;
39+
}
40+
941
h1, h2, h3 {
1042
color: #333;
1143
margin-bottom: 20px;
@@ -123,3 +155,32 @@ div {
123155
.box:nth-child(2) {
124156
background-color: #28a745; /* Different background for the second div */
125157
}
158+
159+
160+
/* experimenter name and path in the home page */
161+
162+
.form-row {
163+
display: flex;
164+
align-items: flex-end;
165+
margin-bottom: 10px;
166+
}
167+
168+
.form-row label,
169+
.form-row input[type="text"] {
170+
margin-bottom: 10px; /* Remove any default margin at the bottom */
171+
}
172+
173+
.form-row label {
174+
min-width: 150px; /* Set a fixed width for labels */
175+
margin-right: 10px;
176+
width: 10%;
177+
}
178+
179+
.form-row input[type="text"] {
180+
/* flex: 1; /* Make the input fields flexible to take up available space */
181+
padding: 10px;
182+
margin-right: 10px; /* Add space between input and button */
183+
border: 1px solid #ccc;
184+
border-radius: 4px;
185+
width: 50%;
186+
}

‎frontend/experiments.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Add Patient</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
10+
<body>
11+
<div id="navbar-placeholder"></div>
12+
13+
<h1>Experiments List</h1>
14+
15+
<table id="experiments-table">
16+
<thead>
17+
<tr>
18+
<th>ID</th>
19+
<th>Name</th>
20+
<th>Edit</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<!-- Patient rows will be inserted here dynamically -->
25+
</tbody>
26+
</table>
27+
28+
<div id="experiments">
29+
<div class="experiment">
30+
<label for="experiment-name-1">Experiment Name:</label>
31+
<select id="experiment-name-1" name="experiment-name-1">
32+
<option value="exp1">Experiment 1</option>
33+
<option value="exp2">Experiment 2</option>
34+
<option value="exp3">Experiment 3</option>
35+
</select>
36+
<button class="remove-experiment">Remove</button>
37+
</div>
38+
</div>
39+
<button id="add-experiment">Add Experiment</button>
40+
41+
<button id="confirm">Confirm</button>
42+
43+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
44+
<script src="js/patients.js"></script>
45+
</body>
46+
</html>

‎frontend/index.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,27 @@
77
<link rel="stylesheet" href="css/styles.css">
88
</head>
99
<body>
10-
<!-- Your content goes here -->
11-
<h1>Welcome to Your Project</h1>
10+
<div id="navbar-placeholder"></div>
1211

1312
<!-- User input for name and path -->
14-
<div>
15-
<label for="name">Name:</label>
13+
14+
<div class="form-row">
15+
<label for="lab">Lab:</label>
16+
<input type="text" id="lab" name="lab">
17+
</div>
18+
19+
<div class="form-row">
20+
<label for="name">Experimenter:</label>
1621
<input type="text" id="name" name="name">
1722
</div>
1823

19-
<div>
24+
<div class="form-row">
2025
<label for="path">Path to Save Data:</label>
2126
<input type="text" id="path" name="path">
2227
</div>
2328

24-
<!-- Button to add a new patient -->
25-
<button id="add-patient">Add Patient</button>
29+
<!-- Button to confirm setting -->
30+
<button id="confirm"> Confirm</button>
2631

2732
<div id="data-display"></div>
2833

‎frontend/js/add_patient.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
$(document).ready(function() {
2-
let experimentCount = 1;
2+
$('#navbar-placeholder').load('nav.html');
33

4+
let experimentCount = 1;
45
// Function to add a new experiment field
56
$('#add-experiment').on('click', function() {
67
experimentCount++;
@@ -22,4 +23,11 @@ $(document).ready(function() {
2223
$('#experiments').on('click', '.remove-experiment', function() {
2324
$(this).parent('.experiment').remove();
2425
});
26+
27+
// Function to confirm add patient.
28+
$('#confirm').on('click', function (){
29+
const path = localStorage.getItem('dataPath');
30+
31+
patientInfo = getPatientInfo();
32+
})
2533
});

‎frontend/js/main.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,33 @@
11
$(document).ready(function() {
2-
$('#add-patient').on('click', function() {
3-
// Open a new window for adding patient information
4-
// window.open('add_patient.html', 'Add Patient', 'width=600,height=400');
5-
// Redirect to the add_patient.html page instead of opening a new window
6-
window.location.href = 'add_patient.html';
2+
$('#navbar-placeholder').load('nav.html');
3+
4+
const labName = localStorage.getItem('lab');
5+
const userName = localStorage.getItem('userName');
6+
const dataPath = localStorage.getItem('dataPath');
7+
8+
if (labName || userName || dataPath) {
9+
document.getElementById('lab').value = labName;
10+
document.getElementById('name').value = userName;
11+
document.getElementById('path').value = dataPath;
12+
console.log('Data loaded from Local Storage');
13+
} else {
14+
console.log('No data found in Local Storage');
15+
}
16+
17+
$('#confirm').on('click', function() {
18+
let labName = $('#lab').val();
19+
let experimenterName = $('#name').val();
20+
let savePath = $('#path').val();
21+
if (labName && experimenterName && savePath) {
22+
// Process or save the experimenterName and savePath
23+
localStorage.setItem('lab', labName);
24+
localStorage.setItem('userName', experimenterName);
25+
localStorage.setItem('dataPath', savePath);
26+
27+
window.location.href = 'patients.html';
28+
} else {
29+
alert("Please enter all required information.");
30+
}
731
});
8-
});
32+
33+
});

‎frontend/js/patients.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
$(document).ready(function() {
2+
$('#navbar-placeholder').load('nav.html');
3+
4+
const patients = getPatients();
5+
6+
function renderPatientsTable(patients) {
7+
const tbody = $('#patients-table tbody');
8+
tbody.empty(); // Clear any existing rows
9+
10+
patients.forEach(patient => {
11+
const row = `
12+
<tr>
13+
<td>${patient.id}</td>
14+
<td>${patient.name}</td>
15+
<td>${patient.sex}</td>
16+
<td>${patient.birthData}</td>
17+
<td><button class="view-button" data-id="${patient.id}">View Status</button></td>
18+
<td><button class="edit-button" data-id="${patient.id}">Edit</button></td>
19+
</tr>
20+
`;
21+
tbody.append(row);
22+
});
23+
24+
// Add event listeners to the edit buttons
25+
$('#edit-button').on('click', function() {
26+
const patientId = $(this).data('id');
27+
editPatient(patientId);
28+
});
29+
30+
$('#view-button').on('click', function() {
31+
const patientId = $(this).data('id');
32+
viewPatient(patientId);
33+
})
34+
35+
$('#add-patient').on('click', function() {
36+
addPatient();
37+
})
38+
}
39+
40+
// Render the table on page load
41+
renderPatientsTable(patients);
42+
43+
});
44+
45+
46+
function getPatients() {
47+
48+
const savePath = localStorage.getItem("path");
49+
const patients = [
50+
{ id: 1, name: 'John Doe', sex: 'Male', birthDate: '1900-1-1' },
51+
{ id: 2, name: 'Jane Smith', sex: 'Female', birthDate: '1900-1-1' },
52+
// Add more patient data here
53+
];
54+
55+
return patients;
56+
57+
}
58+
59+
function savePatients(patients) {
60+
61+
const savePath = localStorage.getItem("path");
62+
63+
64+
}
65+
66+
function editPatient(id) {
67+
console.log(`Edit patient with ID: ${id}`);
68+
// Add your edit logic here
69+
}
70+
71+
function viewPatient(id) {
72+
console.log(`View patient: ${id}`);
73+
}
74+
75+
function addPatient() {
76+
console.log('add patient')
77+
window.location.href = 'add_patient.html';
78+
}

‎frontend/nav.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- Navigation Bar -->
2+
<!-- this is called by all pages to show navigator -->
3+
<h1>Patient Data Manager</h1>
4+
<nav class="navbar">
5+
<ul>
6+
<li><a href="index.html">Home</a></li>
7+
<li><a href="patients.html">Patients</a></li>
8+
<li><a href="experiments.html">Experiments</a></li>
9+
<li><a href="about.html">About</a></li>
10+
</ul>
11+
</nav>

‎frontend/patients.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Patients</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
10+
<body>
11+
<div id="navbar-placeholder"></div>
12+
13+
<h2>Patient List</h2>
14+
15+
<table id="patients-table">
16+
<thead>
17+
<tr>
18+
<th>ID</th>
19+
<th>Name</th>
20+
<th>Sex</th>
21+
<th>Birth Date</th>
22+
<th></th>
23+
<th></th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<!-- Patient rows will be inserted here dynamically -->
28+
</tbody>
29+
</table>
30+
31+
<!-- Button to add a new patient -->
32+
<button id="add-patient">Add Patient</button>
33+
34+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
35+
<script src="js/patients.js"></script>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)