Merge pull request #56 from Newtbot/y

Y
2024-01-27 17:19:35 +08:00 · 2024-01-27 17:19:35 +08:00 · 6190cb63cd
commit 6190cb63cd
parent ec1dbfee44 c3ffbc00af
12 changed files with 477 additions and 56 deletions
--- 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);
--- 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')),
      },

    },
--- 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;
+}
+
--- a/consumerWebsite/public/css/data.css
+++ 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;
+}
+
+
+
+
--- 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 */
+}
--- a/consumerWebsite/public/js/data.js
+++ 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);
+    });
+});
--- 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 = `
    <div class="additional-info-box">
        <h3>Additional Information - ${region}</h3>
-        <button id="downloadCsvButton">Download CSV</button>
+        <button id="viewData">View Data</button>
        <div class="info-item">
            <span class="info-label">Air Quality Index:</span>
            <span class="info-value">${aqi}</span>
@ -54,7 +54,13 @@ infoContainer.innerHTML = `
        </div>
    </div>
 `;
+        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");
 });

+
--- 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");
--- a/consumerWebsite/views/api.ejs
+++ b/consumerWebsite/views/api.ejs
@ -12,46 +12,46 @@
    </script>
    <link rel="stylesheet" href="css/api.css" media="all">

-    <body class="one-content-column-version">
-        <div class="left-menu">
-            <div class="content-logo">
-                <div class="logo">
-                    <img alt="platform by Emily van den Heever from the Noun Project"
-                        title="platform by Emily van den Heever from the Noun Project" src="images/apilogo.png"
-                        height="32" />
-                    <span>API Documentation</span>
-                </div>
-                <button class="burger-menu-icon" id="button-menu-mobile">
-                    <svg width="34" height="34" viewBox="0 0 100 100">
-                        <path class="line line1"
-                            d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058">
-                        </path>
-                        <path class="line line2" d="M 20,50 H 80"></path>
-                        <path class="line line3"
-                            d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942">
-                        </path>
-                    </svg>
-                </button>
-            </div>
-            <div class="mobile-menu-closer"></div>
-            <div class="content-menu">
-                <div class="content-infos">
-                    <div class="info"><b>Version:</b> 0</div>
-                    <div class="info"><b>Last Updated:</b> 22th January 2024</div>
-                </div>
-                <ul>
-                    <li class="scroll-to-link active" data-target="content-get-started">
-                        <a>GET STARTED</a>
-                    </li>
-                    <li class="scroll-to-link" data-target="content-get-api">
-                        <a>Generate API</a>
-                    </li>
-                    <li class="scroll-to-link" data-target="content-errors">
-                        <a>Errors</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
+ <body class="one-content-column-version">
+     <div class="left-menu">
+         <div class="content-logo">
+             <div class="logo">
+                 <img alt="platform by Emily van den Heever from the Noun Project"
+                     title="platform by Emily van den Heever from the Noun Project" src="images/apilogo.png"
+                     height="32" />
+                 <span>API Documentation</span>
+             </div>
+             <button class="burger-menu-icon" id="button-menu-mobile">
+                 <svg width="34" height="34" viewBox="0 0 100 100">
+                     <path class="line line1"
+                         d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058">
+                     </path>
+                     <path class="line line2" d="M 20,50 H 80"></path>
+                     <path class="line line3"
+                         d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942">
+                     </path>
+                 </svg>
+             </button>
+         </div>
+         <div class="mobile-menu-closer"></div>
+         <div class="content-menu">
+             <div class="content-infos">
+                 <div class="info"><b>Version:</b> 0</div>
+                 <div class="info"><b>Last Updated:</b> 22th January 2024</div>
+             </div>
+             <ul>
+                 <li class="scroll-to-link active" data-target="content-get-started">
+                     <a>GET STARTED</a>
+                 </li>
+                 <li class="scroll-to-link" data-target="content-errors">
+                     <a>Errors</a>
+                 </li>
+                 <li class="scroll-to-link" data-target="content-get-api">
+                     <a>Generate API</a>
+                 </li>
+             </ul>
+         </div>
+     </div>


        <div class="content-page">
@ -683,4 +683,4 @@
    </body>
    <script src="js/api.js"></script>

-    </html>
+    </html>
--- a/consumerWebsite/views/bot.ejs
+++ b/consumerWebsite/views/bot.ejs
@ -82,6 +82,9 @@
   </div>
 </footer>
 <script src="js/search.js"></script>
+<script src="js/data.js"></script>
+
+
 </body>

 </html>
--- a/consumerWebsite/views/learnmore.ejs
+++ b/consumerWebsite/views/learnmore.ejs
@ -38,7 +38,11 @@

 <br>
 <br>
+
+
+
 <script src="js/learnmore.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


 <%- include('bot') %>
--- a/consumerWebsite/views/viewdata.ejs
+++ b/consumerWebsite/views/viewdata.ejs
@ -0,0 +1,43 @@
+<%- include('top') %>
+<link href="css/data.css" rel="stylesheet" />
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<br>
+<br>
+
+
+<body>
+
+    <div class="air-quality-container">
+        <%#
+        <div class="graphbutton-container">
+            <button id="barButton">Bar Graph</button>
+            <button id="lineButton">Line Graph</button>
+        </div> %>
+        <div class="chart-container">
+            <canvas id="dataChart"></canvas>
+        </div>
+        <div class="button-container">
+            <button id="aqiButton">AQI</button>
+            <button id="tempButton">Temperature</button>
+            <button id="humButton">Humidity</button>
+            <button id="pm25Button">PM2.5</button>
+            <button id="pm10Button">PM10</button>
+            <button id="o3Button">O3</button>
+            <button id="no2Button">NO2</button>
+            <button id="so2Button">SO2</button>
+            <button id="coButton">CO</button>
+        </div>
+        <div class="download-container">
+            <p>Download data here:</p>
+            <button id="downloadCSVButton">Download CSV</button>
+        </div>
+    </div>
+
+</body>
+
+
+<br>
+<br>
+
+<%- include('bot') %>