BartekGit/magico.prototype
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Telemetria: Dashboard v2

Browse Source
This commit is contained in:
Bartek
2026-06-19 15:35:45 +02:00
parent 351898cdc5
commit 2d749776fc
1 changed files with 102 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
prototype/telemetria/index.php
View File

@@ -8,16 +8,28 @@ include '../../header-telemetria.php';
<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 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">
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>
@@ -84,7 +96,11 @@ include '../../header-telemetria.php';
<!-- 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 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>
@@ -152,7 +168,11 @@ include '../../header-telemetria.php';
<!-- 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 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>
@@ -218,6 +238,82 @@ include '../../header-telemetria.php';
</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>