Telemetria: Dodanie dashboardów
This commit is contained in:
@@ -4,18 +4,217 @@ include '../../header-telemetria.php';
|
||||
?>
|
||||
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<h4 class="fw-bold py-3 mb-4">
|
||||
Telemetria <span class="text-muted fw-light">/ Dashboard</span>
|
||||
</h4>
|
||||
<div class="d-flex justify-content-between align-items-center py-3 mb-4">
|
||||
<h4 class="fw-bold mb-0">
|
||||
Telemetria <span class="text-muted fw-light">/ Dashboard główny</span>
|
||||
</h4>
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="bx bx-share-alt me-1"></i> Udostępnij
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header border-bottom mb-3">
|
||||
<h5 class="card-title mb-0">Podsumowanie Telemetrii</h5>
|
||||
<div class="row g-4">
|
||||
<!-- Instalacja 1: Prawidłowa -->
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div
|
||||
class="card h-100 shadow-sm border-0 border-top border-warning border-3 hover-border-primary transition-all">
|
||||
<div class="card-header d-flex justify-content-between align-items-start border-bottom pb-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Zbiornik LPG #1</h6>
|
||||
<small class="text-muted"><i class="bx bx-map"></i> Stalowa Wola, ul. Przemysłowa 5</small>
|
||||
</div>
|
||||
<span class="badge bg-success"><i class="bx bx-wifi"></i> ONLINE</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Witaj w nowym module Telemetria. Ta makieta jest gotowa do dalszego rozwoju.</p>
|
||||
<div class="card-body pt-4 d-flex">
|
||||
<div class="me-4">
|
||||
<div class="tank-container position-relative" style="width: 70px; height: 160px;">
|
||||
<svg viewBox="0 0 100 300" width="100%" height="100%">
|
||||
<path d="M 35 260 L 30 295 M 65 260 L 70 295" stroke="#a1acb8" stroke-width="6"
|
||||
stroke-linecap="round" />
|
||||
<line x1="20" y1="295" x2="80" y2="295" stroke="#a1acb8" stroke-width="4"
|
||||
stroke-linecap="round" />
|
||||
<path d="M 20 40 A 30 20 0 0 1 80 40 L 80 250 A 30 20 0 0 1 20 250 Z" fill="#f8f9fa"
|
||||
stroke="#d9dee3" stroke-width="4" />
|
||||
<clipPath id="fillClip1">
|
||||
<path d="M 22 42 A 28 18 0 0 1 78 42 L 78 248 A 28 18 0 0 1 22 248 Z" />
|
||||
</clipPath>
|
||||
<defs>
|
||||
<linearGradient id="gasGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffab00" />
|
||||
<stop offset="100%" stop-color="#e69a00" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g clip-path="url(#fillClip1)">
|
||||
<rect x="0" y="120" width="100" height="250" fill="url(#gasGradient1)" />
|
||||
</g>
|
||||
<path d="M 20 90 A 30 10 0 0 0 80 90" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 150 A 30 10 0 0 0 80 150" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 210 A 30 10 0 0 0 80 210" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center"
|
||||
style="margin-top: -10px;">
|
||||
<h5 class="mb-0 fw-bolder text-dark"
|
||||
style="text-shadow: 0px 0px 5px rgba(255,255,255,0.8);">60%</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 d-flex flex-column justify-content-center">
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Objętość</span>
|
||||
<h4 class="mb-0 text-dark">1 620 <small class="text-muted fs-6 fw-normal">l</small></h4>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Ciśnienie</span>
|
||||
<h5 class="mb-0 text-dark">5.24 <small class="text-muted fs-6 fw-normal">bar</small></h5>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Bateria</span>
|
||||
<h6 class="mb-0 text-dark"><i class='bx bx-battery text-success me-1'></i> 12.4 V</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted"><i class="bx bx-time-five"></i> Odczyt: 2 min temu</small>
|
||||
<a href="installation-live.php" class="btn btn-sm btn-primary">Szczegóły</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instalacja 2: Alarm Niski Poziom -->
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card h-100 shadow-sm border-0 border-top border-danger border-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-start border-bottom pb-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Zbiornik LPG #2</h6>
|
||||
<small class="text-muted"><i class="bx bx-map"></i> Rzeszów, ul. Podkarpacka 12</small>
|
||||
</div>
|
||||
<span class="badge bg-danger"><i class="bx bx-error-circle"></i> ALARM</span>
|
||||
</div>
|
||||
<div class="card-body pt-4 d-flex">
|
||||
<div class="me-4">
|
||||
<div class="tank-container position-relative" style="width: 70px; height: 160px;">
|
||||
<svg viewBox="0 0 100 300" width="100%" height="100%">
|
||||
<path d="M 35 260 L 30 295 M 65 260 L 70 295" stroke="#a1acb8" stroke-width="6"
|
||||
stroke-linecap="round" />
|
||||
<line x1="20" y1="295" x2="80" y2="295" stroke="#a1acb8" stroke-width="4"
|
||||
stroke-linecap="round" />
|
||||
<path d="M 20 40 A 30 20 0 0 1 80 40 L 80 250 A 30 20 0 0 1 20 250 Z" fill="#f8f9fa"
|
||||
stroke="#d9dee3" stroke-width="4" />
|
||||
<clipPath id="fillClip2">
|
||||
<path d="M 22 42 A 28 18 0 0 1 78 42 L 78 248 A 28 18 0 0 1 22 248 Z" />
|
||||
</clipPath>
|
||||
<defs>
|
||||
<linearGradient id="gasGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff3e1d" />
|
||||
<stop offset="100%" stop-color="#cc3217" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g clip-path="url(#fillClip2)">
|
||||
<rect x="0" y="215" width="100" height="250" fill="url(#gasGradient2)" />
|
||||
</g>
|
||||
<path d="M 20 90 A 30 10 0 0 0 80 90" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 150 A 30 10 0 0 0 80 150" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 210 A 30 10 0 0 0 80 210" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center"
|
||||
style="margin-top: 30px;">
|
||||
<h5 class="mb-0 fw-bolder text-danger"
|
||||
style="text-shadow: 0px 0px 5px rgba(255,255,255,0.8);">12%</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 d-flex flex-column justify-content-center">
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Objętość</span>
|
||||
<h4 class="mb-0 text-danger fw-bold">324 <small class="text-muted fs-6 fw-normal">l</small>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Ciśnienie</span>
|
||||
<h5 class="mb-0 text-dark">3.10 <small class="text-muted fs-6 fw-normal">bar</small></h5>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Bateria</span>
|
||||
<h6 class="mb-0 text-dark"><i class='bx bx-battery text-success me-1'></i> 12.3 V</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-danger fw-bold"><i class="bx bx-error"></i> Niski poziom gazu!</small>
|
||||
<a href="installation-live.php" class="btn btn-sm btn-outline-danger">Zarządzaj</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instalacja 3: Offline -->
|
||||
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||
<div class="card h-100 shadow-sm border-0 border-top border-secondary border-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-start border-bottom pb-3">
|
||||
<div>
|
||||
<h6 class="mb-1 fw-bold text-dark">Zbiornik LPG #3</h6>
|
||||
<small class="text-muted"><i class="bx bx-map"></i> Lublin, Al. Kraśnicka 100</small>
|
||||
</div>
|
||||
<span class="badge bg-secondary"><i class="bx bx-wifi-off"></i> OFFLINE</span>
|
||||
</div>
|
||||
<div class="card-body pt-4 d-flex">
|
||||
<div class="me-4" style="opacity: 0.5; filter: grayscale(100%);">
|
||||
<div class="tank-container position-relative" style="width: 70px; height: 160px;">
|
||||
<svg viewBox="0 0 100 300" width="100%" height="100%">
|
||||
<path d="M 35 260 L 30 295 M 65 260 L 70 295" stroke="#a1acb8" stroke-width="6"
|
||||
stroke-linecap="round" />
|
||||
<line x1="20" y1="295" x2="80" y2="295" stroke="#a1acb8" stroke-width="4"
|
||||
stroke-linecap="round" />
|
||||
<path d="M 20 40 A 30 20 0 0 1 80 40 L 80 250 A 30 20 0 0 1 20 250 Z" fill="#f8f9fa"
|
||||
stroke="#d9dee3" stroke-width="4" />
|
||||
<clipPath id="fillClip3">
|
||||
<path d="M 22 42 A 28 18 0 0 1 78 42 L 78 248 A 28 18 0 0 1 22 248 Z" />
|
||||
</clipPath>
|
||||
<defs>
|
||||
<linearGradient id="gasGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#8592a3" />
|
||||
<stop offset="100%" stop-color="#697a8d" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g clip-path="url(#fillClip3)">
|
||||
<rect x="0" y="60" width="100" height="250" fill="url(#gasGradient3)" />
|
||||
</g>
|
||||
<path d="M 20 90 A 30 10 0 0 0 80 90" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 150 A 30 10 0 0 0 80 150" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
<path d="M 20 210 A 30 10 0 0 0 80 210" stroke="#d9dee3" stroke-width="2" fill="none" />
|
||||
</svg>
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center"
|
||||
style="margin-top: -30px;">
|
||||
<h5 class="mb-0 fw-bolder text-dark"
|
||||
style="text-shadow: 0px 0px 5px rgba(255,255,255,0.8);">85%</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 d-flex flex-column justify-content-center">
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Objętość
|
||||
(Ostatnia)</span>
|
||||
<h4 class="mb-0 text-muted">2 295 <small class="text-muted fs-6 fw-normal">l</small></h4>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Ciśnienie
|
||||
(Ostatnie)</span>
|
||||
<h5 class="mb-0 text-muted">6.12 <small class="text-muted fs-6 fw-normal">bar</small></h5>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted d-block small text-uppercase fw-bold mb-1">Bateria</span>
|
||||
<h6 class="mb-0 text-muted"><i class='bx bx-battery text-danger me-1'></i> 10.5 V (Low)</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted"><i class="bx bx-time-five"></i> Odczyt: Wczoraj, 18:40</small>
|
||||
<a href="installation-live.php" class="btn btn-sm btn-outline-secondary">Szczegóły</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,4 +226,5 @@ include '../../header-telemetria.php';
|
||||
<?php include '../../footer.php'; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -19,11 +19,28 @@ $currentPage = basename($_SERVER['PHP_SELF']);
|
||||
<span class="menu-header-text" data-i18n="Telemetria">Telemetria</span>
|
||||
</li>
|
||||
|
||||
<li class="menu-item <?php echo ($currentPage == 'index.php') ? 'active' : ''; ?>">
|
||||
<a href="index.php" class="menu-link">
|
||||
<li class="menu-item <?php echo ($currentPage == 'index.php' || $currentPage == 'dashboard-2.php') ? 'active open' : ''; ?>">
|
||||
<a href="javascript:void(0);" class="menu-link menu-toggle">
|
||||
<i class="menu-icon tf-icons bx bx-home-circle"></i>
|
||||
<div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
|
||||
<div class="text-truncate" data-i18n="Dashboardy">Dashboardy</div>
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item <?php echo ($currentPage == 'index.php') ? 'active' : ''; ?>">
|
||||
<a href="index.php" class="menu-link">
|
||||
<div class="text-truncate" data-i18n="Główny">Główny</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link">
|
||||
<div class="text-truncate" data-i18n="Tylko LPG">Tylko LPG</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link">
|
||||
<div class="text-truncate" data-i18n="Raport Dzienny">Raport Dzienny</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item <?php echo ($currentPage == 'installations.php') ? 'active' : ''; ?>">
|
||||
<a href="installations.php" class="menu-link">
|
||||
|
||||
Reference in New Issue
Block a user