initial push

js/add-class.js

@@ -0,0 +1,154 @@
+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 = '';
+  });
+}