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

update

Browse Source
This commit is contained in:
Leo 2024-01-24 15:51:51 +08:00
parent 7e9b6af0ba
commit dae836e49b
12 changed files with 971 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
consumerWebsite/public/css/api.css
View File

@ -547,3 +547,107 @@ body.one-content-column-version .content thead {
#content-get-api .generate-key-button:hover { #content-get-api .generate-key-button:hover {
background-color: #45a049; /* Darker green on hover */ 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;
}

59
consumerWebsite/public/css/data.css Normal file
View File

@ -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;
}

13
consumerWebsite/public/css/learnmore.css
View File

@ -100,3 +100,16 @@ body {
background-color: #213f6d; background-color: #213f6d;
color: #fff; 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 */
}

98
consumerWebsite/public/js/apikey.js Normal file
View 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
View 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);
});
});

33
consumerWebsite/public/js/learnmore.js
View File

@ -1,21 +1,21 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
function updateAdditionalInfo(region) { function updateAdditionalInfo(region) {
const infoContainer = document.getElementById("additional-info"); const infoContainer = document.getElementById("additional-info");
// Replace the following with actual data retrieval based on the region // Replace the following with actual data retrieval based on the region
const aqi = "15"; const aqi = "15";
const temperature = "25°C"; const temperature = "25°C";
const humidity = "60%"; const humidity = "60%";
const pm25 = "10"; const pm25 = "10";
const pm10 = "20"; const pm10 = "20";
const so2 = "5"; const so2 = "5";
const o3 = "35"; const o3 = "35";
const co = "0.5"; const co = "0.5";
const no2 = "15"; const no2 = "15";
infoContainer.innerHTML = ` infoContainer.innerHTML = `
<div class="additional-info-box"> <div class="additional-info-box">
<h3>Additional Information - ${region}</h3> <h3>Additional Information - ${region}</h3>
<button id="downloadCsvButton">Download CSV</button> <button id="viewData">View Data</button>
<div class="info-item"> <div class="info-item">
<span class="info-label">Air Quality Index:</span> <span class="info-label">Air Quality Index:</span>
<span class="info-value">${aqi}</span> <span class="info-value">${aqi}</span>
@ -54,7 +54,13 @@ infoContainer.innerHTML = `
</div> </div>
</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 // Remove the 'active' class from all info-box elements
const infoBoxes = document.querySelectorAll('.info-box'); const infoBoxes = document.querySelectorAll('.info-box');
@ -65,6 +71,8 @@ infoContainer.innerHTML = `
clickedBox.classList.add('active'); clickedBox.classList.add('active');
} }
const defaultRegion = "North"; const defaultRegion = "North";
const defaultBox = document.getElementById(defaultRegion.toLowerCase()); const defaultBox = document.getElementById(defaultRegion.toLowerCase());
defaultBox.classList.add('active'); defaultBox.classList.add('active');
@ -117,3 +125,4 @@ document.getElementById("central").addEventListener("click", function () {
updateAdditionalInfo("Central"); updateAdditionalInfo("Central");
}); });

5
consumerWebsite/routes/render.js
View File

@ -82,6 +82,11 @@ router.get("/contact", function (req, res, next) {
res.render("contact"); res.render("contact");
}); });
//data page
router.get("/viewdata", function (req, res, next) {
res.render("viewdata");
});
//api doc //api doc
router.get("/api", function (req, res, next) { router.get("/api", function (req, res, next) {
res.render("api"); res.render("api");

770
consumerWebsite/views/api.ejs
View File

@ -5,394 +5,398 @@
https://github.com/ticlekiwi/API-Documentation-HTML-Template https://github.com/ticlekiwi/API-Documentation-HTML-Template
!--> !-->
<%- include('top') %> <%- include('top') %>
<link rel="stylesheet" href="css/api.css" media="all"> <link rel="stylesheet" href="css/api.css" media="all">
<body class="one-content-column-version"> <body class="one-content-column-version">
<div class="left-menu"> <div class="left-menu">
<div class="content-logo"> <div class="content-logo">
<div class="logo"> <div class="logo">
<img alt="platform by Emily van den Heever from the Noun Project" <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" title="platform by Emily van den Heever from the Noun Project" src="images/apilogo.png"
height="32" /> height="32" />
<span>API Documentation</span> <span>API Documentation</span>
</div> </div>
<button class="burger-menu-icon" id="button-menu-mobile"> <button class="burger-menu-icon" id="button-menu-mobile">
<svg width="34" height="34" viewBox="0 0 100 100"> <svg width="34" height="34" viewBox="0 0 100 100">
<path class="line line1" <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"> 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>
<path class="line line2" d="M 20,50 H 80"></path> <path class="line line2" d="M 20,50 H 80"></path>
<path class="line line3" <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"> 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> </path>
</svg> </svg>
</button> </button>
</div> </div>
<div class="mobile-menu-closer"></div> <div class="mobile-menu-closer"></div>
<div class="content-menu"> <div class="content-menu">
<div class="content-infos"> <div class="content-infos">
<div class="info"><b>Version:</b> 0</div> <div class="info"><b>Version:</b> 0</div>
<div class="info"><b>Last Updated:</b> 22th January 2024</div> <div class="info"><b>Last Updated:</b> 22th January 2024</div>
</div> </div>
<ul> <ul>
<li class="scroll-to-link active" data-target="content-get-started"> <li class="scroll-to-link active" data-target="content-get-started">
<a>GET STARTED</a> <a>GET STARTED</a>
</li> </li>
<li class="scroll-to-link" data-target="content-get-api"> <li class="scroll-to-link" data-target="content-errors">
<a>Generate API</a> <a>Errors</a>
</li> </li>
<li class="scroll-to-link" data-target="content-errors"> <li class="scroll-to-link" data-target="content-get-api">
<a>Errors</a> <a>Generate API</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="content-page"> <div class="content-page">
<div class="content"> <div class="content">
<div class="overflow-hidden content-section" id="content-get-started"> <div class="overflow-hidden content-section" id="content-get-started">
<h1>Get started</h1> <h1>Get started</h1>
<p> <p>
The following API is provided by the Eco saver developer team. It allows you to get Location and The following API is provided by the Eco saver developer team. It allows you to get Location and
Sensor and Sensor Data from the Eco saver database. Sensor and Sensor Data from the Eco saver database.
</p> </p>
<p> <p>
To use this API, you need an <strong>API key</strong>. To use this API, you need an <strong>API key</strong>.
</p> </p>
</div> </div>
<div class="overflow-hidden content-section" id="content-get-location"> <div class="overflow-hidden content-section" id="content-get-location">
<h2>Get all location</h2> <h2>Get all location</h2>
<p> <p>
To get Location of sensors you need to make a GET call to the following url :<br> To get Location of sensors you need to make a GET call to the following url :<br>
<code class="higlighted break-word">https://api.teeseng.uk/api/v0/location</code> <code class="higlighted break-word">https://api.teeseng.uk/api/v0/location</code>
<br> <br>
<br> <br>
Return Response :<br> Return Response :<br>
<code class="higlighted break-word">{"status":"200"}</code> <code class="higlighted break-word">{"status":"200"}</code>
</p> </p>
<br> <br>
<h4>QUERY PARAMETERS</h4> <h4>QUERY PARAMETERS</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Field</th> <th>Field</th>
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Authorization</td> <td>Authorization</td>
<td>JSON</td> <td>JSON</td>
<td>Your API key.</td> <td>Your API key.</td>
<td>(Required) Example: curl https://api.teeseng.uk/api/v0/location -H "Authorization: <td>(Required) Example: curl https://api.teeseng.uk/api/v0/location -H "Authorization:
{provide your {provide your
API key here}"</td> API key here}"</td>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="overflow-hidden content-section" id="content-get-location-by-id"> <div class="overflow-hidden content-section" id="content-get-location-by-id">
<h2>Get location by ID</h2> <h2>Get location by ID</h2>
<p> <p>
To get Location you need to make a GET call to the following url :<br> To get Location you need to make a GET call to the following url :<br>
<code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/{id}</code> <code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/{id}</code>
<br> <br>
<br> <br>
Return Response :<br> Return Response :<br>
<code class="higlighted break-word">{"status":"200"}</code> <code class="higlighted break-word">{"status":"200"}</code>
</p> </p>
<br> <br>
<h4>QUERY PARAMETERS</h4> <h4>QUERY PARAMETERS</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Field</th> <th>Field</th>
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Authorization</td> <td>Authorization</td>
<td>JSON</td> <td>JSON</td>
<td>(Required) Your API key.</td> <td>(Required) Your API key.</td>
<td>Example: curl https://api.teeseng.uk/api/v0/location -H "Authorization: {provide <td>Example: curl https://api.teeseng.uk/api/v0/location -H "Authorization: {provide
your your
API key here}"</td> API key here}"</td>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="overflow-hidden content-section" id="content-add-location"> <div class="overflow-hidden content-section" id="content-add-location">
<h2>Add Location (Only for system or admin API key)</h2> <h2>Add Location (Only for system or admin API key)</h2>
<p> <p>
To add an Location you need to make a POST call to the following url :<br> To add an Location you need to make a POST call to the following url :<br>
<code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/new</code> <code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/new</code>
<br> <br>
<br> <br>
Example :<br> Example :<br>
<code <code
class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/new -H "Content-Type: application/json" -X POST -d '{"name": "SAMPLE", "added_by": "system" , "description": "test"}'</code> class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/new -H "Content-Type: application/json" -X POST -d '{"name": "SAMPLE", "added_by": "system" , "description": "test"}'</code>
<br> <br>
<br> <br>
Return Response :<br> Return Response :<br>
<code class="higlighted break-word">{"status":"200"}</code> <code class="higlighted break-word">{"status":"200"}</code>
</p> </p>
<br> <br>
<h4>QUERY PARAMETERS</h4> <h4>QUERY PARAMETERS</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Field</th> <th>Field</th>
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Authorization</td> <td>Authorization</td>
<td>JSON</td> <td>JSON</td>
<td>Your API key.</td> <td>Your API key.</td>
<td>(Required) Example: curl https://api.teeseng.uk/api/v0/location/new -H <td>(Required) Example: curl https://api.teeseng.uk/api/v0/location/new -H
"Authorization: {provide your "Authorization: {provide your
API key here}"</td> API key here}"</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Location name</td> <td>Location name</td>
<td>JSON</td> <td>JSON</td>
<td>Location name.</td> <td>Location name.</td>
<td>(Required) Location name. Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Required) Location name. Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"name":"Location name"}'</td> your API key here" -d '{"name":"Location name"}'</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Added by </td> <td>Added by </td>
<td>JSON</td> <td>JSON</td>
<td>System or Admin</td> <td>System or Admin</td>
<td>(Required) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Required) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"added_by":"system"}'</td> your API key here" -d '{"added_by":"system"}'</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Description</td> <td>Description</td>
<td>JSON</td> <td>JSON</td>
<td>Description of Location</td> <td>Description of Location</td>
<td>(Required) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Required) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"description":"test"}'</td> your API key here" -d '{"description":"test"}'</td>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<!-- update --> <!-- update -->
<div class="overflow-hidden content-section" id="content-update-location-by-id"> <div class="overflow-hidden content-section" id="content-update-location-by-id">
<h2>Update Location (Only for system or admin API key)</h2> <h2>Update Location (Only for system or admin API key)</h2>
<p> <p>
To update an Location you need to make a PUT call to the following url :<br> To update an Location you need to make a PUT call to the following url :<br>
<code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/update</code> <code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/update</code>
<br> <br>
<br> <br>
Example :<br> Example :<br>
<code <code
class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/update -H "Content-Type: application/json" -X POST -d '{"id": "7" , "name": "SAMPLE", "added_by": "system" , "description": "test"}'</code> class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/update -H "Content-Type: application/json" -X POST -d '{"id": "7" , "name": "SAMPLE", "added_by": "system" , "description": "test"}'</code>
<br> <br>
<br> <br>
Return Response :<br> Return Response :<br>
<code class="higlighted break-word">{"status":"200","message":"Location 7 updated"}</code> <code class="higlighted break-word">{"status":"200","message":"Location 7 updated"}</code>
</p> </p>
<br> <br>
<h4>QUERY PARAMETERS</h4> <h4>QUERY PARAMETERS</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Field</th> <th>Field</th>
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Authorization</td> <td>Authorization</td>
<td>JSON</td> <td>JSON</td>
<td>Your API key.</td> <td>Your API key.</td>
<td>(Required) example: curl https://api.teeseng.uk/api/v0/location/update -H <td>(Required) example: curl https://api.teeseng.uk/api/v0/location/update -H
"Authorization: {provide your "Authorization: {provide your
API key here}"</td> API key here}"</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>ID</td> <td>ID</td>
<td>JSON</td> <td>JSON</td>
<td>Location ID</td> <td>Location ID</td>
<td>(Required) Location ID Example: curl https://api.teeseng.uk/api/v0/location/update <td>(Required) Location ID Example: curl https://api.teeseng.uk/api/v0/location/update
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"id": "7"}'</td> your API key here" -d '{"id": "7"}'</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Location name</td> <td>Location name</td>
<td>JSON</td> <td>JSON</td>
<td>Location name.</td> <td>Location name.</td>
<td>(Optional) Location name. Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Optional) Location name. Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"name":"Location name"}'</td> your API key here" -d '{"name":"Location name"}'</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Added by </td> <td>Added by </td>
<td>JSON</td> <td>JSON</td>
<td>System or Admin</td> <td>System or Admin</td>
<td>(Optional) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Optional) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"added_by":"system"}'</td> your API key here" -d '{"added_by":"system"}'</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Description</td> <td>Description</td>
<td>JSON</td> <td>JSON</td>
<td>Description of Location</td> <td>Description of Location</td>
<td>(Optional) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new <td>(Optional) System or Admin Example: curl https://api.teeseng.uk/api/v0/location/new
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"description":"test"}'</td> your API key here" -d '{"description":"test"}'</td>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<!-- delete location --> <!-- delete location -->
<div class="overflow-hidden content-section" id="content-update-location-by-id"> <div class="overflow-hidden content-section" id="content-update-location-by-id">
<h2>Delete Location (Only for system or admin API key)</h2> <h2>Delete Location (Only for system or admin API key)</h2>
<p> <p>
To delete an Location you need to make a DELETE call to the following url :<br> To delete an Location you need to make a DELETE call to the following url :<br>
<code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/delete</code> <code class="higlighted break-word">https://api.teeseng.uk/api/v0/location/delete</code>
<br> <br>
<br> <br>
Example :<br> Example :<br>
<code <code
class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/delete -H "Content-Type: application/json" -X POST -d '{"id": "7"}'</code> class="higlighted break-word">curl https://api.teeseng.uk/api/v0/location/delete -H "Content-Type: application/json" -X POST -d '{"id": "7"}'</code>
</p> </p>
<br> <br>
<h4>QUERY PARAMETERS</h4> <h4>QUERY PARAMETERS</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Field</th> <th>Field</th>
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Authorization</td> <td>Authorization</td>
<td>JSON</td> <td>JSON</td>
<td>Your API key.</td> <td>Your API key.</td>
<td>(Required) example: curl https://api.teeseng.uk/api/v0/location/delete -H <td>(Required) example: curl https://api.teeseng.uk/api/v0/location/delete -H
"Authorization: {provide your "Authorization: {provide your
API key here}"</td> API key here}"</td>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>ID</td> <td>ID</td>
<td>JSON</td> <td>JSON</td>
<td>Location ID</td> <td>Location ID</td>
<td>(Required) Location ID Example: curl https://api.teeseng.uk/api/v0/location/delete <td>(Required) Location ID Example: curl https://api.teeseng.uk/api/v0/location/delete
-H "Authorization: provide -H "Authorization: provide
your API key here" -d '{"id": "7"}'</td> your API key here" -d '{"id": "7"}'</td>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="overflow-hidden content-section" id="content-errors"> <div class="overflow-hidden content-section" id="content-errors">
<h2>Errors</h2> <h2>Errors</h2>
<p> <p>
The Westeros API uses the following error codes: The Westeros API uses the following error codes:
</p> </p>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Error Code</th> <th>Error Code</th>
<th>Meaning</th> <th>Meaning</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>X000</td> <td>X000</td>
<td> <td>
Some parameters are missing. This error appears when you don't pass every mandatory Some parameters are missing. This error appears when you don't pass every mandatory
parameters. parameters.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>403</td> <td>403</td>
<td> <td>
Unknown or unvalid <code class="higlighted">secret_key</code>. This error appears if Unknown or unvalid <code class="higlighted">secret_key</code>. This error appears if
you use an unknow API key or if your API key expired. you use an unknow API key or if your API key expired.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>500</td> <td>500</td>
<td> <td>
Unvalid <code class="higlighted">secret_key</code> No API key was supplied. Invalid Unvalid <code class="higlighted">secret_key</code> No API key was supplied. Invalid
request. request.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>X003</td> <td>X003</td>
<td> <td>
Unknown or unvalid user <code class="higlighted">token</code>. This error appears if Unknown or unvalid user <code class="higlighted">token</code>. This error appears if
you use an unknow user <code class="higlighted">token</code> or if the user <code you use an unknow user <code class="higlighted">token</code> or if the user <code
class="higlighted">token</code> expired. class="higlighted">token</code> expired.
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="overflow-hidden content-section" id="content-get-api"> <div class="overflow-hidden content-section" id="content-get-api">
<div class="api-keys-header"> <div class="api-keys-header">
<h2>API Keys</h2> <h2>API Keys</h2>
<button class="generate-key-button">Generate Key</button> <div class="button-container">
<p> <button class="generate-key-button" onclick="generateKey()">Generate Key</button>
You can generate API Keys here: <button class="delete-key-button" onclick="deleteKeys()">Delete Keys</button>
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Public Key</th>
<th>Private Key</th>
<th>Key Type</th>
<th>Created</th>
</tr>
</thead>
<tbody>
<tr>
<td>API Key</td>
<td>GR234-We34</td>
<td>greR-234-fEG</td>
<td>Type</td>
<td>2024-01-22</td>
</tr>
</tbody>
</table>
</div> </div>
<p>
You can generate API Keys here:
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Public Key</th>
<th>Private Key</th>
<th>Created</th>
</tr>
</thead>
<tbody>
<tr>
<td>API Key</td>
<td>GR234-We34</td>
<td>greR-234-fEG</td>
<td>2024-01-22</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div>
</body>
<script src="js/api.js"></script>
</html>
</div>
</div>
</body>
<script src="js/api.js"></script>
<script src="js/apikey.js"></script>
</html>

3
consumerWebsite/views/bot.ejs
View File

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

4
consumerWebsite/views/learnmore.ejs
View File

@ -38,7 +38,11 @@
<br> <br>
<br> <br>
<script src="js/learnmore.js"></script> <script src="js/learnmore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<%- include('bot') %> <%- include('bot') %>

48
consumerWebsite/views/test.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PM2.5 Sub-Index Over Time</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="pm25Chart"></canvas>
<script>
const ctx = document.getElementById('pm25Chart').getContext('2d');
const pm25Data = [37, 38, 39, 40, 41, 39, 38];
const timestamps = ["4pm", "7pm", "11pm", "3am", "7am", "11am", "3pm"];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: timestamps,
datasets: [{
label: 'PM2.5 Sub-Index',
data: pm25Data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 5,
pointHitRadius: 10,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'PM2.5 Sub-Index Over Time'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>

43
consumerWebsite/views/viewdata.ejs Normal file
View File

@ -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>
<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') %>