166 lines
8.6 KiB
PHP
166 lines
8.6 KiB
PHP
<?php
|
|
require_once 'includes/auth_check.php';
|
|
require_once 'includes/db_connect.php';
|
|
|
|
$user_id = $_SESSION['user_id'];
|
|
|
|
// Lade alle aktiven Pflanzen, die mindestens einen Sensoreintrag haben
|
|
$plants_with_sensors = [];
|
|
$sql = "SELECT DISTINCT p.id,
|
|
s.strain_name,
|
|
s.internal_name,
|
|
z.name AS zone_name,
|
|
c.name AS container_name
|
|
FROM plants p
|
|
JOIN seeds s ON p.seed_id = s.id
|
|
JOIN zones z ON p.zone_id = z.id
|
|
JOIN containers c ON p.container_id = c.id
|
|
JOIN sensor_data sd ON p.id = sd.plant_id
|
|
WHERE p.user_id = ? AND p.status = 'Eingepflanzt'
|
|
ORDER BY c.name ASC";
|
|
|
|
if ($stmt = $mysqli->prepare($sql)) {
|
|
$stmt->bind_param("i", $user_id);
|
|
$stmt->execute();
|
|
$result = $stmt->get_result();
|
|
while ($row = $result->fetch_assoc()) {
|
|
$plants_with_sensors[] = $row;
|
|
}
|
|
$stmt->close();
|
|
}
|
|
|
|
require_once 'includes/header.php';
|
|
?>
|
|
|
|
<div class="card header-card mb-4">
|
|
<div class="card-body">
|
|
<h1 class="mb-0">Sensor-Übersicht</h1>
|
|
<p class="card-text mt-2">Live-Daten aller deiner aktiven Pflanzen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center gap-2 mb-4">
|
|
<button class="btn btn-sm btn-outline-dark sensor-range-btn active" data-range="24h">24 Stunden</button>
|
|
<button class="btn btn-sm btn-outline-dark sensor-range-btn" data-range="7d">7 Tage</button>
|
|
<button class="btn btn-sm btn-outline-dark sensor-range-btn" data-range="30d">30 Tage</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<?php if (empty($plants_with_sensors)): ?>
|
|
<div class="col-12">
|
|
<div class="alert alert-light text-center border shadow-sm">
|
|
<h5>Keine Sensordaten verfügbar</h5>
|
|
<p class="text-muted">Für deine aktiven Pflanzen wurden noch keine Sensordaten über die API gesendet.</p>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php foreach ($plants_with_sensors as $plant): ?>
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm" style="background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);">
|
|
<div class="card-header bg-dark text-white py-3">
|
|
<h5 class="mb-0 fs-6 text-white fw-bold text-uppercase ls-1">
|
|
<a href="plant_detail.php?id=<?php echo $plant['id']; ?>" class="text-white text-decoration-none">
|
|
<?php echo htmlspecialchars($plant['container_name']); ?>
|
|
<span class="text-white-50 fw-normal mx-1">|</span>
|
|
<?php echo htmlspecialchars($plant['strain_name']); ?>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row sensor-chart-group" data-plant-id="<?php echo $plant['id']; ?>">
|
|
<div class="col-md-6 mb-3 mb-md-0" id="temp-chart-wrapper-<?php echo $plant['id']; ?>">
|
|
<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm" role="status"></div></div>
|
|
</div>
|
|
<div class="col-md-6" id="humidity-chart-wrapper-<?php echo $plant['id']; ?>">
|
|
<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm" role="status"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Store chart instances to destroy them before re-creating
|
|
const charts = {};
|
|
|
|
function loadAllCharts(range) {
|
|
$('.sensor-chart-group').each(function() {
|
|
const plantId = $(this).data('plant-id');
|
|
const tempWrapper = $(this).find('#temp-chart-wrapper-' + plantId);
|
|
const humidityWrapper = $(this).find('#humidity-chart-wrapper-' + plantId);
|
|
|
|
// Show spinners only if empty (optional UX choice, here we force reload)
|
|
// tempWrapper.html('<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm"></div></div>');
|
|
// humidityWrapper.html('<div class="text-center p-4"><div class="spinner-border text-secondary spinner-border-sm"></div></div>');
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'ajax_handler.php',
|
|
data: { action: 'get_sensor_data', plant_id: plantId, range: range },
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
tempWrapper.empty();
|
|
humidityWrapper.empty();
|
|
|
|
if (response.success && response.data.labels.length > 0) {
|
|
// Temp Chart
|
|
if (response.data.temperature.some(v => v !== null)) {
|
|
tempWrapper.append('<h6 class="text-center fw-bold text-dark mb-2">Temperatur</h6>');
|
|
let canvasId = 'temp-canvas-' + plantId;
|
|
tempWrapper.append($('<div style="height: 180px;">').append($('<canvas id="' + canvasId + '">')));
|
|
|
|
if(charts[canvasId]) charts[canvasId].destroy();
|
|
charts[canvasId] = new Chart(document.getElementById(canvasId), {
|
|
type: 'line',
|
|
data: { labels: response.data.labels, datasets: [{ label: '°C', data: response.data.temperature, borderColor: '#ff6b6b', backgroundColor: 'rgba(255, 107, 107, 0.1)', fill: true, tension: 0.3, pointRadius: 3, pointHoverRadius: 5 }] },
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { ticks: { color: '#212529', font: { size: 12 } }, grid: { color: 'rgba(0,0,0,0.05)' } } } }
|
|
});
|
|
} else {
|
|
tempWrapper.html('<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Keine Temperaturdaten</div>');
|
|
}
|
|
|
|
// Humidity Chart
|
|
if (response.data.humidity.some(v => v !== null)) {
|
|
humidityWrapper.append('<h6 class="text-center fw-bold text-dark mb-2">Feuchtigkeit</h6>');
|
|
let canvasId = 'humidity-canvas-' + plantId;
|
|
humidityWrapper.append($('<div style="height: 180px;">').append($('<canvas id="' + canvasId + '">')));
|
|
|
|
if(charts[canvasId]) charts[canvasId].destroy();
|
|
charts[canvasId] = new Chart(document.getElementById(canvasId), {
|
|
type: 'line',
|
|
data: { labels: response.data.labels, datasets: [{ label: '%', data: response.data.humidity, borderColor: '#4dabf7', backgroundColor: 'rgba(77, 171, 247, 0.1)', fill: true, tension: 0.3, pointRadius: 3, pointHoverRadius: 5 }] },
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { ticks: { color: '#212529', font: { size: 12 } }, grid: { color: 'rgba(0,0,0,0.05)' } } } }
|
|
});
|
|
} else {
|
|
humidityWrapper.html('<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Keine Feuchtigkeitsdaten</div>');
|
|
}
|
|
} else {
|
|
const noDataHtml = '<div class="col-12 text-center py-4 text-muted small">Keine Sensordaten für diesen Zeitraum.</div>';
|
|
tempWrapper.parent().html(noDataHtml);
|
|
}
|
|
},
|
|
error: function() {
|
|
const errorHtml = '<div class="col-12 text-center py-4 text-danger small">Fehler beim Laden.</div>';
|
|
tempWrapper.parent().html(errorHtml);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Initial load
|
|
loadAllCharts('24h');
|
|
|
|
// Filter click handler
|
|
$('.sensor-range-btn').click(function() {
|
|
$('.sensor-range-btn').removeClass('active');
|
|
$(this).addClass('active');
|
|
loadAllCharts($(this).data('range'));
|
|
});
|
|
});
|
|
</script>
|