Update CSS, add relationship between sensorModel and locationModel, and remove console.log statements

This commit is contained in:
newtbot
2024-01-26 04:07:11 +08:00
parent ba498a4d4b
commit d38423fa6d
19 changed files with 213 additions and 205 deletions

View File

@ -1,9 +1,17 @@
<%- include('top') %>
<script>
//call socket.io
$(document).ready(async function () {
app.api.get('latest-sensor-data/data', function (error, data) {
//console.log(data[0]);
$.scope.LatestSensorData.push(data[0]);
});
});
//call socket.io to get live data
app.socket.on("sensorData:new", function (data) {
console.log("new data!!")
console.log(data);
console.log(data[0]);
$.scope.LatestSensorData.update(data[0]);
});
</script>
@ -53,56 +61,56 @@
</header>
<!-- Page Content -->
<div class="container">
<div class="services-bar">
<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">15 - 18 PSI</p>
</div>
<div class="card-footer">
<a href="/learnmore" class="btn btn-primary">Learn More</a>
</div>
<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">{{ measurement.psi }} PSI</p>
</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">70% - 75%</p>
</div>
<div class="card-footer">
<a href="/learnmore" class="btn btn-primary">Learn More</a>
</div>
<div class="card-footer">
<a href="/learnmore" class="btn btn-primary">Learn More</a>
</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">30&deg; - 37&deg;</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">{{ measurement.humidity }} %</p>
</div>
</div>
<div class="col-lg-3 mb-4">
<div class="card">
<h4 class="card-header">Another Category</h4>
<div class="card-body text-center">
<p class="card-text display-4">values</p>
</div>
<div class="card-footer">
<a href="/learnmore" class="btn btn-primary">Learn More</a>
</div>
<div class="card-footer">
<a href="/learnmore" class="btn btn-primary">Learn More</a>
</div>
</div>
</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">{{ measurement.temperature }}&deg;</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">{{ measurement.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 -->

View File

@ -8,10 +8,9 @@
<ul id="sensorDataList">
<li jq-repeat='sensorData'>
rowid: {{ id }}
sensorId: {{ sensorid }}
created: {{ createdAt }}
location: {{ locationid }}
created: {{ createdAt }}
<br />
co: {{ measurement.co }}
humidity: {{ measurement.humidity }}
@ -30,7 +29,7 @@
<script type="text/javascript">
$(document).ready(async function () {
app.api.get('sensor-data/data?order=DESC&limit=40', function(error, data){
app.api.get('sensor-data/data?order=DESC&limit=6', function(error, data){
$.scope.sensorData.push(...data);
})
})

View File

@ -57,9 +57,7 @@
//check if user is logged in
app.auth.isLoggedIn(function (error, data) {
if (!error) {
console.log(error);
$.scope.getUsername.update(data);
if (location.pathname == "/profile") {
$.scope.getUserDetails.update(data);
}