frontend structiure generated

wagfarm-ui/js/api.js

@@ -0,0 +1,64 @@
+// api.js
+const API = {
+	baseUrl: 'https://your-api-url.com/api',
+	
+	async get(endpoint) {
+	  try {
+		const response = await fetch(`${this.baseUrl}/${endpoint}`);
+		if (!response.ok) throw new Error(`API Error: ${response.status}`);
+		return await response.json();
+	  } catch (error) {
+		console.error('GET request failed:', error);
+		throw error;
+	  }
+	},
+	
+	async post(endpoint, data) {
+	  try {
+		const response = await fetch(`${this.baseUrl}/${endpoint}`, {
+		  method: 'POST',
+		  headers: {
+			'Content-Type': 'application/json'
+		  },
+		  body: JSON.stringify(data)
+		});
+		if (!response.ok) throw new Error(`API Error: ${response.status}`);
+		return await response.json();
+	  } catch (error) {
+		console.error('POST request failed:', error);
+		throw error;
+	  }
+	},
+	
+	async put(endpoint, data) {
+	  try {
+		const response = await fetch(`${this.baseUrl}/${endpoint}`, {
+		  method: 'PUT',
+		  headers: {
+			'Content-Type': 'application/json'
+		  },
+		  body: JSON.stringify(data)
+		});
+		if (!response.ok) throw new Error(`API Error: ${response.status}`);
+		return await response.json();
+	  } catch (error) {
+		console.error('PUT request failed:', error);
+		throw error;
+	  }
+	},
+	
+	async delete(endpoint) {
+	  try {
+		const response = await fetch(`${this.baseUrl}/${endpoint}`, {
+		  method: 'DELETE'
+		});
+		if (!response.ok) throw new Error(`API Error: ${response.status}`);
+		return await response.json();
+	  } catch (error) {
+		console.error('DELETE request failed:', error);
+		throw error;
+	  }
+	}
+  };
+  
+  export default API;

wagfarm-ui/js/app.js

@@ -0,0 +1,109 @@
+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';
+
+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 => {
+    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';
+    });
+  });
+}
+
+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/entities/logs.js

@@ -0,0 +1,102 @@
+// logs.js
+import API from '../api.js';
+
+const LogsModule = {
+  async getAllLogs() {
+    return await API.get('logs');
+  },
+  
+  async getLog(id) {
+    return await API.get(`logs/${id}`);
+  },
+  
+  async createLog(logData) {
+    return await API.post('logs', logData);
+  },
+  
+  async updateLog(id, logData) {
+    return await API.put(`logs/${id}`, logData);
+  },
+  
+  async deleteLog(id) {
+    return await API.delete(`logs/${id}`);
+  },
+  
+  renderLogsList(logs, containerId) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = '';
+    
+    logs.forEach(log => {
+      const logElement = document.createElement('div');
+      logElement.className = 'log-item';
+      logElement.innerHTML = `
+        <h3>${log.title || 'Untitled Log'}</h3>
+        <p>${log.date || 'No date'}</p>
+        <div class="actions">
+          <button class="view-btn" data-id="${log.id}">View</button>
+          <button class="edit-btn" data-id="${log.id}">Edit</button>
+          <button class="delete-btn" data-id="${log.id}">Delete</button>
+        </div>
+      `;
+      container.appendChild(logElement);
+    });
+    
+    // Add event listeners
+    this.addEventListeners(containerId);
+  },
+  
+  addEventListeners(containerId) {
+    const container = document.getElementById(containerId);
+    
+    container.addEventListener('click', async (e) => {
+      const id = e.target.dataset.id;
+      if (!id) return;
+      
+      if (e.target.classList.contains('view-btn')) {
+        const log = await this.getLog(id);
+        // Display log details
+        document.getElementById('detail-view').innerHTML = `
+          <h2>${log.title || 'Untitled Log'}</h2>
+          <p>Date: ${log.date || 'No date'}</p>
+          <p>Description: ${log.description || 'No description'}</p>
+          <!-- Add more fields as needed -->
+        `;
+      } else if (e.target.classList.contains('edit-btn')) {
+        const log = await this.getLog(id);
+        // Populate edit form
+        document.getElementById('edit-form').innerHTML = `
+          <form id="log-edit-form" data-id="${log.id}">
+            <input type="text" name="title" value="${log.title || ''}">
+            <input type="date" name="date" value="${log.date || ''}">
+            <textarea name="description">${log.description || ''}</textarea>
+            <button type="submit">Save Changes</button>
+          </form>
+        `;
+        
+        document.getElementById('log-edit-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')
+          };
+          
+          await this.updateLog(id, logData);
+          // Refresh the list
+          const logs = await this.getAllLogs();
+          this.renderLogsList(logs, containerId);
+        });
+      } else if (e.target.classList.contains('delete-btn')) {
+        if (confirm('Are you sure you want to delete this log?')) {
+          await this.deleteLog(id);
+          // Refresh the list
+          const logs = await this.getAllLogs();
+          this.renderLogsList(logs, containerId);
+        }
+      }
+    });
+  }
+};
+
+export default LogsModule;