From 9424f1857f28f0bd135f61900ed084ab75990520 Mon Sep 17 00:00:00 2001
From: Hickmeister <35031453+Hickmeister@users.noreply.github.com>
Date: Mon, 13 Jan 2025 21:35:48 +0000
Subject: [PATCH] Filament dryer page

---
 public/filamentDryer.php | 512 +++++++++++++++++++++++++++++++++++++++
 src/nav.php              |   9 +
 2 files changed, 521 insertions(+)
 create mode 100644 public/filamentDryer.php
diff --git a/public/filamentDryer.php b/public/filamentDryer.php
new file mode 100644
index 0000000..666fbca
--- /dev/null
+++ b/public/filamentDryer.php
@@ -0,0 +1,512 @@
+<?php include '../src/session_check.php';
+checkUserRole(['admin']);
+?>
+
+<html lang="en" data-bs-theme="light">
+<head>
+	<!-- Required meta tags -->
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<!--favicon-->
+	<link rel="icon" href="../assets/images/favicon-32x32.png" type="image/png">
+	<!--plugins-->
+	<link href="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet">
+	<link href="../assets/plugins/simplebar/css/simplebar.css" rel="stylesheet">
+	<link href="../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
+	<link href="../assets/plugins/metismenu/css/metisMenu.min.css" rel="stylesheet">
+	<!-- loader-->
+	<link href="../assets/css/pace.min.css" rel="stylesheet"/>    
+	<script src="../assets/js/pace.min.js"></script>
+	<!-- Bootstrap CSS -->
+	<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
+	<link href="../assets/css/bootstrap-extended.css" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+	
+	<link href="../assets/sass/app.css" rel="stylesheet">
+	<link href="../assets/css/icons.css" rel="stylesheet">
+	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+	<!-- Theme Style CSS -->
+	<link rel="stylesheet" href="../assets/sass/dark-theme.css">
+	<link rel="stylesheet" href="../assets/sass/semi-dark.css">
+	<link rel="stylesheet" href="../assets/sass/bordered-theme.css">
+	
+	<title>TOD Dashboard</title>
+</head>
+
+<body>
+	<!--wrapper-->
+	<div class="wrapper">
+		<!--sidebar wrapper -->
+		<?php include '../src/nav.php'; ?>
+		<!--end sidebar wrapper -->
+		<!--start header -->
+		<?php include '../src/header.php'; ?>
+		<!--end header -->
+
+		<!--start page wrapper -->
+		<div class="page-wrapper">
+			<div class="page-content">
+<!--start page content -->
+<div class="container mt-4">
+    <div class="row">
+                    <div class="col-lg-4">
+						<div class="card bg-danger radius-10 overflow-hidden">
+							<div class="card-body">
+								<div class="d-flex align-items-center">
+									<div>
+										<p class="mb-0">Dryer Status</p>
+										<h5 class="mb-0">STATUS</h5>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+                    <div class="col-lg-4">
+						<div class="card bg-danger radius-10 overflow-hidden" id="heaterRelayStatus">
+							<div class="card-body">
+								<div class="d-flex align-items-center">
+									<div>
+										<p class="mb-0">Heater Status</p>
+										<h5 class="mb-0">STATUS</h5>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+                    <div class="col-lg-4">
+						<div class="card bg-danger radius-10 overflow-hidden" id="fanRelayStatus">
+							<div class="card-body">
+								<div class="d-flex align-items-center">
+									<div>
+										<p class="mb-0">Fan Status</p>
+										<h5 class="mb-0">STATUS</h5>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+    </div>    
+    <div class="row">
+        <!-- Left Column - Charts -->
+        <div class="col-lg-7">
+            <div class="row">
+                <!-- Temperature Chart -->
+                <div class="col-lg-12 mb-4">
+                    <div class="card radius-10 overflow-hidden">
+                        <div class="card-body d-flex align-items-center justify-content-between">
+                            <div>
+                                <p class="mb-0 filament-name">Temp:</p>
+                                <h5 class="mb-0" id="temperatureValue">--°C</h5>
+                            </div>
+                        </div>
+                        <div id="tempChart"></div>
+                    </div>
+                </div>
+                <!-- Humidity Chart -->
+                <div class="col-lg-12 mb-4">
+                    <div class="card radius-10 overflow-hidden">
+                        <div class="card-body d-flex align-items-center justify-content-between">
+                            <div>
+                                <p class="mb-0 filament-name">Humidity:</p>
+                                <h5 class="mb-0" id="humidityValue">--%</h5>
+                            </div>
+                        </div>
+                        <div id="humidityChart"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Column - Dryer Control Form -->
+        <div class="col-lg-5">
+            <div class="card radius-10 overflow-hidden">
+                <div class="card-header bg-primary text-white">
+                    <h5 class="mb-0">Filament Dryer Control</h5>
+                </div>
+                <div class="card-body">
+                    <form id="dryerControlForm">
+                        <div class="mb-3">
+                            <label for="filamentPreset" class="form-label">Filament Preset</label>
+                            <select class="form-select" id="filamentPreset" name="filamentPreset" required>
+                                <option value="">Select Filament Type</option>
+                                <option value="PLA" data-temp="50">PLA</option>
+                                <option value="ABS" data-temp="70">ABS</option>
+                                <option value="PETG" data-temp="65">PETG</option>
+                                <option value="Nylon" data-temp="80">Nylon</option>
+                                <option value="TPU" data-temp="45">TPU</option>
+                                <option value="Custom" data-temp="">Custom</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="dryingTime" class="form-label">Drying Time (Hours)</label>
+                            <input type="number" class="form-control" id="dryingTime" name="dryingTime" min="1" max="24" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="temperature" class="form-label">Drying Temperature (°C)</label>
+                            <input type="number" class="form-control" id="temperature" name="temperature" min="30" max="100" required>
+                        </div>
+
+                        <div class="d-flex justify-content-between">
+                            <button type="submit" class="btn btn-success">Start Drying</button>
+                            <button type="button" class="btn btn-danger" id="dryerOff">Turn Off Dryer</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Progress Bar Section -->
+            <div class="card mt-4 radius-10 overflow-hidden">
+                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0">Drying Progress</h5>
+                </div>
+                <div class="card-body">
+                    <div class="progress mb-2">
+                        <div class="progress-bar bg-success" id="dryingProgress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                    <p class="mb-0">Time Set: <span id="dryingTimeDisplay">--</span></p>
+                    <p class="mb-0">Remaining Time: <span id="remainingTimeDisplay">--</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--end page content -->
+
+
+
+			</div>
+		</div>
+		<!--end page wrapper -->
+
+
+	<!-- search modal -->
+    <div class="modal" id="SearchModal" tabindex="-1">
+		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-md-down">
+		  <div class="modal-content">
+			<div class="modal-header gap-2">
+			  <div class="position-relative popup-search w-100">
+				<input class="form-control form-control-lg ps-5 border border-3 border-primary" type="search" placeholder="Search">
+				<span class="position-absolute top-50 search-show ms-3 translate-middle-y start-0 top-50 fs-4"><i class='bx bx-search'></i></span>
+			  </div>
+			  <button type="button" class="btn-close d-md-none" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+		  </div>
+		</div>
+	  </div>
+    <!-- end search modal -->
+
+	<!-- Bootstrap JS -->
+	<script src="../assets/js/bootstrap.bundle.min.js"></script>
+	<!--plugins-->
+	<script src="../assets/js/jquery.min.js"></script>
+	<script src="../assets/plugins/simplebar/js/simplebar.min.js"></script>
+	<script src="../assets/plugins/metismenu/js/metisMenu.min.js"></script>
+	<script src="../assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
+	<script src="../assets/plugins/apexcharts-bundle/js/apexcharts.min.js"></script>
+	<!--app JS-->
+	<script src="../assets/js/app.js"></script>
+
+	<script src="../assets/js/index.js"></script>
+	<script src="../assets/plugins/peity/jquery.peity.min.js"></script>
+    <script>
+       $(".data-attributes span").peity("donut")
+    </script>
+
+    <script>
+document.addEventListener("DOMContentLoaded", function () {
+    const ESP32_IP = 'https://filamentdry.hickmeister.uk'; // Replace with your ESP32 IP
+    let tempChart, humidityChart;
+
+    // Fetch ESP32 Status Data
+    function fetchDryerStatus() {
+        fetch(`${ESP32_IP}/status`)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.dryerOn !== undefined) {
+                    updateTemperatureCard(data);
+                    updateHumidityCard(data);
+                    updateStatusCards(data);
+                    updateProgressBar(data); // Update progress bar and time displays
+                } else {
+                    console.error("Dryer offline or no data available");
+                    showOfflineStatus();
+                }
+            })
+            .catch(error => {
+                console.error("Failed to fetch dryer status:", error);
+                showOfflineStatus();
+            });
+    }
+
+    // Control Dryer
+    function controlDryer(dryerOn, targetTemperature, dryingTimeInMinutes) {
+        const formData = new URLSearchParams();
+        formData.append("dryerOn", dryerOn);
+        formData.append("targetTemperature", targetTemperature);
+        formData.append("dryingTime", dryingTimeInMinutes);
+
+        fetch(`${ESP32_IP}/control`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: formData.toString(),
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Dryer control updated:', data);
+                fetchDryerStatus(); // Refresh status after control update
+            })
+            .catch(error => {
+                console.error('Failed to update dryer control:', error);
+            });
+    }
+
+    // Prevent Form Submission Refresh
+    const dryerControlForm = document.getElementById("dryerControlForm");
+    if (dryerControlForm) {
+        dryerControlForm.addEventListener("submit", function (event) {
+            event.preventDefault();
+
+            // Collect form data
+            const formData = new FormData(dryerControlForm);
+            const dryerOn = true; // Always true when starting the dryer
+            const filamentPreset = formData.get("filamentPreset");
+            const dryingTimeInHours = parseFloat(formData.get("dryingTime"));
+            const targetTemperature = parseFloat(formData.get("temperature"));
+
+            // Validate Input
+            if (!filamentPreset || isNaN(dryingTimeInHours) || isNaN(targetTemperature)) {
+                alert("Please complete all required fields.");
+                return;
+            }
+
+            // Convert drying time to minutes
+            const dryingTimeInMinutes = Math.round(dryingTimeInHours * 60);
+
+            // Control Dryer
+            controlDryer(dryerOn, targetTemperature, dryingTimeInMinutes);
+        });
+    }
+
+    // Handle Turn Off Dryer
+    const dryerOffButton = document.getElementById("dryerOff");
+    if (dryerOffButton) {
+        dryerOffButton.addEventListener("click", function () {
+            controlDryer(false, 0, 0); // Turn off the dryer
+        });
+    }
+
+    // Auto-Fill Temperature Input Based on Filament Preset
+    const filamentPresetSelect = document.getElementById("filamentPreset");
+    const temperatureInput = document.getElementById("temperature");
+
+    if (filamentPresetSelect && temperatureInput) {
+        filamentPresetSelect.addEventListener("change", function () {
+            const selectedOption = filamentPresetSelect.options[filamentPresetSelect.selectedIndex];
+            const presetTemperature = selectedOption.getAttribute("data-temp");
+
+            if (presetTemperature) {
+                temperatureInput.value = presetTemperature; // Auto-fill temperature input
+            } else {
+                temperatureInput.value = ""; // Clear the temperature input for "Custom"
+            }
+        });
+    }
+
+    // Update Progress Bar and Time Display
+    function updateProgressBar(data) {
+        const progressBar = document.getElementById("dryingProgress");
+        const dryingTimeEl = document.getElementById("dryingTimeDisplay"); // Total drying time display
+        const remainingTimeDisplay = document.getElementById("remainingTimeDisplay"); // Remaining time display
+
+        const dryingTime = data.dryingTime || 0; // Total drying time in minutes
+        const remainingTime = data.remainingTime || 0; // Remaining time in minutes
+
+        // Reset progress bar if the dryer is turned off
+        if (!data.dryerOn) {
+            if (progressBar) {
+                progressBar.style.width = "0%";
+                progressBar.setAttribute("aria-valuenow", 0);
+            }
+            if (dryingTimeEl) {
+                dryingTimeEl.innerText = "Total: 0h 0m";
+            }
+            if (remainingTimeDisplay) {
+                remainingTimeDisplay.innerText = "Remaining: 0h 0m";
+            }
+            return; // Exit early as no further updates are needed
+        }
+
+        // Update progress bar when the dryer is on
+        if (progressBar && dryingTime > 0) {
+            const progressPercent = ((dryingTime - remainingTime) / dryingTime) * 100;
+            progressBar.style.width = `${progressPercent}%`;
+            progressBar.setAttribute("aria-valuenow", progressPercent.toFixed(0));
+        }
+
+        // Update time displays
+        if (dryingTimeEl) {
+            dryingTimeEl.innerText = `Total: ${convertToHoursAndMinutes(dryingTime)}`;
+        }
+        if (remainingTimeDisplay) {
+            remainingTimeDisplay.innerText = `Remaining: ${convertToHoursAndMinutes(remainingTime)}`;
+        }
+    }
+
+    // Convert minutes to hours and minutes
+    function convertToHoursAndMinutes(minutes) {
+        const hours = Math.floor(minutes / 60);
+        const mins = minutes % 60;
+        return `${hours}h ${mins}m`;
+    }
+
+    // Update Temperature Card and Chart
+    function updateTemperatureCard(data) {
+        const temperature = data.temperature.toFixed(1); // Limit temperature to 1 decimal place
+        const tempHistory = data.tempHistory.map(temp => parseFloat(temp.toFixed(1))); // Limit history data
+        const timestamps = Array.from({ length: tempHistory.length }, (_, i) => `${i + 1}`);
+
+        document.getElementById('temperatureValue').innerText = `${temperature}°C`;
+
+        const options = {
+            series: [{ name: "Temperature", data: tempHistory }],
+            chart: {
+                type: 'area',
+                height: 150,
+                toolbar: { show: false },
+                sparkline: { enabled: true },
+                id: 'tempChart',
+            },
+            stroke: { curve: 'smooth' },
+            xaxis: { categories: timestamps, labels: { show: false } },
+            tooltip: {
+                theme: 'dark',
+                x: { show: false },
+                y: { formatter: value => `${value.toFixed(1)}°C` },
+            },
+        };
+
+        if (!tempChart) {
+            tempChart = new ApexCharts(document.querySelector("#tempChart"), options);
+            tempChart.render();
+        } else {
+            tempChart.updateSeries([{ data: tempHistory }]);
+        }
+    }
+
+    // Update Humidity Card and Chart
+    function updateHumidityCard(data) {
+        const humidity = data.humidity.toFixed(1);
+        const humidityHistory = data.humidityHistory || [];
+        const timestamps = Array.from({ length: humidityHistory.length }, (_, i) => `${i + 1}`);
+
+        document.getElementById('humidityValue').innerText = `${humidity}%`;
+
+        const options = {
+            series: [{ name: "Humidity", data: humidityHistory }],
+            chart: {
+                type: 'area',
+                height: 150,
+                toolbar: { show: false },
+                sparkline: { enabled: true },
+                id: 'humidityChart',
+            },
+            stroke: { curve: 'smooth' },
+            xaxis: { categories: timestamps, labels: { show: false } },
+            tooltip: {
+                theme: 'dark',
+                x: { show: false },
+                y: { formatter: value => `${value.toFixed(1)}%` },
+            },
+        };
+
+        if (!humidityChart) {
+            humidityChart = new ApexCharts(document.querySelector("#humidityChart"), options);
+            humidityChart.render();
+        } else {
+            humidityChart.updateSeries([{ data: humidityHistory }]);
+        }
+    }
+
+    // Update Status Cards
+    function updateStatusCards(data) {
+        const dryerStatusCard = document.querySelector('.card:nth-child(1)');
+        const heaterStatusCard = document.getElementById('heaterRelayStatus');
+        const fanStatusCard = document.getElementById('fanRelayStatus');
+
+        const dryerState = data.dryerOn ? "On" : "Off";
+        const fanRelayState = data.fanRelayState ? "On" : "Off";
+        const heaterRelayState = data.heaterRelayState ? "On" : "Off";
+
+        if (dryerStatusCard) {
+            dryerStatusCard.classList.toggle("bg-success", dryerState === "On");
+            dryerStatusCard.classList.toggle("bg-danger", dryerState === "Off");
+            dryerStatusCard.querySelector("h5").innerText = dryerState;
+        }
+
+        if (heaterStatusCard) {
+            heaterStatusCard.classList.toggle("bg-success", heaterRelayState === "On");
+            heaterStatusCard.classList.toggle("bg-danger", heaterRelayState === "Off");
+            heaterStatusCard.querySelector("h5").innerText = heaterRelayState;
+        }
+
+        if (fanStatusCard) {
+            fanStatusCard.classList.toggle("bg-success", fanRelayState === "On");
+            fanStatusCard.classList.toggle("bg-danger", fanRelayState === "Off");
+            fanStatusCard.querySelector("h5").innerText = fanRelayState;
+        }
+    }
+
+    // Show Offline Status
+    function showOfflineStatus() {
+        const dryerStatusCard = document.querySelector('.card:nth-child(1)');
+        const heaterStatusCard = document.getElementById('heaterRelayStatus');
+        const fanStatusCard = document.getElementById('fanRelayStatus');
+        const progressBar = document.getElementById("dryingProgress");
+
+        if (dryerStatusCard) {
+            dryerStatusCard.classList.remove("bg-success");
+            dryerStatusCard.classList.add("bg-danger");
+            dryerStatusCard.querySelector("h5").innerText = "Offline";
+        }
+
+        if (heaterStatusCard) {
+            heaterStatusCard.classList.remove("bg-success");
+            heaterStatusCard.classList.add("bg-danger");
+            heaterStatusCard.querySelector("h5").innerText = "Offline";
+        }
+
+        if (fanStatusCard) {
+            fanStatusCard.classList.remove("bg-success");
+            fanStatusCard.classList.add("bg-danger");
+            fanStatusCard.querySelector("h5").innerText = "Offline";
+        }
+
+        if (progressBar) {
+            progressBar.style.width = "0%";
+            progressBar.setAttribute("aria-valuenow", 0);
+        }
+    }
+
+    // Fetch data every 10 seconds
+    fetchDryerStatus();
+    setInterval(fetchDryerStatus, 10000);
+});
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/nav.php b/src/nav.php
index 3a4b301..5807e56 100644
--- a/src/nav.php
+++ b/src/nav.php
@@ -21,6 +21,8 @@
             </a>
         </li>
         
+        <!-- Printing Section -->
+        <li class="menu-label">Printing Control</li>
         <li>
             <a href="viewPrinters.php">
                 <div class="parent-icon"><i class='bx bx-code-alt'></i>
@@ -28,6 +30,13 @@
                 <div class="menu-title">Printer Dashboard</div>
             </a>
         </li>
+        <li>
+            <a href="filamentDryer.php">
+                <div class="parent-icon"><i class='bx bx-plus-circle'></i>
+                </div>
+                <div class="menu-title">Dryer Control</div>
+            </a>
+        </li>
 
         <!-- Filament Tracking Section -->
         <li class="menu-label">Filament Tracker</li>
