diff --git a/consumerWebsite/app.js b/consumerWebsite/app.js
index b214bc3..e6ce391 100644
--- a/consumerWebsite/app.js
+++ b/consumerWebsite/app.js
@@ -7,7 +7,7 @@ const ejs = require("ejs");
module.exports = app;
-process.nextTick(() => require("./mqttApp"));
+//process.nextTick(() => require("./mqttApp"));
app.use(express.json());
app.set("json spaces", 2);
diff --git a/consumerWebsite/database/mySQL.js b/consumerWebsite/database/mySQL.js
index 6bba43b..275674f 100644
--- a/consumerWebsite/database/mySQL.js
+++ b/consumerWebsite/database/mySQL.js
@@ -15,7 +15,7 @@ const sequelize = new Sequelize(
attributeBehavior: 'escape',
dialectOptions: {
ssl: {
- ca: fs.readFileSync(path.resolve(__dirname, '../cert/DigiCertGlobalRootCA.crt_3.pem')),
+ ca: fs.readFileSync(path.resolve(__dirname, '../cert/DigiCertGlobalRootCA.crt.pem')),
},
},
diff --git a/consumerWebsite/public/css/api.css b/consumerWebsite/public/css/api.css
index a13b630..e1d3812 100644
--- a/consumerWebsite/public/css/api.css
+++ b/consumerWebsite/public/css/api.css
@@ -547,5 +547,106 @@ body.one-content-column-version .content thead {
background-color: #45a049; /* Darker green on hover */
}
+.delete-key-button {
+ float: right; /* Align the button to the right */
+ margin-right: 78%;
+ margin-top: -40px; /* Adjust the margin-top value based on your layout */
+ /* Add any additional styling you want for the button */
+}
+
+#content-get-api .delete-key-button {
+ background-color: #af4c4c; /* Green background color */
+ color: white; /* White text color */
+ padding: 5px 11px; /* Padding for the button */
+ border: none; /* Remove button border */
+ border-radius: 5px; /* Add border-radius for rounded corners */
+ cursor: pointer; /* Add pointer cursor on hover */
+ font-size: 14px; /* Font size */
+}
+
+#content-get-api .delete-key-button:hover {
+ background-color: #a04545; /* Darker green on hover */
+}
+.generate-key-screen {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 30px;
+ width: 400px; /* Adjust the width as needed */
+ background-color: #ffffff;
+ border: 1px solid #eaeaea;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Adjust the shadow as needed */
+ z-index: 1000;
+ border-radius: 12px; /* Slightly increased border-radius for a softer look */
+ overflow: hidden; /* Hide overflow content */
+}
+
+.generate-key-screen label {
+ display: block;
+ margin-bottom: 8px;
+ color: #333;
+}
+
+.generate-key-screen input {
+ width: 100%;
+ padding: 8px;
+ margin-bottom: 16px;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.generate-key-screen button {
+ background-color: #4caf50;
+ color: #fff;
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.generate-key-screen button:hover {
+ background-color: #45a049;
+}
+
+.generate-key-screen button + button {
+ margin-left: 8px;
+ background-color: #f44336;
+}
+
+.generate-key-screen button + button:hover {
+ background-color: #d32f2f;
+}
+
+.key-input {
+ display: flex;
+ align-items: center;
+}
+
+.key-input input {
+ flex: 1;
+ padding: 8px;
+ margin-right: 8px;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.key-input button {
+ background-color: #4caf50;
+ color: #fff;
+ padding: 8px 12px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.key-input button:hover {
+ background-color: #45a049;
+}
+
diff --git a/consumerWebsite/public/css/data.css b/consumerWebsite/public/css/data.css
new file mode 100644
index 0000000..8bac443
--- /dev/null
+++ b/consumerWebsite/public/css/data.css
@@ -0,0 +1,59 @@
+.air-quality-container {
+ display: flex;
+ flex-direction: column;
+ width: 800px;
+ /* Adjust width as needed */
+ margin: 0 auto;
+ position: relative;
+}
+
+.chart-container {
+ background-color: #f5f5f5;
+ padding: 20px;
+ position: relative;
+}
+
+.button-container {
+ display: flex;
+ justify-content: space-between;
+ margin: 20px 0;
+}
+
+#download-container {
+ display: flex;
+ align-items: center;
+ margin-top: 20px; /* Adjust the margin-top for spacing */
+}
+
+button {
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ padding: 5px 10px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.data-table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+.graphbutton-container {
+ display: flex;
+ justify-content: center; /* Center the buttons horizontally */
+ margin: 20px 0;
+}
+
+button#barButton,
+button#lineButton {
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ padding: 5px 10px;
+ font-size: 14px;
+ cursor: pointer;
+ margin: 0 10px;
+}
+
+
+
+
diff --git a/consumerWebsite/public/css/learnmore.css b/consumerWebsite/public/css/learnmore.css
index 7d7589f..8293cae 100644
--- a/consumerWebsite/public/css/learnmore.css
+++ b/consumerWebsite/public/css/learnmore.css
@@ -100,3 +100,16 @@ body {
background-color: #213f6d;
color: #fff;
}
+
+.custom-btn {
+ display: inline-block;
+ padding: 10px 20px; /* Adjust padding as needed */
+ background-color: #3498db; /* Change background color */
+ color: #ffffff; /* Change text color */
+ text-decoration: none;
+ border-radius: 5px; /* Add rounded corners if desired */
+}
+
+.custom-btn:hover {
+ background-color: #2980b9; /* Change background color on hover */
+}
diff --git a/consumerWebsite/public/js/data.js b/consumerWebsite/public/js/data.js
new file mode 100644
index 0000000..5d1b37f
--- /dev/null
+++ b/consumerWebsite/public/js/data.js
@@ -0,0 +1,184 @@
+const buttons = document.querySelectorAll('.button-container button');
+const ctx = document.getElementById('dataChart').getContext('2d');
+
+// Initial dataset (AQI)
+const initialData = {
+ labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
+ datasets: [{
+ label: 'AQI',
+ data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+};
+
+const chart = new Chart(ctx, {
+ type: 'bar',
+ data: initialData,
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'HISTORICAL'
+ },
+ subtitle: {
+ display: true,
+ text: 'Historic air quality graph for Singapore'
+ },
+ legend: {
+ display: false
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ callbacks: {
+ label: function (tooltipItem, data) {
+ const label = data.labels[tooltipItem.index];
+ return label + ': ' + data.datasets[0].data[tooltipItem.index];
+ }
+ }
+ },
+ scales: {
+ xAxes: [{
+ barPercentage: 0.6,
+ categoryPercentage: 0.7,
+ ticks: {
+ autoSkip: true,
+ },
+ maxRotation: 0,
+ minRotation: 0
+ }],
+ yAxes: [{
+ title: {
+ display: true,
+ text: 'Value'
+ }
+ }]
+ }
+ }
+});
+
+// Function to update chart data based on the selected button
+const updateChart = (data) => {
+ chart.data = data;
+ chart.update();
+};
+
+// Event listener for button clicks
+buttons.forEach(button => {
+ button.addEventListener('click', () => {
+ // Implement logic to switch data based on clicked button
+ const buttonId = button.id.toLowerCase();
+ let newData;
+
+ // Example: Switch data based on button clicked
+ switch (buttonId) {
+ case 'aqibutton':
+ newData = {
+ labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
+ datasets: [{
+ label: 'AQI',
+ data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+
+ break;
+ case 'tempbutton':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'Temperature',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'humbutton':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'Humidity',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'pm25button':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'PM2.5',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'pm10button':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'PM10',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'o3button':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'O3',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'no2button':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'NO2',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'so2button':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'SO2',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+ case 'cobutton':
+ newData = {
+ labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
+ datasets: [{
+ label: 'CO',
+ data: [25, 30, 40, 35],
+ backgroundColor: 'green',
+ borderColor: 'green',
+ }]
+ };
+ break;
+
+ default:
+ newData = initialData; // Default to initial data (AQI)
+ break;
+ }
+
+ updateChart(newData);
+ });
+});
\ No newline at end of file
diff --git a/consumerWebsite/public/js/learnmore.js b/consumerWebsite/public/js/learnmore.js
index 2e4a440..a8948ee 100644
--- a/consumerWebsite/public/js/learnmore.js
+++ b/consumerWebsite/public/js/learnmore.js
@@ -1,21 +1,21 @@
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%";
-const pm25 = "10";
-const pm10 = "20";
-const so2 = "5";
-const o3 = "35";
-const co = "0.5";
-const no2 = "15";
+ // Replace the following with actual data retrieval based on the region
+ const aqi = "15";
+ const temperature = "25°C";
+ const humidity = "60%";
+ const pm25 = "10";
+ const pm10 = "20";
+ const so2 = "5";
+ const o3 = "35";
+ const co = "0.5";
+ const no2 = "15";
-infoContainer.innerHTML = `
+ infoContainer.innerHTML = `
Additional Information - ${region}
-
+
Air Quality Index:
${aqi}
@@ -54,7 +54,13 @@ infoContainer.innerHTML = `
`;
+ var viewDataButton = document.getElementById("viewData");
+ // Add a click event listener to the button
+ viewDataButton.addEventListener("click", function () {
+ // Redirect to the "viewdata.ejs" page
+ window.location.href = "/viewdata";
+ });
// Remove the 'active' class from all info-box elements
const infoBoxes = document.querySelectorAll('.info-box');
@@ -65,12 +71,14 @@ infoContainer.innerHTML = `
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
@@ -117,3 +125,4 @@ document.getElementById("central").addEventListener("click", function () {
updateAdditionalInfo("Central");
});
+
diff --git a/consumerWebsite/routes/render.js b/consumerWebsite/routes/render.js
index 8c98d9f..866a431 100644
--- a/consumerWebsite/routes/render.js
+++ b/consumerWebsite/routes/render.js
@@ -43,6 +43,11 @@ router.get("/contact", function (req, res, next) {
res.render("contact");
});
+//data page
+router.get("/viewdata", function (req, res, next) {
+ res.render("viewdata");
+});
+
//api doc
router.get("/api", function (req, res, next) {
res.render("api");
diff --git a/consumerWebsite/views/api.ejs b/consumerWebsite/views/api.ejs
index 4e90eaf..de88786 100644
--- a/consumerWebsite/views/api.ejs
+++ b/consumerWebsite/views/api.ejs
@@ -12,46 +12,46 @@
-
-
+
+
@@ -683,4 +683,4 @@
-
\ No newline at end of file
+
- API Documentation
-