gym-flow/treino.html at main · b3rnardo15/gym-flow · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adicionar Treino</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container mt-4">
        <h2 class="text-center mb-4">Adicionar Exercícios</h2>
        <form id="treinoForm" class="mb-3">
            <div class="mb-2">
                <label for="nomeExercicio" class="form-label">Nome do Exercício:</label>
                <input type="text" id="nomeExercicio" class="form-control" required>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label for="repeticoes" class="form-label">Repetições:</label>
                    <input type="number" id="repeticoes" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label for="kgs" class="form-label">Carga (kg):</label>
                    <input type="number" id="kgs" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label for="series" class="form-label">Séries:</label>
                    <input type="number" id="series" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label for="categoria" class="form-label">Categoria:</label>
                    <select id="categoria" class="form-select" required>
                        <option value="Peito">Peito</option>
                        <option value="Perna">Perna</option>
                        <option value="Ombros">Ombros</option>
                        <option value="Costas">Costas</option>
                        <option value="Bíceps">Bíceps</option>
                        <option value="Antebraço">Antebraço</option>
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-primary mt-3 w-100" onclick="adicionarExercicio()">Adicionar Exercício</button>
        </form>

        <h3 class="mt-4">Exercícios Adicionados</h3>
        <div id="listaExercicios" class="mt-3"></div>

        <button id="salvarTreino" class="btn btn-success mt-3 w-100">Salvar Treino</button>
    </div>

    <script>
        let listaExercicios = [];

        function adicionarExercicio() {
            const nome = document.getElementById('nomeExercicio').value.trim();
            const repeticoes = document.getElementById('repeticoes').value;
            const carga = document.getElementById('kgs').value;
            const series = document.getElementById('series').value;
            const categoria = document.getElementById('categoria').value;

            if (!nome || repeticoes <= 0 || carga < 0 || series <= 0) {
                alert("Por favor, preencha todos os campos corretamente!");
                return;
            }

            const novoExercicio = { nome, repeticoes, carga, series, categoria };
            listaExercicios.push(novoExercicio);

            document.getElementById('treinoForm').reset();
            renderizarExercicios();
        }

        function renderizarExercicios() {
            const lista = document.getElementById('listaExercicios');
            lista.innerHTML = '';

            const categorias = {};
            listaExercicios.forEach(exercicio => {
                if (!categorias[exercicio.categoria]) {
                    categorias[exercicio.categoria] = [];
                }
                categorias[exercicio.categoria].push(exercicio);
            });

            for (const categoria in categorias) {
                const card = document.createElement('div');
                card.classList.add('card', 'mb-3');
                card.innerHTML = `
                    <div class="card-header bg-info text-white d-flex justify-content-between">
                        <span>${categoria}</span>
                        <button class="btn btn-sm btn-danger" onclick="removerCategoria('${categoria}')">Remover</button>
                    </div>
                    <ul class="list-group list-group-flush">
                        ${categorias[categoria].map((ex, index) => `
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><strong>${ex.nome}</strong> - ${ex.series}x${ex.repeticoes} (${ex.carga}kg)</span>
                                <button class="btn btn-sm btn-danger" onclick="removerExercicio('${categoria}', ${index})">X</button>
                            </li>
                        `).join('')}
                    </ul>
                `;
                lista.appendChild(card);
            }
        }

        function removerExercicio(categoria, index) {
            listaExercicios = listaExercicios.filter((ex, i) => !(ex.categoria === categoria && i === index));
            renderizarExercicios();
        }

        function removerCategoria(categoria) {
            listaExercicios = listaExercicios.filter(ex => ex.categoria !== categoria);
            renderizarExercicios();
        }

        document.getElementById('salvarTreino').addEventListener('click', function() {
            localStorage.setItem('exercicios', JSON.stringify(listaExercicios));
            alert("Treino salvo com sucesso!");
            window.location.href = 'index.html';
        });
    </script>
</body>
</html>