Files
Abschluss-Projekt/index.html
2025-11-28 09:35:02 +01:00

96 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<link rel="stylesheet" href="globals.css" />
<link rel="stylesheet" href="styleguide.css" />
<link rel="stylesheet" href="style.css" />
<style>
#projects-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
align-items: flex-start;
}
.dataset-card {
flex: 0 0 auto;
}
</style>
</head>
<body onload="pollStatus()">
<div>
<div id="header">
<icon class="header-icon" onclick="window.location.href='/index.html'" , onmouseover="" style="cursor: pointer;"
src="./media/logo.png" alt="Logo"></icon>
<div class="button-row">
<button id="Add Training Project" onclick="window.location.href='/add-project.html'" class="button-red">Add
Training Project</button>
<button id="seed-db-btn" class="button">
Seed Database
<div class="loader" id="loader" style="display: none"></div>
</button>
</div>
</div>
<div id="projects-list">
<script src="js/dashboard.js"></script>
</div>
<script>
document.getElementById('seed-db-btn').addEventListener('click', function () {
const elLoader = document.getElementById("loader")
elLoader.style.display = "inherit"
fetch('/api/seed')
.finally(() => {
// Instead of hiding loader immediately, poll /api/update-status until done
function pollStatus() {
fetch('/api/update-status')
.then(res => res.json())
.then(status => {
if (status && status.running) {
// Still running, poll again after short delay
setTimeout(pollStatus, 5000);
} else {
elLoader.style.display = "none";
}
})
.catch(() => {
elLoader.style.display = "none";
});
}
pollStatus();
})
});
// Show loader if backend is still processing on page load
function pollStatus() {
const elLoader = document.getElementById("loader");
fetch('/api/update-status')
.then(res => res.json())
.then(status => {
if (status && status.running) {
elLoader.style.display = "inherit";
setTimeout(pollStatus, 5000);
} else {
elLoader.style.display = "none";
}
})
.catch(() => {
elLoader.style.display = "none";
});
}
</script>
</div>
</body>
</html>