update
This commit is contained in:
Leo
98
consumerWebsite/public/js/apikey.js
Normal file
98
consumerWebsite/public/js/apikey.js
Normal file
@ -0,0 +1,98 @@
|
||||
function generateKey() {
|
||||
// Create the overlay dynamically
|
||||
var overlay = document.createElement('div');
|
||||
overlay.className = 'overlay';
|
||||
|
||||
// Create the small screen dynamically
|
||||
var generateKeyScreen = document.createElement('div');
|
||||
generateKeyScreen.className = 'generate-key-screen';
|
||||
|
||||
// Generate random public and private keys
|
||||
var publicKey = generateRandomKey();
|
||||
var privateKey = generateRandomKey();
|
||||
|
||||
// Add input fields for Name, Public Key, Private Key, Key Type, and Created
|
||||
generateKeyScreen.innerHTML = `
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required><br>
|
||||
|
||||
<label for="publicKey">Public Key:</label>
|
||||
<input type="text" id="publicKey" name="publicKey" value="${publicKey}" readonly>
|
||||
<button onclick="copyToClipboard('publicKey')">Copy</button><br>
|
||||
|
||||
<label for="privateKey">Private Key:</label>
|
||||
<input type="text" id="privateKey" name="privateKey" value="${privateKey}" readonly>
|
||||
<button onclick="copyToClipboard('privateKey')">Copy</button><br>
|
||||
|
||||
<label for="created">Created:</label>
|
||||
<input type="text" id="created" name="created" value="${getCurrentDate()}" readonly><br>
|
||||
|
||||
<button onclick="saveKey()">Save Key</button>
|
||||
<button onclick="closeGenerateKey()">Close</button>
|
||||
`;
|
||||
|
||||
// Append the overlay and small screen to the body
|
||||
document.body.appendChild(overlay);
|
||||
document.body.appendChild(generateKeyScreen);
|
||||
|
||||
// Display the overlay and small screen
|
||||
overlay.style.display = 'block';
|
||||
generateKeyScreen.style.display = 'block';
|
||||
}
|
||||
|
||||
function generateRandomKey() {
|
||||
// Generate a random string as a key (you might want to use a more robust key generation method)
|
||||
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
||||
}
|
||||
|
||||
function getCurrentDate() {
|
||||
// Get the current date and format it as 'YYYY-MM-DD'
|
||||
return new Date().toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId) {
|
||||
// Copy the text from the specified input field to the clipboard
|
||||
var element = document.getElementById(elementId);
|
||||
element.select();
|
||||
document.execCommand('copy');
|
||||
|
||||
// Optionally, you can provide feedback to the user (e.g., display a tooltip)
|
||||
alert('Copied to clipboard: ' + element.value);
|
||||
}
|
||||
|
||||
|
||||
function saveKey() {
|
||||
// Retrieve values from input fields
|
||||
var name = document.getElementById('name').value;
|
||||
var publicKey = document.getElementById('publicKey').value;
|
||||
var privateKey = document.getElementById('privateKey').value;
|
||||
var created = document.getElementById('created').value;
|
||||
|
||||
// Create a new table row with the key information
|
||||
var newRow = document.createElement('tr');
|
||||
newRow.innerHTML = `
|
||||
<td>${name}</td>
|
||||
<td>${publicKey}</td>
|
||||
<td>${privateKey}</td>
|
||||
<td>${created}</td>
|
||||
`;
|
||||
|
||||
// Append the new row to the table body
|
||||
var tableBody = document.querySelector('#content-get-api tbody');
|
||||
tableBody.appendChild(newRow);
|
||||
|
||||
// Optionally, you can close the small screen
|
||||
closeGenerateKey();
|
||||
}
|
||||
|
||||
|
||||
function closeGenerateKey() {
|
||||
var overlay = document.querySelector('.overlay');
|
||||
var generateKeyScreen = document.querySelector('.generate-key-screen');
|
||||
|
||||
// Hide and remove the overlay and small screen from the DOM
|
||||
overlay.style.display = 'none';
|
||||
generateKeyScreen.style.display = 'none';
|
||||
document.body.removeChild(overlay);
|
||||
document.body.removeChild(generateKeyScreen);
|
||||
}
|
||||
184
consumerWebsite/public/js/data.js
Normal file
184
consumerWebsite/public/js/data.js
Normal file
@ -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);
|
||||
});
|
||||
});
|
||||
@ -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");
|
||||
});
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user