manuth/zhaw-moba2
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Store access token in localStorage

Browse source
This commit is contained in:
Manuel Thalmann 2024-03-15 11:26:58 +01:00
parent 81bbfab569
commit f9312302e0
2 changed files with 107 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
Tasks/Task 01/movieSearch/index.html
View file

@ -7,25 +7,41 @@
<body>
<div class="container my-5">
<h1>Movie Search</h1>
<form id="movieSearch" class="mb-3">
<div class="input-group mb-3">
<input class="form-control">
<button class="btn btn-primary" type="submit">Search</button>
<div id="loginArea">
<form id="login">
<div class="mb-3">
<label for="token" class="form-label">Access Token</label>
<input class="form-control" id="token">
</div>
<button class="btn btn-primary" type="submit">Login</button>
</form>
</div>
<div id="searchArea">
<form id="movieSearch" class="mb-3">
<div class="input-group mb-3">
<input class="form-control">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
<div class="mb-3">
<a class="btn btn-primary" href="javascript:localStorage.clear(); location.reload();">
Logout
</a>
</div>
</form>
<table id="output" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Poster</th>
<th scope="col">Name</th>
<th scope="col">Rating</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="output" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Poster</th>
<th scope="col">Name</th>
<th scope="col">Rating</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

124
Tasks/Task 01/movieSearch/main.js
View file

@ -1,67 +1,88 @@
const maxRating = 10;
let token;
window.addEventListener(
"load",
(e) => {
let config;
/**
* @type {HTMLTableElement}
*/
let table = document.querySelector("table#output");
let form = document.getElementById("movieSearch");
let textInput = form.querySelector("input");
table.hidden = true;
let loginArea = document.getElementById("loginArea");
let searchArea = document.getElementById("searchArea");
token = localStorage.getItem("token");
form.addEventListener(
"submit",
async (e) => {
e.preventDefault();
table.hidden = true;
config ??= await queryTMDb("configuration");
if (token === null) {
searchArea.remove();
while (table.tBodies.length > 0) {
table.removeChild(table.tBodies[0]);
}
loginArea.querySelector("form").addEventListener(
"submit",
async (e) => {
e.preventDefault();
token = loginArea.querySelector("input").value;
localStorage.setItem("token", token);
loginArea.replaceWith(searchArea);
});
}
else {
loginArea.remove();
let result = await queryTMDb(
"search/movie",
{
include_adult: true,
language: "en-US",
query: textInput.value
});
let config;
/**
* @type {HTMLTableElement}
*/
let table = document.querySelector("table#output");
let form = document.getElementById("movieSearch");
let textInput = form.querySelector("input");
table.hidden = true;
let tBody = table.createTBody();
tBody.classList.add("align-middle");
form.addEventListener(
"submit",
async (e) => {
e.preventDefault();
table.hidden = true;
config ??= await queryTMDb("configuration");
for (let i = 0; i < result.results.length; i++) {
let movie = result.results[i];
let row = tBody.insertRow();
let title = document.createElement("a");
let poster = document.createElement("img");
while (table.tBodies.length > 0) {
table.removeChild(table.tBodies[0]);
}
title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`;
title.classList.add("link-body-emphasis");
title.target = "_blank";
title.innerText = movie.title;
let result = await queryTMDb(
"search/movie",
{
include_adult: true,
language: "en-US",
query: textInput.value
});
poster.src = new URL(
`./${movie.poster_path}`,
new URL(
`${config.images.poster_sizes[0]}/`,
config.images.secure_base_url).toString()).toString();
let tBody = table.createTBody();
tBody.classList.add("align-middle");
row.insertCell().innerText = `#${i + 1}`;
row.insertCell().appendChild(poster);
row.insertCell().appendChild(title);
row.insertCell().appendChild(createRating(movie.vote_average));
row.insertCell().innerText = movie.overview;
}
for (let i = 0; i < result.results.length; i++) {
let movie = result.results[i];
let row = tBody.insertRow();
let title = document.createElement("a");
let poster = document.createElement("img");
table.hidden = false;
console.log(config);
console.log(result);
});
title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`;
title.classList.add("link-body-emphasis");
title.target = "_blank";
title.innerText = movie.title;
poster.src = new URL(
`./${movie.poster_path}`,
new URL(
`${config.images.poster_sizes[0]}/`,
config.images.secure_base_url).toString()).toString();
row.insertCell().innerText = `#${i + 1}`;
row.insertCell().appendChild(poster);
row.insertCell().appendChild(title);
row.insertCell().appendChild(createRating(movie.vote_average));
row.insertCell().innerText = movie.overview;
}
table.hidden = false;
console.log(config);
console.log(result);
});
}
});
/**
@ -83,7 +104,8 @@ async function queryTMDb(endpoint, params) {
`${url}`,
{
headers: {
Accept: "application/json"
Accept: "application/json",
Authorization: `Bearer ${token}`
}
})).json();
}