Spaces:
Paused
Paused
| <html lang="uz"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Monitoring Dashboard - Help.me</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Bootstrap Icons --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> | |
| <!-- Leaflet CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <!-- Leaflet MarkerCluster CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" /> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" /> | |
| <!-- Custom Styles --> | |
| <link rel="stylesheet" href="/static/dispatcher/style.css"> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary sticky-top shadow-sm"> | |
| <div class="container-fluid"> | |
| <span class="navbar-brand fw-bold"> | |
| <i class="bi bi-hospital-fill me-2"></i> | |
| HELP.ME Dashboard | |
| <span class="badge bg-success ms-2 pulse-badge">LIVE</span> | |
| </span> | |
| <div class="d-flex align-items-center gap-2"> | |
| <button class="btn btn-sm btn-light" onclick="window.location.reload()"> | |
| <i class="bi bi-arrow-clockwise"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Stats Cards --> | |
| <div class="container-fluid mt-3 px-4"> | |
| <div class="row g-3 mb-4"> | |
| <div class="col-lg-3 col-md-6"> | |
| <div class="stats-card stats-card-danger"> | |
| <div class="stats-icon"> | |
| <i class="bi bi-ambulance-fill"></i> | |
| </div> | |
| <div class="stats-content"> | |
| <h3 id="stat-emergency" class="mb-0">0</h3> | |
| <p class="text-muted mb-0 small">Tez Yordam</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-md-6"> | |
| <div class="stats-card stats-card-warning"> | |
| <div class="stats-icon"> | |
| <i class="bi bi-hourglass-split"></i> | |
| </div> | |
| <div class="stats-content"> | |
| <h3 id="stat-uncertain" class="mb-0">0</h3> | |
| <p class="text-muted mb-0 small">Noaniq</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-md-6"> | |
| <div class="stats-card stats-card-success"> | |
| <div class="stats-icon"> | |
| <i class="bi bi-hospital"></i> | |
| </div> | |
| <div class="stats-content"> | |
| <h3 id="stat-clinic" class="mb-0">0</h3> | |
| <p class="text-muted mb-0 small">Klinika</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-lg-3 col-md-6"> | |
| <div class="stats-card stats-card-info"> | |
| <div class="stats-icon"> | |
| <i class="bi bi-check-circle-fill"></i> | |
| </div> | |
| <div class="stats-content"> | |
| <h3 id="stat-total" class="mb-0">0</h3> | |
| <p class="text-muted mb-0 small">Jami</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content: Cases + Map --> | |
| <div class="row g-4 mb-4"> | |
| <!-- Cases List (70% width) --> | |
| <div class="col-lg-8"> | |
| <div class="card shadow-sm border-0 rounded-3"> | |
| <div class="card-header bg-white border-0 pt-3 pb-2"> | |
| <div class="d-flex justify-content-between align-items-center flex-wrap"> | |
| <h5 class="mb-2 mb-md-0"> | |
| <i class="bi bi-list-ul me-2 text-primary"></i> | |
| <strong>Aktiv Murojatlar</strong> | |
| </h5> | |
| <div class="btn-group btn-group-sm" role="group"> | |
| <button type="button" class="btn btn-outline-danger" onclick="filterCases('qizil')"> | |
| Qizil | |
| </button> | |
| <button type="button" class="btn btn-outline-warning" onclick="filterCases('sariq')"> | |
| Sariq | |
| </button> | |
| <button type="button" class="btn btn-outline-success" onclick="filterCases('yashil')"> | |
| Yashil | |
| </button> | |
| <button type="button" class="btn btn-outline-secondary active" | |
| onclick="filterCases(null)"> | |
| Hammasi | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-body p-0"> | |
| <div id="cases-container" class="cases-scroll-container"> | |
| <!-- Cases will be loaded here --> | |
| <div class="text-center py-5"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">Yuklanmoqda...</span> | |
| </div> | |
| <p class="mt-3 text-muted">Murojatlar yuklanmoqda...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map (30% width) --> | |
| <div class="col-lg-4"> | |
| <div class="card shadow-sm border-0 rounded-3 sticky-map"> | |
| <div class="card-header bg-white border-0 pt-3 pb-2"> | |
| <div class="d-flex justify-content-between align-items-center"> | |
| <h6 class="mb-0"> | |
| <i class="bi bi-geo-alt-fill me-2 text-danger"></i> | |
| <strong>Klinikalar</strong> | |
| </h6> | |
| <div class="btn-group btn-group-sm" role="group"> | |
| <button type="button" class="btn btn-sm btn-outline-primary active" | |
| onclick="toggleMapLayer('all')" id="btn-all"> | |
| <i class="bi bi-circle-fill"></i> | |
| </button> | |
| <button type="button" class="btn btn-sm btn-outline-info" | |
| onclick="toggleMapLayer('davlat')" id="btn-davlat"> | |
| <i class="bi bi-circle-fill"></i> | |
| </button> | |
| <button type="button" class="btn btn-sm btn-outline-success" | |
| onclick="toggleMapLayer('xususiy')" id="btn-xususiy"> | |
| <i class="bi bi-circle-fill"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-body p-0"> | |
| <!-- Leaflet Map --> | |
| <div id="clinic-map" class="rounded-bottom"></div> | |
| </div> | |
| <div class="card-footer bg-light border-0 py-2"> | |
| <div class="d-flex justify-content-around text-center small"> | |
| <div> | |
| <i class="bi bi-circle-fill text-info"></i> | |
| <span class="ms-1">Davlat</span> | |
| </div> | |
| <div> | |
| <i class="bi bi-circle-fill text-success"></i> | |
| <span class="ms-1">Xususiy</span> | |
| </div> | |
| <div> | |
| <i class="bi bi-circle-fill text-danger"></i> | |
| <span class="ms-1">Brigade</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- STATISTIKA GRAFIKLARI (ENG PASTDA) --> | |
| <div class="row g-4 mb-4"> | |
| <!-- Cases by Hour --> | |
| <div class="col-lg-6"> | |
| <div class="card shadow-sm border-0 rounded-3"> | |
| <div class="card-header bg-white border-0 pt-3"> | |
| <h6 class="mb-0"> | |
| <i class="bi bi-graph-up me-2 text-primary"></i> | |
| <strong>Soatlik Murojatlar</strong> | |
| </h6> | |
| </div> | |
| <div class="card-body"> | |
| <canvas id="casesHourlyChart" height="200"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Risk Distribution --> | |
| <div class="col-lg-3"> | |
| <div class="card shadow-sm border-0 rounded-3"> | |
| <div class="card-header bg-white border-0 pt-3"> | |
| <h6 class="mb-0"> | |
| <i class="bi bi-pie-chart me-2 text-danger"></i> | |
| <strong>Risk Taqsimoti</strong> | |
| </h6> | |
| </div> | |
| <div class="card-body text-center"> | |
| <canvas id="riskDistributionChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Brigades --> | |
| <div class="col-lg-3"> | |
| <div class="card shadow-sm border-0 rounded-3 bg-gradient-primary text-white"> | |
| <div class="card-body text-center py-4"> | |
| <div class="mb-3"> | |
| <i class="bi bi-ambulance-fill" style="font-size: 3rem; opacity: 0.8;"></i> | |
| </div> | |
| <h2 class="mb-1" id="active-brigades-count">0</h2> | |
| <p class="mb-0 small">Aktiv Brigadalar</p> | |
| <hr class="my-3" style="opacity: 0.3;"> | |
| <div class="d-flex justify-content-around small"> | |
| <div> | |
| <div class="fw-bold" id="busy-brigades">0</div> | |
| <div style="opacity: 0.8;">Bandlik</div> | |
| </div> | |
| <div> | |
| <div class="fw-bold" id="available-brigades">0</div> | |
| <div style="opacity: 0.8;">Bo'sh</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clinic Details Modal --> | |
| <div class="modal fade" id="clinicModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"> | |
| <div class="modal-content border-0 shadow-lg rounded-4"> | |
| <div class="modal-header bg-gradient-primary text-white border-0"> | |
| <h5 class="modal-title fw-bold" id="clinicModalTitle"> | |
| <i class="bi bi-hospital-fill me-2"></i> | |
| Klinika Ma'lumotlari | |
| </h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body p-4" id="clinicModalBody"> | |
| <!-- Clinic details will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart.js CDN --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Leaflet JS --> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <!-- Leaflet MarkerCluster JS --> | |
| <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script> | |
| <!-- Custom Script --> | |
| <script src="/static/dispatcher/script.js"></script> | |
| </body> | |
| </html> |