288 lines
9.1 KiB
HTML
288 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Active Map Public</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<style>
|
|
html, body { margin: 0; padding: 0; height: 100%; font-family: sans-serif; }
|
|
#map { height: 100%; }
|
|
#filters {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 10px;
|
|
background: #fff;
|
|
z-index: 1000;
|
|
}
|
|
select { padding: 4px; }
|
|
|
|
.wo-status-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
font-size: 12px;
|
|
}
|
|
.wo-status-table th,
|
|
.wo-status-table td {
|
|
padding: 4px 8px;
|
|
text-align: left;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.wo-status-table th {
|
|
background-color: #f5f5f5;
|
|
font-weight: bold;
|
|
}
|
|
.status-open { background-color: #f8d7da; color: #721c24; }
|
|
.status-progress { background-color: #fff3cd; color: #856404; }
|
|
.status-review { background-color: #d1ecf1; color: #0c5460; }
|
|
.status-completed { background-color: #d4edda; color: #155724; }
|
|
.hospital-popup .btn-xs {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Tooltip and Popup styles */
|
|
.hospital-tooltip {
|
|
background-color: white;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
.hospital-popup {
|
|
font-size: 14px;
|
|
}
|
|
.hospital-popup .hospital-name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.hospital-popup div {
|
|
margin-bottom: 5px;
|
|
}
|
|
/* Red Flashing Animation for Urgent Markers */
|
|
.urgent-marker {
|
|
animation: urgent-flash 2s infinite;
|
|
}
|
|
@keyframes urgent-flash {
|
|
0%, 50% { filter: hue-rotate(0deg) brightness(1) saturate(1); }
|
|
25%, 75% { filter: hue-rotate(0deg) brightness(1.5) saturate(2) drop-shadow(0 0 10px red);}
|
|
}
|
|
/* Red marker style */
|
|
.red-marker {
|
|
filter: hue-rotate(120deg) saturate(2) brightness(0.8);
|
|
}
|
|
.btn-xs {
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.btn-primary { background-color: #007bff; color: white; }
|
|
.btn-warning { background-color: #ffc107; color: black; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="filters">
|
|
<label for="hospital">Hospital: </label>
|
|
<select id="hospital">
|
|
<option value="">All</option>
|
|
</select>
|
|
</div>
|
|
<div id="map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
const map = L.map('map').setView([24.7136, 46.6753], 6);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
let markerLayer = L.layerGroup().addTo(map);
|
|
|
|
async function fetchHospitals() {
|
|
const res = await fetch('/api/resource/Location?fields=["name"]&filters={"custom_is_hospital":1}');
|
|
const json = await res.json();
|
|
const hospitalSelect = document.getElementById("hospital");
|
|
json.data.forEach(h => {
|
|
const opt = document.createElement("option");
|
|
opt.value = h.name;
|
|
opt.innerText = h.name;
|
|
hospitalSelect.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
async function fetchMapData(hospital) {
|
|
const url = `/api/method/asset_lite.map.get_active_map_data${hospital ? "?hospital=" + hospital : ""}`;
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
renderMap(data.message || []);
|
|
}
|
|
|
|
function renderMap(locations) {
|
|
markerLayer.clearLayers();
|
|
let bounds = [];
|
|
|
|
locations.forEach(loc => {
|
|
if (!loc.latitude || !loc.longitude) return;
|
|
const lat = parseFloat(loc.latitude);
|
|
const lng = parseFloat(loc.longitude);
|
|
if (isNaN(lat) || isNaN(lng)) return;
|
|
|
|
|
|
const popupContent = `
|
|
<div class="hospital-popup">
|
|
<div class="hospital-name">${loc.name}</div>
|
|
<div class="asset-count">Total Assets: ${loc.assets}</div>
|
|
|
|
|
|
<div style="margin: 10px 0;">
|
|
<b>Work Orders:</b>
|
|
<a href="/app/work_order?company=${loc.name}&custom_priority_=Normal" target="_blank"
|
|
style="color: blue; font-weight: bold; text-decoration: none;">
|
|
Normal: ${loc.normal_work_orders}
|
|
</a> ,
|
|
<a href="/app/work_order?company=${loc.name}&custom_priority_=Urgent" target="_blank"
|
|
style="color: red; font-weight: bold; text-decoration: none;">
|
|
Urgent: ${loc.urgent_work_orders}
|
|
</a>
|
|
</div>
|
|
|
|
<table class="wo-status-table">
|
|
<thead>
|
|
<tr><th>Status</th><th>Count</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="status-open">
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Open"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
Open
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Open"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
${loc.wo_open || 0}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr class="status-progress">
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Work In Progress"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
Work In Progress
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Work In Progress"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
${loc.wo_progress || 0}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr class="status-review">
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Pending Review"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
Pending Review
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Pending Review"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
${loc.wo_review || 0}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr class="status-completed">
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Completed"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
Completed
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a href="/app/work_order?company=${loc.name}&repair_status=Completed"
|
|
target="_blank" style="color: inherit; text-decoration: none; font-weight: bold;">
|
|
${loc.wo_completed || 0}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Preventive Maintenance -->
|
|
<div class="pm-count">
|
|
<b>Preventive Maintenance:</b><br>
|
|
<a href="/app/asset-maintenance-log?custom_hospital_name=${loc.name}&maintenance_status=Planned"
|
|
target="_blank" style="color: orange; font-weight: bold; text-decoration: none;">
|
|
Planned: ${loc.planned_maintenance}
|
|
</a> ,
|
|
<a href="/app/asset-maintenance-log?custom_hospital_name=${loc.name}&maintenance_status=Completed"
|
|
target="_blank" style="color: green; font-weight: bold; text-decoration: none;">
|
|
Completed: ${loc.completed_maintenance}
|
|
</a> ,
|
|
<a href="/app/asset-maintenance-log?custom_hospital_name=${loc.name}&maintenance_status=Overdue"
|
|
target="_blank" style="color: red; font-weight: bold; text-decoration: none;">
|
|
Overdue: ${loc.overdue_maintenance}
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="view-assets">
|
|
<button class="btn-xs btn-primary" onclick="window.open('/app/asset?company=${loc.name}', '_blank')">View Assets</button>
|
|
<button class="btn-xs btn-warning" onclick="window.open('/app/work_order?company=${loc.name}', '_blank')">View WOs</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
|
|
const tooltipContent = `
|
|
<div>
|
|
<b>${loc.name}</b><br>
|
|
Assets: ${loc.assets}<br>
|
|
<span style="color:black;">Normal WOs: ${loc.normal_work_orders}</span><br>
|
|
<span style="color:red;">Urgent WOs: ${loc.urgent_work_orders}</span><br>
|
|
<span style="color:orange;">Planned PMs: ${loc.planned_maintenance}</span><br>
|
|
<span style="color:green;">Completed PMs: ${loc.completed_maintenance}</span>
|
|
</div>
|
|
`;
|
|
|
|
const marker = L.marker([lat, lng])
|
|
.addTo(markerLayer)
|
|
.bindPopup(popupContent)
|
|
.bindTooltip(tooltipContent, { className: 'hospital-tooltip' });
|
|
|
|
// Add urgent marker effect if there are urgent work orders
|
|
if (loc.urgent_work_orders > 0) {
|
|
setTimeout(() => {
|
|
const markerElem = marker.getElement();
|
|
if (markerElem) {
|
|
markerElem.classList.add("urgent-marker", "red-marker");
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
bounds.push([lat, lng]);
|
|
});
|
|
|
|
if (bounds.length) {
|
|
map.fitBounds(bounds, { padding: [20, 20] });
|
|
}
|
|
}
|
|
|
|
document.getElementById("hospital").addEventListener("change", function () {
|
|
fetchMapData(this.value);
|
|
});
|
|
|
|
fetchHospitals().then(() => fetchMapData());
|
|
</script>
|
|
</body>
|
|
</html>
|