Skip to content
Snippets Groups Projects
Commit 07332206 authored by Taken, J.J.J. (Jens, Student B-TCS)'s avatar Taken, J.J.J. (Jens, Student B-TCS)
Browse files

made the trainers page

parent 7d77e368
Branches main
No related tags found
No related merge requests found
Pipeline #96729 failed
Stage: build
    Stage: test
      Stage: dast
        Hide whitespace changes
        Inline Side-by-side
        pom.xml
        + 6
        − 0
        View file @ 07332206
        ......@@ -55,6 +55,12 @@
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.17.0</version>
        <exclusions>
        <exclusion>
        <groupId>com.fasterxml.jackson.module</groupId>
        <artifactId>jackson-module-jaxb-annotations</artifactId>
        </exclusion>
        </exclusions>
        </dependency>
        </dependencies>
        ......
        src/main/java/nl/utwente/mod4/pokemon/Utils.java
        + 1
        − 1
        View file @ 07332206
        ......@@ -6,7 +6,7 @@ import java.util.List;
        public class Utils {
        public static String getAbsolutePathToResources() {
        return Utils.class.getClassLoader().getResource("").getPath();
        return "C:/mod4/src/main/resources";
        }
        public static <T extends Comparable<T>> int compare(T o1, T o2) {
        ......
        src/main/webapp/js/requests.js
        + 58
        − 0
        View file @ 07332206
        let pokemonTypes = {};
        let trainers = {};
        let tableParentId = 'table';
        let detailsParentId = 'details';
        ......@@ -60,4 +61,61 @@ function createPokemonTypesTable() {
        </tbody>
        </table>
        `
        }
        function updateTrainerDetails(trainer) {
        const pt = trainers?.data?.find(item => item.id === trainer);
        const parent = document.getElementById(detailsParentId);
        parent.innerHTML = `
        <div class="card" id="${pt.id}_card">
        <img src="${pt.profileUrl}" class="card-img-top" alt="${pt.classification}">
        <div class="card-body">
        <h5 class="card-title">${pt.name} #${pt.name}</h5>
        <p class="card-text">
        Name: ${pt.name} </br>
        Created: ${pt.created} </br>
        Last updated: ${pt.lastUpDate}</br>
        Valid: ${pt.valid}
        </p>
        </div>
        </div>
        `
        }
        function trainerToRow(trainer) {
        return `
        <tr id="${getRowId(trainer)}" onclick="updateTrainerDetails('${trainer?.id?.trim()}')">
        <th scope="row">${trainer.id}</th>
        <td>${trainer.name}</td>
        <td>${trainer.created}</td>
        <td>${trainer.lastUpDate}</td>
        <td>${trainer.valid || '-'}</td>
        </tr>
        `
        }
        function createTrainerTable() {
        const tableParent = document.getElementById(tableParentId);
        tableParent.innerHTML = `
        <table class="table table-striped table-hover">
        <thead>
        <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Created</th>
        <th scope="col">Last Updated</th>
        <th scope="col">Is Valid</th>
        </tr>
        </thead>
        <tbody>
        ${
        trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
        || "no data"
        }
        </tbody>
        </table>
        `
        }
        \ No newline at end of file
        src/main/webapp/pokemonTypes.html
        + 8
        − 3
        View file @ 07332206
        ......@@ -31,14 +31,19 @@
        });
        </script>
        <h1>Pokemon Types</h1>
        <div class="container">
        <div class="d-flex align-items-center">
        <h1 class="mr-3">Pokemon Types</h1>
        <a href="trainersPage.html">
        <button class="btn btn-primary">Trainers</button>
        </a>
        </div>
        </div>
        <div class="container">
        <div class="row">
        <div id="tableDiv" class="col-8">No data</div>
        <div id="detailsDiv" class="col-4">No data</div>
        </div>
        </div>
        </body>
        </html>
        \ No newline at end of file
        src/main/webapp/trainersPage.html 0 → 100644
        + 49
        − 0
        View file @ 07332206
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
        <title>Title</title>
        <link rel="icon" type="image/x-icon" href="/pokemon/favicon.ico">
        </head>
        <body>
        <script src="js/requests.js"></script>
        <script>
        tableParentId = "tableDiv";
        detailsParentId = "detailsDiv";
        fetch('/pokemon/api/trainers')
        .then(res => res.json())
        .then(data => {
        trainers = data;
        createTrainerTable();
        })
        .catch(err => {
        console.error(`Unable to fetch Trainers: ${err.status}`);
        console.error(err);
        });
        </script>
        <div class="container">
        <div class="d-flex align-items-center">
        <h1 class="mr-3">Trainers</h1>
        <a href="pokemonTypes.html">
        <button class="btn btn-primary">Pokemon</button>
        </a>
        </div>
        </div>
        <div class="container">
        <div class="row">
        <div id="tableDiv" class="col-8">No data</div>
        <div id="detailsDiv" class="col-4">No data</div>
        </div>
        </div>
        </body>
        </html>
        \ No newline at end of file
        0% or .
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment