| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Welder Card</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| |
| <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-10 p-4 flex items-center"> |
| <a href="welders.html" class="mr-4 text-gray-600 hover:text-gray-800"> |
| <i data-feather="home"></i> |
| </a> |
| <h1 class="text-xl font-semibold">Welder Name</h1> |
| </div> |
|
|
| |
| <div class="mt-16 p-4"> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex mb-2"> |
| <input type="text" placeholder="Article" class="flex-1 p-2 border rounded-l"> |
| <input type="number" placeholder="Qty" class="w-20 p-2 border-t border-b"> |
| <button class="bg-blue-500 text-white px-4 rounded-r flex items-center"> |
| <i data-feather="plus" class="mr-2"></i>Add |
| </button> |
| </div> |
| <button class="text-gray-500 mt-2 flex items-center"> |
| <i data-feather="calendar" class="mr-2"></i>Calendar |
| </button> |
| </div> |
| </div> |
| |
| <div id="articles-list" class="p-4 space-y-4 mb-20"></div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const urlParams = new URLSearchParams(window.location.search); |
| const welderId = urlParams.get('id'); |
| |
| |
| async function loadArticles() { |
| try { |
| const response = await fetch(`http://localhost:8080/welders/${welderId}/articles`); |
| const articles = await response.json(); |
| |
| const articlesList = document.getElementById('articles-list'); |
| articlesList.innerHTML = ''; |
| |
| |
| const monthDivider = document.createElement('div'); |
| monthDivider.className = 'bg-gray-200 px-4 py-2 rounded font-medium'; |
| monthDivider.textContent = new Date().toLocaleString('default', { month: 'long', year: 'numeric' }); |
| articlesList.appendChild(monthDivider); |
| |
| articles.forEach(article => { |
| const articleItem = document.createElement('div'); |
| articleItem.className = 'bg-white rounded-lg shadow overflow-hidden'; |
| articleItem.innerHTML = ` |
| <div class="p-4 border-b flex items-center"> |
| <div class="flex-1"> |
| <div class="font-medium">${article.code}</div> |
| <div class="text-sm text-gray-500">${article.quantity} pieces</div> |
| </div> |
| <div class="${article.completed === article.quantity ? 'text-green-500' : 'text-gray-500'} font-medium"> |
| ${article.completed}/${article.quantity} |
| </div> |
| </div> |
| `; |
| articlesList.appendChild(articleItem); |
| }); |
| } catch (error) { |
| console.error('Error loading articles:', error); |
| } |
| } |
| |
| |
| document.querySelector('button.bg-blue-500').addEventListener('click', async () => { |
| const codeInput = document.querySelector('input[placeholder="Article"]'); |
| const qtyInput = document.querySelector('input[placeholder="Qty"]'); |
| |
| const code = codeInput.value.trim(); |
| const quantity = parseInt(qtyInput.value); |
| |
| if (code && quantity > 0) { |
| try { |
| const response = await fetch(`http://localhost:8080/welders/${welderId}/articles`, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ code, quantity }), |
| }); |
| |
| if (response.ok) { |
| codeInput.value = ''; |
| qtyInput.value = ''; |
| await loadArticles(); |
| } |
| } catch (error) { |
| console.error('Error adding article:', error); |
| } |
| } |
| }); |
| |
| |
| loadArticles(); |
| </script> |
| </body> |
| </html> |
