Phase 3.1: Enhanced Chore Logging and Reporting System
This commit is contained in:
170
test_edit_chore.html
Normal file
170
test_edit_chore.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user