Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
mesterum committed Mar 18, 2024
2 parents fc5c1dd + b79b898 commit 13fade1
Show file tree
Hide file tree
Showing 53 changed files with 6,565 additions and 447 deletions.
3,074 changes: 2,887 additions & 187 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@
"url": "git+https://github.com/mesterum/parcel-team6-JS.git"
},
"dependencies": {
"modern-normalize": "^1.1.0"
"axios": "^1.6.7",
"dexie": "^3.2.6",
"lodash.throttle": "^4.1.1",
"modern-normalize": "^1.1.0",
"notiflix": "^3.2.7",
"tui-pagination": "^3.4.1"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.6.0",
"buffer": "^6.0.3",
"parcel": "^2.6.0",
"parcel-reporter-clean-dist": "^1.0.4",
"parcel-reporter-static-files-copy": "^1.5.3",
Expand Down
1 change: 0 additions & 1 deletion src/TEST.HTML

This file was deleted.

179 changes: 23 additions & 156 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,166 +5,33 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filmoteca the best</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>

<!--<link rel="stylesheet" href="./partials/css/styles.css" />-->

<link rel="stylesheet" href="./sass/index.scss" />
<script type="module" src="./index.js"></script>
</head>

<body>
<header class="global-header">
<section class="header-container">
<h1 class="logo">Filmoteka</h1>
<div class="header-nav">
<nav class="header-main-nav">
<ul class="header-list-button">
<li class="header-list-item">
<a href="./index.html"
class="link-header home-page" >HOME</a>
</li>
<li class="header-list-item">
<a href ="./library.html" >MY LIBRARY</a>
</li>
</ul>

<div class="header-search-container">
<form class="header-search">
<input
type="text"
name="searchMovie"
autocomplete="off"
placeholder="Movie Search"
class="header-input"/>

<!-- de adaugat svg -->
</form>
<p class="search-message">Search result not successful. Enter the correct movie name.</p>
</div>

</nav>

</div>
</section>
</header>
</header>

<!--gallery-->

<section class="gallery">
<div class="container">
<h2 class="watch_trailer">Watch trailer</h2>
<div class="swiper">
<svg class="swiper-button-prev-icon">
<use href="#"></use>
</svg>
</div>
<div class="swiper-button-next">
<svg class="swiper-button-next-icon">
<use></use>
</svg>
</div>
</div>

<ul class="movies"></ul>
</section>

<!--pagination-->

<section class="container-pagination">
<ul class="pagination"></ul>
</section>

<!--loader-->

<section class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

<!--footer-->

<footer class="footer">
<div class="container-footer">
<ul class="footer-list">
<li class="footer-item">
© 2023 | All Rights Reserved | Developed with
</li>
<li class="footer-item">by GoIT Students</li>
<li class="footer-item">
<svg class="footer-icon">aici vine inimioara</svg>
</li>
</ul>
</div>
</footer>

<!-- modal-->

<div id="modal_info" class="modal_info1">
<div id="modal">
<div id="close_modal" class="modal_close"></div>
<div id="movie_card">
<div id="content">
<div id="movie_content" class="img_card">
<div id="film-img" alt="Film Image">
<button class="trailer-button" id="film-id" type="button">
<svg class="trailer-icon">
<use class="trailer-icon" href="#"></use>
</svg>
</button>
</div>
</div>
<div id="text-content">
<h2 id="film-title"></h2>
<div id="description">
<div class="description-content">
Votes
<div id="votes"></div>
</div>
<div class="description-content">
Popularity
<div id="popularity"></div>
</div>
<div class="description-content">
Original title
<div id="original_title"></div>
</div>
<div class="description-content">
Genre
<div id="genre"></div>
</div>
</div>
<div class="about-section">
<span>About</span>
<div id="about"></div>
</div>

<div class="btn_class" id="buttonClass">
<button
type="button"
class="add-to-watched-btn"
id="btn"
data-value="add"
>
ADD TO WATCHED
</button>

<button
type="button"
class="add-to-queue-btn"
id="btn"
data-value="add"
>
ADD TO QUEUE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<include src="./partials/header.html"></include>
<!--gallery-->
<include src="./partials/gallery.html"></include>
<!--pagination-->
<include src="./partials/pagination.html"></include>
<!--loader-->
<include src="./partials/loader.html"></include>
<!--scrolltotop-->
<include src="./partials/scrolltoup.html"></include>
<!--footer-->
<include src="./partials/footer.html"></include>
<!-- modal-->
<include src="./partials/modal_movie_cards.html"></include>
<include src="./partials/modal.html"></include>
</body>
</html>
37 changes: 37 additions & 0 deletions src/index.js
100755 → 100644
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {
TMDBconfiguration,
getMovies,
movieDescription,
} from './js-partials/themoviedbAPI';
import { showLoader } from './js-partials/loader';
import './js-partials/gallery_markup';
import './js-partials/localStorage';
import './js-partials/search';
import './js-partials/refs';
import './js-partials/api.js';
import './js-partials/gallery.js';
import './js-partials/library.js';
import './js-partials/scrollToTop.js';
import './js-partials/pagination.js';
import './js-partials/footer-modal.js';
import './js-partials/open-close-modal_movie_card.js'
import './js-partials/movie-modal-description.js'


/* getMovies().then(sr => {
let cards = sr.results
.map(movie => {
return `
<div class="card">
<img src="${TMDBconfiguration.images.secure_base_url}w342${
movie.poster_path
}" alt="${movie.title}">
<h3>${movie.title}</h3>
<h4>${movieDescription(movie)}</h3 >
</div >
`;
})
.join('');
console.log(sr.results);
console.log(cards);
}); */
92 changes: 92 additions & 0 deletions src/js-partials/add_to_wached&queue.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import {
getFromStorage,
localStorageKeys,
setToLocalStorage,
} from './localStorage';

import { refs } from './refs';

import { renderGallery } from './gallery_markup';

export const state = {
currentPage: 1,
totalPages: 0,
activeFilm: null,
query: null,
whatPaginated: null,
whatchedOrQueue: null,
};

export const onBtnAddToLibrary = evt => {
const watchedFilmsArray = getFromStorage(localStorageKeys.WATCHED) || [];
const queueFilmsArray = getFromStorage(localStorageKeys.QUEUE) || [];

if (evt.target.innerText === 'ADD TO WATCHED') {
saveToStorageFilm(
watchedFilmsArray,
localStorageKeys.WATCHED,
'WATCHED',
evt
);
} else if (evt.target.innerText === 'REMOVE FROM WATCHED') {
deleteFromStorageFilm(
watchedFilmsArray,
localStorageKeys.WATCHED,
'WATCHED',
evt
);
} else if (evt.target.innerText === 'ADD TO QUEUE') {
saveToStorageFilm(queueFilmsArray, localStorageKeys.QUEUE, 'QUEUE', evt);
} else if (evt.target.innerText === 'REMOVE FROM QUEUE') {
deleteFromStorageFilm(
queueFilmsArray,
localStorageKeys.QUEUE,
'QUEUE',
evt
);
}
};

function saveToStorageFilm(array, key, keyValue, evt) {
array.push(state.activeFilm);
setToLocalStorage(key, array);
evt.target.innerText = `REMOVE FROM ${keyValue}`;
}
function deleteFromStorageFilm(array, key, keyValue, evt) {
const filteredFilms = array.filter(film => film.id !== state.activeFilm.id);
setToLocalStorage(key, filteredFilms);
evt.target.innerText = `ADD TO ${keyValue}`;
}

export function updateMarkupLibrary(evt) {
if (evt.target.innerText === 'ADD TO WATCHED') {
deleteFromWatchedMarkup();
} else if (evt.target.innerText === 'REMOVE FROM WATCHED') {
deleteFromWatchedMarkup();
} else if (evt.target.innerText === 'ADD TO QUEUE') {
deleteFromQueueMarkup();
} else if (evt.target.innerText === 'REMOVE FROM QUEUE') {
deleteFromQueueMarkup();
}
}
async function deleteFromWatchedMarkup() {
resetCurrentPage();
const watchedFilmsinLocalStorage =
getFromStorage(localStorageKeys.WATCHED) || [];
const films = localPaginate(watchedFilmsinLocalStorage, state.currentPage);
updateLibRender(films);
changeBtnActiveStatus(refs.addToWachedButton, refs.addToQueueButton);
}

async function deleteFromQueueMarkup() {
resetCurrentPage();
const queueFilmsinLocalStorage = getFromStorage(localStorageKeys.QUEUE) || [];
const films = localPaginate(queueFilmsinLocalStorage, state.currentPage);
updateLibRender(films);
changeBtnActiveStatus(refs.addToQueueButton, refs.addToWachedButton);
}

function changeBtnActiveStatus(elFirst, elSecond) {
elFirst.classList.add('active');
elSecond.classList.remove('active');
}
Loading

0 comments on commit 13fade1

Please sign in to comment.