complete overhaul

web/providers.php

@@ -0,0 +1,137 @@
+<?php
+// providers.php
+// Simple page that pulls provider data via the Flask API.
+// It expects the Flask API to be reachable at http://127.0.0.1:5000
+// The API endpoint for providers is /providers.
+
+// --- Helper to call the API -------------------------------------------
+function callApi(string $method, string $path, $body = null)
+{
+    $url = 'http://172.25.1.105:5000' . $path;
+    $ch  = curl_init($url);
+    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
+
+    if ($body !== null) {
+        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($body));
+    }
+
+    $response = curl_exec($ch);
+    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+
+    if ($httpCode >= 400) {
+        return null; // or throw an exception
+    }
+
+    return json_decode($response, true);
+}
+
+// --- Fetch all providers -----------------------------------------------
+$providers = callApi('GET', '/providers');
+$providers = $providers ?? [];
+
+// -----------------------------------------------------------------------
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Providers</title>
+
+<link rel="stylesheet" href="https://cosmostat.matt-cloud.com/src/styles.css">
+<style>
+    body { font-family: Arial, sans-serif; margin: 2rem; }
+    #search { margin-bottom: 1rem; padding: 0.5rem; width: 300px; }
+    table { width: 100%; border-collapse: collapse; }
+    img { max-width: 60px; height: auto; }
+</style>
+</head>
+<body>
+<div class="card">
+<h1>Providers</h1>
+<input type="text" id="search" placeholder="Search providers...">
+<table id="providers-table">
+  <thead>
+    <tr>
+      <th data-field="id">ID</th>
+      <th data-field="name">Name</th>
+      <th data-field="phone">Phone</th>
+      <th data-field="age">Age</th>
+      <th data-field="photo">Photo</th>
+      <th data-field="rates">Rates</th>
+      <th data-field="private">Private</th>
+    </tr>
+  </thead>
+  <tbody></tbody>
+</table>
+</div>
+<script>
+const providers = <?php echo json_encode($providers); ?>;
+let currentSort = { field: null, asc: true };
+
+function renderTable(data) {
+  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>${p.age || ''}</td>
+      <td>${p.photo ? `<img src="${p.photo}" alt="Photo">` : ''}</td>
+      <td>${p.rates}</td>
+      <td>${p.private ? 'Yes' : 'No'}</td>
+    `;
+    tbody.appendChild(tr);
+  });
+}
+
+function sortData(field) {
+  if (currentSort.field === field) {
+    currentSort.asc = !currentSort.asc;
+  } else {
+    currentSort.field = field;
+    currentSort.asc = true;
+  }
+  const sorted = providers.slice().sort((a, b) => {
+    let aVal = a[field];
+    let bVal = b[field];
+    if (['id', 'age', 'private'].includes(field)) {
+      aVal = Number(aVal);
+      bVal = Number(bVal);
+    } else {
+      aVal = (aVal || '').toString().toLowerCase();
+      bVal = (bVal || '').toString().toLowerCase();
+    }
+    if (aVal < bVal) return currentSort.asc ? -1 : 1;
+    if (aVal > bVal) return currentSort.asc ? 1 : -1;
+    return 0;
+  });
+  renderTable(sorted);
+}
+
+renderTable(providers);
+
+document.querySelectorAll('#providers-table th').forEach(th => {
+  th.addEventListener('click', () => {
+    const field = th.getAttribute('data-field');
+    sortData(field);
+  });
+});
+
+document.getElementById('search').addEventListener('input', e => {
+  const query = e.target.value.toLowerCase();
+  const filtered = providers.filter(p => {
+    return Object.values(p).some(v => {
+      if (!v) return false;
+      return String(v).toLowerCase().includes(query);
+    });
+  });
+  renderTable(filtered);
+});
+</script>
+</body>
+</html>