326 lines
20 KiB
PHP
326 lines
20 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include '../../header-telemetria.php';
|
|
?>
|
|
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<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>
|
|
<div class="d-flex align-items-center">
|
|
<button type="button" class="btn btn-primary me-2">
|
|
<i class="bx bx-plus me-1"></i> Nowy dashboard
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary me-2" id="toggleDashboardEditBtn" onclick="toggleDashboardEditMode()">
|
|
<i class="bx bx-customize me-1"></i> Tryb edycji
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#shareModal">
|
|
<i class="bx bx-share-alt me-1"></i> Udostępnij
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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 position-relative">
|
|
<div class="edit-mode-overlay d-none position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-75 zindex-2 d-flex flex-column justify-content-center align-items-center border border-2 border-dashed border-primary rounded" style="cursor: move;">
|
|
<i class="bx bx-move fs-1 text-primary mb-2"></i>
|
|
<button type="button" class="btn btn-sm btn-danger" onclick="this.closest('.col-xl-4').remove()"><i class="bx bx-trash"></i> Usuń z widoku</button>
|
|
</div>
|
|
<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 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 position-relative">
|
|
<div class="edit-mode-overlay d-none position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-75 zindex-2 d-flex flex-column justify-content-center align-items-center border border-2 border-dashed border-primary rounded" style="cursor: move;">
|
|
<i class="bx bx-move fs-1 text-primary mb-2"></i>
|
|
<button type="button" class="btn btn-sm btn-danger" onclick="this.closest('.col-xl-4').remove()"><i class="bx bx-trash"></i> Usuń z widoku</button>
|
|
</div>
|
|
<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 position-relative">
|
|
<div class="edit-mode-overlay d-none position-absolute top-0 start-0 w-100 h-100 bg-white bg-opacity-75 zindex-2 d-flex flex-column justify-content-center align-items-center border border-2 border-dashed border-primary rounded" style="cursor: move;">
|
|
<i class="bx bx-move fs-1 text-primary mb-2"></i>
|
|
<button type="button" class="btn btn-sm btn-danger" onclick="this.closest('.col-xl-4').remove()"><i class="bx bx-trash"></i> Usuń z widoku</button>
|
|
</div>
|
|
<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>
|
|
<!-- Dodaj kartę (Edit mode only) -->
|
|
<div class="col-xl-4 col-lg-6 col-md-6 edit-mode-item d-none">
|
|
<div class="card h-100 shadow-sm border-2 border-dashed border-primary bg-transparent d-flex justify-content-center align-items-center cursor-pointer hover-border-primary transition-all" style="min-height: 250px;">
|
|
<div class="text-center text-primary">
|
|
<i class="bx bx-plus-circle fs-1 mb-2"></i>
|
|
<h6 class="text-primary mb-0">Dodaj instalację do dashboardu</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDashboardEditMode() {
|
|
document.body.classList.toggle('dashboard-edit-mode');
|
|
const isEdit = document.body.classList.contains('dashboard-edit-mode');
|
|
|
|
document.querySelectorAll('.edit-mode-overlay, .edit-mode-item').forEach(el => {
|
|
if(isEdit) {
|
|
el.classList.remove('d-none');
|
|
} else {
|
|
el.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
const toggleBtn = document.getElementById('toggleDashboardEditBtn');
|
|
if(isEdit) {
|
|
toggleBtn.classList.replace('btn-outline-secondary', 'btn-success');
|
|
toggleBtn.innerHTML = '<i class="bx bx-check me-1"></i> Zakończ edycję';
|
|
} else {
|
|
toggleBtn.classList.replace('btn-success', 'btn-outline-secondary');
|
|
toggleBtn.innerHTML = '<i class="bx bx-customize me-1"></i> Tryb edycji';
|
|
}
|
|
}
|
|
|
|
function toggleLinkVisibility(checkbox) {
|
|
const linkContainer = document.getElementById('shareLinkContainer');
|
|
if (checkbox.checked) {
|
|
linkContainer.classList.remove('d-none');
|
|
} else {
|
|
linkContainer.classList.add('d-none');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Modal Udostępniania -->
|
|
<div class="modal fade" id="shareModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Udostępnianie Dashboardu</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Widoczność</label>
|
|
<div class="form-check form-switch mb-2">
|
|
<input class="form-check-input" type="checkbox" id="publicDashboardSwitch" onchange="toggleLinkVisibility(this)">
|
|
<label class="form-check-label" for="publicDashboardSwitch">Dashboard publiczny (dostęp przez link)</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 d-none" id="shareLinkContainer">
|
|
<label class="form-label">Link do udostępnienia</label>
|
|
<div class="input-group input-group-merge">
|
|
<input type="text" class="form-control" value="https://telemetria.magico/d/xyz123" readonly>
|
|
<span class="input-group-text cursor-pointer" onclick="alert('Skopiowano link!')"><i class="bx bx-copy"></i></span>
|
|
</div>
|
|
<small class="text-muted mt-1 d-block">Osoby posiadające ten link będą mogły zobaczyć dashboard tylko do odczytu.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zamknij</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Zapisz</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-backdrop fade"></div>
|
|
|
|
<?php include '../../footer.php'; ?>
|
|
|
|
</body>
|
|
|
|
</html>
|