From b4fd35764cf41aff7d6378c998b4103e42323def Mon Sep 17 00:00:00 2001 From: Igor Martins Date: Mon, 23 Sep 2024 14:10:51 -0300 Subject: [PATCH] =?UTF-8?q?chore(mainj.js):=20Refatorar=20c=C3=B3digo=20do?= =?UTF-8?q?=20script?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/main.js | 387 +++++++++++++------------------------------- 1 file changed, 115 insertions(+), 272 deletions(-) diff --git a/src/scripts/main.js b/src/scripts/main.js index d207179..40734dd 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -5,330 +5,173 @@ const periodoFerias = false; console.log(data); +// Função que imprime as linhas de ônibus function imprimeLinhas(data, idContainer) { - let containerLinhas = document.getElementById(idContainer); + const containerLinhas = document.getElementById(idContainer); let conteudoLinhas = ""; - for (let i = 0; i < data.length; i++) { - if (data[i].sublinha == null) { - conteudoLinhas += ` -
- -
- `; - } else { - conteudoLinhas += ` -
- -
- `; - } + data.forEach((linha, index) => { + const sublinha = linha.sublinha ? `

${linha.sublinha}

` : ""; conteudoLinhas += ` -
-
-
-

Anterior

-

${retornaHorarioAnterior(i, idContainer)}

+
+
- -
- - -
- -
+ Seta para direita + + + ${criarHorarioHTML(index, idContainer, linha)} `; + }); - for (let j = 0; j < data[i].itinerario.length; j++) { - conteudoLinhas += ` -
  • ${data[i].itinerario[j]}
    • - `; - } + containerLinhas.innerHTML = conteudoLinhas; +} - conteudoLinhas += ` +// Função que cria o HTML dos horários +function criarHorarioHTML(index, idContainer, linha) { + const itinerario = linha.itinerario.map(item => `
  • ${item}
    • `).join(""); + const horarios = linha.horarios.map(item => `
  • ${item}
    • `).join(""); + + return ` +
    +
    +
    +

    Anterior

    +

    ${retornaHorarioAnterior(index, idContainer)}

    - -
    - `; - - for (let j = 0; j < data[i].horarios.length; j++) { - conteudoLinhas += ` -
  • ${data[i].horarios[j]}
    • - `; - } - - conteudoLinhas += ` +
    +

    Próximo

    +

    ${retornaProximoHorario(index, idContainer)}

    - `; - } - - // coloca a variável no HTML da página - containerLinhas.innerHTML = conteudoLinhas; +
    + + +
    +
    ${itinerario}
    +
    ${horarios}
    +
    + `; } -imprimeLinhas(data.diasUteis, "container-linhas-dias-uteis"); -imprimeLinhas(data.sabado, "container-linhas-sabado"); -imprimeLinhas(data.feriasRecessos, "container-linhas-ferias-recessos"); - -// pega todos os botões da página -let botoesLinha = document.querySelectorAll(".linha"); +// Adiciona os eventos aos botões de linha e itinerário +function configurarEventos() { + document.querySelectorAll(".linha").forEach((botao, index) => { + botao.addEventListener("click", () => { + exibeLinha(index); + hideMenu(); + }); + }); -// percorre por todos os botões da página -for (let i = 0; i < botoesLinha.length; i++) { - // adiciona um Event Listener em cada um deles - botoesLinha[i].addEventListener("click", function () { - // exibeHorario(i); - exibeLinha(i); - hideMenu(); + document.querySelectorAll(".mostrar-itinerario").forEach((botao, index) => { + botao.addEventListener("click", () => { + toggleVisibility(document.getElementsByClassName("itinerario-interno")[index]); + }); }); -} -// pega todos os botões da página -let botoesItinerario = document.getElementsByClassName("mostrar-itinerario"); + document.querySelectorAll(".mais-horarios").forEach((botao, index) => { + botao.addEventListener("click", () => { + toggleVisibility(document.getElementsByClassName("horarios-interno")[index]); + }); + }); -// percorre por todos os botões da página -for (let i = 0; i < botoesItinerario.length; i++) { - // adiciona um Event Listener em cada um deles - botoesItinerario[i].addEventListener("click", function () { - exibeItinerario(i); + const botaoReportarProblema = document.getElementById("reportar-problema"); + botaoReportarProblema?.addEventListener("click", () => { + toggleVisibility(document.getElementById("container-problema-links")); }); } +// Função para alternar a visibilidade function toggleVisibility(element) { - if (element.classList.contains("escondido")) { - element.classList.remove("escondido"); - element.classList.add("aparecido"); - } else { - element.classList.remove("aparecido"); - element.classList.add("escondido"); - } -} - -function exibeItinerario(posicaoBotao) { - const containerItinerario = - document.getElementsByClassName("itinerario-interno"); - toggleVisibility(containerItinerario[posicaoBotao]); -} - -const botaoReportarProblema = document.getElementById("reportar-problema"); -botaoReportarProblema.addEventListener("click", function () { - const containerAvisoProblema = document.getElementById( - "container-problema-links" - ); - toggleVisibility(containerAvisoProblema); -}); - -const botoesHorarios = document.getElementsByClassName("mais-horarios"); -for (let i = 0; i < botoesHorarios.length; i++) { - botoesHorarios[i].addEventListener("click", function () { - const containerHorarios = - document.getElementsByClassName("horarios-interno"); - toggleVisibility(containerHorarios[i]); - }); + element.classList.toggle("escondido"); + element.classList.toggle("aparecido"); } +// Função para retornar o horário anterior function retornaHorarioAnterior(posicao, itinerarioChamado) { - let horarioAnterior; - let itinerario = verificaDia(); - - if (itinerario == "util") { - if (itinerarioChamado == "container-linhas-dias-uteis") { - for (let i = data.diasUteis[posicao].horarios.length - 1; i >= 0; i--) { - horarioAnterior = compararHorarioAnterior( - data.diasUteis[posicao].horarios[i] - ); - if (horarioAnterior != "-") { - break; - } - } - } else { - horarioAnterior = "-"; - } - } else if (itinerario == "sab") { - if (itinerarioChamado == "container-linhas-sabado") { - for (let i = data.sabado[posicao].horarios.length - 1; i >= 0; i--) { - horarioAnterior = compararHorarioAnterior( - data.sabado[posicao].horarios[i] - ); - if (horarioAnterior != "-") { - break; - } - } - } else { - horarioAnterior = "-"; - } - } else if (itinerario == "ferias") { - if (itinerarioChamado == "container-linhas-ferias-recessos") { - for ( - let i = data.feriasRecessos[posicao].horarios.length - 1; - i >= 0; - i-- - ) { - horarioAnterior = compararHorarioAnterior( - data.feriasRecessos[posicao].horarios[i] - ); - if (horarioAnterior != "-") { - break; - } - } - } else { - horarioAnterior = "-"; - } - } else { - horarioAnterior = "-"; - } - - return horarioAnterior; -} - -// Verifica se o horário passado por parâmetro é o do próximo ônibus -function compararHorarioAnterior(horario) { - let horas = horario.split(":"); - - let agora = new Date(); - - let comparado = new Date(); - - comparado.setHours(horas[0]); - comparado.setMinutes(horas[1]); - - if (comparado < agora) { - return horario; - } else { - return "-"; - } + return calculaHorario(posicao, itinerarioChamado, "anterior"); } +// Função para retornar o próximo horário function retornaProximoHorario(posicao, itinerarioChamado) { - let proximoHorario; - let itinerario = verificaDia(); + return calculaHorario(posicao, itinerarioChamado, "proximo"); +} - if (itinerario == "util") { - if (itinerarioChamado == "container-linhas-dias-uteis") { - for (let i = 0; i < data.diasUteis[posicao].horarios.length; i++) { - proximoHorario = compararProximoHorario( - data.diasUteis[posicao].horarios[i] - ); - if (proximoHorario != "-") { - break; - } - } - } else { - proximoHorario = "-"; - } - } else if (itinerario == "sab") { - if (itinerarioChamado == "container-linhas-sabado") { - for (let i = 0; i < data.sabado[posicao].horarios.length; i++) { - proximoHorario = compararProximoHorario( - data.sabado[posicao].horarios[i] - ); - if (proximoHorario != "-") { - break; - } - } - } else { - proximoHorario = "-"; - } - } else if (itinerario == "ferias") { - if (itinerarioChamado == "container-linhas-ferias-recessos") { - for (let i = 0; i < data.feriasRecessos[posicao].horarios.length; i++) { - proximoHorario = compararProximoHorario( - data.feriasRecessos[posicao].horarios[i] - ); - if (proximoHorario != "-") { - break; - } - } - } else { - proximoHorario = "-"; - } - } else { - proximoHorario = "-"; +// Função genérica para calcular horários anteriores ou próximos +function calculaHorario(posicao, itinerarioChamado, tipo) { + const itinerario = verificaDia(); + let horarios = []; + + if (itinerario === "util" && itinerarioChamado === "container-linhas-dias-uteis") { + horarios = data.diasUteis[posicao].horarios; + } else if (itinerario === "sab" && itinerarioChamado === "container-linhas-sabado") { + horarios = data.sabado[posicao].horarios; + } else if (itinerario === "ferias" && itinerarioChamado === "container-linhas-ferias-recessos") { + horarios = data.feriasRecessos[posicao].horarios; } - return proximoHorario; + return tipo === "anterior" + ? horarios.slice().reverse().find(horario => compararHorario(horario, tipo)) || "-" + : horarios.find(horario => compararHorario(horario, tipo)) || "-"; } -// Verifica se o horário passado por parâmetro é o do próximo ônibus -function compararProximoHorario(horario) { - let horas = horario.split(":"); +// Função para comparar o horário atual com o passado +function compararHorario(horario, tipo) { + const [horas, minutos] = horario.split(":").map(Number); + const comparado = new Date(); + comparado.setHours(horas, minutos, 0); - let agora = new Date(); - - let comparado = new Date(); - - comparado.setHours(horas[0]); - comparado.setMinutes(horas[1]); - - if (comparado > agora) { - return horario; - } else { - return "-"; - } + return tipo === "anterior" ? comparado < new Date() : comparado > new Date(); } -// Função para verificar o dia da semana e período +// Verifica o dia da semana e se está em período de férias function verificaDia() { const diaSemana = new Date().getDay(); if (diaSemana > 0 && diaSemana < 6) return periodoFerias ? "ferias" : "util"; return diaSemana === 6 ? "sab" : "-"; } -// Adicionar o evento de arrastar a uma outra alça +// Mostra e esconde o menu lateral function showMenu() { - let menu = document.getElementById("menu-lateral"); - let headerMenu = document.getElementById("header-menu-mobile"); - - if (menu && headerMenu) { - menu.classList.add("show"); - headerMenu.classList.add("show"); - menu.classList.remove("hidden"); // Ensure the menu is not hidden - } + alterarVisibilidadeMenu("show"); } function hideMenu() { - let menu = document.getElementById("menu-lateral"); - let headerMenu = document.getElementById("header-menu-mobile"); + alterarVisibilidadeMenu("hide"); +} + +// Alterna a visibilidade do menu lateral +function alterarVisibilidadeMenu(acao) { + const menu = document.getElementById("menu-lateral"); + const headerMenu = document.getElementById("header-menu-mobile"); - if (menu && headerMenu) { + if (!menu || !headerMenu) return; + + if (acao === "show") { + menu.classList.add("show"); + headerMenu.classList.add("show"); + menu.classList.remove("hidden"); + } else if (acao === "hide") { menu.classList.remove("show"); headerMenu.classList.remove("show"); setTimeout(() => { - menu.classList.add("hidden"); // Hide the menu after transition - }, 300); // Delay should match CSS transition duration + menu.classList.add("hidden"); + }, 300); } } -function handleMenu() { - let verLinhasHorariosButton = document.getElementById("ver-linhas-horarios"); - let fecharLinhasHorariosButton = document.getElementById("fechar-linhas-horarios"); - - if (verLinhasHorariosButton) { - verLinhasHorariosButton.addEventListener("click", showMenu); - } - - if (fecharLinhasHorariosButton) { - fecharLinhasHorariosButton.addEventListener("click", hideMenu); - } +// Configura os eventos do menu +function configurarEventosMenu() { + document.getElementById("ver-linhas-horarios")?.addEventListener("click", showMenu); + document.getElementById("fechar-linhas-horarios")?.addEventListener("click", hideMenu); } -// Call the function to encapsulate the functionality -handleMenu(); +// Inicializa o aplicativo +imprimeLinhas(data.diasUteis, "container-linhas-dias-uteis"); +imprimeLinhas(data.sabado, "container-linhas-sabado"); +imprimeLinhas(data.feriasRecessos, "container-linhas-ferias-recessos"); +configurarEventos(); +configurarEventosMenu();