Merge branch 'dev-anish' of http://gitea.lcepl.org/pjpatil12/Comparison_Project into dev-anish

app/templates/dashboard.html

@@ -0,0 +1,118 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container-fluid px-2 px-md-4">
+    <h4 class="mb-3 text-center text-md-start">Comparison Software Solapur (UGD) - Live Dashboard</h4>
+
+    <div class="row g-3 mb-4">
+        <div class="col-12 col-md-4">
+            <div class="card text-white bg-primary shadow h-100">
+                <div class="card-body text-center text-md-start">
+                    <h6>Trenching Units</h6>
+                    <h3 class="fw-bold" id="card-trench">0</h3>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-4">
+            <div class="card text-white bg-success shadow h-100">
+                <div class="card-body text-center text-md-start">
+                    <h6>Manhole Units</h6>
+                    <h3 class="fw-bold" id="card-manhole">0</h3>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-4">
+            <div class="card text-dark bg-warning shadow h-100">
+                <div class="card-body text-center text-md-start">
+                    <h6>Laying Units</h6>
+                    <h3 class="fw-bold" id="card-laying">0</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-3">
+        <div class="col-12 col-md-6">
+            <div class="card shadow-sm h-100">
+                <div class="card-header bg-dark text-white">Live Category Bar Chart</div>
+                <div class="card-body">
+                    <canvas id="liveBarChart" style="max-height:300px;"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-md-6">
+            <div class="card shadow-sm h-100">
+                <div class="card-header bg-dark text-white">Location Distribution Pie Chart</div>
+                <div class="card-body">
+                    <canvas id="livePieChart" style="max-height:300px;"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+    // 2. Initialize the Bar Chart
+    const barCtx = document.getElementById('liveBarChart').getContext('2d');
+    let liveBarChart = new Chart(barCtx, {
+        type: 'bar',
+        data: {
+            labels: ['Trenching', 'Manholes', 'Laying'],
+            datasets: [{
+                label: 'Units Completed',
+                data: [0, 0, 0],
+                backgroundColor: ['#0d6efd', '#198754', '#ffc107']
+            }]
+        },
+        options: { responsive: true, maintainAspectRatio: false }
+    });
+
+    // 3. Initialize the Pie Chart
+    const pieCtx = document.getElementById('livePieChart').getContext('2d');
+    let livePieChart = new Chart(pieCtx, {
+        type: 'pie',
+        data: {
+            labels: [], // Will be filled from SQL
+            datasets: [{
+                data: [],
+                backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#6f42c1', '#fd7e14']
+            }]
+        },
+        options: { responsive: true, maintainAspectRatio: false }
+    });
+
+    // 4. Function to Fetch Live Data from your Python API
+    function fetchLiveData() {
+        fetch('/dashboard/api/live-stats') // This matches the route we created in the "Kitchen"
+            .then(response => response.json())
+            .then(data => {
+                // Update the Summary Cards
+                document.getElementById('card-trench').innerText = data.summary.trench;
+                document.getElementById('card-manhole').innerText = data.summary.manhole;
+                document.getElementById('card-laying').innerText = data.summary.laying;
+
+                // Update Bar Chart
+                liveBarChart.data.datasets[0].data = [
+                    data.summary.trench, 
+                    data.summary.manhole, 
+                    data.summary.laying
+                ];
+                liveBarChart.update();
+
+                // Update Pie Chart (Location stats)
+                livePieChart.data.labels = Object.keys(data.locations);
+                livePieChart.data.datasets[0].data = Object.values(data.locations);
+                livePieChart.update();
+            })
+            .catch(err => console.error("Error fetching live data:", err));
+    }
+
+    // 5. Check for updates every 10 seconds (Real-time effect)
+    setInterval(fetchLiveData, 10000);
+    fetchLiveData(); // Load immediately on page open
+</script>
+
+{% endblock %}