114 lines
4.0 KiB
HTML
114 lines
4.0 KiB
HTML
<!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> |