102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
// 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; |