From 60c132d9eabcf9738b90ac57abfc1cdaa3a3fc05 Mon Sep 17 00:00:00 2001 From: Leo <95978312+yaefdb@users.noreply.github.com> Date: Fri, 19 Jan 2024 20:22:41 +0800 Subject: [PATCH] update --- Sean/modules/mysql.js | 2 +- Sean/server.js | 20 ++--- consumerWebsite/public/css/learnmore.css | 100 +++++++++++++++++++++- consumerWebsite/public/documentation.html | 0 consumerWebsite/public/js/learnmore.js | 87 +++++++++++++++++++ consumerWebsite/public/js/search.js | 19 ++++ consumerWebsite/public/learnmore.html | 34 +++++++- 7 files changed, 243 insertions(+), 19 deletions(-) create mode 100644 consumerWebsite/public/documentation.html create mode 100644 consumerWebsite/public/js/learnmore.js create mode 100644 consumerWebsite/public/js/search.js diff --git a/Sean/modules/mysql.js b/Sean/modules/mysql.js index cc53850..677d3fb 100644 --- a/Sean/modules/mysql.js +++ b/Sean/modules/mysql.js @@ -1,4 +1,4 @@ -const mysql = require("mysql2"); + const path = require("path"); require('dotenv').config({ path: path.resolve(__dirname, '../.env') }) const fs = require('fs'); diff --git a/Sean/server.js b/Sean/server.js index 00b1949..4e13a02 100644 --- a/Sean/server.js +++ b/Sean/server.js @@ -1,7 +1,7 @@ const express = require("express"); const session = require("express-session"); const rateLimit = require('express-rate-limit'); -const mysql2 = require('mysql2'); + const bodyParser = require("body-parser"); const bcrypt = require("bcrypt"); const crypto = require("crypto"); @@ -13,7 +13,7 @@ const { format } = require('date-fns'); const { Sequelize } = require('sequelize'); const { transporter } = require("./modules/nodeMailer"); -const { connection } = require("./modules/mysql"); + const { sequelize, User } = require("./modules/mysql"); const userLogs= require('./models/userLogs')(sequelize); // Adjust the path based on your project structure const app = express(); @@ -80,15 +80,13 @@ app.get("/login", (req, res) => { res.render("login", { error: null }); }); - - const limiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minutes max: 5, // limit each IP to 3 requests per windowMs message: 'Too many login attempts from this IP, please try again later.', }); - app.use('/login', limiter); +app.use('/login', limiter); app.post('/login', [ @@ -168,7 +166,7 @@ app.post("/verify-otp", [ const errors = validationResult(req); if (!errors.isEmpty()) { - return res.render('otp', { error: 'Invalid OTP. Please try again.', username: req.body.username, csrfToken: req.session.csrfToken }); + return res.render('otp', { error: 'Invalid OTP. Please try again.'}); } const enteredOTP = req.body.otp; @@ -223,12 +221,7 @@ app.post("/verify-otp", [ app.get("/logout", async (req, res) => { try { - const username = req.session.username || "Unknown User"; - - // Log the logout activity using Sequelize - await userLogs.create({ username, activity: "User logged out. Session destroyed." }); - - + const username = req.session.username ; // Log the user out by clearing the session req.session.destroy(async (err) => { if (err) { @@ -238,7 +231,8 @@ app.post("/verify-otp", [ await userLogs.create({ username, activity: "User logged out unsuccessfully. Session not destroyed." }); } else { console.log("Session destroyed."); - + // Log the logout activity using Sequelize + await userLogs.create({ username, activity: "User logged out. Session destroyed." }); // Clear the session token cookie res.clearCookie('sessionToken'); } diff --git a/consumerWebsite/public/css/learnmore.css b/consumerWebsite/public/css/learnmore.css index f8a3b5b..7d7589f 100644 --- a/consumerWebsite/public/css/learnmore.css +++ b/consumerWebsite/public/css/learnmore.css @@ -1,6 +1,102 @@ -img { +body { + margin: 0; + font-family: Arial, sans-serif; +} + +#map { display: block; margin: auto; max-width: 100%; max-height: 100vh; -} \ No newline at end of file +} + +#map-container { + position: relative; +} + +#north { + top: 25%; + left: 50%; + transform: translateX(-50%); +} + +#south { + top: 60%; + left: 50%; + transform: translateX(-50%); +} + +#east { + top: 50%; + left: 60%; + transform: translateX(-50%) translateY(-50%); +} + +#west { + top: 50%; + left: 40%; + transform: translateX(-50%) translateY(-50%); +} + +#central { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.info-box { + position: absolute; + background-color: rgba(255, 255, 255, 0.8); + padding: 10px; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + font-size: 12px; +} + +#north h3 { + color: #34d0db; +} + +#south h3 { + color: #2ecc71; +} + +#east h3 { + color: #3498db; +} + +#west h3 { + color: #e74c3c; +} + +.additional-info-box { + background-color: #f8f8f8; + border: 1px solid #ddd; + border-radius: 8px; + padding: 15px; + margin: 20px auto; /* Center horizontally */ + max-width: 300px auto; /* Adjust the maximum width as needed */ + text-align: center; /* Center text horizontally */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.info-item { + margin-bottom: 10px; +} + +.info-label { + font-weight: bold; + margin-right: 10px; +} + +.info-value { + color: #007bff; /* Adjust the color as needed */ +} + +.info-box.active { + background-color: #213f6d; + color: #fff; +} diff --git a/consumerWebsite/public/documentation.html b/consumerWebsite/public/documentation.html new file mode 100644 index 0000000..e69de29 diff --git a/consumerWebsite/public/js/learnmore.js b/consumerWebsite/public/js/learnmore.js new file mode 100644 index 0000000..c965824 --- /dev/null +++ b/consumerWebsite/public/js/learnmore.js @@ -0,0 +1,87 @@ +document.addEventListener("DOMContentLoaded", function () { + function updateAdditionalInfo(region) { + const infoContainer = document.getElementById("additional-info"); + // Replace the following with actual data retrieval based on the region + const aqi = "15"; + const temperature = "25°C"; + const humidity = "60%"; + + infoContainer.innerHTML = ` +
+

Additional Information - ${region}

+
+ Air Quality Index: + ${aqi} +
+
+ Temperature: + ${temperature} +
+
+ Humidity: + ${humidity} +
+
+ `; + + // Remove the 'active' class from all info-box elements + const infoBoxes = document.querySelectorAll('.info-box'); + infoBoxes.forEach(box => box.classList.remove('active')); + + // Add the 'active' class to the clicked info-box + const clickedBox = document.getElementById(region.toLowerCase()); + clickedBox.classList.add('active'); + } + + const defaultRegion = "North"; + const defaultBox = document.getElementById(defaultRegion.toLowerCase()); + defaultBox.classList.add('active'); + const defaultAqi = "--"; // Replace with actual data retrieval + updateAdditionalInfo(defaultRegion, defaultAqi); + + // Event listeners for each region's info-box + document.getElementById("north").addEventListener("click", function () { + const northAqi = "--"; // Replace with actual data retrieval + updateAdditionalInfo("North", northAqi); + }); + document.getElementById("south").addEventListener("click", function () { + const southAqi = "--"; + updateAdditionalInfo("South", southAqi); + }); + document.getElementById("east").addEventListener("click", function () { + const eastAqi = "--"; + updateAdditionalInfo("East", eastAqi); + }); + document.getElementById("west").addEventListener("click", function () { + const westAqi = "--"; + updateAdditionalInfo("West", westAqi); + }); + document.getElementById("central").addEventListener("click", function () { + const centralAqi = "--"; + updateAdditionalInfo("Central", centralAqi); + }); + +}); + + +// Event listeners for each region's info-box +document.getElementById("north").addEventListener("click", function () { + updateAdditionalInfo("North"); +}); + +document.getElementById("south").addEventListener("click", function () { + updateAdditionalInfo("South"); +}); + +document.getElementById("east").addEventListener("click", function () { + updateAdditionalInfo("East"); +}); + +document.getElementById("west").addEventListener("click", function () { + updateAdditionalInfo("West"); +}); + +document.getElementById("central").addEventListener("click", function () { + updateAdditionalInfo("Central"); +}); + diff --git a/consumerWebsite/public/js/search.js b/consumerWebsite/public/js/search.js new file mode 100644 index 0000000..6b1d6a7 --- /dev/null +++ b/consumerWebsite/public/js/search.js @@ -0,0 +1,19 @@ +function searchFunction() { + // Get the search input value + var searchTerm = document.getElementById('searchInput').value.toLowerCase(); + + // Get all blog entries + var blogEntries = document.getElementById('blogEntries').getElementsByClassName('card'); + + // Loop through each blog entry and hide/show based on the search term + for (var i = 0; i < blogEntries.length; i++) { + var title = blogEntries[i].getElementsByClassName('card-title')[0].innerText.toLowerCase(); + var text = blogEntries[i].getElementsByClassName('card-text')[0].innerText.toLowerCase(); + + if (title.includes(searchTerm) || text.includes(searchTerm)) { + blogEntries[i].style.display = 'block'; + } else { + blogEntries[i].style.display = 'none'; + } + } + } \ No newline at end of file diff --git a/consumerWebsite/public/learnmore.html b/consumerWebsite/public/learnmore.html index ada7a5d..a8cc7ba 100644 --- a/consumerWebsite/public/learnmore.html +++ b/consumerWebsite/public/learnmore.html @@ -54,10 +54,37 @@

-
- Map Image -
+
+ Singapore Map + +
+

North

+

Air Quality Index: 15

+
+ +
+

South

+

Air Quality Index: 16

+
+ +
+

East

+

Air Quality Index: 16

+
+ +
+

West

+

Air Quality Index: 18

+
+ +
+

Central

+

Air Quality Index: 17

+
+ +
+


@@ -148,6 +175,7 @@ + \ No newline at end of file