responsabilidade-cio/script.js at main · DevBrendown/responsabilidade-cio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* ========================================================================== */
/* CONFIGURAÇÃO */
/* ========================================================================== */

// URL do Web App do Google Apps Script
const API_URL = "https://script.google.com/macros/s/AKfycbwgNP_ApxmGASboodIlLjABHp3LrDDUun8qe20rZ_0MI_wD18YhKoUcinwgBaPOqco/exec";

// Carrega Google Charts
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(carregarDados);

/* ========================================================================== */
/* BUSCA DE DADOS */
/* ========================================================================== */

async function carregarDados() {
    try {
        const resposta = await fetch(API_URL);
        const dados = await resposta.json();

        renderListagem(dados.listagem);
        renderQuantidade(dados.quantidade);
        atualizarTabelaAssinaturas(dados.assinaturas);
        renderGraficoAssinaturas(dados.assinaturas);

    } catch (erro) {
        console.error("Erro ao carregar dados:", erro);
    }
}

/* ========================================================================== */
/* LISTAGEM DE MOTORISTAS */
/* ========================================================================== */

function renderListagem(lista) {
    const tbody = document.querySelector("#listaMotoristas tbody");
    tbody.innerHTML = "";

    lista.forEach(item => {
        const tr = document.createElement("tr");

        tr.innerHTML = `
            <td>${item.matricula}</td>
            <td>${item.nome}</td>
        `;

        tbody.appendChild(tr);
    });
}

/* ========================================================================== */
/* TABELA DE QUANTIDADES */
/* ========================================================================== */

function renderQuantidade(q) {
    const tbody = document.querySelector("#tabelaQuantidade tbody");

    tbody.innerHTML = `
        <tr><td>Total</td><td>${q.total}</td></tr>
        <tr><td>Ativos</td><td>${q.ativos}</td></tr>
        <tr><td>Inativos</td><td>${q.inativos}</td></tr>
        <tr><td>Afastados</td><td>${q.afastado}</td></tr>
        <tr><td>Instrutores</td><td>${q.instrutores}</td></tr>
    `;
}

/* ========================================================================== */
/* TABELA DE ASSINATURAS */
/* ========================================================================== */

function atualizarTabelaAssinaturas(a) {
    const tbody = document.querySelector("#tabelaAssinaturas tbody");

    tbody.innerHTML = `
        <tr>
            <td>Assinaram</td>
            <td>${a.assinadosQtd}</td>
            <td>${(a.assinadosPorc * 100).toFixed(1)}%</td>
        </tr>
        <tr>
            <td>Não Assinaram</td>
            <td>${a.naoAssinadosQtd}</td>
            <td>${(a.naoAssinadosPorc * 100).toFixed(1)}%</td>
        </tr>
    `;
}

/* ========================================================================== */
/* GRÁFICO DE ASSINATURAS (GOOGLE CHARTS) */
/* ========================================================================== */

function renderGraficoAssinaturas(a) {
    const data = google.visualization.arrayToDataTable([
        ["Status", "Quantidade"],
        ["Assinaram", a.assinadosQtd],
        ["Não Assinaram", a.naoAssinadosQtd]
    ]);

    const options = {
        title: "Situação das Assinaturas",
        pieHole: 0.4,
        legend: { position: "bottom" }
    };

    const chart = new google.visualization.PieChart(
        document.getElementById("graficoAssinaturas")
    );

    chart.draw(data, options);
}