frontend structiure generated

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;