.gitignore

@@ -0,0 +1 @@
+.vscode/

assets/src/example.js

@@ -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!");
-}
+};

assets/src/service/config-service.js

@@ -0,0 +1,5 @@
+const config = {
+    API_BASE_URL: "https://316214-1.web.fhgr.education/10001/api/"
+}
+
+window.config = config;

assets/src/service/leaderboard-service.js

@@ -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;

assets/src/service/score-service.js

@@ -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;

assets/src/service/user-service.js

@@ -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;

assets/src/sites/exampleAPI.js

@@ -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);
+}

exampleAPI.html

@@ -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>