171 lines
6.3 KiB
HTML
171 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Test Edit Chore API</title>
|
||
<style>
|
||
body { font-family: Arial; padding: 20px; }
|
||
.test { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
|
||
.success { background: #d4edda; }
|
||
.error { background: #f8d7da; }
|
||
button { padding: 10px 20px; margin: 10px; cursor: pointer; }
|
||
pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Family Hub - Edit Chore API Test</h1>
|
||
|
||
<div>
|
||
<label>Username: <input type="text" id="username" value="jess"></label><br>
|
||
<label>Password: <input type="password" id="password" value="password123"></label><br>
|
||
<button onclick="login()">1. Login</button>
|
||
</div>
|
||
|
||
<div id="loginResult"></div>
|
||
|
||
<div>
|
||
<label>Chore ID to Edit: <input type="number" id="choreId" value="1"></label><br>
|
||
<button onclick="getChore()">2. Get Chore</button>
|
||
</div>
|
||
|
||
<div id="getResult"></div>
|
||
|
||
<div>
|
||
<label>New Title: <input type="text" id="newTitle" placeholder="Updated Title"></label><br>
|
||
<label>New Points: <input type="number" id="newPoints" placeholder="10"></label><br>
|
||
<button onclick="updateChore()">3. Update Chore</button>
|
||
</div>
|
||
|
||
<div id="updateResult"></div>
|
||
|
||
<script>
|
||
const API_BASE = 'http://10.0.0.243:8001/api/v1';
|
||
let authToken = localStorage.getItem('token') || '';
|
||
|
||
async function login() {
|
||
const username = document.getElementById('username').value;
|
||
const password = document.getElementById('password').value;
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/auth/login`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: `username=${username}&password=${password}`
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
authToken = data.access_token;
|
||
localStorage.setItem('token', authToken);
|
||
document.getElementById('loginResult').innerHTML = `
|
||
<div class="test success">
|
||
<h3>✅ Login Successful</h3>
|
||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||
</div>
|
||
`;
|
||
} else {
|
||
throw new Error(JSON.stringify(data));
|
||
}
|
||
} catch (error) {
|
||
document.getElementById('loginResult').innerHTML = `
|
||
<div class="test error">
|
||
<h3>❌ Login Failed</h3>
|
||
<pre>${error.message}</pre>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
async function getChore() {
|
||
const choreId = document.getElementById('choreId').value;
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/chores/${choreId}`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${authToken}`
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
document.getElementById('getResult').innerHTML = `
|
||
<div class="test success">
|
||
<h3>✅ Get Chore Successful</h3>
|
||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||
</div>
|
||
`;
|
||
|
||
// Pre-fill edit fields
|
||
document.getElementById('newTitle').value = data.title;
|
||
document.getElementById('newPoints').value = data.points;
|
||
} else {
|
||
throw new Error(JSON.stringify(data));
|
||
}
|
||
} catch (error) {
|
||
document.getElementById('getResult').innerHTML = `
|
||
<div class="test error">
|
||
<h3>❌ Get Chore Failed</h3>
|
||
<pre>${error.message}</pre>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
async function updateChore() {
|
||
const choreId = document.getElementById('choreId').value;
|
||
const newTitle = document.getElementById('newTitle').value;
|
||
const newPoints = parseInt(document.getElementById('newPoints').value);
|
||
|
||
const updateData = {
|
||
title: newTitle,
|
||
points: newPoints
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/chores/${choreId}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Authorization': `Bearer ${authToken}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(updateData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
document.getElementById('updateResult').innerHTML = `
|
||
<div class="test success">
|
||
<h3>✅ Update Chore Successful</h3>
|
||
<pre>${JSON.stringify(data, null, 2)}</pre>
|
||
</div>
|
||
`;
|
||
} else {
|
||
throw new Error(JSON.stringify(data));
|
||
}
|
||
} catch (error) {
|
||
document.getElementById('updateResult').innerHTML = `
|
||
<div class="test error">
|
||
<h3>❌ Update Chore Failed</h3>
|
||
<pre>${error.message}</pre>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// Check if already logged in
|
||
if (authToken) {
|
||
document.getElementById('loginResult').innerHTML = `
|
||
<div class="test success">
|
||
<h3>ℹ️ Already Logged In</h3>
|
||
<p>Token found in localStorage</p>
|
||
</div>
|
||
`;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|