Add example of using the API #5
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.vscode/
|
||||
@ -1,7 +1,7 @@
|
||||
var exampleLog = () => {
|
||||
console.log('This is an example log message.');
|
||||
}
|
||||
console.log("This is an example log message.");
|
||||
};
|
||||
|
||||
var aFunctionCall = () => {
|
||||
alert('You have clicked the primary button!');
|
||||
}
|
||||
alert("You have clicked the primary button!");
|
||||
};
|
||||
|
||||
5
assets/src/service/config-service.js
Normal file
5
assets/src/service/config-service.js
Normal file
@ -0,0 +1,5 @@
|
||||
const config = {
|
||||
API_BASE_URL: "https://316214-1.web.fhgr.education/10001/api/"
|
||||
}
|
||||
|
||||
window.config = config;
|
||||
29
assets/src/service/leaderboard-service.js
Normal file
29
assets/src/service/leaderboard-service.js
Normal file
@ -0,0 +1,29 @@
|
||||
class LeaderboardService {
|
||||
constructor(config) {
|
||||
this.baseUrl = config.API_BASE_URL;
|
||||
this.urlTail = "leaderboard";
|
||||
}
|
||||
|
||||
async getLeaderboard(offset, limit) {
|
||||
const response = await fetch(
|
||||
`${this.baseUrl}${this.urlTail}?offset=${offset}&limit=${limit}`,
|
||||
{
|
||||
method: "GET",
|
||||
},
|
||||
);
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in getLeaderboard");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.LeaderboardService = LeaderboardService;
|
||||
79
assets/src/service/score-service.js
Normal file
79
assets/src/service/score-service.js
Normal file
@ -0,0 +1,79 @@
|
||||
class ScoreService {
|
||||
constructor(config) {
|
||||
this.baseUrl = config.API_BASE_URL;
|
||||
this.urlTail = "score";
|
||||
}
|
||||
|
||||
async getScoreByName(username) {
|
||||
// Note: When user does not exist, we get a 200 with empty array, not a 404
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}/${username}`, {
|
||||
method: "GET",
|
||||
});
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in getScoreByName");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
|
||||
async postScore(username, password, score, time, text, userWrittenText) {
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Username": username,
|
||||
"X-Password": password,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
score: score,
|
||||
time: time,
|
||||
text: text,
|
||||
userWrittenText: userWrittenText,
|
||||
}),
|
||||
});
|
||||
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in postScore");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
|
||||
async deleteScore(username, password, scoreId) {
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}/${scoreId}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"X-Username": username,
|
||||
"X-Password": password,
|
||||
},
|
||||
});
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in deleteScore");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.ScoreService = ScoreService;
|
||||
77
assets/src/service/user-service.js
Normal file
77
assets/src/service/user-service.js
Normal file
@ -0,0 +1,77 @@
|
||||
class UserService {
|
||||
constructor(config) {
|
||||
this.baseUrl = config.API_BASE_URL;
|
||||
this.urlTail = "user";
|
||||
}
|
||||
|
||||
async getUser(username, password) {
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Username": username,
|
||||
"X-Password": password,
|
||||
},
|
||||
});
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in getUser");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
|
||||
async deleteUser(username, password) {
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"X-Username": username,
|
||||
"X-Password": password,
|
||||
},
|
||||
});
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in deleteUser");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
|
||||
async postUser(username) {
|
||||
const response = await fetch(`${this.baseUrl}${this.urlTail}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
}),
|
||||
});
|
||||
|
||||
let body = null;
|
||||
try {
|
||||
body = await response.json();
|
||||
} catch {
|
||||
console.error("Error in postUser");
|
||||
}
|
||||
|
||||
return {
|
||||
status: response.status,
|
||||
ok: response.ok,
|
||||
body: body,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.UserService = UserService;
|
||||
122
assets/src/sites/exampleAPI.js
Normal file
122
assets/src/sites/exampleAPI.js
Normal file
@ -0,0 +1,122 @@
|
||||
const userService = new UserService(config);
|
||||
const scoreService = new ScoreService(config);
|
||||
const leaderboardService = new LeaderboardService(config);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const usernameForm = document.getElementById("usernameForm");
|
||||
const loginForm = document.getElementById("loginForm");
|
||||
|
||||
const postFormScore = document.getElementById("postScoreForm");
|
||||
const getScoreForm = document.getElementById("getScoreForm");
|
||||
const deleteScoreForm = document.getElementById("deleteScoreForm");
|
||||
const getLeaderboardForm = document.getElementById("getLeaderboardForm");
|
||||
|
||||
usernameForm.addEventListener("submit", handleUsernameSubmit);
|
||||
loginForm.addEventListener("submit", handleLoginSubmit);
|
||||
postFormScore.addEventListener("submit", handlePostScoreSubmit);
|
||||
getScoreForm.addEventListener("submit", handleGetScoreSubmit);
|
||||
deleteScoreForm.addEventListener("submit", handleDeleteScoreSubmit);
|
||||
getLeaderboardForm.addEventListener("submit", handleGetLeaderboardSubmit);
|
||||
});
|
||||
|
||||
async function handleUsernameSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("desiredUsername").value;
|
||||
|
||||
console.log("Username form submitted:", username);
|
||||
|
||||
const result = userService.postUser(username);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handleLoginSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
|
||||
console.log("Login form submitted:", username, password);
|
||||
|
||||
const result = await userService.getUser(username, password);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handleDeleteUserSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
|
||||
console.log("Delete User form submitted:", username, password);
|
||||
|
||||
const result = await userService.deleteUser(username, password);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handlePostScoreSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const score = document.getElementById("score").value;
|
||||
const time = document.getElementById("time").value;
|
||||
const text = document.getElementById("text").value;
|
||||
const userWrittenText = document.getElementById("userWrittenText").value;
|
||||
|
||||
console.log(
|
||||
"Post Score form submitted:",
|
||||
username,
|
||||
password,
|
||||
score,
|
||||
time,
|
||||
text,
|
||||
userWrittenText,
|
||||
);
|
||||
|
||||
const result = await scoreService.postScore(
|
||||
username,
|
||||
password,
|
||||
score,
|
||||
time,
|
||||
text,
|
||||
userWrittenText,
|
||||
);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handleGetScoreSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("scoreUsername").value;
|
||||
|
||||
console.log("Get Score form submitted:", username);
|
||||
|
||||
const result = await scoreService.getScoreByName(username);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handleDeleteScoreSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const scoreId = document.getElementById("scoreId").value;
|
||||
|
||||
console.log("Delete Score form submitted:", username, password, scoreId);
|
||||
|
||||
const result = await scoreService.deleteScore(username, password, scoreId);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
|
||||
async function handleGetLeaderboardSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const offset = document.getElementById("offset").value;
|
||||
const limit = document.getElementById("limit").value;
|
||||
|
||||
console.log("Get Leaderboard form submitted:", offset, limit);
|
||||
|
||||
const result = await leaderboardService.getLeaderboard(offset, limit);
|
||||
console.log("API response:", result);
|
||||
}
|
||||
310
exampleAPI.html
Normal file
310
exampleAPI.html
Normal file
@ -0,0 +1,310 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>My Web Page</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="assets/css/custom.css"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<!-- AuthForm-->
|
||||
<div class="col-md-12">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Login Form</h4>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="username"
|
||||
class="form-label"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="password"
|
||||
class="form-label"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-success"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Endpoint -->
|
||||
<div class="container mt-5">
|
||||
<h2 class="text-center mb-4">User endpoint</h2>
|
||||
<div class="row">
|
||||
<!-- Post User -->
|
||||
<div class="col-md-6">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Username Form</h4>
|
||||
|
||||
<form id="usernameForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="desiredUsername"
|
||||
class="form-label"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="desiredUsername"
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete User -->
|
||||
<div class="col-md-6">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Delete User</h4>
|
||||
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
onclick="handleDeleteUserSubmit(event)"
|
||||
>
|
||||
Delete User
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score Endpoint -->
|
||||
<div class="container mt-5">
|
||||
<h2 class="text-center mb-4">Score endpoint</h2>
|
||||
<div class="row">
|
||||
<!-- Post Score -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Post Score</h4>
|
||||
|
||||
<form id="postScoreForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="score"
|
||||
class="form-label"
|
||||
>Score</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="score"
|
||||
placeholder="Enter score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="time"
|
||||
class="form-label"
|
||||
>Time</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="time"
|
||||
placeholder="Enter time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="text"
|
||||
class="form-label"
|
||||
>Text</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="text"
|
||||
placeholder="Enter text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="userWrittenText"
|
||||
class="form-label"
|
||||
>User Written Text</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="userWrittenText"
|
||||
placeholder="Enter text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Get Score -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Get Score</h4>
|
||||
|
||||
<form id="getScoreForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="scoreUsername"
|
||||
class="form-label"
|
||||
>Score Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="scoreUsername"
|
||||
placeholder="Enter score username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Get Score
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Score -->
|
||||
<div class="col-md-4">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Delete Score</h4>
|
||||
|
||||
<form id="deleteScoreForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="scoreId"
|
||||
class="form-label"
|
||||
>ScoreId</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="scoreId"
|
||||
placeholder="Enter score ID"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger"
|
||||
>
|
||||
Delete Score
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard Endpoint -->
|
||||
<div class="container mt-5">
|
||||
<h2 class="text-center mb-4">Leaderboard endpoint</h2>
|
||||
<div class="row">
|
||||
<!-- Get Leaderboard -->
|
||||
<div class="col-md-12">
|
||||
<div class="card p-4 shadow-sm">
|
||||
<h4 class="mb-3">Get Leaderboard</h4>
|
||||
|
||||
<form id="getLeaderboardForm">
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="offset"
|
||||
class="form-label"
|
||||
>Offset</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="offset"
|
||||
placeholder="Enter offset"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
for="limit"
|
||||
class="form-label"
|
||||
>Limit</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="limit"
|
||||
placeholder="Enter Limit for Leaderboard"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Get Leaderboard
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/src/service/user-service.js"></script>
|
||||
<script src="assets/src/service/score-service.js"></script>
|
||||
<script src="assets/src/service/leaderboard-service.js"></script>
|
||||
<script src="assets/src/service/config-service.js"></script>
|
||||
<script src="assets/src/sites/exampleAPI.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user