155 lines
5.1 KiB
JavaScript
155 lines
5.1 KiB
JavaScript
export function addClass() {
|
|
const input_class = document.querySelector('.add-category input.div-wrapper');
|
|
|
|
let existingClasses;
|
|
|
|
const input_project_name = document.getElementById('project_name_input')
|
|
const description = document.getElementById('project_description_input');
|
|
const button_addClass = document.querySelector('.add-category .upload-button-text-wrapper');
|
|
const button_addProject = document.querySelector('.popup .confirm-button-datasetcreation')
|
|
const classWrapper = document.querySelector('.add-class-wrapper');
|
|
|
|
|
|
button_addProject.addEventListener('click', () => {
|
|
const title = input_project_name.value.trim();
|
|
const descriptionText = description.value.trim();
|
|
const classes = Array.from(classWrapper.querySelectorAll('.overlap-group')).map(el => el.textContent.trim());
|
|
|
|
const formData = new FormData();
|
|
formData.append('title', title);
|
|
formData.append('description', descriptionText);
|
|
formData.append('classes', JSON.stringify(classes));
|
|
if (imgBlob) {
|
|
formData.append('project_image', imgBlob, 'project_image.png'); // or the correct file type
|
|
}
|
|
|
|
fetch('/api/training-projects', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
alert(data.message || 'Project created!');
|
|
window.location.href = '/index.html';
|
|
})
|
|
.catch(err => alert('Error: ' + err));
|
|
});
|
|
|
|
|
|
button_addClass.addEventListener('click', () => {
|
|
|
|
const className = input_class.value.trim();
|
|
|
|
if (!className) {
|
|
alert('Please enter a class name');
|
|
return;
|
|
}
|
|
|
|
|
|
existingClasses = classWrapper.querySelectorAll('.overlap-group');
|
|
for (const el of existingClasses) {
|
|
if (el.textContent.trim().toLowerCase() === className.toLowerCase()) {
|
|
alert(`Class name "${className}" already exists.`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
const newClassDiv = document.createElement('div');
|
|
newClassDiv.classList.add('add-class');
|
|
newClassDiv.style.position = 'relative';
|
|
newClassDiv.style.width = '335px';
|
|
newClassDiv.style.height = '25px';
|
|
newClassDiv.style.marginBottom = '5px';
|
|
|
|
|
|
const overlapGroup = document.createElement('div');
|
|
overlapGroup.classList.add('overlap-group');
|
|
overlapGroup.style.position = 'absolute';
|
|
overlapGroup.style.width = '275px';
|
|
overlapGroup.style.height = '25px';
|
|
overlapGroup.style.top = '0';
|
|
overlapGroup.style.left = '0';
|
|
overlapGroup.style.backgroundColor = '#30bffc80';
|
|
overlapGroup.style.borderRadius = '5px';
|
|
overlapGroup.style.display = 'flex';
|
|
overlapGroup.style.alignItems = 'center';
|
|
overlapGroup.style.paddingLeft = '10px';
|
|
overlapGroup.style.color = '#000';
|
|
overlapGroup.style.fontFamily = 'var(--m3-body-small-font-family)';
|
|
overlapGroup.style.fontWeight = 'var(--m3-body-small-font-weight)';
|
|
overlapGroup.style.fontSize = 'var(--m3-body-small-font-size)';
|
|
overlapGroup.style.letterSpacing = 'var(--m3-body-small-letter-spacing)';
|
|
overlapGroup.style.lineHeight = 'var(--m3-body-small-line-height)';
|
|
overlapGroup.textContent = className;
|
|
|
|
|
|
const overlap = document.createElement('div');
|
|
overlap.classList.add('overlap');
|
|
overlap.style.position = 'absolute';
|
|
overlap.style.width = '50px';
|
|
overlap.style.height = '25px';
|
|
overlap.style.top = '0';
|
|
overlap.style.left = '285px';
|
|
|
|
|
|
const rectangle = document.createElement('div');
|
|
rectangle.classList.add('rectangle');
|
|
rectangle.style.width = '50px';
|
|
rectangle.style.height = '25px';
|
|
rectangle.style.backgroundColor = '#ff0f43';
|
|
rectangle.style.borderRadius = '5px';
|
|
rectangle.style.display = 'flex';
|
|
rectangle.style.alignItems = 'center';
|
|
rectangle.style.justifyContent = 'center';
|
|
rectangle.style.cursor = 'pointer';
|
|
|
|
rectangle.addEventListener('mouseenter', () => {
|
|
rectangle.style.backgroundColor = '#bb032b';
|
|
});
|
|
rectangle.addEventListener('mouseleave', () => {
|
|
rectangle.style.backgroundColor = '#ff0f43';
|
|
});
|
|
|
|
|
|
const minusText = document.createElement('div');
|
|
minusText.classList.add('text-wrapper-4');
|
|
minusText.style.position = 'absolute';
|
|
minusText.style.top = '-18px';
|
|
minusText.style.left = '18px';
|
|
minusText.style.fontFamily = 'var(--m3-display-large-font-family)';
|
|
minusText.style.fontWeight = 'var(--m3-display-large-font-weight)';
|
|
minusText.style.color = '#000000';
|
|
minusText.style.fontSize = 'var(--minus-for-button-size)';
|
|
minusText.style.letterSpacing = 'var(--m3-display-large-letter-spacing)';
|
|
minusText.style.lineHeight = 'var(--m3-display-large-line-height)';
|
|
minusText.style.whiteSpace = 'nowrap';
|
|
minusText.style.cursor = 'pointer';
|
|
minusText.style.fontStyle = 'var(--m3-display-large-font-style)';
|
|
minusText.textContent = '_';
|
|
|
|
|
|
rectangle.appendChild(minusText);
|
|
|
|
|
|
rectangle.addEventListener('click', () => {
|
|
classWrapper.removeChild(newClassDiv);
|
|
|
|
document.dispatchEvent(new CustomEvent('classListUpdated'));
|
|
});
|
|
|
|
|
|
overlap.appendChild(rectangle);
|
|
|
|
|
|
newClassDiv.appendChild(overlapGroup);
|
|
newClassDiv.appendChild(overlap);
|
|
|
|
|
|
classWrapper.appendChild(newClassDiv);
|
|
|
|
|
|
input_class.value = '';
|
|
});
|
|
}
|