c234aa3616
Update formAJAX function to log data from the server Add getUserByEmail and checkEmail functions Update profile.ejs to require login Update addSensorData function to emit new sensor data Update api.css with styling changes Update token route to generate and send token email Update authChecker middleware to allow user and token routes
196 lines
8.2 KiB
Plaintext
196 lines
8.2 KiB
Plaintext
<%- include('top') %>
|
|
<script type="text/javascript">
|
|
function extractNumbers(str) {
|
|
if (typeof str === 'number') return str;
|
|
return str.match(/\d+/)[0];
|
|
}
|
|
|
|
function calculateAverage(numbers) {
|
|
if (numbers.length === 0) return 0
|
|
const sum = numbers.reduce((acc, num) => acc + num, 0);
|
|
return sum / numbers.length;
|
|
}
|
|
const values = {
|
|
psi: [],
|
|
humidity: [],
|
|
temperature: [],
|
|
windspeed: [],
|
|
};
|
|
|
|
function parseRowToTemplace(row) {
|
|
values.psi.unshift(extractNumbers(row.measurement.psi))
|
|
values.humidity.unshift(extractNumbers(row.measurement.humidity))
|
|
values.temperature.unshift(extractNumbers(row.measurement.temperature))
|
|
values.windspeed.unshift(extractNumbers(row.measurement.windspeed))
|
|
|
|
return {
|
|
average: {
|
|
psi: parseInt(calculateAverage(values.psi)),
|
|
humidity: parseInt(calculateAverage(values.humidity)),
|
|
temperature: parseInt(calculateAverage(values.temperature)),
|
|
windspeed: parseInt(calculateAverage(values.windspeed)),
|
|
},
|
|
latest: {
|
|
psi: values.psi[0],
|
|
humidity: values.humidity[0],
|
|
temperature: values.temperature[0],
|
|
windspeed: values.windspeed[0],
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(async function () {
|
|
|
|
app.api.get('latest-sensor-data/data', function (error, data) {
|
|
for (let row of data) {
|
|
//console.log(row);
|
|
$.scope.LatestSensorData.update(parseRowToTemplace(row));
|
|
}
|
|
});
|
|
|
|
//call socket.io to get live data
|
|
app.socket.on("sensorData:new", function (data) {
|
|
$.scope.LatestSensorData.update(parseRowToTemplace(data));
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<header class="slider-main">
|
|
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<!-- Slide One - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item active" style="background-image: url('images/slider-01.jpg')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Welcome to EcoSaver</h3>
|
|
<p>The current airviro system in used by NEA only has 14 substations to record air quality. Our
|
|
project aims to supplement data to NEA and also allow the general consumer to access our IoT sensor
|
|
data through a web service.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Slide Two - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item" style="background-image: url('images/slider-02.jpg')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Fresh Air</h3>
|
|
<p>A Great day for jogging</p>
|
|
</div>
|
|
</div>
|
|
<!-- Slide Three - Set the background image for this slide in the line below -->
|
|
<div class="carousel-item" style="background-image: url('images/slider-03.jpg')">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h3>Welcome to EcoSaver</h3>
|
|
<p>Hope you enjoy!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<!-- Page Content -->
|
|
<div class="container">
|
|
<div class="services-bar" jq-repeat="LatestSensorData">
|
|
<h1 class="my-4">Services</h1>
|
|
<!-- Services Section -->
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card">
|
|
<h4 class="card-header">Air Quality Index</h4>
|
|
<div class="card-body text-center">
|
|
<p class="card-text display-4"> Average: {{average.psi}} PSI</p>
|
|
<p class="card-text display-4"> Latest: {{latest.psi}} PSI</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/learnmore" class="btn btn-primary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card">
|
|
<h4 class="card-header">Humidity</h4>
|
|
<div class="card-body text-center">
|
|
<p class="card-text display-4"> Average: {{average.humidity}} %</p>
|
|
<p class="card-text display-4"> Latest: {{latest.humidity}} %</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/learnmore" class="btn btn-primary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card">
|
|
<h4 class="card-header">Temperature</h4>
|
|
<div class="card-body text-center">
|
|
<p class="card-text display-4"> Average: {{average.temperature}}°</p>
|
|
<p class="card-text display-4"> Latest: {{latest.temperature}}°</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/learnmore" class="btn btn-primary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card">
|
|
<h4 class="card-header">Wind Speed</h4>
|
|
<div class="card-body text-center">
|
|
<p class="card-text display-4"> Average: {{average.windspeed}} Km/h</p>
|
|
<p class="card-text display-4"> Latest: {{latest.windspeed}} Km/h</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/learnmore" class="btn btn-primary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- About Section -->
|
|
<div class="about-main">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<title>EcoSaver - Your Air Quality Index Source</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Welcome to EcoSaver - Your Air Quality Index Source</h1>
|
|
<p>We prioritize your well-being by providing up-to-date information on air quality indexes.</p>
|
|
</header>
|
|
|
|
<section class="approach">
|
|
<h2>Our Approach: Smart and Informative</h2>
|
|
<p>We believe in offering precise and comprehensive data to empower your decisions for a better
|
|
quality of life.</p>
|
|
<ul>
|
|
<li>Presenting real-time air quality data in a user-friendly format.</li>
|
|
<li>Equipping you with insights into the impact of air quality on health and the environment.
|
|
</li>
|
|
<li>Empowering communities with knowledge to make informed choices for a sustainable future.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img class="img-fluid rounded" src="images/about-img.jpg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<%- include('bot') %> |