diff --git a/wagfarm-ui/js/app.js b/wagfarm-ui/js/app.js index 6b6e429..4e0cb99 100644 --- a/wagfarm-ui/js/app.js +++ b/wagfarm-ui/js/app.js @@ -1,109 +1,14 @@ -import LogsModule from './entities/logs.js'; -import AssetsModule from './entities/assets.js'; -import TaxonomiesModule from './entities/taxonomies.js'; - -// State to track which entity type is active -let activeEntityType = 'logs'; +import { generateForm } from './formHandler.js'; +// Example usage in setupNavigation or page initialization document.addEventListener('DOMContentLoaded', () => { - // Initialize navigation - setupNavigation(); - - // Load the default entity type - loadEntityList(activeEntityType); - - // Setup form handlers - setupFormHandlers(); -}); - -function setupNavigation() { - const navLinks = document.querySelectorAll('.nav-link'); - - navLinks.forEach(link => { + // When a link is clicked, generate the corresponding form + document.querySelectorAll('.create-link').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const entityType = e.target.dataset.entity; - - // Update active link - navLinks.forEach(l => l.classList.remove('active')); - e.target.classList.add('active'); - - // Update active entity and load data - activeEntityType = entityType; - loadEntityList(entityType); - - // Show the appropriate form - document.querySelectorAll('.entity-form').forEach(form => { - form.style.display = 'none'; - }); - document.getElementById(`${entityType}-form-container`).style.display = 'block'; + + generateForm(entityType, 'form-container'); }); }); -} - -async function loadEntityList(entityType) { - // Clear previous content - document.getElementById('entity-list').innerHTML = '

Loading...

'; - - try { - let entities; - - // Get data based on entity type - switch(entityType) { - case 'logs': - entities = await LogsModule.getAllLogs(); - LogsModule.renderLogsList(entities, 'entity-list'); - break; - case 'assets': - entities = await AssetsModule.getAllAssets(); - AssetsModule.renderAssetsList(entities, 'entity-list'); - break; - case 'taxonomies': - entities = await TaxonomiesModule.getAllTaxonomies(); - TaxonomiesModule.renderTaxonomiesList(entities, 'entity-list'); - break; - } - } catch (error) { - document.getElementById('entity-list').innerHTML = `

Error loading data: ${error.message}

`; - } -} - -function setupFormHandlers() { - // Log creation form - document.getElementById('log-create-form').addEventListener('submit', async (e) => { - e.preventDefault(); - const formData = new FormData(e.target); - const logData = { - title: formData.get('title'), - date: formData.get('date'), - description: formData.get('description') - // Add more fields as needed - }; - - try { - await LogsModule.createLog(logData); - e.target.reset(); - if (activeEntityType === 'logs') { - loadEntityList('logs'); - } - showNotification('Log created successfully'); - } catch (error) { - showNotification(`Error: ${error.message}`, 'error'); - } - }); - - // Add similar handlers for assets and taxonomies -} - -function showNotification(message, type = 'success') { - const notification = document.createElement('div'); - notification.className = `notification ${type}`; - notification.textContent = message; - - document.body.appendChild(notification); - - // Remove after 3 seconds - setTimeout(() => { - notification.remove(); - }, 3000); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/wagfarm-ui/js/formHandler.js b/wagfarm-ui/js/formHandler.js new file mode 100644 index 0000000..7742d82 --- /dev/null +++ b/wagfarm-ui/js/formHandler.js @@ -0,0 +1,61 @@ +import API from './api.js'; +import { entitiesConfig } from './entitiesConfig.js'; + +export function generateForm(entityType, formContainerId) { + const config = entitiesConfig[entityType]; + const formContainer = document.getElementById(formContainerId); + formContainer.innerHTML = ''; // clear existing content + + const form = document.createElement('form'); + config.fields.forEach(field => { + const label = document.createElement('label'); + label.setAttribute('for', field.name); + label.textContent = `${field.name.charAt(0).toUpperCase() + field.name.slice(1)}:`; + + const input = document.createElement('input'); + input.type = field.type; + input.name = field.name; + input.id = field.name; + if (field.required) input.required = true; + + form.appendChild(label); + form.appendChild(input); + form.appendChild(document.createElement('br')); + }); + + const submitButton = document.createElement('button'); + submitButton.type = 'submit'; + submitButton.textContent = 'Submit'; + + form.appendChild(submitButton); + formContainer.appendChild(form); + + form.addEventListener('submit', async (e) => { + e.preventDefault(); + const formData = new FormData(form); + const formDataObject = {}; + formData.forEach((value, key) => { + formDataObject[key] = value; + }); + + try { + await API.post(`${entityType}`, formDataObject); + form.reset(); + showNotification('Entity created successfully'); + } catch (error) { + showNotification(`Error: ${error.message}`, 'error'); + } + }); +} + +function showNotification(message, type = 'success') { + const notification = document.createElement('div'); + notification.className = `notification ${type}`; + notification.textContent = message; + + document.body.appendChild(notification); + + setTimeout(() => { + notification.remove(); + }, 3000); +} \ No newline at end of file diff --git a/wagfarm-ui/logs/create.html b/wagfarm-ui/logs/create.html index e69de29..9c07981 100644 --- a/wagfarm-ui/logs/create.html +++ b/wagfarm-ui/logs/create.html @@ -0,0 +1,23 @@ + + + + + + WagFarm + + + + +
+

Create Log

+
+ +

+ + +

+ + +
+ + \ No newline at end of file