kicap/air-quality-webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cowrie
2026-04-29 00:29:00 +08:00
parent 02a06ed434
commit 2fbd62ee6d
19 changed files with 267 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
site/index.html
View File

@ -32,6 +32,12 @@
<span>Halaman Utama</span>
</a>
</li>
<li>
<a href="list.html">
<i class="ico fa fa-list"></i>
<span>List Sensor</span>
</a>
</li>
</ul>
</div>
</nav>
@ -59,24 +65,15 @@
<div style="background:#fff; padding:20px; width:350px; margin:100px auto; border-radius:10px;">
<h4>Tambah Sensor</h4>
<label>Kecamatan</label>
<select id="kecamatan" class="form-control" onchange="loadKelurahan()">
<option value="">-- Pilih Kecamatan --</option>
<label>Alamat:</label>
<select id="alamat-select" class="form-control" onchange="gambar_preview()">
<option value="">-- Pilih Alamat --</option>
</select>
<br>
<div id="preview-container" style="margin-top:15px;"></div>
<hr>
<label>Kelurahan</label>
<select id="kelurahan" class="form-control">
<option value="">-- Pilih Kelurahan --</option>
</select>
<br>
<label>Alamat</label>
<textarea id="alamat" class="form-control"></textarea>
<br>
<button class="btn btn-success" onclick="addSensor()">Simpan</button>
<button class="btn btn-default" onclick="closeDialog()">Batal</button>
@ -85,7 +82,8 @@
<script src="assets/scripts/jquery.min.js"></script>
<script src="assets/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/scripts/main.min.js"></script>
<script src="assets/plugin/nprogress/nprogress.js"></script>
<script src="assets/scripts/main.js"></script>
<script>
function getStatus(aq) {
@ -134,12 +132,6 @@
<div class="card-content">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">Lokasi</label>
<div class="col-sm-8">
<p class="form-control-static">${data.kecamatan} - ${data.kelurahan}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Alamat</label>
@ -224,56 +216,109 @@
function openDialog() {
document.getElementById("dialog").style.display = "block";
loadKecamatan();
// reset dropdown
document.getElementById("alamat-select").value = "";
$("#preview-gambar").html("");
loadAlamat();
}
function closeDialog() {
document.getElementById("dialog").style.display = "none";
}
async function loadKecamatan() {
const res = await fetch("/api/kecamatan");
const data = await res.json();
const select = document.getElementById("kecamatan");
select.innerHTML = `<option value="">-- Pilih Kecamatan --</option>`;
data.forEach(item => {
select.innerHTML += `<option value="${item.id}">${item.nama}</option>`;
});
}
async function loadKelurahan() {
const id = document.getElementById("kecamatan").value;
const res = await fetch(`/api/kelurahan?kecamatan_id=${id}`);
const data = await res.json();
const select = document.getElementById("kelurahan");
select.innerHTML = `<option value="">-- Pilih Kelurahan --</option>`;
data.forEach(item => {
select.innerHTML += `<option value="${item.id}">${item.nama}</option>`;
});
}
async function addSensor() {
const kelurahan = document.getElementById("kelurahan").value;
const alamat = document.getElementById("alamat").value;
const id = document.getElementById("alamat-select").value;
if (!id) {
alert("Pilih alamat terlebih dahulu!");
return;
}
try {
const res = await fetch("/api/addSensor", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ id })
});
const result = await res.json();
if (!res.ok) {
alert(result.error || "Gagal menambah sensor");
return;
}
alert("Sensor berhasil ditambahkan");
closeDialog();
// reset dropdown
document.getElementById("alamat-select").value = "";
$("#preview-gambar").html("");
// rebuild cards
await initSensors();
updateSensorValues();
} catch (err) {
console.error(err);
alert("Terjadi kesalahan");
}
}
await fetch("/api/addSensor", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ kelurahan, alamat })
});
closeDialog();
await initSensors();
updateSensorValues();
}
initSensors();
updateSensorValues();
setInterval(updateSensorValues, 5000);
async function loadAlamat() {
const res = await fetch("/api/alamat");
const data = await res.json();
const select = document.getElementById("alamat-select");
select.innerHTML = `<option value="">-- Pilih Alamat --</option>`;
data.forEach(item => {
select.innerHTML += `<option value="${item.id}">${item.alamat}</option>`;
});
}
function gambar_preview() {
const alamatId = document.getElementById("alamat-select").value;
const container = document.getElementById("preview-container");
container.innerHTML = "";
if (!alamatId) return;
const maxImages = 5; // try up to 5 images
for (let i = 1; i <= maxImages; i++) {
const path = `assets/images/${alamatId}/${i}.png`;
const img = new Image();
img.onload = function () {
img.style.width = "100%";
img.style.marginBottom = "10px";
img.style.borderRadius = "8px";
img.style.border = "1px solid #ddd";
container.appendChild(img);
};
img.onerror = function () {
// image doesn't exist → ignore
};
img.src = path;
}
}
</script>
</body>