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

Add routes to get location and sensor by name

Browse Source 
Added viewdata using chart.js
This commit is contained in:
newtbot
2024-01-29 00:44:10 +08:00
parent fadabf3451
commit c268e1d33d
7 changed files with 264 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
consumerWebsite/views/top.ejs
View File

@ -42,12 +42,13 @@
</script>
<!-- socket.io scriot -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.min.js"></script>
<!-- fancy table cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery.fancytable/dist/fancyTable.min.js"></script> -->
<!-- jq-repeat -->
<script src="js/jq-repeat.js"></script>
<!-- jquery app.js -->
<!-- jquery public app.js -->
<script src="js/app.js"></script>
</head>
<!-- javascript function to check if user is auth -->
@ -99,12 +100,6 @@
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="/api">API Doc</a>
</li>
-->
<!-- profile button -->
<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"

92
consumerWebsite/views/viewdata.ejs
View File

@ -5,6 +5,26 @@
<script type="text/javascript">
// Require login to see this page.
app.auth.forceLogin()
//get Location data
app.api.get('location', function (error, data) {
for (let row in data){
//format time to local time than push
data[row].createdAt = new Date(data[row].createdAt).toLocaleString();
data[row].updatedAt = new Date(data[row].updatedAt).toLocaleString();
$.scope.LocationTable.push(data[row]);
}
})
//get sensor data
app.api.get('sensor', function (error, data) {
for (let row in data){
//format time to local time than push
data[row].createdAt = new Date(data[row].createdAt).toLocaleString();
data[row].updatedAt = new Date(data[row].updatedAt).toLocaleString();
$.scope.SensorTable.push(data[row]);
}
})
</script>
<br>
<br>
@ -12,17 +32,15 @@
<body>
<div class="air-quality-container">
<div class="querybutton-container" id="querybutton-container">
<!-- <button id="yearButton">Year</button>
<button id="monthButton">Month</button>
<button id="weekButton">Week</button> -->
<button id="dayButton">Day</button>
<!-- header -->
<div class="header-container">
<h1>Daily Air Quality Data Chart</h1>
</div>
<br>
<div class="chart-container">
<canvas id="dataChart"></canvas>
<canvas id="DailyDataChart"></canvas>
</div>
<!-- <div class="button-container">
<div class="button-container">
<button id="psiButton">PSI</button>
<button id="tempButton">Temperature</button>
<button id="humButton">Humidity</button>
@ -31,16 +49,70 @@
<button id="so2Button">SO2</button>
<button id="coButton">CO</button>
</div>
-->
<br>
<div class="header-container">
<h1>Location Table</h1>
</div>
<table id="LocationTable" class="table table-striped LocationTable">
<thead>
<tr>
<th>ID</th>
<th>Location Name</th>
<th>Added_By</th>
<th>Description</th>
<th>CreatedAt</th>
<th>UpdatedAt</th>
</tr>
</thead>
<tbody>
<!-- Table Content Goes Here -->
<tr jq-repeat="LocationTable">
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{added_by}}</td>
<td>{{description}}</td>
<td>{{createdAt}}</td>
<td>{{updatedAt}}</td>
</tbody>
</table>
<div class="header-container">
<h1>Sensor Table</h1>
</div>
<table id="sensorTable" class="table table-striped sensorTable">
<thead>
<tr>
<th>ID</th>
<th>Sensor Name</th>
<th>Added_By</th>
<th>Mac Address</th>
<th>Description</th>
<th>Location ID</th>
<th>CreatedAt</th>
<th>UpdatedAt</th>
</tr>
</thead>
<tbody>
<!-- Table Content Goes Here -->
<tr jq-repeat="SensorTable">
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{added_by}}</td>
<td>{{mac_address}}</td>
<td>{{description}}</td>
<td>{{locationid}}</td>
<td>{{createdAt}}</td>
<td>{{updatedAt}}</td>
</tbody>
</table>
<br>
<div class="download-container">
<p>Download data here:</p>
<p>Download sensor data here:</p>
<button id="downloadCSVButton" onclick="downloadCSV()">Download CSV</button>
<br><br>
<button id="downloadCSVButton" onclick="downloadExcel()">Download Excel Sheet</button>
</div>
</div>
</body>
<br>
<br>