Hugging Face's logo

Spaces:
SeatechProjet
/
Les_Chats_De_SeaTech
Sleeping

App Files Community
AnthonyHerve56 commited on
Commit
25b25a4
·
1 Parent(s): 9ad55f7

Retrait panneau latéral gauche et sélection role sur choix du role

Browse files
Files changed (1) hide show
  1. templates/index.html +77 -133
templates/index.html CHANGED
@@ -16,53 +16,7 @@
16
  <body>
17
  <div class="main-container">
18
  <!-- Sidebar -->
19
- <aside class="sidebar card">
20
- <div class="sidebar-header">
21
- <h2>Les Chats De SeaTech</h2>
22
- <div class="cats-logo">
23
- <img src="{{ url_for('static', filename='img/franky.png') }}" alt="Franky" class="cat-avatar"
24
- loading="lazy">
25
- <img src="{{ url_for('static', filename='img/freddy.png') }}" alt="Freddy" class="cat-avatar"
26
- loading="lazy">
27
- </div>
28
- </div>
29
- <nav>
30
- <div class="sidebar-section">
31
- <h3>Liens SeaTech</h3>
32
- <ul>
33
- <li><a href="https://seatech.univ-tln.fr/" target="_blank" rel="noopener">SeaTech Officiel</a>
34
- </li>
35
- <li><a href="https://www.univ-tln.fr/" target="_blank" rel="noopener">Université de Toulon</a>
36
- </li>
37
- </ul>
38
- </div>
39
- <div class="sidebar-section">
40
- <h3>Formations</h3>
41
- <ul>
42
- <li><a href="https://seatech.univ-tln.fr/devenir-ingenieur" target="_blank"
43
- rel="noopener">Devenir Ingénieur</a></li>
44
- <li><a href="https://seatech.univ-tln.fr/Formation-d-ingenieurs-Materiaux-par-apprentissage.html"
45
- target="_blank" rel="noopener">Matériaux (Apprentissage)</a></li>
46
- <li><a href="https://seatech.univ-tln.fr/Formation-d-ingenieurs-en-systemes-numeriques-par-apprentissage.html"
47
- target="_blank" rel="noopener">Systèmes Numériques (Apprentissage)</a></li>
48
- </ul>
49
- </div>
50
- <div class="sidebar-section">
51
- <h3>Informations</h3>
52
- <ul>
53
- <li><a href="https://seatech.univ-tln.fr/recherche" target="_blank" rel="noopener">Recherche</a>
54
- </li>
55
- <li><a href="https://seatech.univ-tln.fr/international" target="_blank"
56
- rel="noopener">International</a></li>
57
- <li><a href="https://seatech.univ-tln.fr/Contacts.html" target="_blank"
58
- rel="noopener">Contacts</a></li>
59
- </ul>
60
- </div>
61
- </nav>
62
- <div class="sidebar-footer">
63
- <p>Posez-moi vos questions sur SeaTech!</p>
64
- </div>
65
- </aside>
66
 
67
  <!-- Contenu principal -->
68
  <main class="container">
@@ -128,11 +82,8 @@
128
  </div>
129
  </div>
130
 
131
- <div class="confirm-role-section">
132
- <p>Rôle sélectionné : <strong id="selectedRoleName"></strong></p>
133
- <button class="confirm-button" id="confirmRoleBtn">
134
- <i class="fas fa-check"></i> Confirmer mon profil
135
- </button>
136
  </div>
137
  </section>
138
  {% else %}
@@ -361,12 +312,10 @@
361
 
362
  // Éléments de sélection de rôle
363
  const roleButtons = document.querySelectorAll('.role-button');
364
- const confirmRoleSection = document.querySelector('.confirm-role-section');
365
- const confirmRoleBtn = document.getElementById('confirmRoleBtn');
366
  const resetRoleBtn = document.getElementById('resetRoleBtn');
367
- const selectedRoleName = document.getElementById('selectedRoleName');
368
 
369
  let selectedRole = null;
 
370
  const savedRole = localStorage.getItem("seatech_role");
371
  if (savedRole) {
372
  selectedRole = savedRole;
@@ -381,95 +330,90 @@
381
  "Les moustaches de Freddy frémissent... il est sur une piste!"
382
  ];
383
 
384
- // Gestion de la sélection de rôle
385
- roleButtons.forEach(button => {
386
- button.addEventListener('click', function () {
387
- roleButtons.forEach(btn => btn.classList.remove('selected'));
388
- this.classList.add('selected');
389
- selectedRole = this.dataset.role;
390
- selectedRoleName.textContent = selectedRole;
391
- confirmRoleSection.classList.add('active');
392
- });
393
- });
394
 
395
- if (confirmRoleBtn) {
396
- confirmRoleBtn.addEventListener('click', function () {
397
- if (selectedRole) {
398
- console.log('Envoi de la sélection de rôle:', selectedRole);
399
- confirmRoleBtn.disabled = true;
400
- confirmRoleBtn.textContent = 'En cours...';
401
- localStorage.setItem("seatech_role", selectedRole);
402
- fetch('/api/ask', {
403
- method: 'POST',
404
- headers: { 'Content-Type': 'application/json' },
405
- body: JSON.stringify({ role_selection: selectedRole }),
406
- credentials: 'include'
407
- })
408
- .then(response => {
409
- console.log('Réponse status:', response.status);
410
- return response.json();
411
- })
412
- .then(data => {
413
- console.log('Données reçues:', data);
414
- if (data.status === 'role_selected') {
415
- console.log('Rôle sélectionné avec succès, rechargement...');
416
- sessionStorage.setItem('scroll_to_chat', '1');
417
- // Attendre 500ms avant de recharger pour assurer la sauvegarde de la session
418
- setTimeout(() => {
419
- window.location.href = window.location.origin + '/';
420
- }, 500);
421
- } else {
422
- console.error('Erreur: statut inattendu', data);
423
- alert('Erreur lors de la sélection du rôle. Veuillez réessayer.');
424
- confirmRoleBtn.disabled = false;
425
- confirmRoleBtn.textContent = '✓ Confirmer mon profil';
426
- }
427
- })
428
- .catch(error => {
429
- console.error('Erreur lors de la sélection de rôle:', error);
430
- alert('Erreur réseau: ' + error.message);
431
- confirmRoleBtn.disabled = false;
432
- confirmRoleBtn.textContent = '✓ Confirmer mon profil';
433
- });
434
- }
435
  });
436
 
437
- // si on a déjà enregistré un rôle, envoyer automatiquement au back seulement si le rôle n'est pas encore confirmé
438
- // et qu'on n'a pas déjà essayé cette session
439
- const autoSubmitAttempted = sessionStorage.getItem("auto_submit_attempted");
440
- if (selectedRole && document.querySelector('.role-selection-container') && !autoSubmitAttempted) {
441
- console.log('Role déjà présent en localStorage:', selectedRole);
442
- sessionStorage.setItem("auto_submit_attempted", "true");
443
- // lancer en tâche de fond, sans bloquer
444
- fetch('/api/ask', {
445
- method: 'POST',
446
- headers: { 'Content-Type': 'application/json' },
447
- body: JSON.stringify({ role_selection: selectedRole }),
448
- credentials: 'include'
 
 
 
 
 
 
 
 
 
 
 
 
 
449
  })
450
- .then(resp => {
451
- if (resp.status === 429) {
452
- console.log('Trop de requêtes, réessai dans 5 secondes...');
453
- sessionStorage.removeItem("auto_submit_attempted"); // permettre un nouvel essai
 
 
 
454
  setTimeout(() => {
455
- window.location.reload();
456
- }, 5000);
457
  return;
458
  }
459
- return resp.json();
 
460
  })
461
- .then(data => {
462
- if (data && data.status === 'role_selected') {
463
- console.log('Auto-enregistrement rôle réussi');
464
- sessionStorage.setItem('scroll_to_chat', '1');
465
- window.location.href = window.location.origin + '/';
 
466
  }
467
  })
468
- .catch(err => {
469
- console.error('Erreur auto-role:', err);
470
- sessionStorage.removeItem("auto_submit_attempted"); // permettre un nouvel essai en cas d'erreur
 
 
471
  });
472
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
473
  }
474
 
475
  if (resetRoleBtn) {
 
16
  <body>
17
  <div class="main-container">
18
  <!-- Sidebar -->
19
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
 
21
  <!-- Contenu principal -->
22
  <main class="container">
 
82
  </div>
83
  </div>
84
 
85
+ <div class="confirm-role-section active">
86
+ <p><i class="fas fa-mouse-pointer"></i> Cliquez sur un profil pour le confirmer automatiquement.</p>
 
 
 
87
  </div>
88
  </section>
89
  {% else %}
 
312
 
313
  // Éléments de sélection de rôle
314
  const roleButtons = document.querySelectorAll('.role-button');
 
 
315
  const resetRoleBtn = document.getElementById('resetRoleBtn');
 
316
 
317
  let selectedRole = null;
318
+ let isSubmittingRole = false;
319
  const savedRole = localStorage.getItem("seatech_role");
320
  if (savedRole) {
321
  selectedRole = savedRole;
 
330
  "Les moustaches de Freddy frémissent... il est sur une piste!"
331
  ];
332
 
333
+ function submitRoleSelection(role, isAutoSubmit = false) {
334
+ if (!role || isSubmittingRole) return;
 
 
 
 
 
 
 
 
335
 
336
+ isSubmittingRole = true;
337
+ roleButtons.forEach(btn => {
338
+ btn.style.pointerEvents = 'none';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  });
340
 
341
+ console.log('Envoi de la sélection de rôle:', role);
342
+ localStorage.setItem("seatech_role", role);
343
+
344
+ fetch('/api/ask', {
345
+ method: 'POST',
346
+ headers: { 'Content-Type': 'application/json' },
347
+ body: JSON.stringify({ role_selection: role }),
348
+ credentials: 'include'
349
+ })
350
+ .then(response => {
351
+ console.log('Réponse status:', response.status);
352
+
353
+ if (response.status === 429) {
354
+ if (isAutoSubmit) {
355
+ console.log('Trop de requêtes, réessai dans 5 secondes...');
356
+ sessionStorage.removeItem("auto_submit_attempted");
357
+ setTimeout(() => {
358
+ window.location.reload();
359
+ }, 5000);
360
+ return null;
361
+ }
362
+ throw new Error('Serveur temporairement occupé. Réessayez dans quelques secondes.');
363
+ }
364
+
365
+ return response.json();
366
  })
367
+ .then(data => {
368
+ if (!data) return;
369
+
370
+ console.log('Données reçues:', data);
371
+ if (data.status === 'role_selected') {
372
+ console.log('Rôle sélectionné avec succès, rechargement...');
373
+ sessionStorage.setItem('scroll_to_chat', '1');
374
  setTimeout(() => {
375
+ window.location.href = window.location.origin + '/';
376
+ }, 500);
377
  return;
378
  }
379
+
380
+ throw new Error('Erreur lors de la sélection du rôle. Veuillez réessayer.');
381
  })
382
+ .catch(error => {
383
+ console.error('Erreur lors de la sélection de rôle:', error);
384
+ if (!isAutoSubmit) {
385
+ alert(error.message || 'Erreur réseau. Veuillez réessayer.');
386
+ } else {
387
+ sessionStorage.removeItem("auto_submit_attempted");
388
  }
389
  })
390
+ .finally(() => {
391
+ isSubmittingRole = false;
392
+ roleButtons.forEach(btn => {
393
+ btn.style.pointerEvents = '';
394
+ });
395
  });
396
+ }
397
+
398
+ // Gestion de la sélection de rôle: confirmation immédiate au clic
399
+ roleButtons.forEach(button => {
400
+ button.addEventListener('click', function () {
401
+ if (isSubmittingRole) return;
402
+
403
+ roleButtons.forEach(btn => btn.classList.remove('selected'));
404
+ this.classList.add('selected');
405
+ selectedRole = this.dataset.role;
406
+ submitRoleSelection(selectedRole);
407
+ });
408
+ });
409
+
410
+ // si on a déjà enregistré un rôle, envoyer automatiquement au back seulement si le rôle n'est pas encore confirmé
411
+ // et qu'on n'a pas déjà essayé cette session
412
+ const autoSubmitAttempted = sessionStorage.getItem("auto_submit_attempted");
413
+ if (selectedRole && document.querySelector('.role-selection-container') && !autoSubmitAttempted) {
414
+ console.log('Role déjà présent en localStorage:', selectedRole);
415
+ sessionStorage.setItem("auto_submit_attempted", "true");
416
+ submitRoleSelection(selectedRole, true);
417
  }
418
 
419
  if (resetRoleBtn) {