M-Xeeshan/Project-Tracking
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Project Tracking</title>7 <link rel="stylesheet" href="/static/styles.css">8</head>9<body>10 <div class="container">11 <h1>Project Tracking</h1>12 13 <label for="projectDropdown">Select Project:</label>14 <select id="projectDropdown"></select>15 16 <form id="updateForm">17 <label for="progress">Progress (%):</label>18 <input type="number" id="progress" name="progress" required min="0" max="100">19 20 <label for="forecastFinish">Forecast Finish Date:</label>21 <input type="date" id="forecastFinish" name="forecastFinish" required>22 23 <button type="submit">Update</button>24 </form>25 </div>26 27 <script>28 const dropdown = document.getElementById('projectDropdown');29 const form = document.getElementById('updateForm');30 const websocket = new WebSocket(`ws://${window.location.host}/ws`);31 32 websocket.onmessage = (event) => {33 const project = JSON.parse(event.data);34 const option = document.createElement('option');35 option.value = project.unique_id;36 option.textContent = project.unique_id + " - " + project.name;37 dropdown.appendChild(option);38 };39 40 form.addEventListener('submit', async (event) => {41 event.preventDefault();42 const selectedProject = dropdown.value;43 const progress = parseFloat(form.progress.value);44 const forecastFinish = form.forecastFinish.value;45 46 if (!selectedProject) {47 alert('Please select a project!');48 return;49 }50 51 await fetch('/update_progress', {52 method: 'POST',53 headers: {54 'Content-Type': 'application/json',55 },56 body: JSON.stringify({57 unique_id: selectedProject,58 progress,59 forecast_finish_date: forecastFinish,60 }),61 });62 63 alert('Progress updated successfully!');64 form.reset();65 });66 </script>67</body>68</html>69 70