MediaWiki:Common.js: mudanças entre as edições

Edição das 13h12min de 23 de setembro de 2025

/* Código Javascript colocado aqui será carregado para todos os utilizadores em cada carregamento de página */
mw.loader.using('mediawiki.util', function() {
    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">');
    $('head').append('<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>');
});
$(function() {
    var html = `
    <div id="top-banner" class="container-fluid d-flex justify-content-center justify-content-md-between">
        <div class="contact-info d-flex align-items-center">
            <i class="d-flex align-items-center">
                <a href="https://prefeitura.sp.gov.br">Prefeitura de São Paulo</a>
            </i>
            <i class="d-flex align-items-center ms-4">
                <a href="https://esic.prefeitura.sp.gov.br">E-Sic</a>
            </i>
            <i class="d-flex align-items-center ms-4">
                <a href="https://arquip.prefeitura.sp.gov.br">Arquip</a>
            </i>
        </div>
    </div>
    `;
    $(html).insertBefore($('.vector-header-container').first());
 // coloca acima do header
});


$(function () {
  // Remove o footer padrão do Vector
  $('.vector-footer').remove();

  // Adiciona o seu footer no final da página
  var html = `
  <footer id="footer" class="footer position-relative dark-background" style='background-color:#3c3c3c; color:#FFF;padding: 1px 4px;height:136;font-family:sans-serif;'>
    <div class="container copyright text-center mt-4">
      <p style='margin:0'>Plataforma mantida pelo </p>
      <p style='margin:0'><strong class="px-1 sitename">Arquivo Público Municipal "Jornalista Paulo Roberto Dutra"</strong></p>
      <p style='margin:0'>Rua Balsa, 331 - Freguesia do Ó</p>
      <p>São Paulo/SP- Brasil</p>
    </div>
  </footer>
  `;

  $('body').append(html);
});

$(function() {
    // Só roda se o container existir
    const container = document.getElementById("leitor-json");
    if (!container) return;

    let dados = [];
    let dadosFiltrados = [];
    let paginaAtual = 1;

    // Cria a estrutura de filtros, botões e resultados
    container.innerHTML = `
        <h1 class="mb-4">Leitor de JSON</h1>
        <div id="filtros" class="row g-3 mb-2">
            <div class="col-md-2"><input type="text" id="filtroProcesso" class="form-control" placeholder="Buscar por processo"></div>
            <div class="col-md-2"><input type="text" id="filtroDocumento" class="form-control" placeholder="Buscar por documento"></div>
            <div class="col-md-2"><select id="filtroVeiculo" class="form-select"><option value="">Todos os veículos</option></select></div>
            <div class="col-md-2"><select id="filtroSerie" class="form-select"><option value="">Todas as séries</option></select></div>
            <div class="col-md-2"><select id="filtroUnidade" class="form-select"><option value="">Todas as unidades</option></select></div>
            <div class="col-md-2"><select id="filtroOrgao" class="form-select"><option value="">Todos os órgãos</option></select></div>
            <div class="col-md-2 mt-2"><input type="text" id="filtroConteudo" class="form-control" placeholder="Buscar no conteúdo"></div>
        </div>
        <div class="mb-4 row g-2 align-items-center">
            <div class="col-auto"><button class="btn btn-primary btn-sm" id="btnPesquisar">Pesquisar</button></div>
            <div class="col-auto"><button class="btn btn-secondary btn-sm" id="btnLimpar">Limpar filtros</button></div>
            <div class="col-auto">
                <label for="resultadosPorPagina" class="form-label mb-0">Resultados por página:</label>
                <select id="resultadosPorPagina" class="form-select form-select-sm">
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>
        <div id="dados"></div>
        <div class="pagination-buttons">
            <button class="btn btn-outline-primary btn-sm me-2" id="btnAnterior">Anterior</button>
            <span id="paginaAtual" class="mx-2"></span>
            <button class="btn btn-outline-primary btn-sm" id="btnProximo">Próximo</button>
        </div>
    `;

    // Carrega o JSON do servidor
    fetch("/images/dados.json")
        .then(res => res.json())
        .then(json => {
            dados = json;
            preencherSelects();
            aplicarFiltros();
        })
        .catch(err => console.error("Erro ao carregar dados.json:", err));

    function preencherSelects() {
        const veiculoSelect = document.getElementById("filtroVeiculo");
        const serieSelect = document.getElementById("filtroSerie");
        const unidadeSelect = document.getElementById("filtroUnidade");
        const orgaoSelect = document.getElementById("filtroOrgao");

        [...new Set(dados.map(item => item.veiculo))].forEach(v => {
            const opt = document.createElement("option"); opt.value = v; opt.textContent = v; veiculoSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.serie))].forEach(s => {
            const opt = document.createElement("option"); opt.value = s; opt.textContent = s; serieSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.unidade))].forEach(u => {
            const opt = document.createElement("option"); opt.value = u; opt.textContent = u; unidadeSelect.appendChild(opt);
        });
        [...new Set(dados.map(item => item.orgao))].forEach(o => {
            const opt = document.createElement("option"); opt.value = o; opt.textContent = o; orgaoSelect.appendChild(opt);
        });
    }

    function exibirDados() {
        const containerDados = document.getElementById("dados");
        containerDados.innerHTML = "";
        const resultadosPorPagina = parseInt(document.getElementById("resultadosPorPagina").value) || 10;
        const inicio = (paginaAtual-1)*resultadosPorPagina;
        const fim = inicio + resultadosPorPagina;
        const paginaDados = dadosFiltrados.slice(inicio,fim);

        if(!paginaDados.length){
            containerDados.innerHTML="<p class='text-muted'>Nenhum resultado encontrado.</p>";
            document.getElementById("paginaAtual").textContent="";
            return;
        }

        paginaDados.forEach(item=>{
            const card=document.createElement("div");
            card.className="card mb-2";
            const body=document.createElement("div");
            body.className="card-body";
            body.innerHTML=`
                <h5 class="card-title">${item.veiculo}</h5>
                <h6 class="card-subtitle mb-2 text-muted">${item.orgao}</h6>
                <p><b>Unidade:</b> ${item.unidade}</p>
                <p><b>Série:</b> ${item.serie}</p>
                <p><b>Processo:</b> ${item.processo}</p>
                <p><b>Documento:</b> ${item.documento}</p>
                <div><b>Conteúdo:</b><br>${item.conteudo}</div>
            `;
            card.appendChild(body);
            containerDados.appendChild(card);
        });

        const totalPaginas=Math.ceil(dadosFiltrados.length/resultadosPorPagina);
        document.getElementById("paginaAtual").textContent=`Página ${paginaAtual} de ${totalPaginas}`;
        document.getElementById("btnAnterior").disabled=(paginaAtual===1);
        document.getElementById("btnProximo").disabled=(paginaAtual===totalPaginas);
    }

    function aplicarFiltros() {
        const processo=document.getElementById("filtroProcesso").value.toLowerCase();
        const documento=document.getElementById("filtroDocumento").value.toLowerCase();
        const veiculo=document.getElementById("filtroVeiculo").value;
        const serie=document.getElementById("filtroSerie").value;
        const unidade=document.getElementById("filtroUnidade").value;
        const orgao=document.getElementById("filtroOrgao").value;
        const conteudo=document.getElementById("filtroConteudo").value.toLowerCase();

        dadosFiltrados=dados.filter(item =>
            (!processo || item.processo.toLowerCase().includes(processo)) &&
            (!documento || item.documento.toLowerCase().includes(documento)) &&
            (!veiculo || item.veiculo===veiculo) &&
            (!serie || item.serie===serie) &&
            (!unidade || item.unidade===unidade) &&
            (!orgao || item.orgao===orgao) &&
            (!conteudo || item.conteudo.toLowerCase().includes(conteudo))
        );

        paginaAtual=1;
        exibirDados();
    }

    function limparFiltros() {
        ["filtroProcesso","filtroDocumento","filtroVeiculo","filtroSerie","filtroUnidade","filtroOrgao","filtroConteudo"].forEach(id=>document.getElementById(id).value="");
        aplicarFiltros();
    }

    function mudarPagina(direcao){paginaAtual+=direcao; exibirDados();}

    // Eventos
    document.getElementById("btnPesquisar").onclick = aplicarFiltros;
    document.getElementById("btnLimpar").onclick = limparFiltros;
    document.getElementById("btnAnterior").onclick = ()=>mudarPagina(-1);
    document.getElementById("btnProximo").onclick = ()=>mudarPagina(1);
});