152 lines
6.4 KiB
HTML
152 lines
6.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="bi bi-map text-danger"></i> Live Alert Map</h2>
|
|
<span class="badge bg-danger pulse">LIVE UPDATES</span>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body p-0">
|
|
<div id="live-map" style="height: 600px; width: 100%; border-radius: 8px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h5 class="mb-0">Recent Alerts</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Patient</th>
|
|
<th>Blood Group</th>
|
|
<th>Hospital</th>
|
|
<th>Urgency</th>
|
|
<th>Status / Accepted By</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for req in requests %}
|
|
<tr>
|
|
<td>{{ req.patient_name }}</td>
|
|
<td><span class="badge bg-danger">{{ req.blood_group }}</span></td>
|
|
<td>{{ req.hospital }}</td>
|
|
<td>
|
|
{% if req.urgency == 'CRITICAL' %}
|
|
<span class="badge bg-dark">CRITICAL</span>
|
|
{% elif req.urgency == 'URGENT' %}
|
|
<span class="badge bg-warning text-dark">URGENT</span>
|
|
{% else %}
|
|
<span class="badge bg-info">NORMAL</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% with acceptance=req.donations.first %}
|
|
{% if acceptance %}
|
|
<span class="badge bg-success bg-opacity-10 text-success">
|
|
<i class="bi bi-person-check-fill"></i> {{ acceptance.donor.name }}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-light text-secondary">Awaiting Help</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="focusOnMarker({{ req.latitude }}, {{ req.longitude }})">
|
|
<i class="bi bi-eye"></i> View on Map
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">No active alerts found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.pulse {
|
|
animation: pulse-red 2s infinite;
|
|
}
|
|
@keyframes pulse-red {
|
|
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
|
|
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
|
|
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var map;
|
|
var markers = {};
|
|
|
|
function initMap() {
|
|
// Center on Baluwatar, Kathmandu
|
|
map = L.map('live-map').setView([27.7226, 85.3312], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
{% for req in requests %}
|
|
{% if req.latitude and req.longitude %}
|
|
var markerColor = 'blue';
|
|
{% if req.urgency == 'CRITICAL' %}
|
|
markerColor = 'red';
|
|
{% elif req.urgency == 'URGENT' %}
|
|
markerColor = 'orange';
|
|
{% endif %}
|
|
|
|
var marker = L.circleMarker([{{ req.latitude }}, {{ req.longitude }}], {
|
|
radius: 10,
|
|
fillColor: markerColor,
|
|
color: "#fff",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
}).addTo(map);
|
|
|
|
marker.bindPopup(`
|
|
<strong>{{ req.patient_name }}</strong><br>
|
|
Blood Group: <span class="badge bg-danger">{{ req.blood_group }}</span><br>
|
|
Hospital: {{ req.hospital }}<br>
|
|
Urgency: {{ req.urgency }}<br>
|
|
{% with acceptance=req.donations.first %}
|
|
{% if acceptance %}
|
|
<div class="mt-1 text-success small"><i class="bi bi-person-check-fill"></i> Accepted by: {{ acceptance.donor.name }}</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<a href="tel:{{ req.contact_number }}" class="btn btn-sm btn-primary mt-2">Contact</a>
|
|
`);
|
|
|
|
markers["{{ req.id }}"] = marker;
|
|
{% endif %}
|
|
{% endfor %}
|
|
}
|
|
|
|
function focusOnMarker(lat, lng) {
|
|
map.setView([lat, lng], 16);
|
|
// Find marker at this location and open its popup if possible
|
|
// (Simplified for now)
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initMap);
|
|
</script>
|
|
{% endblock %}
|