wmantly/mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove unnecessary code and update button styles

Browse Source
This commit is contained in:
newtbot 2024-01-28 03:31:39 +08:00
parent d491750916
commit fadabf3451
8 changed files with 499 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
chatgpt nonsense.js Normal file
View File

@ -0,0 +1,162 @@
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 '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);
});
});

4
consumerWebsite/public/css/data.css
View File

@ -15,14 +15,16 @@
.button-container { .button-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around; /* Change this value to adjust the spacing */
margin: 20px 0; margin: 20px 0;
} }
#download-container { #download-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20px; /* Adjust the margin-top for spacing */ margin-top: 20px; /* Adjust the margin-top for spacing */
} }
button { button {

266
consumerWebsite/public/js/data.js
View File

@ -1,184 +1,154 @@
const buttons = document.querySelectorAll('.button-container button'); //getting button from DOM id
const ctx = document.getElementById('dataChart').getContext('2d'); const buttons = document.querySelectorAll(".button-container button");
const queryButton = document.getElementById("querybutton-container");
const ctx = document.getElementById("dataChart").getContext("2d");
$(document).ready(async function () {
//https://stackoverflow.com/questions/9045868/javascript-date-getweek
Date.prototype.getWeek = function () {
var onejan = new Date(this.getFullYear(), 0, 1);
var today = new Date(this.getFullYear(), this.getMonth(), this.getDate());
var dayOfYear = (today - onejan + 86400000) / 86400000;
return Math.ceil(dayOfYear / 7);
};
let date = new Date();
var week = date.getWeek();
var today = date.getDate();
var month = date.getMonth() + 1; // Adding 1 to get the actual month number
var year = date.getFullYear();
//year data
app.api.get("sensor-data/data?year=" + year, function (error, data) {
//console.log(data);
});
//monthly data
app.api.get("sensor-data/data?month=" + month, function (error, data) {
//console.log(data);
});
//weekly data
app.api.get(
"sensor-data/data?month=" + month + "&week=" + week,
function (error, data) {
//console.log(data);
}
);
//daily data
app.api.get(
"sensor-data/data?month=" + month + "&week=" + week + "&day=" + today,
function (error, data) {
for (let rows of data) {
console.log(rows);
getDate(rows.CreatedAt);
}
}
);
});
function getDate(date){
console.log(date);
}
/*
(async function() {
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
})();
*/
// Initial dataset (AQI) // Initial dataset (AQI)
const initialData = { const initialData = {
labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',], //date and time
datasets: [{ labels: [ date.map(row => row.CreatedAt)],
label: 'AQI', datasets:[
data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60], {
backgroundColor: 'green', //data like psi
borderColor: 'green', label: "Average PSI Data",
}] data: [],
backgroundColor: "green",
borderColor: "green",
},
],
}; };
//setting chart
const chart = new Chart(ctx, { const chart = new Chart(ctx, {
type: 'bar', type: "bar",
data: initialData, data: initialData,
options: { options: {
responsive: true, responsive: true,
title: { title: {
display: true, display: true,
text: 'HISTORICAL' text: "HISTORICAL",
}, },
subtitle: { subtitle: {
display: true, display: true,
text: 'Historic air quality graph for Singapore' text: "Historic air quality graph for Singapore",
}, },
legend: { legend: {
display: false display: false,
}, },
tooltips: { tooltips: {
mode: 'index', mode: "index",
intersect: false, intersect: false,
callbacks: { callbacks: {
label: function (tooltipItem, data) { label: function (tooltipItem, data) {
const label = data.labels[tooltipItem.index]; const label = data.labels[tooltipItem.index];
return label + ': ' + data.datasets[0].data[tooltipItem.index]; return label + ": " + data.datasets[0].data[tooltipItem.index];
} },
} },
}, },
scales: { scales: {
xAxes: [{ xAxes: [
{
barPercentage: 0.6, barPercentage: 0.6,
categoryPercentage: 0.7, categoryPercentage: 0.7,
ticks: { ticks: {
autoSkip: true, autoSkip: true,
}, },
maxRotation: 0, maxRotation: 0,
minRotation: 0 minRotation: 0,
}], },
yAxes: [{ ],
yAxes: [
{
title: { title: {
display: true, display: true,
text: 'Value' text: "Value",
} },
}] },
} ],
} },
},
}); });
// Function to update chart data based on the selected button queryButton.addEventListener("click", (event) => {
const updateChart = (data) => { const clickedButton = event.target;
chart.data = data; //console.log(clickedButton.id);
chart.update();
};
// Event listener for button clicks //make it switch bar chart based on query button
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);
});
}); });

2
consumerWebsite/views/bot.ejs
View File

@ -82,8 +82,6 @@
</div> </div>
</footer> </footer>
<script src="js/search.js"></script> <script src="js/search.js"></script>
<script src="js/data.js"></script>
</body> </body>

5
consumerWebsite/views/logintop.ejs
View File

@ -46,6 +46,7 @@
app.auth.isLoggedIn(function (error, data) { app.auth.isLoggedIn(function (error, data) {
if (!error) { if (!error) {
$("#cl-logout-button").show("fast"); $("#cl-logout-button").show("fast");
$("#cl-viewdata-button").show("fast");
$("#cl-api-button").show("fast"); $("#cl-api-button").show("fast");
$("#cl-profile-button").show("fast"); $("#cl-profile-button").show("fast");
$("#cl-login-button").hide("fast"); $("#cl-login-button").hide("fast");
@ -84,6 +85,10 @@
</li> </li>
<!-- profile button --> <!-- profile button -->
<div class="form-inline mt-2 mt-md-0"> <div class="form-inline mt-2 mt-md-0">
<a id="cl-viewdata-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/viewdata"
style="display: none">
<i class="fas fa-sign-out"></i>Data
</a>
<a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api" <a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api"
style="display: none"> style="display: none">
<i class="fas fa-sign-out"></i> API <i class="fas fa-sign-out"></i> API

6
consumerWebsite/views/top.ejs
View File

@ -62,6 +62,7 @@
$.scope.getUserDetails.update(data); $.scope.getUserDetails.update(data);
} }
$("#cl-logout-button").show("fast"); $("#cl-logout-button").show("fast");
$("#cl-viewdata-button").show("fast");
$("#cl-api-button").show("fast"); $("#cl-api-button").show("fast");
$("#cl-profile-button").show("fast"); $("#cl-profile-button").show("fast");
$("#cl-login-button").hide("fast"); $("#cl-login-button").hide("fast");
@ -106,6 +107,11 @@
--> -->
<!-- profile button --> <!-- profile button -->
<div class="form-inline mt-2 mt-md-0"> <div class="form-inline mt-2 mt-md-0">
<a id="cl-viewdata-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/viewdata"
style="display: none">
<i class="fas fa-sign-out"></i>Data
</a>
<a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api" <a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api"
style="display: none"> style="display: none">
<i class="fas fa-sign-out"></i> API <i class="fas fa-sign-out"></i> API

170
consumerWebsite/views/viewdata.ejs
View File

@ -2,42 +2,186 @@
<link href="css/data.css" rel="stylesheet" /> <link href="css/data.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
// Require login to see this page.
app.auth.forceLogin()
</script>
<br> <br>
<br> <br>
<body> <body>
<div class="air-quality-container"> <div class="air-quality-container">
<%# <div class="querybutton-container" id="querybutton-container">
<div class="graphbutton-container"> <!-- <button id="yearButton">Year</button>
<button id="barButton">Bar Graph</button> <button id="monthButton">Month</button>
<button id="lineButton">Line Graph</button> <button id="weekButton">Week</button> -->
</div> %> <button id="dayButton">Day</button>
</div>
<br>
<div class="chart-container"> <div class="chart-container">
<canvas id="dataChart"></canvas> <canvas id="dataChart"></canvas>
</div> </div>
<div class="button-container"> <!-- <div class="button-container">
<button id="aqiButton">AQI</button> <button id="psiButton">PSI</button>
<button id="tempButton">Temperature</button> <button id="tempButton">Temperature</button>
<button id="humButton">Humidity</button> <button id="humButton">Humidity</button>
<button id="pm25Button">PM2.5</button>
<button id="pm10Button">PM10</button>
<button id="o3Button">O3</button> <button id="o3Button">O3</button>
<button id="no2Button">NO2</button> <button id="no2Button">NO2</button>
<button id="so2Button">SO2</button> <button id="so2Button">SO2</button>
<button id="coButton">CO</button> <button id="coButton">CO</button>
</div> </div>
-->
<br>
<div class="download-container"> <div class="download-container">
<p>Download data here:</p> <p>Download data here:</p>
<button id="downloadCSVButton">Download CSV</button> <button id="downloadCSVButton" onclick="downloadCSV()">Download CSV</button>
<br><br>
<button id="downloadCSVButton" onclick="downloadExcel()">Download Excel Sheet</button>
</div> </div>
</div> </div>
</body> </body>
<br> <br>
<br> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="js/data.js"></script>
<!-- //download csv and excel -->
<script type="text/javascript">
//https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
function exportToCsv(filename, rows) {
var processRow = function (row) {
var finalVal = '';
for (var j = 0; j < row.length; j++) {
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
};
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0)
result = '"' + result + '"';
if (j > 0)
finalVal += ',';
finalVal += result;
}
return finalVal + '\n';
};
var csvFile = '';
for (var i = 0; i < rows.length; i++) {
csvFile += processRow(rows[i]);
}
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
//content="application/vnd.ms-excel;charset=utf-8"
function exportToExcel(filename, rows) {
var processRow = function (row) {
var finalVal = '';
for (var j = 0; j < row.length; j++) {
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
}
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0) {
result = '"' + result + '"';
}
if (j > 0) {
finalVal += '\t'; // Use tabs for Excel format
}
finalVal += result;
}
return finalVal + '\n';
};
var excelFile = '';
for (var i = 0; i < rows.length; i++) {
excelFile += processRow(rows[i]);
}
var blob = new Blob([excelFile], { type: "application/vnd.ms-excel;charset=utf-8" });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename + '.xls');
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // Feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
//onclick call
function downloadCSV() {
app.api.get('sensor-data/', function (error, data) {
//to loop through the data and assign into map array
var formattedData = data.map(function (item) {
return [
item.id,
item.sensorid,
item.locationid,
JSON.stringify(item.measurement), //to handle measurement object
item.createdAt
];
});
exportToCsv('export.csv', [
['id', 'sensorid', 'locationid', 'measurement', 'createdAt'],
...formattedData
]);
});
}
function downloadExcel() {
app.api.get('sensor-data/', function (error, data) {
//to loop through the data and assign into map array
var formattedData = data.map(function (item) {
return [
item.id,
item.sensorid,
item.locationid,
JSON.stringify(item.measurement), //to handle measurement object
item.createdAt
];
});
exportToExcel('export.xls', [
['id', 'sensorid', 'locationid', 'measurement', 'createdAt'],
...formattedData
]);
});
}
</script>
<%- include('bot') %> <%- include('bot') %>

4
contact.js
View File

@ -1,4 +0,0 @@
moment = require('moment')
//current time
console.log(moment().format('hh:mm:ss a'))