| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Production Plan</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">Production Plan</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> |
| </div> |
| </div> |
| |
| <div id="plan-list" class="p-4 space-y-4 mb-24"></div> |
|
|
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md z-10 p-4"> |
| <div class="font-medium mb-2 text-gray-700">Norms</div> |
| <div class="flex"> |
| <input id="norm-article" type="text" placeholder="Article" class="flex-1 p-2 border rounded-l"> |
| <input id="norm-time" type="number" placeholder="Time norm" step="0.1" class="w-24 p-2 border-t border-b"> |
| <button id="add-norm" class="bg-gray-600 text-white px-4 rounded-r flex items-center"> |
| <i data-feather="plus" class="mr-2"></i>Add |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| async function loadData() { |
| try { |
| |
| const plansResponse = await fetch('http://localhost:8080/plans'); |
| const plans = await plansResponse.json(); |
| |
| const planList = document.getElementById('plan-list'); |
| planList.innerHTML = ''; |
| |
| plans.forEach(plan => { |
| const assignments = Object.entries(plan.assignments) |
| .map(([welderId, qty]) => `${welderId}: ${qty}`) |
| .join(', '); |
| |
| const planItem = document.createElement('div'); |
| planItem.className = plan.completed_quantity === plan.total_quantity |
| ? 'bg-white rounded-lg shadow overflow-hidden completed-plan' |
| : 'bg-white rounded-lg shadow overflow-hidden'; |
| |
| planItem.innerHTML = ` |
| <div class="p-4"> |
| <div class="flex items-center"> |
| <div class="flex-1"> |
| <div class="font-medium">${plan.article_code}</div> |
| </div> |
| <div class="${plan.completed_quantity === plan.total_quantity ? 'text-green-500' : 'text-gray-500'} font-medium"> |
| ${plan.completed_quantity}/${plan.total_quantity} |
| </div> |
| </div> |
| <div class="mt-2 text-sm text-gray-500"> |
| <div>${assignments}</div> |
| </div> |
| </div> |
| `; |
| planList.appendChild(planItem); |
| }); |
| |
| |
| const normsResponse = await fetch('http://localhost:8080/norms'); |
| const norms = await normsResponse.json(); |
| console.log('Loaded norms:', norms); |
| } catch (error) { |
| console.error('Error loading data:', error); |
| } |
| } |
| |
| |
| document.getElementById('add-norm').addEventListener('click', async () => { |
| const article = document.getElementById('norm-article').value.trim(); |
| const timeNorm = parseFloat(document.getElementById('norm-time').value); |
| |
| if (article && !isNaN(timeNorm) && timeNorm > 0) { |
| try { |
| const response = await fetch('http://localhost:8080/norms', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| article_code: article, |
| time_norm: timeNorm |
| }), |
| }); |
| |
| if (response.ok) { |
| document.getElementById('norm-article').value = ''; |
| document.getElementById('norm-time').value = ''; |
| console.log('Norm added successfully'); |
| } |
| } catch (error) { |
| console.error('Error adding norm:', error); |
| } |
| } |
| }); |
| |
| |
| loadData(); |
| </script> |
| </body> |
| </html> |
