Spaces:
Running
Running
Update index.html
Browse files- index.html +373 -232
index.html
CHANGED
|
@@ -3,18 +3,18 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>LiftTrack -
|
| 7 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
<style>
|
| 9 |
-
/* --- Styles CSS --- */
|
| 10 |
-
:root { /* ... variables ... */
|
| 11 |
-
--bg-dark: #121212;
|
| 12 |
-
--bg-card: #1e1e1e;
|
| 13 |
-
--text-light: #e0e0e0;
|
| 14 |
-
--accent: #4CAF50;
|
| 15 |
-
--accent-dark: #3a8a3d;
|
| 16 |
-
--danger: #f44336;
|
| 17 |
-
}
|
| 18 |
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
|
| 19 |
body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; padding-bottom: 80px; }
|
| 20 |
.container { width: 100%; max-width: 800px; margin: 0 auto; padding: 1rem; }
|
|
@@ -33,16 +33,8 @@
|
|
| 33 |
.form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
|
| 34 |
.form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; }
|
| 35 |
label { display: block; margin-bottom: 0.3rem; color: #bbb; font-size: 0.9rem; }
|
| 36 |
-
.exercise {
|
| 37 |
-
|
| 38 |
-
padding-left: 1rem;
|
| 39 |
-
margin-bottom: 1.5rem;
|
| 40 |
-
display: none;
|
| 41 |
-
}
|
| 42 |
-
.exercise.active-exercise {
|
| 43 |
-
display: block;
|
| 44 |
-
animation: fadeIn 0.3s ease-in-out;
|
| 45 |
-
}
|
| 46 |
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
|
| 47 |
.exercise-header input {margin-bottom: 0;}
|
| 48 |
.series-container { margin-left: 0.5rem; margin-top: 0.5rem; }
|
|
@@ -58,8 +50,8 @@
|
|
| 58 |
.stat-value { font-size: 1.8rem; color: var(--accent); font-weight: bold; }
|
| 59 |
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
|
| 60 |
.hidden { display: none; }
|
| 61 |
-
#login-page { display: block; }
|
| 62 |
-
#main-app-content { display: none; }
|
| 63 |
#app-container > div:not(.active) { display: none !important; }
|
| 64 |
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
|
| 65 |
.badge { background-color: var(--accent); color: white; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.8rem; white-space: nowrap; }
|
|
@@ -70,260 +62,409 @@
|
|
| 70 |
.satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
|
| 71 |
.satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
|
| 72 |
.exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
|
| 73 |
-
|
| 74 |
-
/* Pas d'animation zoom par défaut sur la page, on la déclenche via JS */
|
| 75 |
-
/* #new-workout-page.active { animation: fadeInZoom 0.3s ease-out; } enlevé */
|
| 76 |
-
|
| 77 |
/* Styles page de connexion & user info */
|
| 78 |
#login-page .card { max-width: 400px; margin: 2rem auto; }
|
| 79 |
#login-page h2 { text-align: center; margin-bottom: 1.5rem; }
|
| 80 |
-
#login-error { color: var(--danger); text-align: center; margin-top:
|
|
|
|
|
|
|
|
|
|
| 81 |
.user-info { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; color: #bbb;}
|
| 82 |
.user-info strong { color: var(--text-light); }
|
| 83 |
.user-info button { margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; }
|
| 84 |
-
|
| 85 |
-
@media (max-width: 600px) { /* ... media queries ... */
|
| 86 |
-
.form-row { flex-direction: column; gap: 0; }
|
| 87 |
-
.container { padding: 0.5rem; }
|
| 88 |
-
h1 { font-size: 1.5rem; }
|
| 89 |
-
.flex-between { flex-direction: column; align-items: stretch; }
|
| 90 |
-
.flex-between > div { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.5rem;}
|
| 91 |
-
.user-info { text-align: center; margin-bottom: 0.5rem;}
|
| 92 |
-
.user-info button { display: block; margin: 0.5rem auto 0;}
|
| 93 |
-
.exercise-navigation button { padding: 0.5rem; font-size: 0.9rem;}
|
| 94 |
-
}
|
| 95 |
/* Animation fade in simple */
|
| 96 |
-
@keyframes fadeIn {
|
| 97 |
-
from { opacity: 0; }
|
| 98 |
-
to { opacity: 1; }
|
| 99 |
-
}
|
| 100 |
</style>
|
| 101 |
</head>
|
| 102 |
<body>
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
<p>Suivi de vos séances de musculation</p>
|
| 108 |
-
</header>
|
| 109 |
-
|
| 110 |
-
<!-- Écran de Connexion -->
|
| 111 |
<div id="login-page">
|
| 112 |
<div class="card">
|
| 113 |
-
<h2>
|
| 114 |
-
<
|
| 115 |
-
<
|
| 116 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 117 |
</div>
|
| 118 |
-
<button id="login-btn" class="btn" style="width: 100%;">Accéder / Créer</button>
|
| 119 |
-
<p id="login-error">Nom d'utilisateur invalide.</p>
|
| 120 |
-
<p style="font-size: 0.8rem; color: #888; text-align: center; margin-top: 1rem;">
|
| 121 |
-
Entrez un nom pour accéder à vos données ou créer un nouvel espace si le nom n'existe pas.
|
| 122 |
-
</p>
|
| 123 |
</div>
|
| 124 |
</div>
|
| 125 |
|
| 126 |
-
<!-- Contenu Principal de l'Application -->
|
| 127 |
<div id="main-app-content">
|
| 128 |
-
<div class="user-info">
|
| 129 |
-
Connecté: <strong id="current-user-display"></strong>
|
| 130 |
-
<button id="logout-btn" class="btn btn-outline">Changer</button>
|
| 131 |
-
</div>
|
| 132 |
-
|
| 133 |
<div id="app-container">
|
| 134 |
<!-- Page Accueil / Liste Séances -->
|
| 135 |
-
<div id="home-page" class="active">
|
| 136 |
-
<div class="flex-between">
|
| 137 |
-
<h2>Mes séances</h2>
|
| 138 |
-
<button id="new-workout-btn" class="btn">Nouvelle séance</button>
|
| 139 |
-
</div>
|
| 140 |
-
<div id="workouts-list" class="workout-list" style="margin-top: 1rem;">
|
| 141 |
-
<div class="spinner hidden"></div>
|
| 142 |
-
<p id="empty-workout-message" class="hidden" style="text-align: center; margin-top: 2rem;">
|
| 143 |
-
Aucune séance enregistrée.
|
| 144 |
-
</p>
|
| 145 |
-
</div>
|
| 146 |
-
</div>
|
| 147 |
-
|
| 148 |
<!-- Page Nouvelle Séance -->
|
| 149 |
-
<div id="new-workout-page">
|
| 150 |
-
<div class="flex-between">
|
| 151 |
-
<h2>Nouvelle séance <span id="current-exercise-indicator" style="font-size: 0.9rem; color: #ccc;"></span></h2>
|
| 152 |
-
<div>
|
| 153 |
-
<button id="cancel-new-workout-btn" class="btn btn-outline" style="margin-right: 0.5rem;">Annuler</button>
|
| 154 |
-
<button id="save-workout-btn" class="btn">Enregistrer Séance</button>
|
| 155 |
-
</div>
|
| 156 |
-
</div>
|
| 157 |
-
<!-- Infos Séance -->
|
| 158 |
-
<div class="card">
|
| 159 |
-
<div class="form-group"> <label for="workout-name">Nom de la séance</label> <input type="text" id="workout-name" placeholder="Ex: Push, Legs, Full Body..."> </div>
|
| 160 |
-
<div class="form-row"> <div class="form-group"> <label for="workout-date">Date</label> <input type="date" id="workout-date"> </div> <div class="form-group"> <label for="workout-duration">Durée (min)</label> <input type="number" id="workout-duration" min="1" placeholder="60"> </div> </div>
|
| 161 |
-
</div>
|
| 162 |
-
|
| 163 |
-
<h3 style="margin: 1rem 0;">Exercices</h3>
|
| 164 |
-
<!-- Navigation entre exercices -->
|
| 165 |
-
<div class="exercise-navigation card">
|
| 166 |
-
<button id="prev-exercise-btn" class="btn btn-outline">< Précédent</button>
|
| 167 |
-
<span style="align-self: center; color: #ccc;">Exercice Actif</span>
|
| 168 |
-
<button id="next-exercise-btn" class="btn btn-outline">Suivant ></button>
|
| 169 |
-
</div>
|
| 170 |
-
<!-- Conteneur pour les exercices (un seul visible à la fois) -->
|
| 171 |
-
<div id="exercises-container">
|
| 172 |
-
<!-- Exercices ajoutés dynamiquement ici -->
|
| 173 |
-
</div>
|
| 174 |
-
<button id="add-exercise-btn" class="btn btn-outline" style="width: 100%; margin-top: 1rem;">+ Ajouter un Nouvel Exercice</button>
|
| 175 |
-
|
| 176 |
-
<!-- Satisfaction -->
|
| 177 |
-
<div class="card" style="margin-top: 2rem;">
|
| 178 |
-
<div class="form-group"> <label for="satisfaction">Niveau de satisfaction (1-100%)</label> <input type="range" id="satisfaction" min="1" max="100" value="75"> <div class="satisfaction"> <span>Satisfaction</span> <div class="satisfaction-value">75%</div> </div> </div>
|
| 179 |
-
</div>
|
| 180 |
-
</div>
|
| 181 |
-
|
| 182 |
<!-- Page Détail Séance -->
|
| 183 |
-
<div id="workout-details-page">
|
| 184 |
-
<div class="flex-between"> <h2 id="detail-workout-name">Détail Séance</h2> <button id="back-to-home" class="btn btn-outline">Retour</button> </div>
|
| 185 |
-
<div class="card"> <div class="workout-details-info"> <div class="form-row"> <p><strong>Date:</strong> <span id="detail-date"></span></p> <p><strong>Durée:</strong> <span id="detail-duration"></span> min</p> </div> </div> </div>
|
| 186 |
-
<div class="stats-grid" style="margin-top: 1rem;"> <div class="card stat-card"> <div class="stat-value" id="detail-tonnage">0</div> <div>Tonnage Total (kg)</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-satisfaction">0%</div> <div>Satisfaction</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-exercises-count">0</div> <div>Exercices</div> </div> </div>
|
| 187 |
-
<h3 style="margin: 1.5rem 0 1rem;">Exercices Réalisés</h3>
|
| 188 |
-
<div id="detail-exercises-container"> <!-- Détails des exercices affichés ici --> </div>
|
| 189 |
-
<button id="delete-workout-btn" class="btn btn-danger" style="width: 100%; margin-top: 2rem;">Supprimer cette séance</button>
|
| 190 |
-
</div>
|
| 191 |
-
|
| 192 |
<!-- Page Statistiques -->
|
| 193 |
-
<div id="stats-page">
|
| 194 |
-
<h2>Statistiques</h2>
|
| 195 |
-
<div class="stats-grid"> <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div> </div>
|
| 196 |
-
<h3 style="margin: 1.5rem 0 1rem;">Tendances Récentes</h3>
|
| 197 |
-
<!-- Section Tendances Récentes: Juste un placeholder -->
|
| 198 |
-
<div class="card">
|
| 199 |
-
<p style="text-align: center; margin: 1rem 0; color: #888;">
|
| 200 |
-
(La section des tendances récentes n'est pas encore implémentée.)
|
| 201 |
-
</p>
|
| 202 |
-
</div>
|
| 203 |
-
</div>
|
| 204 |
</div>
|
| 205 |
-
|
| 206 |
<!-- Menu Navigation Bas -->
|
| 207 |
<nav class="nav-bottom"> <a href="#" class="nav-item active" data-page="home-page"> <div class="nav-icon">📋</div> <div>Séances</div> </a> <a href="#" class="nav-item" data-page="stats-page"> <div class="nav-icon">📊</div> <div>Stats</div> </a> </nav>
|
| 208 |
</div>
|
| 209 |
</div>
|
| 210 |
|
| 211 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 212 |
// --- Variables d'État ---
|
| 213 |
-
// (
|
| 214 |
-
let
|
|
|
|
|
|
|
|
|
|
| 215 |
|
| 216 |
// --- Éléments DOM ---
|
| 217 |
-
|
| 218 |
-
const
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
//
|
| 222 |
-
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
| 234 |
-
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 249 |
});
|
|
|
|
| 250 |
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 259 |
} else {
|
| 260 |
-
|
| 261 |
-
|
| 262 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
}
|
|
|
|
| 264 |
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 269 |
}
|
| 270 |
|
| 271 |
-
|
| 272 |
-
|
| 273 |
-
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
return clearInterval(interval);
|
| 287 |
-
}
|
| 288 |
-
|
| 289 |
-
const particleCount = 50 * (timeLeft / duration);
|
| 290 |
-
// Animation depuis le bas, un peu écartée
|
| 291 |
-
confetti(Object.assign({}, defaults, {
|
| 292 |
-
particleCount,
|
| 293 |
-
origin: { x: randomInRange(0.3, 0.7), y: Math.random() - 0.2 }, // Origine en bas, variable
|
| 294 |
-
angle: randomInRange(240, 300), // Direction générale vers le haut
|
| 295 |
-
spread: randomInRange(50, 90), // Cône plus ou moins large
|
| 296 |
-
gravity: 0.5, // Moins de gravité pour monter plus
|
| 297 |
-
drift: randomInRange(-1, 1), // Léger déplacement latéral
|
| 298 |
-
colors: ['#ff6f00', '#ff8f00', '#ffa000', '#ffcc00'] // Couleurs feu
|
| 299 |
-
}));
|
| 300 |
-
}, 250);
|
| 301 |
-
}
|
| 302 |
-
|
| 303 |
-
|
| 304 |
-
// --- Logique Formulaire Nouvelle Séance ---
|
| 305 |
-
// (Fonctions handleAddNewExercise, addExercise, addSeries, navigateExerciseForm, renderActiveExerciseForm, updateExerciseNavButtons, clearNewWorkoutForm SONT IDENTIQUES à la réponse précédente - Pas besoin de les répéter ici car elles fonctionnaient)
|
| 306 |
|
| 307 |
-
|
| 308 |
-
function
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 314 |
|
| 315 |
|
| 316 |
-
// ---
|
| 317 |
-
|
| 318 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 319 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 320 |
|
| 321 |
-
|
| 322 |
-
//
|
| 323 |
-
function
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 327 |
|
| 328 |
</script>
|
| 329 |
</body>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>LiftTrack - Firebase Edition</title>
|
| 7 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
|
| 8 |
+
|
| 9 |
+
<!-- === SDK FIREBASE (v8 pour compatibilité simple) === -->
|
| 10 |
+
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
|
| 11 |
+
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
|
| 12 |
+
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
|
| 13 |
+
<!-- === FIN SDK FIREBASE === -->
|
| 14 |
+
|
| 15 |
<style>
|
| 16 |
+
/* --- Styles CSS (identiques à la version précédente) --- */
|
| 17 |
+
:root { /* ... variables ... */ --bg-dark: #121212; --bg-card: #1e1e1e; --text-light: #e0e0e0; --accent: #4CAF50; --accent-dark: #3a8a3d; --danger: #f44336; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
|
| 19 |
body { background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; padding-bottom: 80px; }
|
| 20 |
.container { width: 100%; max-width: 800px; margin: 0 auto; padding: 1rem; }
|
|
|
|
| 33 |
.form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
|
| 34 |
.form-row > * { flex: 1; margin-bottom: 0; min-width: 100px; }
|
| 35 |
label { display: block; margin-bottom: 0.3rem; color: #bbb; font-size: 0.9rem; }
|
| 36 |
+
.exercise { border-left: 3px solid var(--accent); padding-left: 1rem; margin-bottom: 1.5rem; display: none; }
|
| 37 |
+
.exercise.active-exercise { display: block; animation: fadeIn 0.3s ease-in-out; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 38 |
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem;}
|
| 39 |
.exercise-header input {margin-bottom: 0;}
|
| 40 |
.series-container { margin-left: 0.5rem; margin-top: 0.5rem; }
|
|
|
|
| 50 |
.stat-value { font-size: 1.8rem; color: var(--accent); font-weight: bold; }
|
| 51 |
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
|
| 52 |
.hidden { display: none; }
|
| 53 |
+
#login-page { display: block; } /* Affiché par défaut */
|
| 54 |
+
#main-app-content { display: none; } /* Caché par défaut */
|
| 55 |
#app-container > div:not(.active) { display: none !important; }
|
| 56 |
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
|
| 57 |
.badge { background-color: var(--accent); color: white; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.8rem; white-space: nowrap; }
|
|
|
|
| 62 |
.satisfaction { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 1rem; }
|
| 63 |
.satisfaction-value { font-size: 2rem; color: var(--accent); margin-top: 0.5rem; }
|
| 64 |
.exercise-navigation { display: flex; justify-content: space-between; margin-top: 1rem; margin-bottom: 1rem; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 65 |
/* Styles page de connexion & user info */
|
| 66 |
#login-page .card { max-width: 400px; margin: 2rem auto; }
|
| 67 |
#login-page h2 { text-align: center; margin-bottom: 1.5rem; }
|
| 68 |
+
#login-error { color: var(--danger); text-align: center; margin-top: 0.5rem; font-size: 0.9rem; display: none; }
|
| 69 |
+
#login-form button { margin-top: 0.5rem;}
|
| 70 |
+
.auth-switch { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; }
|
| 71 |
+
.auth-switch a { color: var(--accent); cursor: pointer; text-decoration: underline; }
|
| 72 |
.user-info { text-align: right; margin-bottom: 1rem; font-size: 0.9rem; color: #bbb;}
|
| 73 |
.user-info strong { color: var(--text-light); }
|
| 74 |
.user-info button { margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; }
|
| 75 |
+
@media (max-width: 600px) { /* ... media queries ... */ .form-row { flex-direction: column; gap: 0; } .container { padding: 0.5rem; } h1 { font-size: 1.5rem; } .flex-between { flex-direction: column; align-items: stretch; } .flex-between > div { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.5rem;} .user-info { text-align: center; margin-bottom: 0.5rem;} .user-info button { display: block; margin: 0.5rem auto 0;} .exercise-navigation button { padding: 0.5rem; font-size: 0.9rem;} }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 76 |
/* Animation fade in simple */
|
| 77 |
+
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
|
|
|
|
|
|
| 78 |
</style>
|
| 79 |
</head>
|
| 80 |
<body>
|
| 81 |
+
<div class="container">
|
| 82 |
+
<header> <h1>LiftTrack</h1> <p>Suivi de vos séances de musculation</p> </header>
|
| 83 |
+
|
| 84 |
+
<!-- Écran de Connexion/Inscription (Modifié pour Email/Password) -->
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
<div id="login-page">
|
| 86 |
<div class="card">
|
| 87 |
+
<h2 id="auth-title">Connexion</h2>
|
| 88 |
+
<form id="login-form">
|
| 89 |
+
<div class="form-group">
|
| 90 |
+
<label for="auth-email">Email</label>
|
| 91 |
+
<input type="email" id="auth-email" placeholder="[email protected]" required>
|
| 92 |
+
</div>
|
| 93 |
+
<div class="form-group">
|
| 94 |
+
<label for="auth-password">Mot de passe</label>
|
| 95 |
+
<input type="password" id="auth-password" placeholder="********" required>
|
| 96 |
+
</div>
|
| 97 |
+
<p id="login-error"></p> <!-- Message d'erreur ici -->
|
| 98 |
+
<button type="submit" id="auth-action-btn" class="btn" style="width: 100%;">Se Connecter</button>
|
| 99 |
+
</form>
|
| 100 |
+
<div class="auth-switch">
|
| 101 |
+
<span id="auth-switch-text">Pas encore de compte ?</span>
|
| 102 |
+
<a id="auth-switch-link">Inscrivez-vous ici</a>
|
| 103 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 104 |
</div>
|
| 105 |
</div>
|
| 106 |
|
| 107 |
+
<!-- Contenu Principal de l'Application (structure identique) -->
|
| 108 |
<div id="main-app-content">
|
| 109 |
+
<div class="user-info"> Connecté: <strong id="current-user-display"></strong> <button id="logout-btn" class="btn btn-outline">Déconnexion</button> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 110 |
<div id="app-container">
|
| 111 |
<!-- Page Accueil / Liste Séances -->
|
| 112 |
+
<div id="home-page" class="active"> <div class="flex-between"> <h2>Mes séances</h2> <button id="new-workout-btn" class="btn">Nouvelle séance</button> </div> <div id="workouts-list" class="workout-list" style="margin-top: 1rem;"> <div class="spinner hidden"></div> <p id="empty-workout-message" class="hidden" style="text-align: center; margin-top: 2rem;"> Aucune séance enregistrée. </p> </div> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
<!-- Page Nouvelle Séance -->
|
| 114 |
+
<div id="new-workout-page"> <div class="flex-between"> <h2>Nouvelle séance <span id="current-exercise-indicator" style="font-size: 0.9rem; color: #ccc;"></span></h2> <div> <button id="cancel-new-workout-btn" class="btn btn-outline" style="margin-right: 0.5rem;">Annuler</button> <button id="save-workout-btn" class="btn">Enregistrer Séance</button> </div> </div> <div class="card"> <div class="form-group"> <label for="workout-name">Nom de la séance</label> <input type="text" id="workout-name" placeholder="Ex: Push, Legs, Full Body..."> </div> <div class="form-row"> <div class="form-group"> <label for="workout-date">Date</label> <input type="date" id="workout-date"> </div> <div class="form-group"> <label for="workout-duration">Durée (min)</label> <input type="number" id="workout-duration" min="1" placeholder="60"> </div> </div> </div> <h3 style="margin: 1rem 0;">Exercices</h3> <div class="exercise-navigation card"> <button id="prev-exercise-btn" class="btn btn-outline">< Précédent</button> <span style="align-self: center; color: #ccc;">Exercice Actif</span> <button id="next-exercise-btn" class="btn btn-outline">Suivant ></button> </div> <div id="exercises-container"> </div> <button id="add-exercise-btn" class="btn btn-outline" style="width: 100%; margin-top: 1rem;">+ Ajouter un Nouvel Exercice</button> <div class="card" style="margin-top: 2rem;"> <div class="form-group"> <label for="satisfaction">Niveau de satisfaction (1-100%)</label> <input type="range" id="satisfaction" min="1" max="100" value="75"> <div class="satisfaction"> <span>Satisfaction</span> <div class="satisfaction-value">75%</div> </div> </div> </div> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 115 |
<!-- Page Détail Séance -->
|
| 116 |
+
<div id="workout-details-page"> <div class="flex-between"> <h2 id="detail-workout-name">Détail Séance</h2> <button id="back-to-home" class="btn btn-outline">Retour</button> </div> <div class="card"> <div class="workout-details-info"> <div class="form-row"> <p><strong>Date:</strong> <span id="detail-date"></span></p> <p><strong>Durée:</strong> <span id="detail-duration"></span> min</p> </div> </div> </div> <div class="stats-grid" style="margin-top: 1rem;"> <div class="card stat-card"> <div class="stat-value" id="detail-tonnage">0</div> <div>Tonnage Total (kg)</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-satisfaction">0%</div> <div>Satisfaction</div> </div> <div class="card stat-card"> <div class="stat-value" id="detail-exercises-count">0</div> <div>Exercices</div> </div> </div> <h3 style="margin: 1.5rem 0 1rem;">Exercices Réalisés</h3> <div id="detail-exercises-container"> </div> <button id="delete-workout-btn" class="btn btn-danger" style="width: 100%; margin-top: 2rem;">Supprimer cette séance</button> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 117 |
<!-- Page Statistiques -->
|
| 118 |
+
<div id="stats-page"> <h2>Statistiques</h2> <div class="stats-grid"> <div class="card stat-card"> <div class="stat-value" id="stats-workout-count">0</div> <div>Séances Totales</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-tonnage">0</div> <div>Tonnage Moyen</div> </div> <div class="card stat-card"> <div class="stat-value" id="stats-avg-satisfaction">0%</div> <div>Satisfaction Moyenne</div> </div> </div> <h3 style="margin: 1.5rem 0 1rem;">Tendances Récentes</h3> <div class="card"> <p style="text-align: center; margin: 1rem 0; color: #888;"> (La section des tendances récentes n'est pas encore implémentée.) </p> </div> </div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 119 |
</div>
|
|
|
|
| 120 |
<!-- Menu Navigation Bas -->
|
| 121 |
<nav class="nav-bottom"> <a href="#" class="nav-item active" data-page="home-page"> <div class="nav-icon">📋</div> <div>Séances</div> </a> <a href="#" class="nav-item" data-page="stats-page"> <div class="nav-icon">📊</div> <div>Stats</div> </a> </nav>
|
| 122 |
</div>
|
| 123 |
</div>
|
| 124 |
|
| 125 |
<script>
|
| 126 |
+
// =============== AJOUT FIREBASE ===============
|
| 127 |
+
// Configuration Firebase (utilise TES clés spécifiques)
|
| 128 |
+
const firebaseConfig = {
|
| 129 |
+
apiKey: "AIzaSyAkWvrRyXgrC7zbTtoh_GppsHMrz2rF7WM", // REMPLACE par ta clé
|
| 130 |
+
authDomain: "lifttrackapp.firebaseapp.com", // REMPLACE par ton domaine
|
| 131 |
+
projectId: "lifttrackapp", // REMPLACE par ton ID projet
|
| 132 |
+
storageBucket: "lifttrackapp.appspot.com", // REMPLACE par ton bucket
|
| 133 |
+
messagingSenderId: "594426771796", // REMPLACE par ton sender ID
|
| 134 |
+
appId: "1:594426771796:web:789bef037ca0016c54b0c1", // REMPLACE par ton App ID
|
| 135 |
+
measurementId: "G-MXLFK0H160" // REMPLACE par ton Measurement ID (si fourni)
|
| 136 |
+
};
|
| 137 |
+
|
| 138 |
+
// Initialisation de Firebase (Syntaxe v8)
|
| 139 |
+
firebase.initializeApp(firebaseConfig);
|
| 140 |
+
const auth = firebase.auth();
|
| 141 |
+
const db = firebase.firestore(); // Référence à Firestore
|
| 142 |
+
|
| 143 |
+
console.log("Firebase Initialisé !");
|
| 144 |
+
|
| 145 |
+
// =============== FIN AJOUT FIREBASE ===============
|
| 146 |
+
|
| 147 |
// --- Variables d'État ---
|
| 148 |
+
let workouts = []; // Données locales des séances (chargées depuis Firestore)
|
| 149 |
+
let currentWorkoutId = null; // ID de la séance pour édition/détail
|
| 150 |
+
let currentExerciseIndex = 0; // Index pour la navigation formulaire
|
| 151 |
+
let workoutExercisesForm = []; // Référence aux divs exercice du formulaire
|
| 152 |
+
let currentFirebaseUser = null; // Stockera l'objet utilisateur Firebase connecté
|
| 153 |
|
| 154 |
// --- Éléments DOM ---
|
| 155 |
+
const loginPage = document.getElementById('login-page');
|
| 156 |
+
const mainAppContent = document.getElementById('main-app-content');
|
| 157 |
+
const authEmailInput = document.getElementById('auth-email');
|
| 158 |
+
const authPasswordInput = document.getElementById('auth-password');
|
| 159 |
+
const loginForm = document.getElementById('login-form'); // Le formulaire
|
| 160 |
+
const authActionButton = document.getElementById('auth-action-btn');
|
| 161 |
+
const authSwitchLink = document.getElementById('auth-switch-link');
|
| 162 |
+
const authTitle = document.getElementById('auth-title');
|
| 163 |
+
const authSwitchText = document.getElementById('auth-switch-text');
|
| 164 |
+
const loginError = document.getElementById('login-error');
|
| 165 |
+
const currentUserDisplay = document.getElementById('current-user-display');
|
| 166 |
+
const logoutBtn = document.getElementById('logout-btn');
|
| 167 |
+
const spinner = document.querySelector('#workouts-list .spinner');
|
| 168 |
+
const appContainer = document.getElementById('app-container');
|
| 169 |
+
const navItems = document.querySelectorAll('.nav-item');
|
| 170 |
+
const newWorkoutBtn = document.getElementById('new-workout-btn');
|
| 171 |
+
const saveWorkoutBtn = document.getElementById('save-workout-btn');
|
| 172 |
+
const cancelNewWorkoutBtn = document.getElementById('cancel-new-workout-btn');
|
| 173 |
+
const addExerciseBtn = document.getElementById('add-exercise-btn');
|
| 174 |
+
const exercisesContainer = document.getElementById('exercises-container');
|
| 175 |
+
const workoutsList = document.getElementById('workouts-list');
|
| 176 |
+
const backToHomeBtn = document.getElementById('back-to-home');
|
| 177 |
+
const deleteWorkoutBtn = document.getElementById('delete-workout-btn');
|
| 178 |
+
const satisfactionRange = document.getElementById('satisfaction');
|
| 179 |
+
const satisfactionValue = document.querySelector('.satisfaction-value');
|
| 180 |
+
const emptyWorkoutMessage = document.getElementById('empty-workout-message');
|
| 181 |
+
const workoutDateInput = document.getElementById('workout-date');
|
| 182 |
+
const prevExerciseBtn = document.getElementById('prev-exercise-btn');
|
| 183 |
+
const nextExerciseBtn = document.getElementById('next-exercise-btn');
|
| 184 |
+
const currentExerciseIndicator = document.getElementById('current-exercise-indicator');
|
| 185 |
+
let isLoginMode = true; // Pour savoir si on est en mode connexion ou inscription
|
| 186 |
+
|
| 187 |
+
|
| 188 |
+
// --- Initialisation & Auth State ---
|
| 189 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 190 |
+
initAuthListener(); // Écoute les changements d'état d'authentification
|
| 191 |
+
initEventListeners(); // Attache les autres écouteurs
|
| 192 |
+
});
|
| 193 |
+
|
| 194 |
+
function initAuthListener() {
|
| 195 |
+
auth.onAuthStateChanged(user => {
|
| 196 |
+
if (user) {
|
| 197 |
+
// Utilisateur connecté
|
| 198 |
+
console.log("Utilisateur connecté:", user.uid, user.email);
|
| 199 |
+
currentFirebaseUser = user; // Stocker l'objet utilisateur Firebase
|
| 200 |
+
showApp(); // Afficher l'application principale
|
| 201 |
+
} else {
|
| 202 |
+
// Utilisateur déconnecté
|
| 203 |
+
console.log("Utilisateur déconnecté.");
|
| 204 |
+
currentFirebaseUser = null;
|
| 205 |
+
workouts = []; // Vider les données locales
|
| 206 |
+
renderWorkoutsList(); // S'assurer que la liste est vide visuellement
|
| 207 |
+
showLoginPage(); // Afficher la page de connexion
|
| 208 |
+
}
|
| 209 |
});
|
| 210 |
+
}
|
| 211 |
|
| 212 |
+
// --- Gestion Affichage Login/App ---
|
| 213 |
+
function showLoginPage() { loginPage.style.display = 'block'; mainAppContent.style.display = 'none'; }
|
| 214 |
+
function showApp() { if (!currentFirebaseUser) return; loginPage.style.display = 'none'; mainAppContent.style.display = 'block'; currentUserDisplay.textContent = currentFirebaseUser.email; setTodayDate(); loadWorkouts(); showPage('home-page'); } // Utilise loadWorkouts qui lit Firestore
|
| 215 |
+
|
| 216 |
+
// --- Authentification Firebase ---
|
| 217 |
+
function handleAuthAction(event) {
|
| 218 |
+
event.preventDefault(); // Empêche le rechargement de la page par le formulaire
|
| 219 |
+
const email = authEmailInput.value;
|
| 220 |
+
const password = authPasswordInput.value;
|
| 221 |
+
loginError.textContent = ''; // Reset error message
|
| 222 |
+
|
| 223 |
+
if (!email || !password) {
|
| 224 |
+
loginError.textContent = 'Email et mot de passe requis.';
|
| 225 |
+
return;
|
| 226 |
+
}
|
| 227 |
+
|
| 228 |
+
authActionButton.disabled = true; // Désactiver bouton pendant l'action
|
| 229 |
+
authActionButton.textContent = 'Chargement...';
|
| 230 |
+
|
| 231 |
+
if (isLoginMode) {
|
| 232 |
+
// --- Connexion ---
|
| 233 |
+
auth.signInWithEmailAndPassword(email, password)
|
| 234 |
+
.then((userCredential) => {
|
| 235 |
+
console.log("Connexion réussie:", userCredential.user.email);
|
| 236 |
+
// onAuthStateChanged s'occupera d'afficher l'app
|
| 237 |
+
})
|
| 238 |
+
.catch((error) => {
|
| 239 |
+
console.error("Erreur de connexion:", error.code, error.message);
|
| 240 |
+
loginError.textContent = getAuthErrorMessage(error);
|
| 241 |
+
})
|
| 242 |
+
.finally(() => {
|
| 243 |
+
authActionButton.disabled = false;
|
| 244 |
+
authActionButton.textContent = 'Se Connecter';
|
| 245 |
+
});
|
| 246 |
} else {
|
| 247 |
+
// --- Inscription ---
|
| 248 |
+
auth.createUserWithEmailAndPassword(email, password)
|
| 249 |
+
.then((userCredential) => {
|
| 250 |
+
console.log("Inscription réussie:", userCredential.user.email);
|
| 251 |
+
// onAuthStateChanged s'occupera d'afficher l'app
|
| 252 |
+
})
|
| 253 |
+
.catch((error) => {
|
| 254 |
+
console.error("Erreur d'inscription:", error.code, error.message);
|
| 255 |
+
loginError.textContent = getAuthErrorMessage(error);
|
| 256 |
+
})
|
| 257 |
+
.finally(() => {
|
| 258 |
+
authActionButton.disabled = false;
|
| 259 |
+
authSwitchMode(); // Revenir en mode connexion après tentative inscription
|
| 260 |
+
authActionButton.textContent = 'S\'inscrire';
|
| 261 |
+
});
|
| 262 |
}
|
| 263 |
+
}
|
| 264 |
|
| 265 |
+
function handleLogout() {
|
| 266 |
+
auth.signOut().then(() => {
|
| 267 |
+
console.log("Déconnexion réussie.");
|
| 268 |
+
// onAuthStateChanged s'occupera d'afficher la page de login
|
| 269 |
+
}).catch((error) => {
|
| 270 |
+
console.error("Erreur de déconnexion:", error);
|
| 271 |
+
alert("Erreur lors de la déconnexion.");
|
| 272 |
+
});
|
| 273 |
}
|
| 274 |
|
| 275 |
+
function authSwitchMode() {
|
| 276 |
+
isLoginMode = !isLoginMode;
|
| 277 |
+
loginError.textContent = ''; // Clear errors on switch
|
| 278 |
+
if (isLoginMode) {
|
| 279 |
+
authTitle.textContent = 'Connexion';
|
| 280 |
+
authActionButton.textContent = 'Se Connecter';
|
| 281 |
+
authSwitchText.textContent = 'Pas encore de compte ?';
|
| 282 |
+
authSwitchLink.textContent = 'Inscrivez-vous ici';
|
| 283 |
+
} else {
|
| 284 |
+
authTitle.textContent = 'Inscription';
|
| 285 |
+
authActionButton.textContent = 'S\'inscrire';
|
| 286 |
+
authSwitchText.textContent = 'Déjà un compte ?';
|
| 287 |
+
authSwitchLink.textContent = 'Connectez-vous ici';
|
| 288 |
+
}
|
| 289 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 290 |
|
| 291 |
+
// Traduction simple des erreurs courantes Firebase Auth
|
| 292 |
+
function getAuthErrorMessage(error) {
|
| 293 |
+
switch (error.code) {
|
| 294 |
+
case 'auth/invalid-email': return 'Format d\'email invalide.';
|
| 295 |
+
case 'auth/user-disabled': return 'Ce compte utilisateur a été désactivé.';
|
| 296 |
+
case 'auth/user-not-found': return 'Aucun utilisateur trouvé avec cet email.';
|
| 297 |
+
case 'auth/wrong-password': return 'Mot de passe incorrect.';
|
| 298 |
+
case 'auth/email-already-in-use': return 'Cet email est déjà utilisé par un autre compte.';
|
| 299 |
+
case 'auth/weak-password': return 'Le mot de passe est trop faible (minimum 6 caractères).';
|
| 300 |
+
case 'auth/operation-not-allowed': return 'Connexion par email/mot de passe non activée.'; // Normalement activé
|
| 301 |
+
default: return 'Une erreur est survenue. Veuillez réessayer.';
|
| 302 |
+
}
|
| 303 |
+
}
|
| 304 |
|
| 305 |
|
| 306 |
+
// --- Persistance Firestore ---
|
| 307 |
+
function loadWorkouts() {
|
| 308 |
+
if (!currentFirebaseUser) {
|
| 309 |
+
console.log("Chargement annulé: aucun utilisateur connecté.");
|
| 310 |
+
workouts = [];
|
| 311 |
+
renderWorkoutsList(); // Assure l'affichage liste vide
|
| 312 |
+
return;
|
| 313 |
+
}
|
| 314 |
+
const userId = currentFirebaseUser.uid;
|
| 315 |
+
console.log(`Chargement des séances pour l'utilisateur ${userId}...`);
|
| 316 |
+
|
| 317 |
+
if (spinner) spinner.classList.remove('hidden');
|
| 318 |
+
emptyWorkoutMessage.classList.add('hidden');
|
| 319 |
+
workoutsList.innerHTML = ''; // Vider la liste visuelle
|
| 320 |
+
workouts = []; // Vider les données locales avant de charger
|
| 321 |
+
|
| 322 |
+
// Requête Firestore: Lire les séances de l'utilisateur connecté, triées par date
|
| 323 |
+
db.collection('workouts')
|
| 324 |
+
.where('userId', '==', userId) // Filtrer par ID utilisateur
|
| 325 |
+
.orderBy('date', 'desc') // Trier par date descendante
|
| 326 |
+
.get()
|
| 327 |
+
.then((querySnapshot) => {
|
| 328 |
+
console.log(`Trouvé ${querySnapshot.size} séances dans Firestore.`);
|
| 329 |
+
querySnapshot.forEach((doc) => {
|
| 330 |
+
// Ajouter les données du document à notre tableau local
|
| 331 |
+
// Important: On garde l'ID Firestore au cas où, même si on utilise déjà workout.id
|
| 332 |
+
const workoutData = doc.data();
|
| 333 |
+
workoutData.firestoreId = doc.id; // Stocker l'ID Firestore si besoin plus tard
|
| 334 |
+
workouts.push(workoutData);
|
| 335 |
+
});
|
| 336 |
+
renderWorkoutsList(); // Afficher les séances chargées
|
| 337 |
+
})
|
| 338 |
+
.catch((error) => {
|
| 339 |
+
console.error("Erreur de chargement des séances depuis Firestore: ", error);
|
| 340 |
+
alert("Erreur lors du chargement de vos séances.");
|
| 341 |
+
})
|
| 342 |
+
.finally(() => {
|
| 343 |
+
if (spinner) spinner.classList.add('hidden');
|
| 344 |
+
});
|
| 345 |
+
}
|
| 346 |
+
|
| 347 |
+
function saveWorkout() { // Modifié pour Firestore
|
| 348 |
+
if (!currentFirebaseUser) {
|
| 349 |
+
alert("Vous devez être connecté pour enregistrer une séance.");
|
| 350 |
+
return;
|
| 351 |
+
}
|
| 352 |
+
const userId = currentFirebaseUser.uid;
|
| 353 |
+
|
| 354 |
+
// --- Validation et récupération données (identique) ---
|
| 355 |
+
workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise'));
|
| 356 |
+
const workoutName = document.getElementById('workout-name').value.trim();
|
| 357 |
+
const workoutDate = document.getElementById('workout-date').value;
|
| 358 |
+
const workoutDuration = parseInt(document.getElementById('workout-duration').value) || 0;
|
| 359 |
+
const satisfaction = parseInt(document.getElementById('satisfaction').value);
|
| 360 |
+
if (!workoutName || !workoutDate || workoutDuration <= 0) { alert("Données séance invalides."); return; }
|
| 361 |
+
const exerciseElements = workoutExercisesForm; const exercises = []; if (exerciseElements.length === 0) { alert("Ajoutez au moins un exercice."); return; }
|
| 362 |
+
let validationError = null;
|
| 363 |
+
exerciseElements.forEach((exerciseEl, index) => { if (validationError) return; const nameInput = exerciseEl.querySelector('.exercise-name'); const exerciseName = nameInput ? nameInput.value.trim() : ''; const isUnilateral = exerciseEl.querySelector('.unilateral-checkbox').checked; if (!exerciseName) { validationError = `Nommez l'exercice #${index + 1}.`; if(nameInput) nameInput.focus(); return; } const series = []; const seriesElements = exerciseEl.querySelectorAll('.series'); if (seriesElements.length === 0) { validationError = `Exercice "${exerciseName}" sans série.`; return; } seriesElements.forEach(seriesEl => { if (validationError) return; const repsInput = seriesEl.querySelector('.reps'); const weightInput = seriesEl.querySelector('.weight'); const reps = parseInt(repsInput.value) || 0; const weight = parseFloat(weightInput.value) || 0; const isDegressive = seriesEl.querySelector('.degressive-checkbox').checked; if (reps <= 0) { validationError = `Reps invalides pour "${exerciseName}".`; if(repsInput) repsInput.focus(); return; } if (weight < 0) { validationError = `Charge invalide pour "${exerciseName}".`; if(weightInput) weightInput.focus(); return; } series.push({ reps, weight, isDegressive }); }); if (!validationError) { exercises.push({ name: exerciseName, isUnilateral, series }); } });
|
| 364 |
+
if (validationError) { alert(validationError); return; }
|
| 365 |
+
let totalTonnage = 0; exercises.forEach(ex => ex.series.forEach(s => totalTonnage += s.reps * s.weight * (ex.isUnilateral ? 2 : 1)));
|
| 366 |
+
|
| 367 |
+
// --- Création/MAJ Objet Workout avec userId ---
|
| 368 |
+
const workout = {
|
| 369 |
+
id: currentWorkoutId || `workout-${Date.now()}`, // ID généré côté client
|
| 370 |
+
userId: userId, // **Ajout de l'ID de l'utilisateur Firebase**
|
| 371 |
+
name: workoutName, date: workoutDate, duration: workoutDuration,
|
| 372 |
+
exercises: exercises, totalTonnage: totalTonnage, satisfaction: satisfaction
|
| 373 |
+
};
|
| 374 |
+
|
| 375 |
+
console.log("Tentative de sauvegarde séance:", workout);
|
| 376 |
+
saveWorkoutBtn.disabled = true;
|
| 377 |
+
saveWorkoutBtn.textContent = 'Sauvegarde...';
|
| 378 |
+
|
| 379 |
+
// --- Écriture dans Firestore ---
|
| 380 |
+
// On utilise l'ID client comme ID de document Firestore pour simplifier la MAJ
|
| 381 |
+
db.collection('workouts').doc(workout.id).set(workout)
|
| 382 |
+
.then(() => {
|
| 383 |
+
console.log("Séance sauvegardée avec succès dans Firestore:", workout.id);
|
| 384 |
+
// Mettre à jour le cache local (optionnel mais bon pour la réactivité)
|
| 385 |
+
const existingIndex = workouts.findIndex(w => w.id === workout.id);
|
| 386 |
+
if (existingIndex > -1) { workouts[existingIndex] = workout; } else { workouts.push(workout); }
|
| 387 |
+
// Confettis et redirection
|
| 388 |
+
confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 } });
|
| 389 |
+
showPage('home-page');
|
| 390 |
+
renderWorkoutsList(); // Rafraîchir immédiatement
|
| 391 |
+
})
|
| 392 |
+
.catch((error) => {
|
| 393 |
+
console.error("Erreur de sauvegarde dans Firestore: ", error);
|
| 394 |
+
alert("Erreur lors de la sauvegarde de la séance.");
|
| 395 |
+
})
|
| 396 |
+
.finally(() => {
|
| 397 |
+
saveWorkoutBtn.disabled = false;
|
| 398 |
+
saveWorkoutBtn.textContent = 'Enregistrer Séance';
|
| 399 |
+
});
|
| 400 |
+
}
|
| 401 |
|
| 402 |
+
function deleteWorkout() { // Modifié pour Firestore
|
| 403 |
+
if (!currentFirebaseUser || !currentWorkoutId) return;
|
| 404 |
+
const workoutToDelete = workouts.find(w => w.id === currentWorkoutId);
|
| 405 |
+
if (!workoutToDelete) return;
|
| 406 |
+
|
| 407 |
+
const confirmDelete = confirm(`Supprimer séance "${workoutToDelete.name}" du ${new Date(workoutToDelete.date).toLocaleDateString('fr-FR')} ?`);
|
| 408 |
+
if (!confirmDelete) return;
|
| 409 |
+
|
| 410 |
+
console.log("Tentative de suppression séance:", currentWorkoutId);
|
| 411 |
+
deleteWorkoutBtn.disabled = true;
|
| 412 |
+
deleteWorkoutBtn.textContent = 'Suppression...';
|
| 413 |
+
|
| 414 |
+
// --- Suppression dans Firestore ---
|
| 415 |
+
db.collection('workouts').doc(currentWorkoutId).delete()
|
| 416 |
+
.then(() => {
|
| 417 |
+
console.log("Séance supprimée avec succès de Firestore:", currentWorkoutId);
|
| 418 |
+
// Mettre à jour le cache local après suppression
|
| 419 |
+
workouts = workouts.filter(w => w.id !== currentWorkoutId);
|
| 420 |
+
currentWorkoutId = null;
|
| 421 |
+
showPage('home-page');
|
| 422 |
+
renderWorkoutsList(); // Rafraîchir
|
| 423 |
+
})
|
| 424 |
+
.catch((error) => {
|
| 425 |
+
console.error("Erreur de suppression dans Firestore:", error);
|
| 426 |
+
alert("Erreur lors de la suppression de la séance.");
|
| 427 |
+
})
|
| 428 |
+
.finally(() => {
|
| 429 |
+
// Réactiver même si l'utilisateur est redirigé
|
| 430 |
+
deleteWorkoutBtn.disabled = false;
|
| 431 |
+
deleteWorkoutBtn.textContent = 'Supprimer cette séance';
|
| 432 |
+
});
|
| 433 |
+
}
|
| 434 |
|
| 435 |
+
|
| 436 |
+
// --- Écouteurs d'Événements (Setup Initial) ---
|
| 437 |
+
function initEventListeners() {
|
| 438 |
+
// Authentification
|
| 439 |
+
loginForm.addEventListener('submit', handleAuthAction); // Gère connexion/inscription
|
| 440 |
+
authSwitchLink.addEventListener('click', authSwitchMode); // Bascule entre modes
|
| 441 |
+
logoutBtn.addEventListener('click', handleLogout); // Déconnexion
|
| 442 |
+
|
| 443 |
+
// Reste de l'application (identique)
|
| 444 |
+
navItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); if (!currentFirebaseUser) return; const targetPageId = item.getAttribute('data-page'); showPage(targetPageId); navItems.forEach(nav => nav.classList.remove('active')); item.classList.add('active'); if (targetPageId === 'stats-page') { updateStats(); } }); });
|
| 445 |
+
newWorkoutBtn.addEventListener('click', () => { if (!currentFirebaseUser) return; currentWorkoutId = null; clearNewWorkoutForm(); showPage('new-workout-page'); });
|
| 446 |
+
cancelNewWorkoutBtn.addEventListener('click', () => showPage('home-page'));
|
| 447 |
+
saveWorkoutBtn.addEventListener('click', saveWorkout); // Maintenant pointe vers la version Firestore
|
| 448 |
+
addExerciseBtn.addEventListener('click', handleAddNewExercise);
|
| 449 |
+
prevExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, -1));
|
| 450 |
+
nextExerciseBtn.addEventListener('click', navigateExerciseForm.bind(null, 1));
|
| 451 |
+
backToHomeBtn.addEventListener('click', () => showPage('home-page'));
|
| 452 |
+
deleteWorkoutBtn.addEventListener('click', deleteWorkout); // Maintenant pointe vers la version Firestore
|
| 453 |
+
satisfactionRange.addEventListener('input', () => { satisfactionValue.textContent = `${satisfactionRange.value}%`; });
|
| 454 |
+
}
|
| 455 |
+
|
| 456 |
+
// --- Fonctions Utilitaires et d'Affichage (non modifiées car indépendantes du stockage) ---
|
| 457 |
+
function triggerFlameAnimation() { const duration = 1 * 1000; const animationEnd = Date.now() + duration; const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }; function randomInRange(min, max) { return Math.random() * (max - min) + min; } const interval = setInterval(function() { const timeLeft = animationEnd - Date.now(); if (timeLeft <= 0) { return clearInterval(interval); } const particleCount = 50 * (timeLeft / duration); confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.3, 0.7), y: Math.random() - 0.2 }, angle: randomInRange(240, 300), spread: randomInRange(50, 90), gravity: 0.5, drift: randomInRange(-1, 1), colors: ['#ff6f00', '#ff8f00', '#ffa000', '#ffcc00'] })); }, 250); }
|
| 458 |
+
function handleAddNewExercise() { addExercise(true); }
|
| 459 |
+
function addExercise(navigateToNew = false) { if (!currentFirebaseUser) return; const exerciseId = `exercise-${Date.now()}`; const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card exercise'; exerciseDiv.setAttribute('data-exercise-id', exerciseId); exerciseDiv.innerHTML = `<div class="exercise-header"> <input type="text" placeholder="Nom Exercice" class="exercise-name"> <button class="btn btn-danger remove-exercise" style="padding: 0.3rem 0.6rem; flex-shrink: 0;">×</button> </div> <div class="form-group" style="margin-top: 0.5rem; margin-bottom: 0.5rem;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.9rem;"> <input type="checkbox" class="unilateral-checkbox"> Unilatéral </label> </div> <div class="series-container"></div> <button class="btn btn-outline add-series" style="width: 100%; margin-top: 0.5rem; padding: 0.4rem;">+ Ajouter Série</button>`; exercisesContainer.appendChild(exerciseDiv); workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const removeBtn = exerciseDiv.querySelector('.remove-exercise'); removeBtn.addEventListener('click', () => { const indexToRemove = workoutExercisesForm.indexOf(exerciseDiv); if (indexToRemove > -1) { exerciseDiv.remove(); workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); if (currentExerciseIndex >= indexToRemove) { currentExerciseIndex = Math.max(0, currentExerciseIndex - 1); } if (currentExerciseIndex >= workoutExercisesForm.length) { currentExerciseIndex = Math.max(0, workoutExercisesForm.length - 1); } renderActiveExerciseForm(); } }); const addSeriesBtn = exerciseDiv.querySelector('.add-series'); const seriesContainer = exerciseDiv.querySelector('.series-container'); addSeriesBtn.addEventListener('click', () => addSeries(seriesContainer)); addSeries(seriesContainer); if (navigateToNew) { currentExerciseIndex = workoutExercisesForm.length - 1; renderActiveExerciseForm(); } else { updateExerciseNavButtons(); } }
|
| 460 |
+
function addSeries(container) { if (!currentFirebaseUser || !container) return; const seriesId = `series-${Date.now()}`; const seriesDiv = document.createElement('div'); seriesDiv.className = 'series'; seriesDiv.setAttribute('data-series-id', seriesId); seriesDiv.innerHTML = `<div class="form-row" style="align-items: flex-end; gap: 0.8rem;"> <div class="form-group" style="flex: 1.2;"> <label>Reps</label> <input type="number" class="reps" min="1" placeholder="10" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1.2;"> <label>Charge (kg)</label> <input type="number" class="weight" min="0" step="0.1" placeholder="20" style="padding: 0.4rem;"> </div> <div class="form-group" style="flex: 1; display: flex; align-items: center; padding-bottom: 0.6rem; min-width: 100px;"> <label style="display: inline-flex; align-items: center; color: #bbb; font-size: 0.8rem; margin-bottom: 0; white-space: nowrap;"> <input type="checkbox" class="degressive-checkbox" style="margin-right: 0.3rem;"> Dégressive </label> </div> <button class="btn btn-danger remove-series" style="padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; flex-basis: 30px; flex-grow: 0; align-self: center;">×</button> </div>`; container.appendChild(seriesDiv); const removeBtn = seriesDiv.querySelector('.remove-series'); removeBtn.addEventListener('click', () => seriesDiv.remove()); }
|
| 461 |
+
function navigateExerciseForm(direction) { workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); const newIndex = currentExerciseIndex + direction; if (newIndex >= 0 && newIndex < workoutExercisesForm.length) { currentExerciseIndex = newIndex; renderActiveExerciseForm(); } }
|
| 462 |
+
function renderActiveExerciseForm() { workoutExercisesForm = Array.from(exercisesContainer.querySelectorAll('.exercise')); workoutExercisesForm.forEach(ex => ex.classList.remove('active-exercise')); if (currentExerciseIndex >= 0 && currentExerciseIndex < workoutExercisesForm.length) { workoutExercisesForm[currentExerciseIndex].classList.add('active-exercise'); } updateExerciseNavButtons(); }
|
| 463 |
+
function updateExerciseNavButtons() { const totalExercises = workoutExercisesForm.length; if (totalExercises === 0) { currentExerciseIndicator.textContent = "(Aucun exercice)"; prevExerciseBtn.disabled = true; nextExerciseBtn.disabled = true; } else { currentExerciseIndicator.textContent = `(${currentExerciseIndex + 1}/${totalExercises})`; prevExerciseBtn.disabled = currentExerciseIndex === 0; nextExerciseBtn.disabled = currentExerciseIndex === totalExercises - 1; } }
|
| 464 |
+
function clearNewWorkoutForm() { if (!currentFirebaseUser) return; document.getElementById('workout-name').value = ''; document.getElementById('workout-duration').value = ''; setTodayDate(); exercisesContainer.innerHTML = ''; workoutExercisesForm = []; satisfactionRange.value = 75; satisfactionValue.textContent = '75%'; currentWorkoutId = null; currentExerciseIndex = 0; addExercise(false); renderActiveExerciseForm(); }
|
| 465 |
+
function renderWorkoutsList() { if (!currentFirebaseUser) { workoutsList.innerHTML = ''; emptyWorkoutMessage.classList.remove('hidden'); updateStats(); return; } workoutsList.innerHTML = ''; if (workouts.length === 0) { emptyWorkoutMessage.classList.remove('hidden'); } else { emptyWorkoutMessage.classList.add('hidden'); const sortedWorkouts = [...workouts].sort((a, b) => new Date(b.date) - new Date(a.date)); sortedWorkouts.forEach(workout => { const workoutDate = new Date(workout.date).toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' }); const workoutDiv = document.createElement('div'); workoutDiv.className = 'card workout-card'; workoutDiv.setAttribute('data-workout-id', workout.id); workoutDiv.innerHTML = `<div class="workout-header"><h3 style="margin-bottom: 0.5rem;">${workout.name}</h3><div class="badge">${workoutDate}</div></div><div class="workout-details" style="font-size: 0.9rem; color: #ccc; margin-top: 0.5rem;"><span>${workout.duration} min</span> | <span>${workout.exercises.length} exo${workout.exercises.length > 1 ? 's' : ''}</span> | <span>${workout.totalTonnage.toFixed(1)} kg</span> | <span>${workout.satisfaction}%</span></div>`; workoutDiv.addEventListener('click', () => displayWorkoutDetails(workout.id)); workoutsList.appendChild(workoutDiv); }); } updateStats(); }
|
| 466 |
+
function displayWorkoutDetails(workoutId) { if (!currentFirebaseUser) return; const workout = workouts.find(w => w.id === workoutId); if (!workout) { console.error("Séance non trouvée:", workoutId); showPage('home-page'); return; } document.getElementById('detail-workout-name').textContent = workout.name; document.getElementById('detail-date').textContent = new Date(workout.date).toLocaleDateString('fr-FR'); document.getElementById('detail-duration').textContent = workout.duration; document.getElementById('detail-tonnage').textContent = workout.totalTonnage.toFixed(1); document.getElementById('detail-satisfaction').textContent = `${workout.satisfaction}%`; document.getElementById('detail-exercises-count').textContent = workout.exercises.length; const detailExercisesContainer = document.getElementById('detail-exercises-container'); detailExercisesContainer.innerHTML = ''; workout.exercises.forEach((exercise) => { const exerciseDiv = document.createElement('div'); exerciseDiv.className = 'card detail-exercise-card'; let seriesHtml = ''; exercise.series.forEach((serie, sIndex) => { const degressiveLabel = serie.isDegressive ? ' <span class="badge" style="font-size: 0.7rem; background-color: var(--accent-dark);">Dégr.</span>' : ''; const weightFactor = exercise.isUnilateral ? 2 : 1; const seriesTonnage = serie.reps * serie.weight * weightFactor; seriesHtml += `<div class="exercise-summary"><div class="flex-between"><span>Série ${sIndex + 1}: ${serie.reps} reps × ${serie.weight} kg${degressiveLabel}</span><span style="color: #aaa;">(${seriesTonnage.toFixed(1)} kg)</span></div></div>`; }); const unilateralLabel = exercise.isUnilateral ? ' <span class="badge" style="font-size: 0.7rem;">Unilat.</span>' : ''; exerciseDiv.innerHTML = `<h3 style="font-size: 1.1rem; margin-bottom: 0.5rem;">${exercise.name}${unilateralLabel}</h3> <div class="series-summary-container"> ${seriesHtml} </div>`; detailExercisesContainer.appendChild(exerciseDiv); }); currentWorkoutId = workoutId; showPage('workout-details-page'); }
|
| 467 |
+
function updateStats() { if (!currentFirebaseUser) return; const workoutCount = workouts.length; document.getElementById('stats-workout-count').textContent = workoutCount; if (workoutCount === 0) { document.getElementById('stats-avg-tonnage').textContent = '0'; document.getElementById('stats-avg-satisfaction').textContent = '0%'; return; } const totalTonnageAll = workouts.reduce((sum, workout) => sum + (workout.totalTonnage || 0), 0); const avgTonnage = totalTonnageAll / workoutCount; document.getElementById('stats-avg-tonnage').textContent = avgTonnage.toFixed(1); const totalSatisfaction = workouts.reduce((sum, workout) => sum + (workout.satisfaction || 0), 0); const avgSatisfaction = totalSatisfaction / workoutCount; document.getElementById('stats-avg-satisfaction').textContent = `${Math.round(avgSatisfaction)}%`; }
|
| 468 |
|
| 469 |
</script>
|
| 470 |
</body>
|