138 lines
3.8 KiB
PHP
138 lines
3.8 KiB
PHP
<?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>
|