bissl frontend rumprobieren

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 = '<p>Loading...</p>';
-  
-  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 = `<p>Error loading data: ${error.message}</p>`;
-  }
-}
-
-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);
-}
+});

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);
+}

wagfarm-ui/logs/create.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WagFarm</title>
+  <link rel="stylesheet" href="css/styles.css">
+  <link rel="stylesheet" href="css/forms.css">
+</head>
+<body>
+  <header>
+    <h1>Create Log</h1>
+    <form action="/submit" method="post">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required><br><br>
+    
+        <label for="date">Date:</label>
+        <input type="date" id="date" name="date" required><br><br>
+    
+        <button type="submit">Submit</button>
+  </header>
+</body>
+</html>