initial push
This commit is contained in:
Philipp
175
add-project.html
Normal file
175
add-project.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!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>
|
||||
<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" class="button-red">Add Training Project</button>
|
||||
<button id="Add Dataset" class="button">Add Dataset</button>
|
||||
<button id="Import Dataset" class="button">Refresh Label-Studio</button>
|
||||
<button id="seed-db-btn" class="button">Seed Database</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup">
|
||||
<div class="upload-button" onclick="uploadButtonHandler()">
|
||||
<span class="upload-button-text">Upload</span>
|
||||
</div>
|
||||
<div class="image"></div>
|
||||
|
||||
<div class="div">
|
||||
|
||||
<div class="add-category">
|
||||
|
||||
<input class="div-wrapper" placeholder="Class name"></input>
|
||||
<button class="upload-button-text-wrapper">
|
||||
<span class="button-text-upload">Add Class</span>
|
||||
</button>
|
||||
</div>
|
||||
<input class="project-name" placeholder="Project Name" id="project_name_input"></input>
|
||||
<textarea class="add-description" placeholder="Description" id="project_description_input"></textarea>
|
||||
<div class="add-class-wrapper">
|
||||
<script type="module">
|
||||
import { addClass } from './js/add-class.js';
|
||||
addClass();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<button class="confirm-button-datasetcreation">
|
||||
<span class="button-text-upload">Confirm</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="./js/add-image.js"></script>
|
||||
<script type="module">
|
||||
import { addClass } from './js/add-class.js';
|
||||
// Grab the inputs and the button
|
||||
const projectNameInput = document.querySelector('.project-name');
|
||||
const descriptionInput = document.querySelector('.add-description');
|
||||
const confirmButton = document.querySelector('.confirm-button-datasetcreation');
|
||||
const classWrapper = document.querySelector('.add-class-wrapper');
|
||||
|
||||
|
||||
const addClassButton = document.querySelector('.upload-button-text-wrapper');
|
||||
const addProjectButton = document.querySelector('.confirm-button-datasetcreation')
|
||||
|
||||
addClassButton.addEventListener('click', () => {
|
||||
const event = new Event('classListUpdated');
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Function to update button state
|
||||
function updateButtonState() {
|
||||
const projectName = projectNameInput.value.trim();
|
||||
const description = descriptionInput.value.trim();
|
||||
const existingClasses = classWrapper.querySelectorAll('.overlap-group');
|
||||
|
||||
// Disable button if either field is empty
|
||||
if (projectName === '' || description === '' || existingClasses.length === 0) {
|
||||
confirmButton.disabled = true;
|
||||
confirmButton.style.cursor = 'not-allowed';
|
||||
} else {
|
||||
confirmButton.disabled = false;
|
||||
confirmButton.style.cursor = 'pointer';
|
||||
}
|
||||
}
|
||||
|
||||
// Initial check on page load
|
||||
updateButtonState();
|
||||
|
||||
|
||||
projectNameInput.addEventListener('input', updateButtonState);
|
||||
descriptionInput.addEventListener('input', updateButtonState);
|
||||
document.addEventListener('classListUpdated', updateButtonState);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('seed-db-btn').addEventListener('click', function () {
|
||||
fetch('/api/seed')
|
||||
});
|
||||
</script>
|
||||
<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>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user