From ca999496421853634cf3a958011ce9efdd1c3d2e Mon Sep 17 00:00:00 2001 From: Igor Martins Date: Mon, 2 Sep 2024 14:37:38 -0300 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Trocar=20para=20o=20hor=C3=A1rio=20?= =?UTF-8?q?de=20f=C3=A9rias?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- src/scripts/main.js | 433 +++++++++++++------------------------------- 2 files changed, 132 insertions(+), 305 deletions(-) diff --git a/index.html b/index.html index 3deae8d..36a9396 100644 --- a/index.html +++ b/index.html @@ -85,12 +85,12 @@
-
+

Dias Úteis

diff --git a/src/scripts/main.js b/src/scripts/main.js index 3624230..916b1c7 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,359 +1,186 @@ import data from "./dadosLinhas.js"; import exibeLinha from "./map.js"; -const ferias = { - inicio: "December 16, 2023", - fim: "March 05, 2024", -}; +const periodoFerias = true; -console.log(data); +// Função principal para inicializar o aplicativo +function init() { + imprimeLinhas(data.diasUteis, "container-linhas-dias-uteis"); + imprimeLinhas(data.sabado, "container-linhas-sabado"); + imprimeLinhas(data.feriasRecessos, "container-linhas-ferias-recessos"); + configurarEventosBotoes(); + configurarEventosMenu(); +} + +// Função para exibir as linhas no container especificado function imprimeLinhas(data, idContainer) { - let containerLinhas = document.getElementById(idContainer); - let conteudoLinhas = ""; + const containerLinhas = document.getElementById(idContainer); + if (!containerLinhas) return; - for (let i = 0; i < data.length; i++) { - if (data[i].sublinha == null) { - conteudoLinhas += ` -
- -
- `; - } else { - conteudoLinhas += ` -
- -
- `; - } + const conteudoLinhas = data.map((linha, index) => criarHTMLLinha(linha, index, idContainer)).join(""); + containerLinhas.innerHTML = conteudoLinhas; +} - conteudoLinhas += ` -
-
-
-

Anterior

-

${retornaHorarioAnterior(i, idContainer)}

-
-
-

Próximo

-

${retornaProximoHorario(i, idContainer)}

-
-
+// Função para criar o HTML de cada linha +function criarHTMLLinha(linha, index, idContainer) { + const sublinhaInfo = linha.sublinha ? `

${linha.sublinha}

` : ""; -
- - + return ` +
+ + ${criarHTMLHorario(index, idContainer, linha)} +
+ `; +} -
- `; - - for (let j = 0; j < data[i].itinerario.length; j++) { - conteudoLinhas += ` -
  • ${data[i].itinerario[j]}
    • - `; - } - - conteudoLinhas += ` +// Função para criar o HTML dos horários e botões adicionais +function criarHTMLHorario(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"); +// Configuração dos eventos para os botões das linhas e itinerários +function configurarEventosBotoes() { + 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 dos elementos 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ções de cálculo dos horários anteriores e próximos 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"); } 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(":"); - - let agora = new Date(); - - let comparado = new Date(); +// Função para comparar os horários +function compararHorario(horario, tipo) { + const [horas, minutos] = horario.split(":").map(Number); + const comparado = new Date(); + comparado.setHours(horas, minutos, 0); - 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 function verificaDia() { - let dataAtual = new Date(); - let diaSemana = dataAtual.getDay(); - let feriasInicio = new Date().setDate([ferias[0]]); - let feriasFim = new Date().setDate([ferias[1]]); - // verifica se é dia útil - if (diaSemana > 0 && diaSemana < 6) { - // verifica se está no período de férias - if (dataAtual > feriasInicio) { - return "util"; - } else { - return "ferias"; - } - } - // se for sábado e não for férias, exibe o horário - else if (diaSemana == 6) { - // verifica se está no período de férias - if (dataAtual < feriasInicio) { - return "sab"; - } - } - // se não existir horários para o dia retorna um traço para não dar erro e - // nem mostrar horários incorretos - else { - return "-"; - } + 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 +// Funções para mostrar e esconder o menu 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"); +} - if (menu && headerMenu) { +// Função genérica para alterar a visibilidade do menu +function alterarVisibilidadeMenu(acao) { + const menu = document.getElementById("menu-lateral"); + const headerMenu = document.getElementById("header-menu-mobile"); + 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 + menu.classList.add("hidden"); }, 300); // Delay should match CSS transition duration } } -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ção dos 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 +init(); From a013893d62cf431d07880a80278a37245fa2fbd1 Mon Sep 17 00:00:00 2001 From: Igor Martins Date: Mon, 2 Sep 2024 15:03:21 -0300 Subject: [PATCH 2/2] =?UTF-8?q?chore(index):=20Refatorar=20c=C3=B3digo=20d?= =?UTF-8?q?o=20site?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 95 +++++++++++++++++---------------------------- src/scripts/main.js | 49 ++++++++++++++++------- 2 files changed, 72 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index 36a9396..7528c70 100644 --- a/index.html +++ b/index.html @@ -4,53 +4,43 @@ - - + - - - - - - + Interno Rotas 🚌 + + - - + - - + + + + - - - + - + - - + - + + integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="anonymous" /> + - - - - Interno Rotas 🚌 + integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin="anonymous"> + @@ -58,22 +48,22 @@
    - Logo Interno Rotas + Logo Interno Rotas
    -
    - @@ -81,17 +71,10 @@ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index 916b1c7..fc9f89b 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -18,7 +18,9 @@ function imprimeLinhas(data, idContainer) { const containerLinhas = document.getElementById(idContainer); if (!containerLinhas) return; - const conteudoLinhas = data.map((linha, index) => criarHTMLLinha(linha, index, idContainer)).join(""); + const conteudoLinhas = data + .map((linha, index) => criarHTMLLinha(linha, index, idContainer)) + .join(""); containerLinhas.innerHTML = conteudoLinhas; } @@ -42,8 +44,10 @@ function criarHTMLLinha(linha, index, idContainer) { // Função para criar o HTML dos horários e botões adicionais function criarHTMLHorario(index, idContainer, linha) { - const itinerario = linha.itinerario.map(item => `
  • ${item}
    • `).join(""); - const horarios = linha.horarios.map(item => `
  • ${item}
    • `).join(""); + const itinerario = linha.itinerario + .map((item) => `
  • ${item}
    • `) + .join(""); + const horarios = linha.horarios.map((item) => `
  • ${item}
    • `).join(""); return `
    @@ -82,13 +86,17 @@ function configurarEventosBotoes() { document.querySelectorAll(".mostrar-itinerario").forEach((botao, index) => { botao.addEventListener("click", () => { - toggleVisibility(document.getElementsByClassName("itinerario-interno")[index]); + toggleVisibility( + document.getElementsByClassName("itinerario-interno")[index] + ); }); }); document.querySelectorAll(".mais-horarios").forEach((botao, index) => { botao.addEventListener("click", () => { - toggleVisibility(document.getElementsByClassName("horarios-interno")[index]); + toggleVisibility( + document.getElementsByClassName("horarios-interno")[index] + ); }); }); @@ -118,17 +126,29 @@ function calculaHorario(posicao, itinerarioChamado, tipo) { const itinerario = verificaDia(); let horarios = []; - if (itinerario === "util" && itinerarioChamado === "container-linhas-dias-uteis") { + if ( + itinerario === "util" && + itinerarioChamado === "container-linhas-dias-uteis" + ) { horarios = data.diasUteis[posicao].horarios; - } else if (itinerario === "sab" && itinerarioChamado === "container-linhas-sabado") { + } else if ( + itinerario === "sab" && + itinerarioChamado === "container-linhas-sabado" + ) { horarios = data.sabado[posicao].horarios; - } else if (itinerario === "ferias" && itinerarioChamado === "container-linhas-ferias-recessos") { + } else if ( + itinerario === "ferias" && + itinerarioChamado === "container-linhas-ferias-recessos" + ) { horarios = data.feriasRecessos[posicao].horarios; } return tipo === "anterior" - ? horarios.slice().reverse().find(horario => compararHorario(horario, tipo)) || "-" - : horarios.find(horario => compararHorario(horario, tipo)) || "-"; + ? horarios + .slice() + .reverse() + .find((horario) => compararHorario(horario, tipo)) || "-" + : horarios.find((horario) => compararHorario(horario, tipo)) || "-"; } // Função para comparar os horários @@ -175,11 +195,14 @@ function alterarVisibilidadeMenu(acao) { } } - // Configuração dos eventos do menu function configurarEventosMenu() { - document.getElementById("ver-linhas-horarios")?.addEventListener("click", showMenu); - document.getElementById("fechar-linhas-horarios")?.addEventListener("click", hideMenu); + document + .getElementById("ver-linhas-horarios") + ?.addEventListener("click", showMenu); + document + .getElementById("fechar-linhas-horarios") + ?.addEventListener("click", hideMenu); } // Inicializa o aplicativo