Added functionality to all pages
This commit is contained in:
247
frontend/assets/js/api.js
Normal file
247
frontend/assets/js/api.js
Normal file
@@ -0,0 +1,247 @@
|
||||
// api.js
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const profileBtn = document.getElementById('profile-btn');
|
||||
const dropdownMenu = document.getElementById('dropdown-menu');
|
||||
const menuBtn = document.getElementById('menu-btn');
|
||||
const mainNav = document.getElementById('main-nav');
|
||||
|
||||
if (profileBtn && dropdownMenu) {
|
||||
profileBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
dropdownMenu.classList.toggle('show');
|
||||
if (mainNav) mainNav.classList.remove('show');
|
||||
});
|
||||
}
|
||||
|
||||
if (menuBtn && mainNav) {
|
||||
menuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
mainNav.classList.toggle('show');
|
||||
if (dropdownMenu) dropdownMenu.classList.remove('show');
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('click', () => {
|
||||
if (dropdownMenu) dropdownMenu.classList.remove('show');
|
||||
if (mainNav) mainNav.classList.remove('show');
|
||||
});
|
||||
|
||||
if (document.getElementById('items-table-body')) loadItems();
|
||||
if (document.getElementById('locations-table-body')) loadLocations();
|
||||
if (document.getElementById('projects-table-body')) loadProjects();
|
||||
});
|
||||
|
||||
function closeModal(id) {
|
||||
document.getElementById(id).classList.remove('show');
|
||||
}
|
||||
|
||||
async function apiRequest(endpoint, method = 'GET', body = null) {
|
||||
const options = {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
};
|
||||
if (body) options.body = JSON.stringify(body);
|
||||
|
||||
try {
|
||||
const response = await fetch(endpoint, options);
|
||||
if (!response.ok && response.status !== 204) {
|
||||
const errText = await response.text();
|
||||
throw new Error(errText || `HTTP Error ${response.status}`);
|
||||
}
|
||||
if (response.status === 204) return null;
|
||||
return await response.json();
|
||||
} catch (err) {
|
||||
alert("Action failed: " + err.message);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- ITEMS ----
|
||||
async function loadItems() {
|
||||
const data = await apiRequest('/api/item');
|
||||
const tbody = document.getElementById('items-table-body');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!data.items || data.items.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align: center;">No items found.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
data.items.forEach(item => {
|
||||
tbody.innerHTML += `
|
||||
<tr>
|
||||
<td style="font-weight: 600;">${item.name}</td>
|
||||
<td><span style="background: rgba(255,255,255,0.05); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--border);">${item.category}</span></td>
|
||||
<td style="font-family: monospace; font-size: 1.05rem;">${item.total_quantity}</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editItem(${JSON.stringify(item).replace(/'/g, "'")})'>Edit</button>
|
||||
<button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteItem(${item.id})">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
function openItemModal() {
|
||||
document.getElementById('item-form').reset();
|
||||
document.getElementById('item-id').value = '';
|
||||
document.getElementById('item-modal-title').innerText = 'New Item';
|
||||
document.getElementById('item-modal').classList.add('show');
|
||||
}
|
||||
|
||||
function editItem(item) {
|
||||
document.getElementById('item-id').value = item.id;
|
||||
document.getElementById('item-name').value = item.name;
|
||||
document.getElementById('item-category').value = item.category;
|
||||
document.getElementById('item-desc').value = item.description;
|
||||
document.getElementById('item-qty').value = item.total_quantity;
|
||||
document.getElementById('item-modal-title').innerText = 'Edit Item';
|
||||
document.getElementById('item-modal').classList.add('show');
|
||||
}
|
||||
|
||||
async function saveItem(event) {
|
||||
event.preventDefault();
|
||||
const id = document.getElementById('item-id').value;
|
||||
const payload = {
|
||||
name: document.getElementById('item-name').value,
|
||||
category: document.getElementById('item-category').value,
|
||||
description: document.getElementById('item-desc').value,
|
||||
total_quantity: parseInt(document.getElementById('item-qty').value, 10)
|
||||
};
|
||||
|
||||
const method = id ? 'PUT' : 'POST';
|
||||
const endpoint = id ? `/api/item?id=${id}` : '/api/item';
|
||||
|
||||
await apiRequest(endpoint, method, payload);
|
||||
closeModal('item-modal');
|
||||
loadItems();
|
||||
}
|
||||
|
||||
async function deleteItem(id) {
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
await apiRequest(`/api/item?id=${id}`, 'DELETE');
|
||||
loadItems();
|
||||
}
|
||||
}
|
||||
|
||||
// ---- LOCATIONS ----
|
||||
async function loadLocations() {
|
||||
const data = await apiRequest('/api/location');
|
||||
const tbody = document.getElementById('locations-table-body');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!data.locations || data.locations.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="2" style="text-align: center;">No locations found.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
data.locations.forEach(loc => {
|
||||
tbody.innerHTML += `
|
||||
<tr>
|
||||
<td style="font-weight: 600;">${loc.name}</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="editLocation(${loc.id}, '${loc.name}')">Edit</button>
|
||||
<button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteLocation(${loc.id})">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
function openLocationModal() {
|
||||
document.getElementById('location-form').reset();
|
||||
document.getElementById('location-id').value = '';
|
||||
document.getElementById('location-modal-title').innerText = 'New Location';
|
||||
document.getElementById('location-modal').classList.add('show');
|
||||
}
|
||||
|
||||
function editLocation(id, name) {
|
||||
document.getElementById('location-id').value = id;
|
||||
document.getElementById('location-name').value = name;
|
||||
document.getElementById('location-modal-title').innerText = 'Edit Location';
|
||||
document.getElementById('location-modal').classList.add('show');
|
||||
}
|
||||
|
||||
async function saveLocation(event) {
|
||||
event.preventDefault();
|
||||
const id = document.getElementById('location-id').value;
|
||||
const payload = { name: document.getElementById('location-name').value };
|
||||
|
||||
const method = id ? 'PUT' : 'POST';
|
||||
const endpoint = id ? `/api/location?id=${id}` : '/api/location';
|
||||
|
||||
await apiRequest(endpoint, method, payload);
|
||||
closeModal('location-modal');
|
||||
loadLocations();
|
||||
}
|
||||
|
||||
async function deleteLocation(id) {
|
||||
if (confirm("Are you sure you want to delete this location?")) {
|
||||
await apiRequest(`/api/location?id=${id}`, 'DELETE');
|
||||
loadLocations();
|
||||
}
|
||||
}
|
||||
|
||||
// ---- PROJECTS ----
|
||||
async function loadProjects() {
|
||||
const data = await apiRequest('/api/project');
|
||||
const tbody = document.getElementById('projects-table-body');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (!data.projects || data.projects.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No projects found.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
data.projects.forEach(proj => {
|
||||
tbody.innerHTML += `
|
||||
<tr>
|
||||
<td style="font-weight: 600;">${proj.name}</td>
|
||||
<td style="color: var(--text-muted);">${proj.description}</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editProject(${JSON.stringify(proj).replace(/'/g, "'")})'>Edit</button>
|
||||
<button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteProject(${proj.id})">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
function openProjectModal() {
|
||||
document.getElementById('project-form').reset();
|
||||
document.getElementById('project-id').value = '';
|
||||
document.getElementById('project-modal-title').innerText = 'New Project';
|
||||
document.getElementById('project-modal').classList.add('show');
|
||||
}
|
||||
|
||||
function editProject(proj) {
|
||||
document.getElementById('project-id').value = proj.id;
|
||||
document.getElementById('project-name').value = proj.name;
|
||||
document.getElementById('project-desc').value = proj.description;
|
||||
document.getElementById('project-modal-title').innerText = 'Edit Project';
|
||||
document.getElementById('project-modal').classList.add('show');
|
||||
}
|
||||
|
||||
async function saveProject(event) {
|
||||
event.preventDefault();
|
||||
const id = document.getElementById('project-id').value;
|
||||
const payload = {
|
||||
name: document.getElementById('project-name').value,
|
||||
description: document.getElementById('project-desc').value
|
||||
};
|
||||
|
||||
const method = id ? 'PUT' : 'POST';
|
||||
const endpoint = id ? `/api/project?id=${id}` : '/api/project';
|
||||
|
||||
await apiRequest(endpoint, method, payload);
|
||||
closeModal('project-modal');
|
||||
loadProjects();
|
||||
}
|
||||
|
||||
async function deleteProject(id) {
|
||||
if (confirm("Are you sure you want to delete this project?")) {
|
||||
await apiRequest(`/api/project?id=${id}`, 'DELETE');
|
||||
loadProjects();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user