Skip to content

Commit

Permalink
Merge pull request #53 from yashksaini-coder/yash/fix-21
Browse files Browse the repository at this point in the history 
Fix Issue #21
  • Loading branch information
@vimistify
vimistify authored Oct 2, 2024
2 parents 0e008ca + f3f0ffc commit b8a2112
Show file tree
Hide file tree
Showing 4 changed files with 745 additions and 202 deletions.
239 changes: 140 additions & 99 deletions hospital.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,119 +19,160 @@ <h2 style="font-family: 'Arial', sans-serif; font-size: 24px; color: #666; margi
<button class="action-btn" id="manageAmbulancesBtn" style="padding: 10px 20px; font-size: 16px;">Manage Ambulances</button>
</div>

<div id="driverStatus" class="hidden">
<h2>Driver Status</h2>
<table>
<thead>
<tr>
<th>Driver Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Driver XYZ</td>
<td><span class="status available">Available</span></td>
<td><a href="#" class="manage-link" data-driver="Driver XYZ">Manage</a></td>
</tr>
<tr>
<td>Driver ABC</td>
<td><span class="status offline">Offline</span></td>
<td><a href="#" class="manage-link" data-driver="Driver ABC">Manage</a></td>
</tr>
</tbody>
</table>
</div>
<!-- Driver and Ambulance Status Section -->
<div class="status-container">
<!-- Driver Status Section -->
<div id="driverStatus" class="status-section active">
<h2>Driver Status</h2>
<table>
<thead>
<tr>
<th>Driver Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="driversTableBody">
<!-- Dynamic Driver Rows Will Be Injected Here -->
</tbody>
</table>

<div id="ambulanceStatus" class="hidden">
<h2>Ambulance Status</h2>
<table>
<thead>
<tr>
<th>Ambulance ID</th>
<th>Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ambulance 1</td>
<td>Location XYZ</td>
<td><a href="#" class="manage-ambulance" data-ambulance="Ambulance 1">Manage</a></td>
</tr>
<tr>
<td>Ambulance 2</td>
<td>Location ABC</td>
<td><a href="#" class="manage-ambulance" data-ambulance="Ambulance 2">Manage</a></td>
</tr>
</tbody>
</table>
</div>
</div>

<div id="manageAmbulanceModal" class="modal hidden">
<div class="modal-content">
<span class="close-btn">&times;</span>
<h2 id="ambulanceModalTitle"></h2>
<p>Current location of the ambulance:</p>
<div id="map" style="height: 400px; width: 100%;"></div>
<!-- Nearby Hospital Facilities for Drivers -->
<div class="nearby-facilities">
<h3>Nearby Hospital Facilities</h3>
<ul>
<li>Bed Availability: <span id="bedAvailabilityDriver">Loading...</span></li>
<li>Oxygen Supply: <span id="oxygenSupplyDriver">Loading...</span></li>
<li>Blood Units: <span id="bloodUnitsDriver">Loading...</span></li>
</ul>
</div>

<!-- Contact Details for Drivers -->
<div class="contact-details">
<h3>Contact Details</h3>
<p>Driver XYZ: (123) 456-7890</p>
<p>Driver ABC: (098) 765-4321</p>
</div>
</div>

<!-- Ambulance Status Section -->
<div id="ambulanceStatus" class="status-section active">
<h2>Ambulance Status</h2>
<table>
<thead>
<tr>
<th>Ambulance ID</th>
<th>Location</th>
<th>Action</th>
</tr>
</thead>
<tbody id="ambulancesTableBody">
<!-- Dynamic Ambulance Rows Will Be Injected Here -->
</tbody>
</table>

<!-- Nearby Hospital Facilities for Ambulances -->
<div class="nearby-facilities">
<h3>Nearby Hospital Facilities</h3>
<ul>
<li>Bed Availability: <span id="bedAvailabilityAmbulance">Loading...</span></li>
<li>Oxygen Supply: <span id="oxygenSupplyAmbulance">Loading...</span></li>
<li>Blood Units: <span id="bloodUnitsAmbulance">Loading...</span></li>
</ul>
</div>

<!-- Contact Details for Ambulances -->
<div class="contact-details">
<h3>Contact Details</h3>
<p>Ambulance 1: (321) 654-0987</p>
<p>Ambulance 2: (789) 012-3456</p>
</div>
</div>
</div>
</div>
</div>
</main>

<script>
const manageDriversBtn = document.getElementById('manageDriversBtn');
const manageAmbulancesBtn = document.getElementById('manageAmbulancesBtn');
const driverStatus = document.getElementById('driverStatus');
const ambulanceStatus = document.getElementById('ambulanceStatus');
const manageAmbulanceLinks = document.querySelectorAll('.manage-ambulance');
const ambulanceModal = document.getElementById('manageAmbulanceModal');
const ambulanceModalTitle = document.getElementById('ambulanceModalTitle');
const closeModalBtn = document.querySelector('.close-btn');
let map, marker;

manageDriversBtn.addEventListener('click', () => {
driverStatus.classList.remove('hidden');
ambulanceStatus.classList.add('hidden');
});
// Elements
const manageBtn = document.getElementById('manageBtn');
const driversTableBody = document.getElementById('driversTableBody');
const ambulancesTableBody = document.getElementById('ambulancesTableBody');

manageAmbulancesBtn.addEventListener('click', () => {
ambulanceStatus.classList.remove('hidden');
driverStatus.classList.add('hidden');
});
// Mock Data for Nearby Facilities (Replace with dynamic data if available)
document.getElementById('bedAvailabilityDriver').textContent = "20";
document.getElementById('oxygenSupplyDriver').textContent = "Sufficient";
document.getElementById('bloodUnitsDriver').textContent = "15";

function initMap(location) {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: location,
});
document.getElementById('bedAvailabilityAmbulance').textContent = "15";
document.getElementById('oxygenSupplyAmbulance').textContent = "Limited";
document.getElementById('bloodUnitsAmbulance').textContent = "10";

// Function to Load Drivers from localStorage
function loadDrivers() {
const drivers = JSON.parse(localStorage.getItem('drivers')) || [];
driversTableBody.innerHTML = ''; // Clear existing rows

drivers.forEach((driver, index) => {
const tr = document.createElement('tr');

marker = new google.maps.Marker({
position: location,
map: map,
const nameTd = document.createElement('td');
nameTd.textContent = driver.name;
tr.appendChild(nameTd);

const statusTd = document.createElement('td');
const statusSpan = document.createElement('span');
statusSpan.classList.add('status', driver.status.toLowerCase());
statusSpan.textContent = driver.status;
statusTd.appendChild(statusSpan);
tr.appendChild(statusTd);

const actionTd = document.createElement('td');
const manageLink = document.createElement('a');
manageLink.href = `manage.html?type=driver&index=${index}`;
manageLink.classList.add('manage-link');
manageLink.textContent = 'Manage';
actionTd.appendChild(manageLink);
tr.appendChild(actionTd);

driversTableBody.appendChild(tr);
});
}

manageAmbulanceLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const ambulanceId = e.target.getAttribute('data-ambulance');
const location = { lat: 28.7041, lng: 77.1025 };
// Function to Load Ambulances from localStorage
function loadAmbulances() {
const ambulances = JSON.parse(localStorage.getItem('ambulances')) || [];
ambulancesTableBody.innerHTML = ''; // Clear existing rows

ambulances.forEach((ambulance, index) => {
const tr = document.createElement('tr');

const idTd = document.createElement('td');
idTd.textContent = ambulance.id;
tr.appendChild(idTd);

ambulanceModalTitle.textContent = `Manage ${ambulanceId}`;
ambulanceModal.classList.remove('hidden');
initMap(location);
const locationTd = document.createElement('td');
locationTd.textContent = ambulance.location;
tr.appendChild(locationTd);

const actionTd = document.createElement('td');
const manageLink = document.createElement('a');
manageLink.href = `manage.html?type=ambulance&index=${index}`;
manageLink.classList.add('manage-ambulance');
manageLink.textContent = 'Manage';
actionTd.appendChild(manageLink);
tr.appendChild(actionTd);

ambulancesTableBody.appendChild(tr);
});
});
}

closeModalBtn.addEventListener('click', () => {
ambulanceModal.classList.add('hidden');
});
// Initial Load
loadDrivers();
loadAmbulances();

window.addEventListener('click', (e) => {
if (e.target === ambulanceModal) {
ambulanceModal.classList.add('hidden');
}
// Event Listener for Manage Button
manageBtn.addEventListener('click', () => {
window.location.href = 'manage.html';
});
</script>
</body>
Expand Down
Loading

0 comments on commit b8a2112

Please sign in to comment.