complete overhaul

web/test.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Fitness Tracker</title>
+  <style>
+    table { width: 100%; border-collapse: collapse; }
+    th, td { border: 1px solid #ddd; padding: 8px; }
+    th { background:#f0f0f0; }
+    #drop-zone { border: 2px dashed #aaa; padding: 1rem; text-align:center; cursor:pointer; }
+    #drop-zone.hover { background:#e0e0ff; }
+  </style>
+</head>
+<body>
+
+<h1>Providers</h1>
+<button id="add-provider-btn">Add Provider</button>
+<table id="providers-table">
+  <thead><tr><th>ID</th><th>Name</th><th>Phone</th><th>Photo</th></tr></thead>
+  <tbody></tbody>
+</table>
+
+<!-- Add Provider Modal -->
+<div id="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
+  <div style="background:#fff; margin:5% auto; padding:1rem; width:300px; position:relative;">
+    <h2>Add Provider</h2>
+    <label>Name: <input type="text" id="p-name"></label><br>
+    <label>Age: <input type="number" id="p-age"></label><br>
+    <label>Phone: <input type="text" id="p-phone"></label><br>
+    <label>Rates: <input type="text" id="p-rates" placeholder='{"hourly":70}'></label><br>
+    <label>Private: <input type="checkbox" id="p-private"></label><br>
+
+    <div id="drop-zone">Drag photo or click to upload</div>
+    <input type="file" id="p-file" style="display:none;">
+    <br>
+    <button id="save-provider">Save</button>
+    <button id="cancel-provider">Cancel</button>
+  </div>
+</div>
+
+<script>
+  const API = 'http://localhost:5000';
+
+  // ----------- Fetch & render providers -----------------
+  async function loadProviders() {
+    const res = await fetch(`${API}/providers`);
+    const data = await res.json();
+    const tbody = document.querySelector('#providers-table tbody');
+    tbody.innerHTML = '';
+    data.forEach(p => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>${p.id}</td>
+        <td>${p.name}</td>
+        <td>${p.phone}</td>
+        <td><img src="${p.photo}" width="50"></td>
+      `;
+      tbody.appendChild(tr);
+    });
+  }
+  loadProviders();
+
+  // ----------- Modal handling -----------------
+  const modal = document.getElementById('modal');
+  const addBtn = document.getElementById('add-provider-btn');
+  const cancelBtn = document.getElementById('cancel-provider');
+  const dropZone = document.getElementById('drop-zone');
+  const fileInput = document.getElementById('p-file');
+  let uploadedPhotoUrl = null;
+
+  addBtn.onclick = () => { modal.style.display='block'; }
+  cancelBtn.onclick = () => { modal.style.display='none'; }
+
+  dropZone.onclick = () => fileInput.click();
+
+  fileInput.onchange = () => uploadFile(fileInput.files[0]);
+
+  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('hover'); });
+  dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('hover'); });
+  dropZone.addEventListener('drop', e => {
+    e.preventDefault(); dropZone.classList.remove('hover');
+    uploadFile(e.dataTransfer.files[0]);
+  });
+
+  async function uploadFile(file) {
+    const formData = new FormData();
+    formData.append('photo', file);
+    const resp = await fetch(`${API}/upload_photo`, { method: 'POST', body: formData });
+    uploadedPhotoUrl = await resp.text();   // /uploads/xxxx.jpg
+    dropZone.textContent = '✓ Uploaded';
+  }
+
+  // ----------- Save provider -----------------
+  const saveBtn = document.getElementById('save-provider');
+  saveBtn.onclick = async () => {
+    const payload = {
+      name: document.getElementById('p-name').value,
+      age: parseInt(document.getElementById('p-age').value, 10),
+      phone: document.getElementById('p-phone').value,
+      rates: JSON.parse(document.getElementById('p-rates').value),
+      private: document.getElementById('p-private').checked,
+      photo: uploadedPhotoUrl
+    };
+    await fetch(`${API}/providers`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    modal.style.display='none';
+    loadProviders();          // refresh table
+  };
+</script>
+</body>
+</html>