From 8a66068b98657cb512e1dabeef6885fde8d2be07 Mon Sep 17 00:00:00 2001
From: BIG2EYEZ <whtsean234@gmail.com>
Date: Tue, 9 Jan 2024 17:34:16 +0800
Subject: [PATCH] update with dashboard data

---
 Sean/modules/mysql.js |  11 ++-
 Sean/server.js        |  54 +++++++++------
 Sean/views/home.ejs   | 154 +++++++++++++++++++++++++++++++++++++++---
 Sean/views/home.js    | 107 +++++++++++++++++++++++++++++
 4 files changed, 295 insertions(+), 31 deletions(-)
 create mode 100644 Sean/views/home.js

diff --git a/Sean/modules/mysql.js b/Sean/modules/mysql.js
index 7dbb840..4ae5252 100644
--- a/Sean/modules/mysql.js
+++ b/Sean/modules/mysql.js
@@ -40,7 +40,14 @@ const connection = mysql.createConnection({
 	timezone: "Z", // Set the timezone to UTC
   });
 
-  
-module.exports = { connection };
+  const connection2 = mysql.createConnection({
+	host: process.env.host,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: "eco_saver",
+	timezone: "Z", // Set the timezone to UTC
+  });  
+module.exports = { connection,connection2 };
+
 
   
diff --git a/Sean/server.js b/Sean/server.js
index cb5bc0b..f3c3222 100644
--- a/Sean/server.js
+++ b/Sean/server.js
@@ -11,7 +11,7 @@ const validator = require('validator');
 
 const { transporter } = require("./modules/nodeMailer");
 const { connection } = require("./modules/mysql"); 
-
+const { connection2 } = require("./modules/mysql"); 
 const app = express();
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
@@ -207,28 +207,40 @@ const logActivity = async (username, success, message) => {
   
   
 
-// Update your /home route to retrieve the overall last 10 logins for all users
-app.get("/home", isAuthenticated, (req, res) => {
-	// Retrieve the overall last 10 logins for all users
-	const loginsQuery =
-		"SELECT username, lastLogin FROM users ORDER BY lastLogin DESC LIMIT 10";
-	connection.query(loginsQuery, (error, loginResults) => {
-		if (error) {
-			console.error("Error executing login logs query:", error);
-			res.status(500).send("Internal Server Error");
-			return;
-		}
-
-		// Log the results on the server side
-		console.log("Login Logs on Server:", loginResults);
-
-		// Render the home page with login logs data
-		res.render("home", {
-			username: req.session.username,
-			loginLogs: loginResults,
-		});
+  app.get("/home", isAuthenticated, (req, res) => {
+	
+	// Retrieve the last 10 sensor data records from the sensordata table
+	const sensorDataQuery =
+	  "SELECT locationid, measurement, createdAt FROM sensordata ORDER BY createdAt DESC LIMIT 10";
+  
+	connection2.query(sensorDataQuery, (error, sensorDataResults) => {
+	  if (error) {
+		console.error("Error executing sensor data query:", error);
+		res.status(500).send("Internal Server Error");
+		return;
+	  }
+  
+	  // Log the results on the server side
+	  
+	  
+	  // Render the home page with sensor data
+	  res.render("home", {
+		username: req.session.username,
+		sensorData: sensorDataResults,
+	  });
 	});
+  });
+ app.get('/api/locations', (req, res) => {
+  connection2.query('SELECT `id`, `name` FROM `locations`', (error, results) => {
+    if (error) {
+      console.error('Error fetching locations:', error);
+      res.status(500).json({ error: 'Internal Server Error' });
+      return;
+    }
+    res.json(results);
+  });
 });
+  
 app.get("/inusers", isAuthenticated, (req, res) => {
 	// Fetch all user data from the database
 	const allUsersQuery = "SELECT * FROM users";
diff --git a/Sean/views/home.ejs b/Sean/views/home.ejs
index a2e2d81..50f852b 100644
--- a/Sean/views/home.ejs
+++ b/Sean/views/home.ejs
@@ -8,7 +8,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
+    .chart-container {
+    width: 400px;
+    height: 250px;
+    margin: 20px;
+    border: 1px solid #ddd;
+    display: inline-block;
+  }
     body {
       margin: 0;
       font-family: 'Arial', sans-serif;
@@ -73,6 +81,7 @@
 </head>
 
 <body>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
   <div id="navbar">
     <h1>Eco Saver</h1>
@@ -84,25 +93,154 @@
 
   <div id="content">
     <h2>Welcome to the Home Page, <%= username %>!</h2>
-    <h3>Last 10 Logins:</h3>
+    <h3>Last 10 Sensor Data Records:</h3>
+
+  
+
     <table>
       <thead>
         <tr>
-          <th>Username</th>
-          <th>Last Login Time</th>
+          <th>Location ID</th>
+          <th>CO</th>
+          <th>O3</th>
+          <th>NO2</th>
+          <th>PSI</th>
+          <th>SO2</th>
+          <th>Humidity</th>
+          <th>Wind Speed</th>
+          <th>Temperature</th>
+          <th>Created At</th>
         </tr>
       </thead>
       <tbody>
-        <% loginLogs.forEach(log => { %>
+        <% sensorData.forEach(data => { %>
           <tr>
-            <td><%= log.username %></td>
-            <td><%= new Date(log.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
+            <td><%= data.locationid %></td>
+            <td><%= data.measurement.co %></td>
+            <td><%= data.measurement.o3 %></td>
+            <td><%= data.measurement.no2 %></td>
+            <td><%= data.measurement.psi %></td>
+            <td><%= data.measurement.so2 %></td>
+            <td><%= data.measurement.humidity %></td>
+            <td><%= data.measurement.windspeed %></td>
+            <td><%= data.measurement.temperature %></td>
+            <td><%= new Date(data.createdAt).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
           </tr>
         <% }); %>
       </tbody>
     </table>
   </div>
-
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", async function () {
+      console.log("DOM Loaded");
+  
+      // Extract data from sensorData
+      const sensorData = JSON.parse('<%- JSON.stringify(sensorData) %>');
+      console.log("Sensor Data:", sensorData);
+  
+      // Fetch location names from the server
+      const locationNames = await fetch('/api/locations') // Adjust the API endpoint
+        .then(response => response.json())
+        .then(data => data.map(location => ({ id: location.id, name: location.name })))
+        .catch(error => console.error('Error fetching location names:', error));
+  
+      // Group sensorData by locationid
+      const groupedData = groupBy(sensorData, 'locationid');
+  
+      // Get the content div
+      const contentDiv = document.getElementById('content');
+  
+      // Create a chart for each location
+      Object.keys(groupedData).forEach(locationId => {
+        const locationData = groupedData[locationId];
+  
+        // Find the corresponding location name
+        const locationName = locationNames.find(location => location.id === parseInt(locationId, 10))?.name || `Unknown Location ${locationId}`;
+  
+        // Create a container for the chart
+        const container = document.createElement('div');
+        container.className = 'chart-container';
+  
+        // Create a title for the container with location name
+        const title = document.createElement('h4');
+        title.textContent = `Location: ${locationName}`;
+        container.appendChild(title);
+  
+        // Get labels (Location IDs)
+        const labels = locationData.map(data => new Date(data.createdAt).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }));
+  
+        // Create datasets for each measurement
+        const datasets = [
+          {
+            label: 'CO',
+            data: locationData.map(data => data.measurement.co),
+            backgroundColor: 'rgba(255, 99, 132, 0.5)', // Red color
+          },
+          {
+            label: 'O3',
+            data: locationData.map(data => data.measurement.o3),
+            backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue color
+          },
+          {
+            label: 'NO2',
+            data: locationData.map(data => data.measurement.no2),
+            backgroundColor: 'rgba(255, 206, 86, 0.5)', // Yellow color
+          },
+          {
+            label: 'SO2',
+            data: locationData.map(data => data.measurement.so2),
+            backgroundColor: 'rgba(75, 192, 192, 0.5)', // Green color
+          },
+        ];
+  
+        // Create a canvas element for each location
+        const canvas = document.createElement('canvas');
+        canvas.width = 400;
+        canvas.height = 200;
+  
+        // Append canvas to the container
+        container.appendChild(canvas);
+  
+        // Append container to the content div
+        contentDiv.appendChild(container);
+  
+        // Create a bar chart for each location
+        const ctx = canvas.getContext('2d');
+        new Chart(ctx, {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: datasets,
+          },
+          options: {
+            scales: {
+              x: {
+                beginAtZero: true,
+              },
+              y: {
+                beginAtZero: true,
+              },
+            },
+          },
+        });
+      });
+  
+      // Helper function to group data by a specified key
+      function groupBy(arr, key) {
+        return arr.reduce((acc, obj) => {
+          const groupKey = obj[key];
+          acc[groupKey] = acc[groupKey] || [];
+          acc[groupKey].push(obj);
+          return acc;
+        }, {});
+      }
+    });
+  </script>
+  
+  
+  
+  
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/Sean/views/home.js b/Sean/views/home.js
new file mode 100644
index 0000000..883f205
--- /dev/null
+++ b/Sean/views/home.js
@@ -0,0 +1,107 @@
+document.addEventListener("DOMContentLoaded", async function () {
+    console.log("DOM Loaded");
+  
+    // Extract data from sensorData
+    const sensorData = JSON.parse('<%- JSON.stringify(sensorData) %>');
+    console.log("Sensor Data:", sensorData);
+  
+    // Fetch location names from the server
+    const locationNames = await fetch('/api/locations') // Adjust the API endpoint
+      .then(response => response.json())
+      .then(data => data.map(location => ({ id: location.id, name: location.name })))
+      .catch(error => console.error('Error fetching location names:', error));
+  
+    
+  
+    // Group sensorData by locationid
+    const groupedData = groupBy(sensorData, 'locationid');
+  
+    // Get the content div
+    const contentDiv = document.getElementById('content');
+  
+    // Create a chart for each location
+    Object.keys(groupedData).forEach(locationId => {
+      const locationData = groupedData[locationId];
+  
+      // Find the corresponding location name
+      const locationName = locationNames.find(location => location.id === parseInt(locationId, 10))?.name || `Unknown Location ${locationId}`;
+  
+      // Create a container for the chart
+      const container = document.createElement('div');
+      container.className = 'chart-container';
+  
+      // Create a title for the container with location name
+      const title = document.createElement('h4');
+      title.textContent = `Location: ${locationName}`;
+      container.appendChild(title);
+  
+      // Get labels (Location IDs)
+      const labels = locationData.map(data => new Date(data.createdAt).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }));
+  
+      // Create datasets for each measurement
+      const datasets = [
+        {
+          label: 'CO',
+          data: locationData.map(data => data.measurement.co),
+          backgroundColor: 'rgba(255, 99, 132, 0.5)', // Red color
+        },
+        {
+          label: 'O3',
+          data: locationData.map(data => data.measurement.o3),
+          backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue color
+        },
+        {
+          label: 'NO2',
+          data: locationData.map(data => data.measurement.no2),
+          backgroundColor: 'rgba(255, 206, 86, 0.5)', // Yellow color
+        },
+        {
+          label: 'SO2',
+          data: locationData.map(data => data.measurement.so2),
+          backgroundColor: 'rgba(75, 192, 192, 0.5)', // Green color
+        },
+      ];
+  
+      // Create a canvas element for each location
+      const canvas = document.createElement('canvas');
+      canvas.width = 400;
+      canvas.height = 200;
+  
+      // Append canvas to the container
+      container.appendChild(canvas);
+  
+      // Append container to the content div
+      contentDiv.appendChild(container);
+  
+      // Create a bar chart for each location
+      const ctx = canvas.getContext('2d');
+      new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: labels,
+          datasets: datasets,
+        },
+        options: {
+          scales: {
+            x: {
+              beginAtZero: true,
+            },
+            y: {
+              beginAtZero: true,
+            },
+          },
+        },
+      });
+    });
+  
+    // Helper function to group data by a specified key
+    function groupBy(arr, key) {
+      return arr.reduce((acc, obj) => {
+        const groupKey = obj[key];
+        acc[groupKey] = acc[groupKey] || [];
+        acc[groupKey].push(obj);
+        return acc;
+      }, {});
+    }
+  });
+  
\ No newline at end of file