mirror of
https://github.com/Lemonochrme/service-architecture.git
synced 2025-06-08 13:40:50 +02:00
112 lines
4.5 KiB
HTML
112 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HelpApp - Simple Frontend</title>
|
|
</head>
|
|
<body>
|
|
<h1>HelpApp - Test Frontend</h1>
|
|
|
|
<!-- User Service -->
|
|
<section>
|
|
<h2>User Service</h2>
|
|
<form id="create-user-form">
|
|
<h3>Create User</h3>
|
|
<input type="text" id="user-name" placeholder="Name" required>
|
|
<input type="email" id="user-email" placeholder="Email" required>
|
|
<input type="password" id="user-password" placeholder="Password" required>
|
|
<select id="user-role" required>
|
|
<option value="REQUESTER">Requester</option>
|
|
<option value="VOLUNTEER">Volunteer</option>
|
|
<option value="ADMIN">Admin</option>
|
|
</select>
|
|
<button type="submit">Create User</button>
|
|
</form>
|
|
|
|
<form id="get-user-form">
|
|
<h3>Get User by ID</h3>
|
|
<input type="number" id="get-user-id" placeholder="User ID" required>
|
|
<button type="submit">Get User</button>
|
|
</form>
|
|
<div id="user-response"></div>
|
|
</section>
|
|
|
|
<!-- Request Service -->
|
|
<section>
|
|
<h2>Request Service</h2>
|
|
<form id="create-request-form">
|
|
<h3>Create Help Request</h3>
|
|
<input type="number" id="request-user-id" placeholder="User ID" required>
|
|
<input type="text" id="request-details" placeholder="Request Details" required>
|
|
<button type="submit">Create Request</button>
|
|
</form>
|
|
|
|
<form id="get-requests-form">
|
|
<h3>Get Requests by User ID</h3>
|
|
<input type="number" id="get-requests-user-id" placeholder="User ID" required>
|
|
<button type="submit">Get Requests</button>
|
|
</form>
|
|
<div id="request-response"></div>
|
|
</section>
|
|
|
|
<script>
|
|
const userServiceBaseUrl = 'http://localhost:8083/users';
|
|
const requestServiceBaseUrl = 'http://localhost:8082/requests';
|
|
|
|
// Handle User Creation
|
|
document.getElementById('create-user-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const name = document.getElementById('user-name').value;
|
|
const email = document.getElementById('user-email').value;
|
|
const password = document.getElementById('user-password').value;
|
|
const role = document.getElementById('user-role').value;
|
|
|
|
const response = await fetch(userServiceBaseUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, email, password, role }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
document.getElementById('user-response').innerText = JSON.stringify(data, null, 2);
|
|
});
|
|
|
|
// Handle Get User by ID
|
|
document.getElementById('get-user-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const userId = document.getElementById('get-user-id').value;
|
|
|
|
const response = await fetch(`${userServiceBaseUrl}/${userId}`);
|
|
const data = await response.json();
|
|
document.getElementById('user-response').innerText = JSON.stringify(data, null, 2);
|
|
});
|
|
|
|
// Handle Request Creation
|
|
document.getElementById('create-request-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const userId = document.getElementById('request-user-id').value;
|
|
const details = document.getElementById('request-details').value;
|
|
|
|
const response = await fetch(requestServiceBaseUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ userId, details }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
document.getElementById('request-response').innerText = JSON.stringify(data, null, 2);
|
|
});
|
|
|
|
// Handle Get Requests by User ID
|
|
document.getElementById('get-requests-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const userId = document.getElementById('get-requests-user-id').value;
|
|
|
|
const response = await fetch(`${requestServiceBaseUrl}/user/${userId}`);
|
|
const data = await response.json();
|
|
document.getElementById('request-response').innerText = JSON.stringify(data, null, 2);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|