frontend 1

frontend/app.js

@@ -1,14 +1,88 @@
-// Simple fetch to populate visit list
-const visitList = document.getElementById('visit-list');
-async function loadVisits() {
-  const resp = await fetch('http://localhost:8000/visits/');
-  const data = await resp.json();
-  visitList.innerHTML = '';
-  data.forEach(v => {
-    const li = document.createElement('li');
-    li.textContent = `${new Date(v.start_time).toLocaleString()} - ${v.duration_minutes} min`;
-    visitList.appendChild(li);
+// ---------------------------------------------------------------------
+// Helper: call the API relative to the current host (no hard‑coded host)
+const api = async (method, endpoint, data) => {
+  const res = await fetch(`/${endpoint}`, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: data ? JSON.stringify(data) : null,
   });
+  if (!res.ok) throw await res.json();
+  return res.json();
+};
+
+// ---------------------------------------------------------------------
+// Load Providers
+const providersList = document.getElementById('providers-list');
+const providerForm = document.getElementById('provider-form');
+const providerSelect = document.querySelector('#service-form select[name="provider_id"]');
+const visitProviderSelect = document.querySelector('#visit-form select[name="provider_id"]');
+async function loadProviders() {
+  const providers = await api('GET', 'providers/');
+  providersList.innerHTML = `<ul>${providers.map(p => `<li>${p.name} (${p.hourly_rate || 'n/a'})</li>`).join('')}</ul>`;
+  const opts = providers.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+  providerSelect.innerHTML = opts;
+  visitProviderSelect.innerHTML = opts;
 }
-loadVisits();
-// Could add intervals or form handling later
+providerForm.addEventListener('submit', async e => {
+  e.preventDefault();
+  const data = Object.fromEntries(new FormData(e.target).entries());
+  if (!data.hourly_rate) delete data.hourly_rate;
+  await api('POST', 'providers/', data);
+  await loadProviders();
+});
+
+// ---------------------------------------------------------------------
+// Load Clients
+const clientsList = document.getElementById('clients-list');
+const clientForm = document.getElementById('client-form');
+const clientSelect = document.querySelector('#visit-form select[name="client_id"]');
+async function loadClients() {
+  const clients = await api('GET', 'clients/');
+  clientsList.innerHTML = `<ul>${clients.map(c => `<li>${c.name}</li>`).join('')}</ul>`;
+  clientSelect.innerHTML = clients.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
+}
+clientForm.addEventListener('submit', async e => {
+  e.preventDefault();
+  const data = Object.fromEntries(new FormData(e.target).entries());
+  await api('POST', 'clients/', data);
+  await loadClients();
+});
+
+// ---------------------------------------------------------------------
+// Load Services
+const servicesList = document.getElementById('services-list');
+const serviceForm = document.getElementById('service-form');
+async function loadServices() {
+  const services = await api('GET', 'services/');
+  servicesList.innerHTML = `<ul>${services.map(s => `<li>${s.name} @ $${s.price} (${s.duration_minutes || 'n/a'}min)</li>`).join('')}</ul>`;
+}
+serviceForm.addEventListener('submit', async e => {
+  e.preventDefault();
+  const data = Object.fromEntries(new FormData(e.target).entries());
+  if (!data.duration_minutes) delete data.duration_minutes;
+  await api('POST', 'services/', data);
+  await loadServices();
+});
+
+// ---------------------------------------------------------------------
+// Load Visits
+const visitsList = document.getElementById('visits-list');
+const visitForm = document.getElementById('visit-form');
+async function loadVisits() {
+  const visits = await api('GET', 'visits/');
+  visitsList.innerHTML = `<ul>${visits.map(v => `<li>${new Date(v.start_time).toLocaleString()} – ${v.duration_minutes}min (Provider #${v.provider_id} • Client #${v.client_id})</li>`).join('')}</ul>`;
+}
+visitForm.addEventListener('submit', async e => {
+  e.preventDefault();
+  const data = Object.fromEntries(new FormData(e.target).entries());
+  if (data.start_time) data.start_time = new Date(data.start_time).toISOString();
+  await api('POST', 'visits/', data);
+  await loadVisits();
+});
+
+// ---------------------------------------------------------------------
+// Initial load
+async function init() {
+  await Promise.all([loadProviders(), loadClients(), loadServices(), loadVisits()]);
+}
+init();