remove kecamatan and kelurahan table, using alamat where the lampu merah located, added the photos on /assets/image/<id> on each alamat, update server.js, add new list.html
This commit is contained in:
128
site/list.html
Normal file
128
site/list.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sistem Monitoring Kualitas Udara | List Alamat</title>
|
||||
|
||||
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
|
||||
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
|
||||
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
|
||||
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="fixed-header">
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="pull-left">
|
||||
<a href="index.html" class="logo">Monitor Kualitas Udara</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-horizontal">
|
||||
<div class="container">
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a href="index.html">
|
||||
<i class="ico fa fa-home"></i>
|
||||
<span>Halaman Utama</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="current">
|
||||
<a href="list.html">
|
||||
<i class="ico fa fa-list"></i>
|
||||
<span>List Sensor</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="wrapper">
|
||||
<div class="main-content container">
|
||||
<div class="row small-spacing" id="ini_dia"></div>
|
||||
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<ul class="list-inline">
|
||||
<li>2026 © SULAIMAN, Universitas Muhammadiyah Parepare.</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/scripts/jquery.min.js"></script>
|
||||
<script src="assets/plugin/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="assets/plugin/nprogress/nprogress.js"></script>
|
||||
<script src="assets/scripts/main.js"></script>
|
||||
|
||||
<script>
|
||||
async function loadSensors() {
|
||||
try {
|
||||
const res = await fetch("/api/sensors");
|
||||
const sensors = await res.json();
|
||||
console.log(sensors);
|
||||
|
||||
const container = document.getElementById("ini_dia");
|
||||
|
||||
let html = `
|
||||
<div class="col-xs-12">
|
||||
<div class="box-content card white">
|
||||
<h4 class="box-title">Daftar Alamat Sensor Aktif</h4>
|
||||
<div class="card-content">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Sensor ID</th>
|
||||
<th>Alamat</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
if (!sensors.length) {
|
||||
html += `
|
||||
<tr>
|
||||
<td colspan="3" class="text-center">Tidak ada data</td>
|
||||
</tr>
|
||||
`;
|
||||
} else {
|
||||
sensors.forEach((sensor, index) => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>${index + 1}</td>
|
||||
<td>${sensor.id}</td>
|
||||
<td>${sensor.alamat}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
html += `
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed load sensors", err);
|
||||
}
|
||||
}
|
||||
|
||||
loadSensors();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user