modal ok, category blocks ok, before changing best block
This commit is contained in:
parent
1d5dad00e3
commit
619bf05069
243
index2.html
243
index2.html
@ -4,191 +4,92 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>JustStreamIt</title>
|
<title>JustStreamIt</title>
|
||||||
<link href="style.css" rel="stylesheet">
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
</head>
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
.square {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
background-color: lightgray;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rem;
|
||||||
|
height: 8rem;
|
||||||
|
width: 90%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-y: 1rem;
|
||||||
|
margin: 0.1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<center>
|
|
||||||
<header>
|
<header>
|
||||||
<div class="container banniere">
|
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
||||||
<img alt="logo" title="logo" src=logo.png>
|
<div class="row">
|
||||||
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
<div class="col-md-2">
|
||||||
|
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class="col align-self-center d-none d-sm-block ms-5">
|
||||||
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<!-- best film -->
|
||||||
<section>
|
|
||||||
<h2> Meilleur film </h2>
|
|
||||||
|
|
||||||
<div class="container-lg best-film">
|
|
||||||
<div class="affiche">
|
|
||||||
<img src=https://picsum.photos/seed/picsum/200/300 alt="film cover" >
|
|
||||||
</div>
|
|
||||||
<div class="title">
|
|
||||||
<h2> film </h2>
|
|
||||||
</div>
|
|
||||||
<div class="description">
|
|
||||||
Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor.
|
|
||||||
Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies.
|
|
||||||
</div>
|
|
||||||
<div class="film_detail">
|
|
||||||
<button class="detail">Details</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2> Mystery </h2>
|
<div class="container mt-5">
|
||||||
<div class="conteneur">
|
<h2> Meilleur film </h2></div>
|
||||||
|
<div class="container border border-black border-4 mt-1">
|
||||||
<div class="col">
|
<div class="row" id="bestFilm">
|
||||||
<div class="col-hover">
|
<!-- square block model-->
|
||||||
<p class="titre">Film1</p>
|
</div>
|
||||||
<p class="button">Détail</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- best note -->
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Best rated</h2>
|
||||||
|
<div class="row" id="bestRated">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<h3>Film 2</h3>
|
|
||||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
||||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<h3>Film 3</h3>
|
|
||||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
||||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<h3>Film 4</h3>
|
|
||||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
||||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<h3>Film 5</h3>
|
|
||||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
||||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col">
|
|
||||||
<h3>Film 6</h3>
|
|
||||||
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
||||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class=category>
|
<section class="py-5">
|
||||||
<h2> Category2 </h2>
|
<div class="container">
|
||||||
<p>
|
<h2>Mystery</h2>
|
||||||
<ul>
|
<div class="row" id="mystery">
|
||||||
<div>Film 1
|
<!-- square block model-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class=category>
|
|
||||||
<h2> Category2 </h2>
|
|
||||||
<p>
|
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=categorie_other>
|
|
||||||
<h2> Other </h2>
|
|
||||||
<div class=category>
|
|
||||||
<ul>
|
|
||||||
<div>Film 1
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Film 2
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 3
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 4
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 5
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Film 6
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class=category>
|
</section>
|
||||||
<h2> Category </h2>
|
|
||||||
|
|
||||||
<label for="category-select">Category</label>
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div id="menu">
|
||||||
|
<label for="category-select" class="fs-2">Autres : </label>
|
||||||
|
<select name="category" id="category-select">
|
||||||
|
<option selected id="selected">Category</option>
|
||||||
|
<!-- getCategory() to fill the options -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="row" id="other">
|
||||||
|
<!-- square block model-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<select name="category" id="category-select">
|
|
||||||
<option value="Action">Action</option>
|
|
||||||
<option value="Adult">Adult</option>
|
|
||||||
<option value="Adventure">Adventure</option>
|
|
||||||
<option value="Animation">Animation</option>
|
|
||||||
<option value="Biography">Biography</option>
|
|
||||||
<option value="Comedy">Comedy</option>
|
|
||||||
<option value="Crime">Crime</option>
|
|
||||||
<option value="Documentary">Documentary</option>
|
|
||||||
<option value="Drama">Drama</option>
|
|
||||||
<option value="Family">Family</option>
|
|
||||||
<option value="Fantasy">Fantasy</option>
|
|
||||||
<option value="Film-Noir">Film-Noir</option>
|
|
||||||
<option value="History">History</option>
|
|
||||||
<option value="Horror">Horror</option>
|
|
||||||
<option value="Music">Music</option>
|
|
||||||
<option value="Musical">Musical</option>
|
|
||||||
<option value="Mystery">Mystery</option>
|
|
||||||
<option value="News">News</option>
|
|
||||||
<option value="Reality-TV">Reality-TV</option>
|
|
||||||
<option value="Romance">Romance</option>
|
|
||||||
<option value="Sci-Fi">Sci-Fi</option>
|
|
||||||
<option value="Sport">Sport</option>
|
|
||||||
<option value="Thriller">Thriller</option>
|
|
||||||
<option value="War">War</option>
|
|
||||||
<option value="Western">Western</option>
|
|
||||||
|
|
||||||
</select>
|
<script src="test2.js"></script>
|
||||||
</center>
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
207
test2.js
207
test2.js
@ -1,44 +1,185 @@
|
|||||||
|
const url_title = "http://localhost:8000/api/v1/titles/"
|
||||||
|
const url_genre = "http://localhost:8000/api/v1/genres/"
|
||||||
|
const blockEnd = `
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
// function getBestFilm() {
|
async function getMovies(url, id) {
|
||||||
// let bestFilmTitle = document.querySelector(".title h2")
|
const filmList = []
|
||||||
// console.log(bestFilmTitle.textContent)
|
|
||||||
//}
|
|
||||||
|
|
||||||
//getBestFilm()
|
for (let j=1; j<3; j++) {
|
||||||
|
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
|
||||||
async function afficherFilms() {
|
const film1 = await response.json();
|
||||||
for (let j = 1; j<10; j++) {
|
for (i in film1.results) {
|
||||||
const response = await fetch(`http://localhost:8000/api/v1/titles/?format=json&page=${j}`);
|
filmList.push(film1.results[i])
|
||||||
const film = await response.json();
|
|
||||||
for (let i in film.results) {
|
|
||||||
console.log(film.results[i].title);
|
|
||||||
}
|
}
|
||||||
//return response.json();
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
bestFilm()
|
let blockToLook = document.getElementById(id)
|
||||||
let bestTitle = document.getElementById("bestTitle h2")
|
blockToLook.innerHTML = ""
|
||||||
console.log(bestTitle)
|
|
||||||
let bestPic = document.querySelector(".affiche img")
|
// square block creation for each film
|
||||||
let bestDesc = document.getElementById("description")
|
for (let i = 0; i < 6; i++) {
|
||||||
console.log(bestPic)
|
film = filmList[i]
|
||||||
|
let movieBlock = `
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 pb-5">
|
||||||
|
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
|
||||||
|
</div>
|
||||||
|
<div class="overlay row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 style="color: white">${film.title}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="col d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
|
||||||
|
|
||||||
async function bestFilm() {
|
|
||||||
const response = await fetch("http://localhost:8000/api/v1/titles/118710")
|
|
||||||
const film = await response.json();
|
|
||||||
bestTitle.innerText = film.original_title
|
|
||||||
bestPic.setAttribute("src", film.image_url)
|
|
||||||
bestDesc.innerText = film.description
|
|
||||||
let detailHeader = `
|
|
||||||
<h2>${film.original_title}</h2>
|
|
||||||
<h4>${film.year} - ${film.genres}</h4>
|
|
||||||
`
|
`
|
||||||
let modalHeader = document.getElementById("modalHeader")
|
// retrieve the specific film detail from URL using id then concatenate with the modal creator
|
||||||
modalHeader.innerHTML = detailHeader
|
const response2 = await fetch(`${url_title}${film.id}`)
|
||||||
console.log(film)
|
const film2 = await response2.json()
|
||||||
|
let modal = getModalDetail(film2, film2.id)
|
||||||
|
|
||||||
|
blockToLook.innerHTML += movieBlock+modal+blockEnd
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// tried to make some dynamic pagination browsing... nok
|
||||||
|
async function getCount(type) {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/${type}`)
|
||||||
|
const result = await response.json()
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
// get categories and create the options in select menu
|
||||||
|
async function getCategory() {
|
||||||
|
listeGenres = []
|
||||||
|
for (let i = 1; i<6; i++) {
|
||||||
|
const response = await fetch(`${url_genre}?page=${i}`);
|
||||||
|
const genres = await response.json();
|
||||||
|
for (let j in genres.results) {
|
||||||
|
listeGenres.push(genres.results[j].name)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
let categorySelect = document.getElementById("category-select")
|
||||||
|
for (i in listeGenres) {
|
||||||
|
let option = `
|
||||||
|
<option value="${listeGenres[i]}">${listeGenres[i]}</option>
|
||||||
|
`
|
||||||
|
categorySelect.innerHTML += option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the best film block and get a movie from a given ID
|
||||||
|
async function bestFilm(filmId) {
|
||||||
|
const response = await fetch(`${url_title}${filmId}`);
|
||||||
|
const bfilm = await response.json();
|
||||||
|
|
||||||
|
let detail = `
|
||||||
|
<div class="col d-flex justify-content-center my-2">
|
||||||
|
<img src="${bfilm.image_url}" alt="film cover">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9 col-md-9 col-sm-12 my-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3 col-md-3"><h2>${bfilm.title}</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-9">${bfilm.description}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 d-flex justify-content-sm-end justify-content-center mt-3">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
let modal = getModalDetail(bfilm, bfilm.id);
|
||||||
|
document.getElementById("bestFilm").innerHTML += detail+modal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the modal HTML block for a given film object
|
||||||
|
function getModalDetail(film, modalId) {
|
||||||
|
recette = "-"
|
||||||
|
if (film.worldwide_gross_income) {
|
||||||
|
recette = film.worldwide_gross_income
|
||||||
|
}
|
||||||
|
let modalContent = `
|
||||||
|
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="${modalId}">Détail du film</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- first part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12-auto col-lg-6 ">
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
|
||||||
|
<div class="fs-4">${film.year} - ${film.genre}</div>
|
||||||
|
<div class="fs-4">${film.duration} minutes (${film.countries})</div>
|
||||||
|
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
|
||||||
|
<div class="py-3 fs-4">Realisé par:
|
||||||
|
<p class="fs-5">${film.directors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12-auto col-lg-6 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- second part -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 order-md-1">
|
||||||
|
<div class="p-3 border bg-light">${film.long_description}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-center">
|
||||||
|
<img src="${film.image_url}" class=" my-3 d-lg-none" alt="Film Cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-3 border order-md-3 bg-light mt-3">
|
||||||
|
<strong>Avec: </strong>
|
||||||
|
<p>${film.actors}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-danger rounded-4 px-4 d-none d-lg-block" data-dismiss="modal">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
return modalContent
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// fill each blocks "defined category" : best rated, then mystery...
|
||||||
|
|
||||||
|
// Il Grande Lebowski
|
||||||
|
// bestFilm("118715")
|
||||||
|
|
||||||
|
bestFilm("101928")
|
||||||
|
getMovies("?sort_by=-imdb_score", "bestRated")
|
||||||
|
getMovies("?genre=mystery", "mystery")
|
||||||
|
getMovies("?genre=action", "other")
|
||||||
|
|
||||||
|
// fill the selection menu
|
||||||
|
getCategory()
|
||||||
|
|
||||||
|
// listen for any change in menu
|
||||||
|
let selectedItem = document.getElementById("category-select")
|
||||||
|
selectedItem.addEventListener("change", ()=> {
|
||||||
|
console.log(selectedItem.value)
|
||||||
|
getMovies(`?genre=${selectedItem.value}`, "other")
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//afficherFilms()
|
//afficherFilms()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user