Skip to content
Snippets Groups Projects
Commit c991d50e authored by Morais Fonseca, Claudenir (UT-EEMCS)'s avatar Morais Fonseca, Claudenir (UT-EEMCS)
Browse files

Pokemon routes and page

parent 46ce86f3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
design/example-open-api.yaml 0 → 100644
+ 14
− 0
View file @ c991d50e
openapi: 3.0.3
info:
title: Example OpenAPI document
description: Example OpenAPI document
version: 1.0.0
servers:
- url: 'https://example.com'
paths:
'/api/pokemon':
get:
description: Retrieves pokemon resources.
responses:
200:
description: OK
\ No newline at end of file
src/main/java/nl/utwente/mod4/pokemon/model/Pokemon.java 0 → 100644
+ 9
− 0
View file @ c991d50e
package nl.utwente.mod4.pokemon.model;
public class Pokemon extends NamedEntity {
public String trainerId;
public String pokemonType;
public Pokemon() {}
}
src/main/java/nl/utwente/mod4/pokemon/routes/PokemonRoute.java 0 → 100644
+ 62
− 0
View file @ c991d50e
package nl.utwente.mod4.pokemon.routes;
import jakarta.ws.rs.*;
import jakarta.ws.rs.core.MediaType;
import nl.utwente.mod4.pokemon.model.Pokemon;
import java.util.ArrayList;
import java.util.List;
@Path("/pokemon")
public class PokemonRoute {
@GET
@Produces(MediaType.APPLICATION_JSON)
public List<Pokemon> getPokemon() {
var list = new ArrayList<Pokemon> ();
var bolt = new Pokemon();
bolt.id = "1";
bolt.name = "Bolt";
bolt.trainerId = "1";
bolt.pokemonType = "513";
list.add(bolt);
return list;
}
@Path("/{id}")
@GET
@Produces(MediaType.APPLICATION_JSON)
public Pokemon getPokemon(@PathParam("id") String id) {
var bolt = new Pokemon();
bolt.id = id;
bolt.name = "Bolt";
bolt.trainerId = "1";
bolt.pokemonType = "513";
return bolt;
}
@POST
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public Pokemon createPokemon(Pokemon pokemon) {
return pokemon;
}
@Path("/{id}")
@PUT
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public Pokemon updatePokemon(@PathParam("id") String id, Pokemon pokemon) {
return pokemon;
}
@Path("/{id}")
@DELETE
public void deletePokemon(@PathParam("id") String id) {
System.out.println("Pokemon '"+id+"' deleted");
}
}
src/main/webapp/pokemon.html 0 → 100644
+ 144
− 0
View file @ c991d50e
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<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>PokeApp</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
</head>
<body>
<h1 class="display-1 d-flex justify-content-center mb-5">PokeApp</h1>
<div class="d-flex justify-content-center mb-5">
<a class="btn btn-primary mx-2" href="./pokemonTypes.html">Pokemon Types</a>
<a class="btn btn-primary mx-2" href="./trainers.html">Trainers</a>
<a class="btn btn-primary mx-2" href="./pokemon.html">Pokemon</a>
</div>
<div class="d-flex justify-content-center mb-5">
<div class="row">
<div class="col-sm">
<h2>Pokemon Details</h2>
<ul>
<li>
<storng>ID:</storng>
<span id="detail-id"></span></li>
<li>
<storng>Name:</storng>
<span id="detail-name"></span></li>
<li>
<storng>Trainer ID:</storng>
<span id="detail-trainer-id"></span></li>
<li>
<storng>Pokemon Type ID:</storng>
<span id="detail-pokemon-type-id"></span></li>
</ul>
</div>
<div class="col-sm">
<h2>New Pokemon</h2>
<label>ID: </label></br>
<input type="text" id="new-id"></br>
<label>Name: </label></br>
<input type="text" id="new-name"></br>
<label>Trainer ID: </label></br>
<input type="text" id="new-trainer-id"></br>
<label>Pokemon Type ID: </label></br>
<input type="text" id="new-pokemon-type-id"></br>
<button onclick="createPokemon()">New</button>
</div>
<div class="col-sm">
<h2>Update Pokemon</h2>
<label>ID: </label></br>
<input type="text" id="update-id"></br>
<label>Name: </label></br>
<input type="text" id="update-name"></br>
<label>Trainer ID: </label></br>
<input type="text" id="update-trainer-id"></br>
<label>Pokemon Type ID: </label></br>
<input type="text" id="update-pokemon-type-id"></br>
</div>
</div>
</div>
<h2>Pokemon Table</h2>
<div class="pokemon-table">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Trainer ID</th>
<th scope="col">Pokemon Type ID</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<th scope="row">No data</th>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<script>
fetch('./api/pokemon')
.then(res => res.json())
.then(data => {
let rows = data?.map(pokemon => `
<tr>
<td>${pokemon.id}</td>
<td>${pokemon.name}</td>
<td>${pokemon.trainerId}</td>
<td>${pokemon.pokemonTypeId}</td>
</tr>
`);
document.getElementById("table-body").innerHTML = rows.join("/n");
}).catch(err => {
console.error("Unable to fetch all pokemon", err)
})
</script>
<script>
function createPokemon() {
const newPokemon = {
id: document.getElementById("new-id").value,
name: document.getElementById("new-name").value,
trainerId: document.getElementById("new-trainer-id").value,
pokemonType: document.getElementById("new-pokemon-type-id").value,
}
fetch('./api/pokemon', {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(newPokemon)
}).then(res => {
alert("Pokemon created")
}).catch(err => {
alert("Failed to create pokemon")
console.error(err);
})
}
</script>
</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