Oi Giovana, tudo bem?
Primeiramente, parabéns por finalizar o projeto! Agora, vamos tentar resolver esses problemas que você relatou.
Temporadas não aparecem para algumas séries
Isso se dá pelo fato de que algumas séries você não adicionou os episódios no banco de dados.
Quando é feito a impressão das informações na página HTML o nosso Backend faz uma varredura no banco de dados buscando a relação de id_serie da tabela "episodios" com as séries da tabela "series", então se as temporadas não estão aparecendo é porque a série em questão não tem os seus episódios cadastrados no banco.
Com isso, recomendo que acesse o projeto do curso anterior a esse para fazer a inserção dos episódios, já que o projeto do curso atual não conta com uma rota para inserir séries ou seus episódios.
Aqui está o repositório com o projeto final: Java Screenmatch com JPA
Caso faça o clone do repositório, lembre-se de mudar para a branch "aula04", para ter acesso à versão final do projeto.
Filtro de Gênero não funciona corretamente
Pelo que você descreveu, o problema de os gêneros carregarem apenas uma vez mesmo após mudar a seleção pode estar relacionado a dois pontos:
Estado do currentIndex: quando você seleciona um novo gênero, o índice atual (currentIndex) do carrossel continua com o valor anterior. Isso pode causar problemas, já que o carrossel pode estar tentando renderizar uma parte da lista que não existe ou já foi exibida.
Atualização dos Elementos DOM: ao mudar a categoria, o novo conteúdo é carregado, mas o estado do carrossel (botões, índices) pode não estar sendo corretamente reiniciado.
Sugestões para resolver o problema:
Reiniciar o Índice ao Mudar a Categoria: sempre que uma nova categoria for selecionada, reinicie o currentIndex para zero:
categoriaSelect.addEventListener('change', function () {
const categoria = document.querySelector('[data-name="categoria"]');
const categoriaSelecionada = categoriaSelect.value;
// adição de código
currentIndex = 0;
// final da adição
// restante do código omitido
Verifique se os Eventos são Removidos Antes de Adicionar Novos: sempre que uma nova lista de filmes é criada, eventos de clique são adicionados aos botões de navegação. Se a lista for recriada, os eventos antigos podem continuar ativos, causando comportamentos indesejados. Considere limpar os eventos antigos antes de adicionar novos:
// Código omitdo
// Adição de código
btnPrev.removeEventListener('click', null);
btnNext.removeEventListener('click', null);
// final da adição
btnPrev.addEventListener('click', () => {
currentIndex = Math.max(0, currentIndex - 1);
atualizarCarrossel(ul, dados);
});
btnNext.addEventListener('click', () => {
currentIndex++;
if (currentIndex >= dados.length - itemsPerPage + 1) {
currentIndex = 0;
}
atualizarCarrossel(ul, dados);
});
atualizarCarrossel(ul, dados);
}
Limpar o Carrossel ao Mudar a Categoria: adicione uma verificação para remover o carrossel existente antes de criar um novo, evitando sobreposição de elementos:
function criarListaFilmes(elemento, dados) {
const carrosselExistente = elemento.querySelector('.carrossel');
// Adição de código
if (carrosselExistente) {
elemento.removeChild(carrosselExistente);
}
// final da adição
const carrossel = document.createElement('div');
carrossel.className = 'carrossel';
// restante do código omitido
Essas alterações devem garantir que o carrossel seja reiniciado corretamente ao mudar de categoria, carregando os novos dados conforme esperado.
Espero ter ajudado e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
Fico no aguardo, quero continuar aprimorando esse projeto :)
