144 lines
4.5 KiB
HTML
144 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Admin</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
</head>
|
|
<style>
|
|
.navbar {
|
|
background-color: #424E65;
|
|
|
|
}
|
|
.navbar h2 {
|
|
color: white;
|
|
}
|
|
.navbar a{
|
|
color: white;
|
|
padding-left: 20px;
|
|
}
|
|
.dash-admin{
|
|
margin-top: 80px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<a href="/home">kembali</a>
|
|
<div class="collapse navbar-collapse justify-content-center">
|
|
<h2 class="text-center">Dashboard Admin</h2>
|
|
</nav>
|
|
|
|
|
|
<section class="dash-admin">
|
|
<div class="container mt-5">
|
|
|
|
<ul id="logHistory" class="list-group"></ul>
|
|
|
|
<h4 class="mt-4">Grafik Emisi CO2</h4>
|
|
<img src="{{ url_for('static', filename='co2_plot.png') }}" class="img-fluid" alt="Grafik CO2">
|
|
|
|
<h4 class="mt-4">Histori Update Data</h4>
|
|
<p>{{ last_update }}</p>
|
|
|
|
<a href="/retrain" class="btn btn-primary my-3">
|
|
Update Dataset
|
|
</a>
|
|
|
|
<h4 class="mt-4">Tabel Prediksi Emisi CO₂</h4>
|
|
<div class="table-responsive">
|
|
{{ tables|safe }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function updateData() {
|
|
let button = document.getElementById("update-btn");
|
|
button.disabled = true;
|
|
|
|
// Kirim request ke backend Flask
|
|
fetch('/update-data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
})
|
|
.catch(error => {
|
|
statusMessage.innerText = "Gagal melakukan update data.";
|
|
})
|
|
.finally(() => {
|
|
button.disabled = false;
|
|
});
|
|
}
|
|
|
|
function startRetraining() {
|
|
let button = document.getElementById("retrain-btn");
|
|
|
|
// Simpan teks asli tombol sebelum loading
|
|
let originalText = button.innerHTML;
|
|
|
|
// Ganti teks tombol dengan loading spinner
|
|
button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Loading...';
|
|
button.disabled = true;
|
|
|
|
// Kirim request ke backend Flask
|
|
fetch('/retrain-model')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
})
|
|
.catch(error => {
|
|
statusMessage.innerText = "Gagal melakukan retraining.";
|
|
})
|
|
.finally(() => {
|
|
// Kembalikan tombol ke keadaan semula setelah selesai
|
|
button.innerHTML = originalText;
|
|
button.disabled = false;
|
|
});
|
|
}
|
|
|
|
|
|
// Fungsi untuk mengunggah file
|
|
document.getElementById("uploadForm").addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
var formData = new FormData();
|
|
var fileInput = document.getElementById("fileInput");
|
|
formData.append("file", fileInput.files[0]);
|
|
|
|
fetch('/upload-data', {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
location.reload();
|
|
})
|
|
.catch(error => console.error("Error:", error));
|
|
});
|
|
|
|
// Fungsi untuk mengambil histori log
|
|
function fetchLogHistory() {
|
|
fetch('/log-history')
|
|
.then(response => response.json())
|
|
.then(logs => {
|
|
var logList = document.getElementById("logHistory");
|
|
logList.innerHTML = ""; // Kosongkan daftar log
|
|
logs.reverse().forEach(log => {
|
|
var listItem = document.createElement("li");
|
|
listItem.classList.add("list-group-item");
|
|
listItem.textContent = `${log.timestamp} - ${log.status} (${log.source})`;
|
|
logList.appendChild(listItem);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Panggil fungsi saat halaman dimuat
|
|
fetchLogHistory();
|
|
</script>
|
|
</body>
|
|
</html>
|